/* partner.chilli.ee/chilli-plus — Chilli Plus vendor landing
   Spec: ai/CHILLI-PLUS-FULL-SPEC.md §10
   Extends partner-landing.css. Plus accent = #70CF67.
*/

:root {
    --plus-accent: #70CF67;
    --plus-accent-dark: #4FAB48;
    --plus-accent-soft: rgba(112, 207, 103, 0.16);
}

/* Hero photo + glass card come from partner-landing.css (.pl-hero--plus, .pl-hero-card) */
.plus-landing .pl-hero-badge .plus-pin-marker {
    margin-right: 2px;
}
/* Hero glass card: pl-hero-card-sub / pl-hero-card-foot in partner-landing.css */
.plus-landing .plus-hero-bullets {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 10px;
}
.plus-landing .plus-hero-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--pl-hero-text);
    font-size: 0.98rem;
    line-height: 1.45;
}
.plus-landing .plus-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--plus-accent);
    color: #0f1114;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}
.plus-landing .plus-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(120, 130, 145, 0.18);
    color: #5c6370;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* Plus pin marker (matches public-map green pin) */
.plus-landing .plus-pin-marker {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--plus-accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 17, 20, 0.18), 0 1px 3px rgba(15, 17, 20, 0.18);
    vertical-align: middle;
    margin-right: 4px;
}

/* Primary buttons use partner-landing chilli green (same as esileht) */

/* Section 2: How it works */
.plus-landing .plus-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.plus-landing .plus-step {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 24px 22px;
    box-shadow: var(--pl-shadow);
    position: relative;
}
.plus-landing .plus-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--plus-accent-soft);
    color: var(--plus-accent-dark);
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 12px;
}
.plus-landing .plus-step h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pl-text);
}
.plus-landing .plus-step p {
    margin: 0;
    color: var(--pl-muted);
    line-height: 1.55;
    font-size: 0.97rem;
}

/* Section 3: Compare */
.plus-landing .plus-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}
.plus-landing .plus-compare-col {
    border-radius: var(--pl-radius);
    padding: 24px;
    border: 1px solid var(--pl-border);
}
.plus-landing .plus-compare-col h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 700;
}
.plus-landing .plus-compare-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.plus-landing .plus-compare-col li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    font-size: 0.96rem;
    color: var(--pl-text);
}
.plus-landing .plus-compare-col--us {
    background: var(--plus-accent-soft);
    border-color: var(--plus-accent);
}
.plus-landing .plus-compare-col--us h3 {
    color: var(--plus-accent-dark);
}
.plus-landing .plus-compare-col--them {
    background: #f4f5f7;
}
.plus-landing .plus-compare-col--them h3 {
    color: var(--pl-muted);
}
.plus-landing .plus-compare-col--them li {
    color: var(--pl-muted);
}

/* Section 4: Map preview CTA card
   (iframe blocked by chilli.ee X-Frame-Options: SAMEORIGIN; v1 ships a
   CTA card that opens the full /et/map in a new tab. v2 may switch to
   native public-map.js cross-domain embed once Maps API key referrer
   policy and CORS are configured for partner.chilli.ee.) */
.plus-landing .plus-map-card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    margin-top: 8px;
    border-radius: var(--pl-radius);
    overflow: hidden;
    border: 1px solid var(--pl-border);
    box-shadow: var(--pl-shadow);
    background: var(--pl-surface);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
    min-height: 320px;
}
.plus-landing .plus-map-card:hover,
.plus-landing .plus-map-card:focus-visible {
    box-shadow: 0 12px 32px rgba(15, 17, 20, 0.14);
    border-color: var(--plus-accent);
    transform: translateY(-2px);
}
.plus-landing .plus-map-card-grid {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% 50%, rgba(112, 207, 103, 0.18), transparent 70%),
        repeating-linear-gradient(0deg, rgba(15, 17, 20, 0.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(15, 17, 20, 0.05) 0 1px, transparent 1px 32px),
        linear-gradient(135deg, #e8f5e7 0%, #d6eed3 100%);
    overflow: hidden;
}
.plus-landing .plus-map-card-pin {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--plus-accent);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(15, 17, 20, 0.18), 0 4px 10px rgba(15, 17, 20, 0.20);
}
.plus-landing .plus-map-card-pin--a { top: 26%; left: 22%; }
.plus-landing .plus-map-card-pin--b { top: 44%; left: 58%; }
.plus-landing .plus-map-card-pin--c { top: 62%; left: 34%; }
.plus-landing .plus-map-card-pin--d { top: 30%; left: 76%; }
.plus-landing .plus-map-card-pin--e { top: 72%; left: 70%; }
.plus-landing .plus-map-card-body {
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.plus-landing .plus-map-card-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pl-text);
    line-height: 1.25;
}
.plus-landing .plus-map-card-text {
    margin: 0;
    color: var(--pl-muted);
    line-height: 1.55;
    font-size: 0.97rem;
}
.plus-landing .plus-map-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--plus-accent-dark);
    font-size: 0.95rem;
}
.plus-landing .plus-map-card-cta svg {
    transition: transform 200ms ease;
}
.plus-landing .plus-map-card:hover .plus-map-card-cta svg {
    transform: translate(2px, -2px);
}
@media (max-width: 768px) {
    .plus-landing .plus-map-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .plus-landing .plus-map-card-grid {
        min-height: 200px;
    }
    .plus-landing .plus-map-card-body {
        padding: 24px 22px 26px;
    }
}

/* Section 5: 0/0/0 */
.plus-landing .plus-zeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.plus-landing .plus-zero {
    text-align: center;
    padding: 32px 16px;
    border-radius: var(--pl-radius);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    box-shadow: var(--pl-shadow);
}
.plus-landing .plus-zero strong {
    display: block;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--plus-accent-dark);
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.plus-landing .plus-zero span {
    color: var(--pl-muted);
    font-size: 1rem;
}

/* Section 6: FAQ */
.plus-landing .plus-faq-list {
    margin-top: 8px;
    display: grid;
    gap: 10px;
}
.plus-landing .plus-faq-item {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    background: var(--pl-surface);
    padding: 14px 18px;
    transition: border-color 150ms ease;
}
.plus-landing .plus-faq-item[open] {
    border-color: var(--plus-accent);
    box-shadow: 0 4px 12px rgba(112, 207, 103, 0.12);
}
.plus-landing .plus-faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--pl-text);
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.plus-landing .plus-faq-item summary::-webkit-details-marker {
    display: none;
}
.plus-landing .plus-faq-item summary::after {
    content: "+";
    font-size: 22px;
    line-height: 1;
    color: var(--plus-accent-dark);
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.plus-landing .plus-faq-item[open] summary::after {
    content: "−";
}
.plus-landing .plus-faq-item p {
    margin: 10px 0 4px;
    color: var(--pl-muted);
    line-height: 1.55;
}

/* Section 8: Final CTA */
.plus-landing .plus-cta-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
}
.plus-landing .plus-cta-grid h2 {
    margin: 0 0 12px;
    font-size: 2rem;
    line-height: 1.18;
    color: var(--pl-text);
    letter-spacing: -0.01em;
}
.plus-landing .plus-cta-grid p {
    margin: 0;
    color: var(--pl-muted);
    line-height: 1.55;
}
.plus-landing .plus-cta-form {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
    padding: 24px;
    box-shadow: var(--pl-shadow);
    border-top: 4px solid var(--plus-accent);
}
.plus-landing .plus-cta-foot {
    margin: 12px 0 0;
    color: var(--pl-muted);
    font-size: 0.92rem;
    text-align: center;
}

/* Flash messages */
.plus-landing .pl-flash--ok {
    background: var(--plus-accent-soft);
    color: var(--plus-accent-dark);
    border: 1px solid var(--plus-accent);
}

/* Responsive */
@media (max-width: 900px) {
    .plus-landing .plus-steps,
    .plus-landing .plus-compare,
    .plus-landing .plus-zeros {
        grid-template-columns: 1fr;
    }
    .plus-landing .plus-cta-grid {
        grid-template-columns: 1fr;
    }
}