/* seoDiagnozis public frontend -- checkout / report / order-status (pixel, f2c26708, V1 scope
 * marveen 10959; retheme onto the SEOMEK purchased template, Roland via marveen msg 11274,
 * 2026-07-31). Component structure and the brand-swap architecture are UNCHANGED from V1 -- only
 * the surface treatment (font, radius, shadow) moved onto SEOMEK's visual language. Brand color
 * is config-driven per domain (--seo-brand/--seo-brand-dark set inline by the template from
 * $config['seo']['brand'], NOT a data-attribute here -- server already knows the host's brand at
 * render time). --seo-brand-light/--seo-brand-bg are DERIVED via color-mix() below, not part of
 * the config contract (SeoBrandResolver::REQUIRED_KEYS only has color/color_dark) -- a 3rd/4th
 * brand host needs zero new config keys. Semantic status colors (good/warn/crit) are FIXED, never
 * brand-driven -- a kihasznaltsag/CWV/finding severity must read the same on both domains.
 *
 * SEOMEK's own gradient accent (blue->purple, #0160e7->#a644b5) is a fixed brand pairing that
 * doesn't generalize to a green host -- deliberately NOT copied. Instead each domain's own
 * --seo-brand/--seo-brand-light forms a single-hue gradient, keeping "only the primary color
 * swaps per domain" (Roland's instruction) literally true, while still using SEOMEK's radius
 * (pill buttons, 20-30px card corners), shadow (soft brand-tinted shadow instead of a hard
 * border), and Gilroy type. */

@font-face { font-family: 'Gilroy'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Gilroy-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Gilroy-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Gilroy-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Gilroy-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'); }

:root {
    --seo-ink: #1c2333;
    --seo-body: #5f6b7a;
    --seo-line: #e6e9ef;
    --seo-bg: #f5f7fb;
    --seo-good: #1a8f5e;
    --seo-good-bg: #e7f8ec;
    --seo-warn: #b5761a;
    --seo-warn-bg: #fbf1e2;
    --seo-crit: #c0392b;
    --seo-crit-bg: #fdecec;
    --seo-muted: #8a93a3;
    --seo-shadow: 4px 4px 30px rgba(28, 35, 51, .1);
    /* fallback only (no inline --seo-brand from the template, e.g. a static preview) -- green/seodiagnozis.hu */
    --seo-brand: #394C2A;
    --seo-brand-dark: #243019;
    /* derived, not brand-config -- see header comment */
    --seo-brand-light: color-mix(in srgb, var(--seo-brand) 55%, white);
    --seo-brand-bg: color-mix(in srgb, var(--seo-brand) 12%, white);
}

.seo-page { max-width: 960px; margin: 0 auto; padding: 2rem 1.2rem 4rem; font-family: 'Gilroy', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--seo-body); font-weight: 500; }
.seo-card { background: #fff; border: none; box-shadow: var(--seo-shadow); border-radius: 24px; padding: 1.8rem 2rem; }
.seo-btn { border: 0; border-radius: 50px; padding: .95rem 1.8rem; font-size: .92rem; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; transition: opacity .25s ease, transform .15s ease; }
.seo-btn-primary { background: linear-gradient(145deg, var(--seo-brand) 0%, var(--seo-brand-light) 100%); color: #fff; }
.seo-btn-primary:hover { opacity: .9; }
.seo-btn-primary:active { transform: scale(.98); }
.seo-btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.seo-btn-ghost { background: none; border: 1.5px solid var(--seo-line); color: var(--seo-ink); }

/* ---- checkout ---- */
.seo-checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 1.4rem; align-items: start; }
.seo-field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 6px; }
.seo-field label { color: var(--seo-ink); font-weight: 600; font-size: .88rem; }
.seo-field input, .seo-field select { padding: .85rem 1rem; border: 1.5px solid var(--seo-line); border-radius: 12px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--seo-ink); }
.seo-field input:focus { outline: none; border-color: var(--seo-brand); }

.seo-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
.seo-pkg-card { border: 1.5px solid var(--seo-line); border-radius: 20px; padding: 1.3rem 1.2rem; cursor: pointer; position: relative; background: #fff; transition: border-color .15s, box-shadow .15s; }
.seo-pkg-card:hover { border-color: var(--seo-brand-light); box-shadow: var(--seo-shadow); }
.seo-pkg-card.is-sel { border-color: var(--seo-brand); box-shadow: 0 0 0 3px var(--seo-brand-bg); }
.seo-pkg-name { font-weight: 700; color: var(--seo-ink); font-size: .98rem; margin-bottom: .2rem; }
.seo-pkg-pages { font-size: .76rem; color: var(--seo-muted); margin-bottom: .8rem; }
.seo-pkg-price { font-size: 1.3rem; font-weight: 800; color: var(--seo-ink); }
.seo-pkg-price small { font-size: .68rem; font-weight: 600; color: var(--seo-muted); }
.seo-pkg-badge { position: absolute; top: -10px; right: 14px; background: var(--seo-brand); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; }

.seo-extra-row { display: flex; align-items: flex-start; gap: .8rem; border: 1.5px solid var(--seo-line); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .7rem; cursor: pointer; }
.seo-extra-row input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--seo-brand); flex-shrink: 0; }
.seo-extra-name { font-weight: 600; color: var(--seo-ink); font-size: .9rem; }
.seo-extra-desc { font-size: .78rem; color: var(--seo-muted); margin-top: .1rem; }
.seo-extra-pct { margin-left: auto; font-weight: 700; color: var(--seo-brand); font-size: .85rem; flex-shrink: 0; }

.seo-coupon-row { display: flex; gap: .6rem; }
.seo-coupon-row input { flex: 1; }
.seo-coupon-msg { font-size: .78rem; margin-top: .4rem; }

.seo-summary-card { position: sticky; top: 1.4rem; }
.seo-summary-row { display: flex; justify-content: space-between; font-size: .86rem; padding: .55rem 0; border-bottom: 1px solid var(--seo-line); color: var(--seo-body); }
.seo-summary-row.total { border-bottom: 0; padding-top: 1rem; font-size: 1.15rem; font-weight: 800; color: var(--seo-ink); }
.seo-summary-row.is-discount .val { color: var(--seo-good); }
.seo-summary-row .val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--seo-ink); }
.seo-summary-err { color: var(--seo-crit); font-size: .85rem; }

#seo-card-mount { margin-top: 1rem; }
.seo-pay-err { color: var(--seo-crit); font-size: .82rem; margin-top: .6rem; }

/* ---- report ---- */
.seo-report-head { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.seo-score-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.seo-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.seo-score-track { fill: none; stroke: var(--seo-line); stroke-width: 12; }
.seo-score-val { fill: none; stroke: var(--seo-brand); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.seo-score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.seo-score-num { font-size: 2.1rem; font-weight: 800; color: var(--seo-ink); font-variant-numeric: tabular-nums; }

.seo-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-bottom: 1.4rem; }
.seo-cat-tile { background: #fff; border: none; box-shadow: var(--seo-shadow); border-radius: 18px; padding: 1rem .9rem; text-align: center; }
.seo-cat-name { font-size: .72rem; font-weight: 600; color: var(--seo-body); margin-bottom: .4rem; }
.seo-cat-score { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.seo-cat-score.is-good { color: var(--seo-good); }
.seo-cat-score.is-warn { color: var(--seo-warn); }
.seo-cat-score.is-crit { color: var(--seo-crit); }

.seo-cwv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.seo-cwv-card { background: #fff; border: none; box-shadow: var(--seo-shadow); border-radius: 18px; padding: 1.1rem 1.2rem; }
.seo-cwv-name { font-size: .78rem; font-weight: 700; color: var(--seo-ink); }
.seo-cwv-desc { font-size: .7rem; color: var(--seo-muted); margin-bottom: .7rem; }
.seo-cwv-val { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.seo-cwv-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; margin-top: .5rem; text-transform: uppercase; }
.seo-cwv-chip.is-good { background: var(--seo-good-bg); color: var(--seo-good); }
.seo-cwv-chip.is-warn { background: var(--seo-warn-bg); color: var(--seo-warn); }
.seo-cwv-chip.is-crit { background: var(--seo-crit-bg); color: var(--seo-crit); }

.seo-finding-row { display: flex; align-items: flex-start; gap: .8rem; background: #fff; border: none; box-shadow: var(--seo-shadow); border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: .6rem; }
.seo-finding-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }
.seo-finding-sev.is-good { background: var(--seo-good); }
.seo-finding-sev.is-warn { background: var(--seo-warn); }
.seo-finding-sev.is-crit { background: var(--seo-crit); }
.seo-finding-title { font-weight: 600; color: var(--seo-ink); font-size: .87rem; }
.seo-finding-desc { font-size: .78rem; color: var(--seo-muted); margin-top: .15rem; }
.seo-finding-cat { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--seo-muted); text-transform: uppercase; white-space: nowrap; }

.seo-tabbar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.seo-tab { border: 0; background: none; padding: .6rem 1.1rem; border-radius: 50px; font-size: .86rem; font-weight: 700; color: var(--seo-muted); cursor: pointer; font-family: inherit; transition: background-color .15s, color .15s; }
.seo-tab:hover { color: var(--seo-ink); }
.seo-tab.is-active { background: var(--seo-brand-bg); color: var(--seo-brand); }
.seo-pdf-btn { margin-left: auto; padding: .6rem 1.1rem; font-size: .82rem; }

.seo-trend-chart { width: 100%; height: 120px; display: block; }
.seo-trend-line { fill: none; stroke: var(--seo-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.seo-trend-dot { fill: var(--seo-brand); }
.seo-trend-empty { fill: var(--seo-muted); font-size: 12px; }

.seo-history-row { display: flex; align-items: center; gap: .9rem; background: #fff; border: none; box-shadow: var(--seo-shadow); border-radius: 16px; padding: .9rem 1.1rem; margin-bottom: .6rem; cursor: pointer; transition: box-shadow .15s; }
.seo-history-row:hover { box-shadow: 0 0 0 2px var(--seo-brand-light); }
.seo-history-row.is-active { box-shadow: 0 0 0 2px var(--seo-brand); }
.seo-history-date { font-weight: 600; color: var(--seo-ink); font-size: .87rem; }
.seo-history-score { margin-left: auto; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.seo-history-score.is-good { color: var(--seo-good); }
.seo-history-score.is-warn { color: var(--seo-warn); }
.seo-history-score.is-crit { color: var(--seo-crit); }
.seo-history-latest { font-size: .68rem; font-weight: 700; color: var(--seo-brand); text-transform: uppercase; background: var(--seo-brand-bg); padding: .15rem .55rem; border-radius: 999px; }

/* ---- gate (report password) ---- */
.seo-gate-card { max-width: 420px; margin: 2.5rem auto; text-align: center; padding: 2.4rem 2rem; }
.seo-gate-icon { width: 52px; height: 52px; margin: 0 auto 1.1rem; background: var(--seo-brand-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.seo-gate-err { font-size: .8rem; color: var(--seo-crit); margin: .6rem 0 0; }

/* ---- order/audit status ---- */
.status-icon { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.status-icon--warn { background: var(--seo-warn-bg); }
.status-icon--good { background: var(--seo-good-bg); }
.status-icon--crit { background: var(--seo-crit-bg); }
.status-title { font-weight: 800; font-size: 1.15rem; color: var(--seo-ink); margin: 0 0 .3rem; text-align: center; }
.status-desc { font-size: .86rem; color: var(--seo-body); line-height: 1.6; margin: 0; text-align: center; }

/* ---- landing ---- */
.seo-landing { font-family: 'Gilroy', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--seo-body); font-weight: 500; }

.seo-land-header { border-bottom: 1px solid var(--seo-line); background: #fff; }
.seo-land-header-inner { max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; }
.seo-land-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.seo-land-logo-img { height: 32px; width: auto; display: block; }
.seo-land-logo { font-weight: 800; font-size: 1.1rem; color: var(--seo-ink); }
.seo-land-login-link { font-size: .86rem; font-weight: 600; color: var(--seo-brand); text-decoration: none; }
.seo-land-login-link:hover { text-decoration: underline; }

.seo-land-hero { padding: 5rem 1.4rem 4rem; text-align: center; background: var(--seo-bg); }
.seo-land-hero-inner { max-width: 720px; margin: 0 auto; }
.seo-land-h1 { font-size: 2.6rem; font-weight: 800; color: var(--seo-ink); line-height: 1.15; margin: 0 0 1.2rem; }
.seo-land-lead { font-size: 1.08rem; line-height: 1.6; margin: 0 0 2rem; }
.seo-land-cta { font-size: 1rem; padding: 1.1rem 2.2rem; }
.seo-land-hero-note { font-size: .78rem; color: var(--seo-muted); margin: 1rem 0 0; }

.seo-land-section { max-width: 1100px; margin: 0 auto; padding: 4rem 1.4rem; }
.seo-land-eyebrow { text-align: center; font-size: .78rem; font-weight: 700; color: var(--seo-brand); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 2rem; }

.seo-land-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.seo-land-feature { text-align: center; padding: 1.8rem 1.4rem; }
.seo-land-feature-icon { font-size: 1.8rem; margin-bottom: .8rem; }
.seo-land-feature-title { font-weight: 700; color: var(--seo-ink); font-size: 1rem; margin-bottom: .5rem; }
.seo-land-feature-desc { font-size: .84rem; line-height: 1.55; }

.seo-land-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.seo-land-pkg-card { text-align: center; padding: 2rem 1.6rem; position: relative; }
.seo-land-pkg-card.is-popular { box-shadow: 0 0 0 3px var(--seo-brand); }
.seo-land-pkg-name { font-weight: 700; color: var(--seo-ink); font-size: 1.1rem; margin-bottom: .3rem; }
.seo-land-pkg-pages { font-size: .8rem; color: var(--seo-muted); margin-bottom: 1.2rem; }
.seo-land-pkg-price { font-size: 2rem; font-weight: 800; color: var(--seo-ink); margin-bottom: .2rem; }
.seo-land-pkg-price small { font-size: .7rem; font-weight: 600; color: var(--seo-muted); display: block; margin-bottom: 1.4rem; }
.seo-land-pkg-cta { display: block; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }

.seo-land-cta-band { background: var(--seo-brand-bg); text-align: center; padding: 3.5rem 1.4rem; }
.seo-land-cta-title { font-size: 1.5rem; font-weight: 800; color: var(--seo-ink); margin: 0 0 1.6rem; }

.seo-land-footer { text-align: center; padding: 2rem 1.4rem; font-size: .8rem; color: var(--seo-muted); }
.seo-land-footer a { color: var(--seo-muted); }
.seo-land-footer-sep { margin: 0 .5rem; }

@media (max-width: 900px) {
    .seo-checkout-grid { grid-template-columns: 1fr; }
    .seo-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .seo-cwv-row { grid-template-columns: 1fr; }
    .seo-land-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .seo-land-pkg-grid { grid-template-columns: 1fr; }
    .seo-land-h1 { font-size: 2rem; }
}
@media (max-width: 560px) {
    .seo-pkg-grid { grid-template-columns: 1fr; }
    .seo-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .seo-land-feature-grid { grid-template-columns: 1fr; }
}