/* Litsentsi leht (litsents/index.php) — „Julge B" võrdluskujundus (makett 2026-11-05).
   Pinnad ja tekst teematokenitest (DISAIN.md §1–2); üks aktsent (--accent-color),
   color-mix'i ees on rgba-varuväärtus vanemale brauserile. Aktsendi TAUSTAL alati
   var(--on-accent) — valge kukub mõlema teema aktsendil kontrastist läbi. */

.lic-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Päis --- */
/* Vertikaalne rütm: üks sektsioonivahe kõigi suurte plokkide vahel. Iga sektsioon
   kannab ainult ÜLEMIST vahet — kaks kõrvuti veerist ei liitu enam kokku (enne
   tekkis kaartide alla 24 + 48 + 48 px tühimik). */
.lic-hero, .lic-section, .lic-steps-section, .lic-faq-section, .lic-dpo-section { --lic-gap: 56px; }
.lic-hero {
    padding: 40px 0 32px;
    text-align: center;
}
.lic-hero .lic-wrap {
    max-width: 680px;
    display: grid;
    gap: 10px;
}
.lic-title {
    font-size: clamp(1.625rem, 4vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary, #1f2937);
    margin: 0;
}
.lic-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary, #4b5563);
    text-wrap: pretty;
}

/* --- Kasutusriba (ainult sisseloginu päris kasutus tasuta kaardil, täitub laadimisel).
   Võrdlusribad tasuta vs litsents eemaldati 2026-11-05: mobiilis on Plussi kaart esimene ja
   üksi seisev täis riba näis „täis" näidikuna — suhe käib nüüd „N× rohkem" märgisena. --- */
.lic-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-hover, #f5f5f5);
    overflow: hidden;
}
.lic-bar > i {
    display: block;
    min-width: 8px;
    height: 100%;
    border-radius: 999px;
    background: var(--text-muted, #6b6b6b);
}
@keyframes lic-fill { from { width: 0; } }
.lic-usage .lic-bar > i {
    animation: lic-fill 900ms cubic-bezier(0.4, 0, 0.2, 1) 200ms backwards;
}
.lic-quota-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
@keyframes lic-pop { from { opacity: 0; transform: scale(0.9); } }
.lic-times { animation: lic-pop 300ms cubic-bezier(0.4, 0, 0.2, 1) 350ms backwards; }

/* --- Hinnakaardid (3 tk, read joondatud subgrid'iga) --- */
.lic-section {
    padding: 0;
}
.lic-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 16px;
    align-items: stretch;
}
/* Read joonduvad subgrid'iga: päis / hind / mahuriba / alumine (loetelu + tegevus).
   Loetelu ja tegevus on ÜHES reas flex-veeruna, tegevus lükatakse alla — eraldi
   ridadena venitas kõrgeim kaart teiste vaheredadesse suured tühimikud. */
.lic-plan {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 12px;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(17, 17, 26, 0.06));
    scroll-margin-top: 80px;
}
.lic-plan.is-featured {
    border: 2px solid var(--accent-color, #00d1b2);
}
/* Õrn sisenemine + hover-tõste (reduced-motion lülitab mõlemad välja) */
@keyframes lic-up { from { opacity: 0; transform: translateY(10px); } }
.lic-plan {
    animation: lic-up 400ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lic-plan:nth-child(2) { animation-delay: 70ms; }
.lic-plan:nth-child(3) { animation-delay: 140ms; }
@media (hover: hover) {
    .lic-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.2)); }
}
.lic-plan-head {
    padding: 14px 16px 6px;
    display: grid;
    gap: 2px;
    align-content: start;
}
.lic-plan-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.lic-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0;
}
.lic-plan-sub {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #6b6b6b);
}
.lic-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary, #4b5563);
    background: var(--bg-hover, #f5f5f5);
}
/* Aktsent TEKSTINA: heledas teemas #00d1b2 valgel ~2:1 (alla WCAG 4.5) → tume türkiis
   (--focus-ring väärtus #00665a, 6.9:1); tumedas on aktsent #22d3ee kaardil ~8:1. */
.lic-plan { --lic-accent-text: #00665a; }
[data-theme="dark"] .lic-plan { --lic-accent-text: var(--accent-color, #22d3ee); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lic-plan { --lic-accent-text: var(--accent-color, #22d3ee); }
}
.lic-chip.is-accent {
    color: var(--lic-accent-text, #00665a);
    background: rgba(0, 209, 178, 0.12);
    background: color-mix(in srgb, var(--accent-color, #00d1b2) 12%, transparent);
}
/* „N× rohkem kui tasuta": täidetud aktsent, tekst --on-accent (~9:1 mõlemas teemas) */
.lic-chip.lic-times {
    color: var(--on-accent, #001f1a);
    background: var(--accent-color, #00d1b2);
}
.lic-plan-price {
    padding: 0 16px 8px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.lic-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
}
.lic-price-num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #1f2937);
}
.lic-price-unit {
    font-size: 0.875rem;
    color: var(--text-secondary, #4b5563);
}
/* Mahuplokk kaardi keskel: number + suhteriba kahe joone vahel */
.lic-plan-quota {
    margin: 0 16px;
    padding: 8px 0;
    border-top: 1px solid var(--border-light, #e5e7eb);
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    display: grid;
    gap: 2px;
    align-content: start;
}
.lic-quota-num {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #1f2937);
}
.is-featured .lic-quota-num { color: var(--lic-accent-text, #00665a); }
.lic-quota-sub {
    font-size: 0.8125rem;
    color: var(--text-muted, #6b6b6b);
}
.lic-plan .lic-list {
    padding: 10px 16px;
    align-content: start;
}
.lic-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
}
.lic-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-secondary, #4b5563);
}
.lic-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.15em;
    font-size: 0.8rem;
    color: var(--accent-color, #00d1b2);
}
.lic-list li.is-minus { color: var(--text-muted, #6b6b6b); }
.lic-list li.is-minus::before { content: "\f068"; color: var(--text-muted, #6b6b6b); }
.lic-plan-free .lic-list li::before { color: var(--text-muted, #6b6b6b); }
.lic-plan-bottom {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lic-plan-action {
    margin-top: auto;
    padding: 8px 16px 14px;
    display: grid;
    gap: 8px;
}
.lic-plan-action .notification { margin: 0; width: 100%; }
.lic-promo { font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.lic-promo .fa-tag { margin-right: 0.35em; }
.lic-plan-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #4b5563);
    overflow-wrap: anywhere;
}
.lic-plan-note .fa-circle-check { color: var(--accent-color, #00d1b2); }
.lic-plan-alt { margin: 0; font-size: 0.8125rem; line-height: 1.4; text-align: center; }
/* Iga link oma real: 24 px puuteala (WCAG 2.5.8) vahe asemel, muidu oleks kaart pikem */
.lic-plan-alts { display: grid; gap: 0; }
.lic-plan-alts a { display: inline-flex; align-items: center; min-height: 24px; }
.lic-buy { display: grid; gap: 10px; width: 100%; }
/* Ostunupu all: kolm lühikest fakti ikoonidega, tingimuste viide eraldi reana */
.lic-buy-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary, #4b5563);
}
.lic-buy-facts li { display: flex; gap: 8px; min-width: 0; }
.lic-buy-facts i {
    flex-shrink: 0;
    width: 14px;
    margin-top: 0.2em;
    text-align: center;
    color: var(--text-muted, #6b6b6b);
}
.lic-buy-facts span { min-width: 0; overflow-wrap: anywhere; }
.lic-buy-facts strong { font-weight: 600; color: var(--text-primary, #1f2937); }
.lic-terms { font-size: 0.75rem; color: var(--text-muted, #6b6b6b); }
.lic-cta {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: normal;
    height: auto;
    min-height: 2.5em;
    width: 100%;
}
/* Tasuta kaardi kasutusriba */
.lic-usage { display: grid; gap: 6px; }
.lic-usage-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary, #4b5563);
}
.lic-usage-row strong { color: var(--text-primary, #1f2937); font-variant-numeric: tabular-nums; }
.lic-usage .lic-bar { height: 8px; }

/* --- Kalkulaator (kooli kaardi sees) --- */
.lic-calc { display: grid; gap: 4px; }
.lic-calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lic-calc-row .label { margin: 0; font-size: 0.8125rem; }
.lic-calc-num {
    width: 5.5rem;
    height: 32px;
    font-size: 0.875rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lic-calc-range {
    width: 100%;
    accent-color: var(--accent-color, #00d1b2);
    min-height: 28px;
    margin: 0;
}
.lic-calc-out {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #6b6b6b);
}
.lic-calc-out strong { color: var(--text-primary, #1f2937); font-variant-numeric: tabular-nums; }

/* --- Sammud --- */
.lic-h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary, #1f2937);
    margin: 0 0 20px;
}
.lic-steps-section { padding: var(--lic-gap) 0 0; }
.lic-steps {
    list-style: none;
    counter-reset: lic-step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 24px;
}
.lic-steps li {
    counter-increment: lic-step;
    display: grid;
    align-content: start;
    gap: 6px;
    padding-top: 16px;
    border-top: 3px solid var(--accent-color, #00d1b2);
}
.lic-steps li::before {
    content: counter(lic-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--on-accent, #001f1a);
    background: var(--accent-color, #00d1b2);
}
.lic-steps strong {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-primary, #1f2937);
}
.lic-steps span {
    line-height: 1.5;
    color: var(--text-secondary, #4b5563);
}

/* --- Arveriba + vorm (kokkuklapitav) --- */
.lic-invoice { padding: 24px 0 0; display: grid; gap: 16px; }
.lic-invoice-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
}
.lic-invoice-strip p {
    flex: 1 1 280px;
    margin: 0;
    line-height: 1.5;
    color: var(--text-secondary, #4b5563);
}
.lic-invoice-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Vorm on avatud → riba ära (ilma :has() toeta jääb riba lihtsalt nähtavale) */
.lic-invoice:has(details[open]) .lic-invoice-strip { display: none; }
.lic-form-card {
    padding: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 16px;
    box-shadow: var(--shadow-card, 0 1px 2px rgba(17, 17, 26, 0.06));
    scroll-margin-top: 80px;
}
.lic-form-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    cursor: pointer;
    border-radius: 16px;
}
.lic-form-summary::-webkit-details-marker { display: none; }
.lic-form-summary .lic-h2 { margin: 0; font-size: 1.25rem; }
.lic-form-summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lic-form-card[open] .lic-form-summary::after { transform: rotate(180deg); }
.lic-form-body { padding: 0 32px 32px; }

.lic-kind {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
    min-width: 0;
}
/* Segmenteeritud valik (Kool / Eraisik) — päris raadiod sees, pill peal */
.lic-kind-options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg-primary, #f4f4f4);
}
.lic-kind-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary, #4b5563);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lic-kind-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0.011;
}
.lic-kind-option:has(input:checked) {
    background: var(--accent-color, #00d1b2);
    color: var(--on-accent, #001f1a);
}
.lic-kind-option:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring, #00665a);
    outline-offset: 2px;
}
.lic-optional {
    font-weight: 400;
    color: var(--text-muted, #9ca3af);
}
.lic-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: var(--text-primary, #1f2937);
}
.lic-check input { margin: 0; accent-color: var(--accent-color, #00d1b2); }
/* Linnuke + selgitus: selgitus seotakse linnukesega, järgmine linnuke tuleb tavalise vahega */
.lic-check:has(+ .lic-check-help) { margin-bottom: 4px; }
.lic-check-help { margin: 0 0 16px 26px; }
/* Meepott — sama muster mis kontaktivormil (kontakt/index.php): peidetud, robot täidab ikka */
.lic-hp {
    display: none !important;
}
.lic-privacy {
    margin: 8px 0 16px;
    font-size: 0.8125rem;
    color: var(--text-muted, #6b7280);
}
.lic-submit {
    border-radius: 8px;
    font-weight: 600;
}

/* --- KKK (vahekaardid) --- */
.lic-faq-section { padding: var(--lic-gap) 0 0; }
.lic-faq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.lic-faq-head .lic-h2 { margin: 0; }
.lic-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
}
.lic-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    background: transparent;
    color: var(--text-secondary, #4b5563);
}
.lic-tab[aria-expanded="true"] {
    background: var(--accent-color, #00d1b2);
    color: var(--on-accent, #001f1a);
}
.lic-tab:focus-visible {
    outline: 2px solid var(--focus-ring, #00665a);
    outline-offset: 2px;
}
.lic-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 8px 16px;
    align-items: start;
}
/* Ilma JS-ita on mõlemad rühmad nähtavad (rühma pealkirjaga); JS peidab mittevalitu */
.lic-faq-group-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}
.lic-faq-panel.is-hidden-tab { display: none; }
.lic-faq details {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 10px;
    padding: 0 16px;
}
.lic-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 0;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #1f2937);
}
.lic-faq summary::-webkit-details-marker { display: none; }
.lic-faq summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lic-faq details[open] summary::after { transform: rotate(180deg); }
.lic-faq details p {
    margin: 0 0 16px;
    line-height: 1.55;
    color: var(--text-secondary, #4b5563);
    text-wrap: pretty;
}

/* --- Andmekaitse --- */
.lic-dpo-section { padding: var(--lic-gap) 0 var(--lic-gap); }
.lic-dpo {
    padding: 32px;
    border-radius: 16px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    display: grid;
    gap: 24px;
    scroll-margin-top: 80px;
}
.lic-dpo-head { display: grid; gap: 8px; }
.lic-dpo-title-row { display: flex; align-items: center; gap: 12px; }
.lic-dpo-title-row .lic-h2 { margin: 0; font-size: 1.25rem; }
.lic-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--accent-color, #00d1b2);
    background: rgba(0, 209, 178, 0.12);
    background: color-mix(in srgb, var(--accent-color, #00d1b2) 12%, transparent);
}
.lic-card-text {
    margin: 0;
    line-height: 1.55;
    color: var(--text-secondary, #4b5563);
}
.lic-dpo .lic-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px 32px;
}
.lic-dpo .lic-list li { font-size: 0.9375rem; }
.lic-dpo-foot {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-light, #e5e7eb);
    font-size: 0.875rem;
    color: var(--text-secondary, #4b5563);
}

@media (prefers-reduced-motion: reduce) {
    .lic-plan { animation: none; transition: none; }
    .lic-plan:hover { transform: none; box-shadow: var(--shadow-card, 0 1px 2px rgba(17, 17, 26, 0.06)); }
    .lic-usage .lic-bar > i, .lic-times { animation: none; }
    .lic-faq summary::after, .lic-form-summary::after { transition: none; }
}

@media (hover: hover) {
    .lic-kind-option:not(:has(input:checked)):hover { color: var(--text-primary, #1f2937); }
    .lic-tab:not([aria-expanded="true"]):hover { color: var(--text-primary, #1f2937); }
    .lic-form-summary:hover .lic-h2 { color: var(--accent-hover, #00c4a7); }
}

/* Mobiil: Pluss ette, tasuta kaart lõppu ja selle loetelu peitu (makett „Julge B") */
@media (max-width: 640px) {
    .lic-plan-plus { order: -1; }
    .lic-plan-free { order: 3; }
    .lic-plan-free .lic-list { display: none; }
    .lic-hero, .lic-section, .lic-steps-section, .lic-faq-section, .lic-dpo-section { --lic-gap: 40px; }
    .lic-hero { padding: 28px 0 24px; }
}
@media (max-width: 480px) {
    .lic-plan-head, .lic-plan-price { padding-left: 16px; padding-right: 16px; }
    .lic-plan-quota { margin: 0 16px; }
    .lic-plan .lic-list { padding: 16px; }
    .lic-plan-action { padding: 0 16px 20px; }
    .lic-form-body { padding: 0 16px 24px; }
    .lic-form-summary { padding: 16px; }
    .lic-dpo { padding: 24px 16px; }
    .lic-bar-row { grid-template-columns: 7rem minmax(0, 1fr) 4rem; }
}