/* =============================================================
   KFC33 — CORE STYLESHEET
   Single source of truth shared by every page of the site.
   Contains: design tokens, fonts, reset, base typography,
   page scaffolding (container / wrapper / content), the global
   header + footer, and reusable UI components (titles, notices,
   the select-list card system).

   Page-specific styling lives in its own file (e.g. score.css)
   and is loaded *after* this file so it can refine these rules.
   ============================================================= */

/* -------------------------------------------------------------
   1. Brand font
   ------------------------------------------------------------- */
@font-face {
    font-family: "mix-el";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("../fonts/mix-el.woff2") format("woff2"),
        url("https://kfc33.shop/wp-content/themes/kfc25/fonts/mix-el.woff2") format("woff2");
}

/* -------------------------------------------------------------
   2. Design tokens
   ------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* Palette — monochrome with layered depth (DARK theme = default/base) */
    --c-bg: #0a0a0c;
    --c-bg-elev: #141418;
    --c-ink: #f5f5f6;
    --c-ink-soft: rgba(245, 245, 246, 0.74);
    --c-ink-muted: rgba(245, 245, 246, 0.52);
    --c-ink-faint: rgba(245, 245, 246, 0.38);
    --c-line: rgba(255, 255, 255, 0.12);
    --c-line-strong: rgba(255, 255, 255, 0.34);
    --c-line-hover: rgba(255, 255, 255, 0.5);
    --c-panel: rgba(0, 0, 0, 0.46);
    --c-panel-strong: rgba(0, 0, 0, 0.62);
    --c-accent: #ffffff;

    /* Semantic theme tokens — these flip between light/dark so components
       never have to hardcode an assumption about the background. */
    --c-hover-tint: rgba(255, 255, 255, 0.07);   /* subtle hover wash on surfaces */
    --c-hover-tint-strong: rgba(255, 255, 255, 0.12);
    --c-field-bg: rgba(255, 255, 255, 0.04);     /* input / control surface */
    --c-field-bg-focus: rgba(255, 255, 255, 0.07);
    --c-focus-ring: rgba(255, 255, 255, 0.12);   /* focus glow ring */
    --c-overlay: rgba(5, 5, 6, 0.66);            /* dim modal backdrop */
    --c-menu-bg: rgba(10, 10, 12, 0.97);         /* solid dropdown panel bg */
    --c-selection-bg: rgba(255, 255, 255, 0.85); /* ::selection */
    --c-selection-fg: #000;
    --c-on-accent: var(--c-bg);                  /* text/ink that sits ON --c-ink/--c-accent fills */
    --c-success: #8ff0a8;                        /* positive status text */
    --c-danger: #ffb4b4;                         /* destructive / error text */
    --c-danger-line: rgba(255, 120, 120, 0.55);
    --c-pulse: rgba(255, 255, 255, 0.5);         /* animated status-dot ring */

    /* Always-dark "glass" tokens for chips/controls that sit ON photos or the
       captcha canvas (which stay dark in both themes). These do NOT flip — a
       white icon on a dark glass plate must remain legible over imagery
       regardless of the active theme. Values match the dark theme so the dark
       look is preserved byte-for-byte. */
    --c-captcha-plate: rgba(255, 255, 255, 0.92);
    --c-overlay-surface-strong: rgba(0, 0, 0, 0.62);
    --c-overlay-line: rgba(255, 255, 255, 0.34);
    --c-overlay-ink: #ffffff;
    --c-overlay-ink-soft: rgba(245, 245, 246, 0.74);
    --c-overlay-ink-muted: rgba(245, 245, 246, 0.52);

    /* Typography — pixel display face + readable UI face */
    --font-display: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-base: clamp(15px, 2.6vw, 17px);
    --fs-title: clamp(1.6rem, 4.2vw, 2.4rem);
    --fs-subtitle: clamp(1rem, 2.4vw, 1.2rem);
    --lh: 1.55;

    /* Shape, spacing, motion */
    --container: 1140px;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --gap: 0.9rem;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.38);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 0.16s;
    --t-med: 0.3s;

    /* Legacy theme variable bridge — older markup (profile, and likely
       future account pages) references these generic "smoke" names in
       inline styles. Map them onto the monochrome tokens above so those
       rules render on-theme. Keep here in :root so every page resolves them. */
    --primary: var(--c-ink);            /* main ink / text colour */
    --smoke-semidark: var(--c-panel);   /* elevated panel surface */
    --smoke-dark: var(--c-bg-elev);     /* interactive surface (button bg) */
    --smoke-darker: var(--c-line-strong); /* border / hover surface */
}

/* -------------------------------------------------------------
   2b. LIGHT (day) theme
   ------------------------------------------------------------- */
/* The LIGHT token set — a tasteful day version of the monochrome design:
   light backgrounds, dark ink, softer shadows, a dark accent. Applied in two
   ways (the declarations are intentionally identical between the two):

     1) DEFAULT = follow the browser. When the OS/browser prefers a light
        scheme AND the user has NOT forced a theme, the :root:not([data-theme="dark"])
        rule inside the media query takes over. (Pure CSS, so no flash.)
     2) MANUAL OVERRIDE. js/theme.js sets html[data-theme="light"|"dark"]; the
        attribute selectors below force a theme regardless of the OS setting.

   Because :root === <html>, these blocks also carry the page background-image
   (the html rule below resolves --c-bg for the base colour, which already
   flips via the token, but the literal gradient needs a light counterpart). */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        --c-bg: #eceef2;
        --c-bg-elev: #ffffff;
        --c-ink: #15171c;
        --c-ink-soft: rgba(21, 23, 28, 0.72);
        --c-ink-muted: rgba(21, 23, 28, 0.56);
        --c-ink-faint: rgba(21, 23, 28, 0.42);
        --c-line: rgba(17, 20, 28, 0.14);
        --c-line-strong: rgba(17, 20, 28, 0.30);
        --c-line-hover: rgba(17, 20, 28, 0.45);
        --c-panel: rgba(255, 255, 255, 0.70);
        --c-panel-strong: rgba(255, 255, 255, 0.90);
        --c-accent: #15171c;

        --c-hover-tint: rgba(17, 20, 28, 0.05);
        --c-hover-tint-strong: rgba(17, 20, 28, 0.09);
        --c-field-bg: rgba(17, 20, 28, 0.04);
        --c-field-bg-focus: rgba(17, 20, 28, 0.015);
        --c-focus-ring: rgba(21, 23, 28, 0.20);
        --c-overlay: rgba(28, 31, 42, 0.42);
        --c-menu-bg: rgba(255, 255, 255, 0.98);
        --c-selection-bg: rgba(21, 23, 28, 0.85);
        --c-selection-fg: #ffffff;
        --c-success: #1f9d57;
        --c-danger: #c0392b;
        --c-danger-line: rgba(192, 57, 43, 0.5);
        --c-pulse: rgba(21, 23, 28, 0.40);

        --shadow: 0 18px 40px rgba(23, 27, 45, 0.16);
        --shadow-soft: 0 8px 22px rgba(23, 27, 45, 0.1);

        background-image:
            radial-gradient(1100px 520px at 50% -10%, rgba(17, 20, 28, 0.05), transparent 60%),
            radial-gradient(820px 620px at 88% 4%, rgba(17, 20, 28, 0.03), transparent 58%),
            linear-gradient(180deg, #f4f6f9 0%, #eceef2 58%, #e5e7ec 100%);
    }
}

:root[data-theme="light"] {
    color-scheme: light;

    --c-bg: #eceef2;
    --c-bg-elev: #ffffff;
    --c-ink: #15171c;
    --c-ink-soft: rgba(21, 23, 28, 0.72);
    --c-ink-muted: rgba(21, 23, 28, 0.56);
    --c-ink-faint: rgba(21, 23, 28, 0.42);
    --c-line: rgba(17, 20, 28, 0.14);
    --c-line-strong: rgba(17, 20, 28, 0.30);
    --c-line-hover: rgba(17, 20, 28, 0.45);
    --c-panel: rgba(255, 255, 255, 0.70);
    --c-panel-strong: rgba(255, 255, 255, 0.90);
    --c-accent: #15171c;

    --c-hover-tint: rgba(17, 20, 28, 0.05);
    --c-hover-tint-strong: rgba(17, 20, 28, 0.09);
    --c-field-bg: rgba(17, 20, 28, 0.04);
    --c-field-bg-focus: rgba(17, 20, 28, 0.015);
    --c-focus-ring: rgba(21, 23, 28, 0.20);
    --c-overlay: rgba(28, 31, 42, 0.42);
    --c-menu-bg: rgba(255, 255, 255, 0.98);
    --c-selection-bg: rgba(21, 23, 28, 0.85);
    --c-selection-fg: #ffffff;
    --c-success: #1f9d57;
    --c-danger: #c0392b;
    --c-danger-line: rgba(192, 57, 43, 0.5);
    --c-pulse: rgba(21, 23, 28, 0.40);

    --shadow: 0 18px 40px rgba(23, 27, 45, 0.16);
    --shadow-soft: 0 8px 22px rgba(23, 27, 45, 0.1);

    background-image:
        radial-gradient(1100px 520px at 50% -10%, rgba(17, 20, 28, 0.05), transparent 60%),
        radial-gradient(820px 620px at 88% 4%, rgba(17, 20, 28, 0.03), transparent 58%),
        linear-gradient(180deg, #f4f6f9 0%, #eceef2 58%, #e5e7ec 100%);
}

/* Explicit dark override — keeps the dark theme pinned when the user forces it
   even though the OS prefers light (the media query above is skipped via
   :not([data-theme="dark"]); the base :root already supplies the dark tokens). */
:root[data-theme="dark"] {
    color-scheme: dark;
}

/* -------------------------------------------------------------
   3. Reset
   ------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--c-line-strong) transparent;

    background-color: var(--c-bg);
    background-image:
        radial-gradient(1100px 520px at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%),
        radial-gradient(820px 620px at 88% 4%, rgba(255, 255, 255, 0.03), transparent 58%),
        linear-gradient(180deg, #0c0c0f 0%, #090909 58%, #050506 100%);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* -------------------------------------------------------------
   4. Base elements
   ------------------------------------------------------------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh);
    color: var(--c-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}

p {
    margin: 0;
}

::selection {
    background: var(--c-selection-bg);
    color: var(--c-selection-fg);
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* -------------------------------------------------------------
   5. Layout scaffolding
   ------------------------------------------------------------- */
.container-xl {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(0.9rem, 4vw, 1.5rem);
}

.wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content {
    flex: 1 0 auto;
    /* Top-align content with a consistent, comfortable gap under the
       header on every page. .content grows (flex: 1 0 auto) to push the
       footer down, so it must lay its children out from the TOP — using
       justify-content: flex-start keeps content from floating into the
       middle of the leftover vertical space on tall viewports. Pages
       must not re-center this (no justify-content: center on .content). */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    /* Tighter, consistent gap under the header; keep bottom breathing room. */
    padding-top: clamp(0.5rem, 2vw, 1rem);
    padding-bottom: clamp(1.5rem, 5vw, 2.75rem);
    text-align: center;
}

/* -------------------------------------------------------------
   6. Shared typography components
   ------------------------------------------------------------- */
.general-ttl {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-title);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
    text-align: center;
    margin-bottom: clamp(1rem, 3.2vw, 1.6rem);
    color: var(--c-ink);
    text-shadow: none;
    text-wrap: balance;
}

.sub-ttl {
    font-family: var(--font-body);
    font-size: var(--fs-subtitle);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
    margin-bottom: 1rem;
    color: var(--c-ink-soft);
}

.uppercase {
    text-transform: uppercase;
}

/* -------------------------------------------------------------
   7. Site header (global)
   ------------------------------------------------------------- */
.site-header {
    width: 100%;
    max-width: min(92%, 380px);
    margin: clamp(1rem, 4vw, 1.6rem) auto clamp(1.1rem, 4vw, 1.7rem);
}

.site-header__stack {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.site-header__logo-box.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 2.5vw, 0.75rem) 1.25rem;
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.site-header__logo-box.brand:hover {
    background: var(--c-panel-strong);
    border-color: var(--c-line-strong);
}

.site-header__logo-box.brand img {
    width: clamp(4.25rem, 26vw, 7rem);
    height: auto;
}

.site-header__nav {
    display: flex;
    /* Score before Dashboard (links are Dashboard-then-Score in the DOM). */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 4vw, 1.6rem);
    padding: 0.7rem 1rem;
    background: var(--c-panel-strong);
    border: 1px solid var(--c-line);
    border-top: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.site-header__nav-link {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--c-ink-soft);
    transition: color var(--t-fast) var(--ease), text-shadow var(--t-fast) var(--ease);
}

.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
    color: var(--c-ink);
    text-shadow: 0 0 10px var(--c-focus-ring);
}

/* User menu — accessible no-JS dropdown (<details>) for logged-in pages.
   Modeled on the footer .lang-switch pattern but opens DOWNWARD since the
   header sits at the top of the page. Only renders where the markup uses
   the .site-header__user-menu wrapper, so plain-link headers are untouched. */
.site-header__user-menu {
    position: relative;
}

/* The <summary> trigger styled as a clickable pill with a caret. */
.site-header__nav-link--user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.85rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-panel);
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
}

.site-header__nav-link--user::-webkit-details-marker {
    display: none;
}

.site-header__nav-link--user::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.12rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.85;
    transition: transform var(--t-med) var(--ease);
}

.site-header__nav-link--user:hover,
.site-header__user-menu[open] .site-header__nav-link--user {
    color: var(--c-ink);
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
}

.site-header__user-menu[open] .site-header__nav-link--user::after {
    transform: rotate(-135deg);
}

/* Dropdown panel — opens downward, aligned under the trigger. */
.site-header__user-menu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 10rem;
    padding: 0.3rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: var(--c-menu-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
    z-index: 20;
}

.site-header__user-menu[open] .site-header__user-menu-panel {
    animation: user-menu-pop 0.16s var(--ease) both;
}

/* Panel links — readable rows; reset the nav-link's lowercase/glow look. */
.site-header__user-menu-panel .site-header__nav-link {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    text-align: left;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--c-ink-soft);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.site-header__user-menu-panel .site-header__nav-link:hover,
.site-header__user-menu-panel .site-header__nav-link:focus-visible {
    color: var(--c-ink);
    background: var(--c-hover-tint);
    text-shadow: none;
}

/* Logout — subtly set apart with a divider and muted-to-bright treatment. */
.site-header__nav-link--logout {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-ink-muted);
}

.site-header__nav-link--logout:hover,
.site-header__nav-link--logout:focus-visible {
    color: var(--c-ink);
    background: var(--c-hover-tint-strong);
}

@keyframes user-menu-pop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* -------------------------------------------------------------
   8. Select-list — reusable selectable card grid
   (cities, areas, products … pages extend this component)
   ------------------------------------------------------------- */
.select-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    margin: 0 auto;
}

.select-list li {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--c-bg-elev);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-soft);
    transition:
        transform var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease);
}

/* Legibility veil over any thumbnail-backed card */
.select-list li.has-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 28%,
        rgba(0, 0, 0, 0.5) 74%,
        rgba(0, 0, 0, 0.8) 100%
    );
    transition: background var(--t-med) var(--ease);
}

.select-list li:hover {
    transform: translateY(-3px);
    border-color: var(--c-line-strong);
    box-shadow: var(--shadow);
}

.select-list li:hover.has-thumb::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 18%,
        rgba(0, 0, 0, 0.45) 70%,
        rgba(0, 0, 0, 0.82) 100%
    );
}

.select-list a {
    color: var(--c-ink);
    text-decoration: none;
}

/* Generic tile link (centered label) — pages may override */
.select-list li > a {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* -------------------------------------------------------------
   9. Notices
   ------------------------------------------------------------- */
.admin-notice {
    color: var(--c-ink-soft);
}

.admin-notice p {
    font-family: var(--font-body);
    margin: 0;
}

.admin-notice p:empty {
    display: none;
}

.admin-notice a {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transition: color var(--t-fast) var(--ease);
}

.admin-notice a:hover {
    color: var(--c-ink);
}

.admin-notice:empty {
    display: none;
}

/* -------------------------------------------------------------
   9b. Notices & messages — unified system (SSOT)
   ONE consistent, token-based (light+dark), responsive treatment for
   every notice/message state, applied through the real classes the site
   emits: WooCommerce notices (wc_print_notices → .woocommerce-error /
   .woocommerce-message / .woocommerce-info), the login/register/score
   modal error alert (.alert-danger.alert), and the theme's own
   .error / .welcome notices (print_notification, the order-limit "max
   items" error, the 404 message, etc.). WooCommerce's own stylesheet is
   not loaded, so these rules fully own the look. A left accent border
   conveys the state; text + links stay high-contrast and readable. The
   card is fluid and never overflows at 360px.
   ------------------------------------------------------------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.alert,
.content .error,
.content .welcome,
.kfc-notice {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: clamp(1rem, 3vw, 1.4rem);
    padding: clamp(0.8rem, 3vw, 1.05rem) clamp(0.95rem, 3.5vw, 1.2rem);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-soft);
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
    list-style: none;
    overflow-wrap: anywhere;
}

/* The WooCommerce error list can carry several <li> messages. */
.woocommerce-error li {
    list-style: none;
    margin: 0;
}

.woocommerce-error li + li {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--c-line);
}

/* State accents — the left border carries the meaning. */
.woocommerce-error,
.alert-danger,
.content .error {
    border-left-color: var(--c-danger-line);
}

.woocommerce-message,
.content .welcome {
    border-left-color: var(--c-success);
}

.woocommerce-info {
    border-left-color: var(--c-accent);
}

/* Links inside any notice — readable + underlined, wrap long URLs. */
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a,
.alert a,
.content .error a,
.content .welcome a,
.kfc-notice a {
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

/* WooCommerce notices wrapper — collapse when empty; no trailing gap. */
.woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-notices-wrapper > :last-child {
    margin-bottom: 0;
}

/* Bootstrap's .fade (opacity:0) is no longer loaded; keep alerts visible. */
.alert.fade {
    opacity: 1;
}

/* -------------------------------------------------------------
   10. Site footer (global)
   ------------------------------------------------------------- */
.main-footer {
    margin-top: auto;
    padding: clamp(1.3rem, 4vw, 1.7rem) 1rem clamp(1.05rem, 3vw, 1.35rem);
    border-top: 1px solid var(--c-line);
    text-align: center;
}

.site-footer-links {
    max-width: 640px;
    margin-inline: auto;
}

.site-footer-links__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--font-body);
    /* Slightly larger, and a touch bigger on small screens where the flat
       0.85rem read as too small. */
    font-size: clamp(0.9rem, 2.8vw, 0.95rem);
    line-height: 1.6;
    color: var(--c-ink-muted);
}

.site-footer-links__row > a {
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

.site-footer-links__row > a:hover,
.site-footer-links__row > a:focus-visible {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.site-footer-links__sep {
    margin: 0 0.5rem;
    color: var(--c-ink-faint);
    user-select: none;
}

/* Language switcher — accessible no-JS dropdown (<details>).
   Sits on its own centered line beneath the footer text links.
   Icon-led trigger (the globe + aria-label convey purpose, so no caption). */
.lang-switch {
    position: relative;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    margin-top: 1.35rem;
    margin-bottom: 0.35rem;
}

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem 0.4rem 0.72rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 2.6vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.lang-switch__toggle::-webkit-details-marker {
    display: none;
}

.lang-switch__toggle:hover {
    color: var(--c-ink);
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.lang-switch[open] .lang-switch__toggle {
    color: var(--c-ink);
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
}

.lang-switch__toggle:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.lang-switch__globe {
    display: block;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity var(--t-fast) var(--ease);
}

.lang-switch__toggle:hover .lang-switch__globe,
.lang-switch[open] .lang-switch__globe {
    opacity: 1;
}

/* The globe is replaced at runtime by a circular national flag (js/theme.js).
   Flags read at full strength in both themes — no opacity wash. */
.lang-switch__flag {
    width: 18px;
    height: 18px;
    opacity: 1;
    border-radius: 50%;
}

.lang-switch__toggle:hover .lang-switch__flag,
.lang-switch[open] .lang-switch__flag {
    opacity: 1;
}

/* Small flag prefixed before each dropdown option. */
.lang-switch__menu-flag {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
}

.lang-switch__current {
    font-variant-numeric: tabular-nums;
}

.lang-switch__caret {
    width: 0.38rem;
    height: 0.38rem;
    margin-left: 0.12rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}

.lang-switch__toggle:hover .lang-switch__caret,
.lang-switch[open] .lang-switch__caret {
    opacity: 1;
}

.lang-switch[open] .lang-switch__caret {
    transform: rotate(-135deg);
}

/* Menu opens upward — the footer sits at the bottom of the page */
.lang-switch__menu {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(100% + 0.55rem);
    transform: translateX(-50%);
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: var(--c-panel-strong);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow);
    z-index: 20;
}

.lang-switch[open] .lang-switch__menu {
    animation: lang-pop var(--t-med) var(--ease) both;
}

.lang-switch__menu a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: left;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible {
    color: var(--c-ink);
    background: var(--c-hover-tint);
    outline: none;
}

.lang-switch__menu a.is-active {
    color: var(--c-ink);
}

.lang-switch__menu a.is-active::after {
    content: "\2713";
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--c-accent);
    opacity: 0.95;
}

@keyframes lang-pop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.97);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-1px) scale(1.005);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lang-switch__toggle,
    .lang-switch__caret,
    .lang-switch__globe,
    .lang-switch__flag {
        transition: none;
    }

    .lang-switch[open] .lang-switch__menu {
        animation: none;
    }
}

/* -------------------------------------------------------------
   Anti-FOUC for the footer controls
   The language pill (.lang-switch) is rendered server-side as a globe +
   "EN"/"EL" text, then js/theme.js upgrades it (globe -> national flag,
   drops the text) and wraps it with the theme slide-switch into a
   .theme-switch group. To avoid the brief "two versions" flash on load,
   the pre-JS pill (still a direct child of the footer row) is hidden until
   theme.js moves it into the .theme-switch wrapper, at which point it is
   revealed already in its final, upgraded form. Pure CSS, so it takes
   effect before first paint with no extra inline script. (theme.js applies
   the flag BEFORE wrapping, so nothing flashes when the pill is revealed.)
   ------------------------------------------------------------- */
.site-footer-links__row > .lang-switch {
    visibility: hidden;
}

.theme-switch .lang-switch {
    visibility: visible;
}

/* Footer controls — injected into the footer row by js/theme.js. The
   .theme-switch line spans the row and centers a theme slide-switch
   (.theme-toggle) beside the language pill (.lang-switch). A shared control
   height (--ctl-h) keeps the two controls visually equal-sized. Token-based so
   both read correctly in light + dark. */
.theme-switch {
    --ctl-h: 2rem; /* shared height of both footer controls */
    --ctl-w: calc(var(--ctl-h) * 1.85); /* shared width — keeps both controls equal */
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.35rem;
    margin-bottom: 0.35rem;
}

/* Inside the shared controls line the language switch sits inline next to the
   theme switch (not on its own full-width row), matched to --ctl-h. */
.theme-switch .lang-switch {
    flex-basis: auto;
    margin: 0;
}

.theme-switch .lang-switch__toggle {
    box-sizing: border-box;
    height: var(--ctl-h);
    width: var(--ctl-w);
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0.4rem;
}

/* Theme slide-switch — a pill track with a circular knob that slides between
   Light (sun, left) and Dark (moon, right). role="switch" set in JS. */
.theme-toggle {
    --knob: calc(var(--ctl-h) - 8px);
    --pad: 3px;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: var(--ctl-h);
    width: var(--ctl-w);
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.theme-toggle:hover {
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
    box-shadow: var(--shadow-soft);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.theme-toggle__track {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.theme-toggle__knob {
    position: absolute;
    top: 50%;
    left: var(--pad);
    width: var(--knob);
    height: var(--knob);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-ink);
    color: var(--c-on-accent);
    box-shadow: var(--shadow-soft);
    transform: translateY(-50%);
    transition: transform var(--t-med) var(--ease);
}

/* Slide right when dark is active. */
.theme-toggle[data-state="dark"] .theme-toggle__knob {
    transform: translate(
        calc(var(--ctl-w) - var(--knob) - var(--pad) * 2),
        -50%
    );
}

.theme-toggle__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.theme-toggle__icon svg {
    width: 14px;
    height: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle__knob {
        transition: none;
    }
}

.copyright {
    /* Hidden per design — footer copyright removed site-wide (CSS-only). */
    display: none;
    margin-top: 0.85rem;
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--c-ink-faint);
    text-align: center;
}

.wp-footer:empty {
    display: none;
}

/* -------------------------------------------------------------
   WordPress chrome — hide the admin bar (not part of the design)
   ------------------------------------------------------------- */
#wpadminbar {
    display: none !important;
}

/* -------------------------------------------------------------
   Static content / prose — readable article body
   Shared by static text pages (Rules, and future Contact/About…).
   Scoped under .default-page-content so these rules reliably beat
   the WordPress block inline <style> blocks that load afterwards.
   ------------------------------------------------------------- */
.default-page-content {
    max-width: 720px;
    margin-inline: auto;
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1.1rem, 4vw, 1.75rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-soft);
    text-align: left;
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
}

.default-page-content > :first-child {
    margin-top: 0;
}

.default-page-content > :last-child {
    margin-bottom: 0;
}

.default-page-content :is(h2, h3, h4) {
    margin: 1.75em 0 0.7em;
    color: var(--c-ink);
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.default-page-content :is(h2, h3, h4):first-child {
    margin-top: 0;
}

.default-page-content h2 {
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
}

.default-page-content h3 {
    font-size: clamp(1.05rem, 3vw, 1.25rem);
}

.default-page-content h4 {
    font-size: 1.05rem;
}

.default-page-content p {
    margin: 0 0 1.1em;
}

.default-page-content p:empty {
    display: none;
}

.default-page-content strong {
    color: var(--c-ink);
    font-weight: 700;
}

.default-page-content em {
    font-style: italic;
}

.default-page-content a {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--c-line-strong);
    transition: text-decoration-color var(--t-fast) var(--ease);
}

.default-page-content a:hover,
.default-page-content a:focus-visible {
    text-decoration-color: var(--c-ink);
}

/* Restore list markers the global reset strips, with readable indent. */
.default-page-content :is(ul, ol) {
    margin: 0 0 1.1em;
    padding-left: 1.5em;
}

.default-page-content ul {
    list-style: disc;
}

.default-page-content ol {
    list-style: decimal;
}

.default-page-content li {
    margin: 0 0 0.5em;
}

.default-page-content li::marker {
    color: var(--c-ink-faint);
}

/* Dividers — override the WP separator block style that loads later. */
.default-page-content .wp-block-separator,
.default-page-content hr {
    height: 0;
    margin: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--c-line);
}

/* -------------------------------------------------------------
   Forms & buttons (global)  [marker: core-forms-buttons]
   Shared, reusable form-control and button primitives used by
   every form on the site (wallet top-up, new ticket, profile,
   coupon, etc.). Kept at modest specificity so page stylesheets
   can refine without fighting.
   ------------------------------------------------------------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    /* 16px min avoids iOS focus zoom */
    font-size: max(1rem, 16px);
    line-height: 1.4;
    color: var(--c-ink);
    background: var(--c-field-bg);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    min-height: 7rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--c-ink-faint);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-field-bg-focus);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

/* Primary button — filled, high-contrast (monochrome KFC look) */
.kfc-btn,
.payment-form button[type="submit"],
.payment-form input[type="submit"],
button.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-bg);
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: var(--radius-pill);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease),
        opacity var(--t-fast) var(--ease);
}

.kfc-btn:hover,
.payment-form button[type="submit"]:hover,
.payment-form input[type="submit"]:hover,
button.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
    opacity: 0.92;
}

.kfc-btn:active,
.payment-form button[type="submit"]:active,
.payment-form input[type="submit"]:active,
button.btn-primary:active {
    transform: translateY(0);
    opacity: 1;
}

.kfc-btn:focus-visible,
.payment-form button[type="submit"]:focus-visible,
.payment-form input[type="submit"]:focus-visible,
button.btn-primary:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

/* Ghost / secondary button variant */
.kfc-btn--ghost {
    color: var(--c-ink);
    background: transparent;
    border-color: var(--c-line-strong);
}

.kfc-btn--ghost:hover {
    background: var(--c-hover-tint);
}

/* Shared inline button system  [marker: core-btn]
   Promoted here from tickets.css so every page that loads core (tickets,
   reviews, …) shares ONE primary/ghost button treatment — primary actions
   match site-wide. Token-based, so correct in light + dark. This is the
   compact inline primary used in page toolbars/bars; the larger uppercase
   .kfc-btn above stays the big form-submit CTA. Both primaries fill with
   --c-ink / --c-on-accent so the brand "ink fill" is consistent. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.72rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background: var(--c-ink);
    color: var(--c-on-accent);
    box-shadow: var(--shadow-soft);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn--ghost {
    background: transparent;
    border-color: var(--c-line-strong);
    color: var(--c-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--c-hover-tint);
    border-color: var(--c-line-hover);
}

.btn--block {
    width: 100%;
}

.btn__icon {
    display: inline-flex;
    font-size: 1.05em;
    line-height: 0;
}

/* Custom checkbox control  [marker: core-checkbox]
   Reusable checkbox + label row (login "remember me", future
   opt-in toggles…). The markup wraps the control + text in a
   <label> inside a .checkbox; an optional hidden companion input
   (used for unchecked POST values) is ignored visually. */
.checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--c-ink-soft);
    user-select: none;
    transition: color var(--t-fast) var(--ease);
}

.checkbox label:hover {
    color: var(--c-ink);
}

.checkbox input[type="checkbox"] {
    flex: none;
    display: grid;
    place-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: 6px;
    background: var(--c-field-bg);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.checkbox input[type="checkbox"]::before {
    content: "";
    width: 0.32rem;
    height: 0.62rem;
    margin-top: -0.12rem;
    border: solid var(--c-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--t-fast) var(--ease);
}

.checkbox input[type="checkbox"]:checked {
    background: var(--c-ink);
    border-color: var(--c-ink);
}

.checkbox input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

.checkbox input[type="checkbox"]:hover {
    border-color: var(--c-line-strong);
    background: var(--c-hover-tint);
}

.checkbox input[type="checkbox"]:checked:hover {
    background: var(--c-ink);
}

.checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}

/* Captcha component  [marker: core-captcha]
   Shared verify-code control: a light image plate sitting beside the
   text input. Used by 2+ pages (login/register and change-password),
   so it lives here in core rather than a single page file. The layout
   row keys off the form-row's .field-loginform-verifycode modifier,
   which the markup reuses verbatim across pages, and is intentionally
   unscoped so it works inside login's .auth-panel and change-password's
   plain .payment-form alike. */
.field-loginform-verifycode {
    display: flex;
    align-items: stretch;
    gap: 0.7rem;
}

/* No-FOUC: the raw image/text captcha must never flash before captcha-init.js
   takes over — only the slide captcha is ever used. core.css loads in <head>
   (before paint) while captcha-init runs after, so we hide the un-enhanced slot
   up front. The slide captcha now opens from the form's own submit button and
   renders no inline widget, so the slot stays collapsed after enhancement too
   (.slide-captcha-host--silent). Gated on html.js (set by the early head
   script) so a no-JS visitor still sees the legacy field as a usable fallback. */
html.js .field-loginform-verifycode:not(.slide-captcha-host),
html.js .form-row:has(.captcha-img):not(.slide-captcha-host),
.slide-captcha-host--silent {
    display: none;
}

.captcha-img {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    /* Captcha images render dark text on a light background, so a
       light plate keeps the code legible in either theme. */
    background: var(--c-captcha-plate);
    overflow: hidden;
}

.captcha-img img {
    width: auto;
    max-width: 100%;
    max-height: 2.4rem;
}

.captcha-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Slide-puzzle captcha  [marker: core-slide-captcha]
   Interactive "drag the piece into the gap" verification injected at runtime
   by js/captcha-init.js (replacing the legacy .captcha-img / .captcha-input
   contents). Global because the auth modal that hosts it is global. Fully
   offline: every background is rendered on <canvas>; no remote assets. */
.slide-captcha-host {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* The original verifyCode <input> is kept for form submission but visually
   removed — the puzzle drives its value. */
.slide-captcha__input {
    /* Visually hidden but still submittable (the puzzle drives its value).
       Force the box to 1px with !important: a plain class loses to
       input[type="text"]{width:100%} (higher specificity) and to per-page
       .form-control widths, which would otherwise balloon this
       absolutely-positioned input back to full width — poking ~28px past the
       auth modal and spawning a horizontal scrollbar. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- "Click to verify" gate  [marker: core-captcha-gate] ------------------
   Compact wrapper: an idle trigger pill that opens the puzzle in a centered
   modal overlay (see .captcha-modal below) on demand, then settles into a tidy
   "Verified" pill on success. Keeps the big puzzle out of sight by default. */
.captcha-gate {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Shared pill look for the idle trigger + verified states */
.captcha-gate__trigger,
.captcha-gate__verified {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 0.95rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-align: left;
    color: var(--c-ink-soft);
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.captcha-gate__label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Cloudflare-Turnstile-style tick-box on the leading edge. Empty by default;
   spins while the challenge modal is open; fills green + checks once solved. */
.captcha-gate__box {
    flex: none;
    position: relative;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-line-strong);
    border-radius: 6px;
    background: var(--c-field-bg);
    transition: border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
}

.captcha-gate__trigger:hover .captcha-gate__box,
.captcha-gate__trigger:focus-visible .captcha-gate__box {
    border-color: var(--c-accent);
}

/* Spinner shown inside the box while verifying (modal open). */
.captcha-gate__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--c-line);
    border-top-color: var(--c-accent);
}

.captcha-gate.is-checking .captcha-gate__box {
    border-color: var(--c-accent);
}

.captcha-gate.is-checking .captcha-gate__spinner {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .captcha-gate.is-checking .captcha-gate__spinner {
        animation: captcha-gate-spin 0.7s linear infinite;
    }
}

@keyframes captcha-gate-spin {
    to { transform: rotate(360deg); }
}

/* Solved state — filled green box with a white tick. */
.captcha-gate__box--checked {
    border-color: rgb(120, 230, 170);
    background: rgb(120, 230, 170);
    color: #06241a;
}

.captcha-gate__tick {
    width: 14px;
    height: 14px;
}

/* Decorative lock mark on the trailing edge (Turnstile brand position). */
.captcha-gate__brand {
    flex: none;
    width: 18px;
    height: 18px;
    opacity: 0.4;
}

.captcha-gate__trigger:hover,
.captcha-gate__trigger:focus-visible {
    color: var(--c-ink);
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
}

.captcha-gate__trigger:focus-visible,
.captcha-gate__verified:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Verified pill — tasteful green accent, stays on-theme. Inert once shown:
   it's a non-interactive status element, so no pointer cursor or hover lift. */
.captcha-gate__verified {
    display: none;
    cursor: default;
    color: rgb(150, 240, 190);
    border-color: rgba(120, 230, 170, 0.55);
    background: rgba(120, 230, 170, 0.1);
}

/* State machine: trigger vs. verified pill visibility. The puzzle itself now
   lives in the centered .captcha-modal overlay, so there's no inline panel. */
.captcha-gate.is-verified .captcha-gate__trigger {
    display: none;
}

.captcha-gate.is-verified .captcha-gate__verified {
    display: inline-flex;
}

.slide-captcha {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.slide-captcha__stage {
    position: relative;
    width: 100%;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--c-bg-elev);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-soft);
}

.slide-captcha__bg,
.slide-captcha__piece {
    display: block;
    width: 100%;
    height: 100%;
}

.slide-captcha__piece {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Loading veil — only visible while a freshly picked image is still decoding,
   so the puzzle paints in one clean shot instead of flashing a placeholder
   that swaps to the real photo. */
.slide-captcha__loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 16, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.slide-captcha.is-loading .slide-captcha__loading {
    display: flex;
}

.slide-captcha__spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: no-preference) {
    .slide-captcha.is-loading .slide-captcha__spinner {
        animation: captcha-gate-spin 0.7s linear infinite;
    }
}

.slide-captcha__refresh {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--c-overlay-line);
    border-radius: var(--radius-pill);
    background: var(--c-overlay-surface-strong);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--c-overlay-ink-soft);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.slide-captcha__refresh svg {
    width: 16px;
    height: 16px;
}

.slide-captcha__refresh:hover,
.slide-captcha__refresh:focus-visible {
    color: var(--c-overlay-ink);
    border-color: var(--c-overlay-line);
    transform: rotate(-30deg);
}

/* Slider track */
.slide-captcha__track {
    position: relative;
    height: 44px;
    margin-top: 0.7rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.5),
        rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    touch-action: none;
}

.slide-captcha__track-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    transition: background var(--t-fast) var(--ease);
}

/* Settle transitions apply only when NOT actively dragging, so the handle
   tracks the pointer 1:1 during a drag but eases on snap / reset. */
.slide-captcha:not(.is-active) .slide-captcha__handle,
.slide-captcha:not(.is-active) .slide-captcha__track-fill {
    transition: left var(--t-fast) var(--ease),
        width var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.slide-captcha__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    /* The captcha canvas is always dark, so pin the hint to the dark-glass ink
       (it must read over a dark image in either theme). */
    color: var(--c-overlay-ink-muted);
    /* Centered across the full track width and sitting behind the handle, so
       the label reads centered regardless of the handle's position. */
    pointer-events: none;
}

.slide-captcha__handle {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 46px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffffff, #d9d9de);
    color: #0a0a0c;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    touch-action: none;
    will-change: left;
}

.slide-captcha__handle svg {
    width: 18px;
    height: 18px;
}

.slide-captcha__handle:hover {
    background: linear-gradient(180deg, #ffffff, #e6e6ea);
}

.slide-captcha__handle:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.slide-captcha.is-active .slide-captcha__handle {
    cursor: grabbing;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Success state — tasteful accent without leaving the monochrome theme */
.slide-captcha.is-success .slide-captcha__track {
    border-color: rgba(120, 230, 170, 0.7);
}

.slide-captcha.is-success .slide-captcha__track-fill {
    background: rgba(120, 230, 170, 0.22);
}

.slide-captcha.is-success .slide-captcha__handle {
    background: rgb(120, 230, 170);
    color: #06241a;
    cursor: default;
}

.slide-captcha.is-success .slide-captcha__hint {
    color: rgb(150, 240, 190);
}

/* Error state */
.slide-captcha.is-error .slide-captcha__track {
    border-color: rgba(240, 120, 120, 0.7);
}

.slide-captcha.is-error .slide-captcha__hint {
    color: rgb(244, 150, 150);
}

@media (prefers-reduced-motion: no-preference) {
    .slide-captcha.is-error .slide-captcha__stage {
        animation: slide-captcha-shake 0.42s var(--ease);
    }
}

@keyframes slide-captcha-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* Wallet add-amount component  [marker: core-wallet]
   Shared WooCommerce wallet markup (<div class="woo-wallet-add-amount">)
   used by 2+ pages (top-up, redeem-coupon). The base row layout and the
   "hidden inputs never take layout space" rule live here; each page keeps
   only its own tweaks (top-up's row sizing, redeem-coupon's stacked column). */
.woo-wallet-add-amount {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.woo-wallet-add-amount input[type="hidden"] {
    display: none;
}

/* -------------------------------------------------------------
   Auth tabbed form (global)  [marker: core-auth]
   Shared "Sign in / Sign up" tabbed-form UI. Used by the login
   page (login.html) and by the in-page auth modal (area.html, and
   any future page that needs a guest sign-in gate). Page files keep
   only their own shell/entrance bits; everything reusable lives here.
   ------------------------------------------------------------- */

/* Tab switcher — segmented "Sign in / Sign up" control */
.auth-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem;
    margin-bottom: clamp(1rem, 3.5vw, 1.4rem);
    border: 1px solid var(--c-line);
    /* Moderate rounded-rect (matches the card), not a full capsule. */
    border-radius: var(--radius);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-soft);
}

.auth-tabs__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1rem;
    /* Moderate radius — rounded-rect tab, not a full pill (owner request). */
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    /* Sentence case ("Sign in" / "Sign up") — no uppercasing. */
    text-transform: none;
    color: var(--c-ink-muted);
    transition: color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.auth-tabs__tab:hover,
.auth-tabs__tab:focus-visible {
    color: var(--c-ink);
    background: var(--c-hover-tint);
}

.auth-tabs__tab.is-active,
.auth-tabs__tab.is-active:hover {
    color: var(--c-bg);
    background: var(--c-ink);
    box-shadow: var(--shadow-soft);
}

/* Panel card surface */
.auth-panel {
    padding: clamp(1.5rem, 5vw, 2rem) clamp(1.25rem, 4.5vw, 1.75rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
}

/* Panel visibility — the tabs toggle which panel shows. The login
   panel is visible by default so the UI stays usable and flash-free
   if JS never runs. Once the host adds `.auth-page--js` (login page)
   the active panel is driven entirely by `.is-active`. The modal
   variant drives visibility the same way, scoped to `.auth-modal`. */
.auth-panel {
    display: none;
}

.auth-panel--login {
    display: block;
}

.auth-page--js .auth-panel {
    display: none;
}

.auth-page--js .auth-panel.is-active {
    display: block;
}

/* Form rows — vertical rhythm between fields */
.auth-panel .payment-form .form-row {
    margin-bottom: 0.85rem;
}

/* Submit row sits a touch lower, has no trailing gap, and the
   button spans the full card width. */
.auth-panel .payment-form .form-row:last-child {
    margin-top: 1.1rem;
    margin-bottom: 0;
}

.auth-panel .payment-form button[type="submit"] {
    width: 100%;
    /* Sentence case (not ALL CAPS) for the Sign in / Sign up buttons. */
    text-transform: none;
    /* Moderate rounded-rect, not a full capsule (owner request). Scoped to
       the auth panels so the global pill button elsewhere is untouched. */
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------
   Join the tab bar to the form panel — one connected card.
   The login PAGE renders the tabs directly above the active panel, so
   square the touching edges and drop the gap/seam so the two read as a
   single unit (owner request). Scoped to the page; the score-auth popup
   (whose tabs are followed by a lead line) is handled in its own block
   under [marker: score-auth-modal].
   ------------------------------------------------------------- */
.auth-page:not(.score-auth-modal__panels) .auth-tabs {
    margin-bottom: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.auth-page:not(.score-auth-modal__panels) .auth-panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* -------------------------------------------------------------
   Auth modal (global)  [marker: core-auth-modal]
   Reusable in-page sign-in gate: a fixed, blurred-backdrop overlay
   hosting the shared .auth-tabs / .auth-panel UI above. Hidden by
   default; shown by toggling `.is-open` (and `body.auth-modal-open`
   to lock background scroll) from page JS.
   ------------------------------------------------------------- */
.auth-modal,
.captcha-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    background: var(--c-overlay);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease),
        visibility 0s linear var(--t-med);
}

/* The captcha modal must sit ABOVE every other modal so the gate still works
   when it’s triggered from inside one (login / area / dashboard). The real
   guest sign-in modal (.score-auth-modal) uses z-index: 12000, so the captcha
   must clear that — anything lower lets the login modal cover the puzzle. */
.captcha-modal {
    z-index: 13000;
}

.auth-modal.is-open,
.captcha-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-med) var(--ease),
        visibility 0s;
}

.auth-modal__card,
.captcha-modal__card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 2 * clamp(1rem, 4vw, 2rem));
    /* Allow vertical scroll for tall content, but clip any horizontal
       overflow so an over-wide child (e.g. the captcha) can never spawn a
       bottom scrollbar on the card. */
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(1.85rem, 5.5vw, 2.5rem) clamp(1.25rem, 4.5vw, 1.85rem);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius);
    background: var(--c-panel-strong);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow);
}

/* In-modal panel visibility — same mechanism as the login page, but
   keyed off the modal container so no `.auth-page--js` flag is needed. */
.auth-modal .auth-panel {
    display: none;
    border: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.auth-modal .auth-panel.is-active {
    display: block;
}

.auth-modal__title {
    /* Hidden — the Sign in / Sign up tabs below already label the modal,
       so a separate heading is redundant. Tabs stay normal sentence case. */
    display: none;
}

/* Tasteful × close button, pinned top-right of the card. */
.auth-modal__close,
.captcha-modal__close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: var(--c-ink-muted);
    background: var(--c-field-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.auth-modal__close:hover,
.captcha-modal__close:hover {
    color: var(--c-ink);
    background: var(--c-hover-tint-strong);
    border-color: var(--c-line-strong);
    transform: rotate(90deg);
}

.auth-modal__close:focus-visible,
.captcha-modal__close:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.auth-modal__close svg,
.captcha-modal__close svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Lock background scroll while a modal is open (toggled via JS). The captcha
   modal uses its own class so closing it never unlocks the page while the
   auth modal underneath is still open. */
body.auth-modal-open,
body.captcha-modal-open {
    overflow: hidden;
}

/* Mobile keyboard fix: the on-screen keyboard overlays the bottom of the
   viewport, so a vertically-centred card gets hidden behind it once an input
   is focused (it "covers half the page"). On touch devices pin the sign-in
   card to the TOP instead — its fields stay visible above the keyboard and the
   card itself scrolls (overflow-y:auto, dvh-capped) for anything below.
   Pointer:coarse also covers phones in landscape. */
@media (pointer: coarse) {
    .auth-modal {
        align-items: flex-start;
    }
}

/* Entrance — backdrop fade (above) + card scale/translate rise. */
@media (prefers-reduced-motion: no-preference) {
    .auth-modal__card,
    .captcha-modal__card {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
        transition: opacity var(--t-med) var(--ease),
            transform var(--t-med) var(--ease);
    }

    .auth-modal.is-open .auth-modal__card,
    .captcha-modal.is-open .captcha-modal__card {
        opacity: 1;
        transform: none;
    }
}

/* Captcha modal specifics — a compact card sized to the puzzle, with a small
   visible title (the auth modal hides its title in favour of its tabs). */
.captcha-modal__card {
    max-width: 360px;
    text-align: center;
}

.captcha-modal__title {
    margin: 0 0 1rem;
    padding-right: 1.6rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--c-ink);
    text-align: left;
}

.captcha-modal .slide-captcha-mount {
    display: flex;
    justify-content: center;
}

/* -------------------------------------------------------------
   Back button (global) — injected at the top of .content by
   js/back-button.js; left-aligned via its own flex bar so it
   isn't affected by the centered .content text-align.
   ------------------------------------------------------------- */
.back-bar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: clamp(0.9rem, 3vw, 1.4rem);
}

.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    font-family: var(--font-body);
    color: var(--c-ink-soft);
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.back-btn:hover {
    color: var(--c-ink);
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
    transform: translateY(-1px);
}

.back-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

.back-btn > span {
    font-size: 1.55rem;
    line-height: 1;
    /* Optical centering — the arrow glyph sits slightly high in its box. */
    margin-top: -0.06em;
}

/* -------------------------------------------------------------
   10b. Page load motion
   Per-page *-rise entrances (staggered opacity+translateY with
   animation-fill-mode: both) clashed with non-render-blocking stylesheets:
   the shell painted from critical.css, then full CSS arrived and every block
   snapped to opacity:0 and popped in one-by-one. Retire those here and run
   one short settle on the main column after styles are ready (see header.php).
   Interactive animations (menus, lightbox, captcha) are untouched.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .content > .general-ttl,
    .content > .simple-switch,
    .content > .default-page-content,
    .content > .city-list,
    .content > .home-notice,
    .content > .order-history-page,
    .content > .page-content,
    .content > .page-content > ul.woocommerce-order-overview,
    .content > .page-content > #kcrypto-order-status,
    .product-list li,
    .select-list.area-list li,
    .list-view .item,
    .rules-page,
    .page-content > h1,
    .page-content > .order_details,
    .page-content > #thankyou_order_message_2,
    .page-content > #status-gallery,
    .order-details-container,
    .auth-page .auth-tabs,
    .auth-page .auth-panel--login,
    .review-form-page .new-review-form,
    .payment-form.new-review-form:has(.field-reviewform-pin),
    .content:has(.coupon-redeem) > .general-ttl,
    .content:has(.coupon-redeem) > .admin-notice.lighter,
    .content:has(.coupon-redeem) > .content.active,
    .content:has(form.payment-form.top-up) > .general-ttl,
    .content:has(form.payment-form.top-up) > .admin-notice.lighter:first-of-type,
    .content:has(form.payment-form.top-up) > .admin-notice.lighter:last-of-type,
    .content:has(form.payment-form.top-up) > .content.active,
    .ticket-list .ticket-row,
    .thread .msg,
    .ticket-form .field,
    .ticket-form__actions {
        animation: none !important;
        animation-delay: 0 !important;
    }

    html.styles-ready .wrapper > .content {
        animation: kfc-page-in 0.34s var(--ease) forwards;
    }
}

@keyframes kfc-page-in {
    from {
        opacity: 0.96;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------
   11. Motion preferences
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
   12. Live-runtime components (folded in from the former kfc-compat.css)
   These style components rendered ONLY by live prod templates that the
   static mockups never contained, so they live here in the SSOT now
   (kfc-compat.css has been retired). Every selector below is unique to
   these components and does not appear elsewhere in core.css or the page
   stylesheets, so the rules are purely additive (no cascade fights) and
   are inert on pages that don't use them (e.g. the static mockups).
   Token-based, so correct in light + dark.

     - guest sign-in modal (.score-auth-modal*, score-auth-modal.js)
     - guest auth gate (.score-auth-gate / .score-auth-actions)
     - score flow step-switch (.simple-switch.score-switch-step-switch)
     - order / checkout details list (.order-details*)
     - server-driven (no-JS) auth tab fallback
   ============================================================= */

/* Legacy token bridge — old variable names still referenced by a few of
   the carried rules. core.css already bridges --primary / --smoke-* above;
   these cover the two it does not otherwise define. */
:root {
    --accent: var(--c-accent);
    --secondary: var(--c-bg);
}

/* Auth tab panels — server-driven (no-JS) fallback. core.css shows the
   login panel by default and otherwise relies on a JS .is-active flag; the
   prod login page also switches tabs via the URL (?tab=register sets
   .auth-page--register on the wrapper), so these keep the correct panel
   visible before/without JS. (With JS, core's higher-specificity
   .auth-page--js rules win.) */
.auth-page--login .auth-panel--register {
    display: none;
}

.auth-page--register .auth-panel--login {
    display: none;
}

.auth-page--register .auth-panel--register {
    display: block;
}

/* Guest auth gate (score checkout funnel, logged-out users) */
.score-auth-gate {
    max-width: min(100%, 520px);
    margin: 1rem auto 0;
    padding: clamp(1.1rem, 4vw, 1.5rem) clamp(1rem, 4vw, 1.25rem);
    background: var(--c-panel);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.score-auth-gate p {
    margin: 0 0 1rem;
    font-size: 1.02em;
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.score-auth-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}

/* Score flow step switch (product <-> area) — a functional control on the
   live site, so it stays visible. */
.simple-switch.score-switch-step-switch {
    --size: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    margin: -0.25rem auto 1.1rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.simple-switch.score-switch-step-switch::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-top: 2px solid var(--c-ink-soft);
    border-left: 2px solid var(--c-ink-soft);
    transform: rotate(-45deg);
    margin-left: 0.18rem;
}

.simple-switch.score-switch-step-switch.right::before {
    transform: rotate(135deg);
    margin-left: -0.18rem;
}

.simple-switch.score-switch-step-switch:hover {
    border-color: var(--c-line-hover);
    background: var(--c-panel-strong);
    transform: translateY(-1px);
}

/* Old-predrop discount badge on area/product tiles */
.op-discount {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    z-index: 3;
    padding: 0.18rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--c-overlay-surface-strong);
    border: 1px solid var(--c-overlay-line);
    color: var(--c-overlay-ink);
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Availability action buttons in switch-step product cards */
.product .actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem 0.65rem;
}

.product .actions a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-ink);
    background: var(--c-field-bg);
}

.product .actions a.shp {
    background: var(--c-ink);
    color: var(--c-on-accent);
    border-color: var(--c-ink);
}

.product .pdunavailable,
.product .pdavailable {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 3;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Order / checkout details list (score confirmation step, order tracking,
   thank-you page) */
.order-details-container {
    width: min(100%, 640px);
    margin: 0 auto;
    text-align: left;
}

.order-details {
    margin: 0 0 1rem;
    padding: 0;
    text-align: left;
    font-size: clamp(0.95rem, 3vw, 1.05rem);
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.order-details li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-line);
}

.order-details li b {
    color: var(--c-ink);
}

.order-details li span {
    color: var(--c-ink-soft);
    text-align: right;
}

.booking-cancel-in-notice,
.url-notice-line1,
.url-notice-line2 {
    margin: 0.6rem auto 0;
    max-width: 640px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--c-ink-muted);
}

.url-notice-line2 a {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Real guest sign-in modal (inc-score-guest-auth.php + score-auth-modal.js).
   A token-driven overlay dialog: a light frosted card in day mode and a dark
   card in night mode, consistent with the rest of the site (owner request —
   it previously hardcoded a dark surface that read wrong in light mode). The
   tabs/fields inside reuse the shared .auth-tabs / .auth-panel /
   .field-loginform-verifycode components already styled above. */
body.score-auth-modal-open {
    overflow: hidden;
}

.score-auth-modal[hidden] {
    display: none !important;
}

.score-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Mobile keyboard fix (see .auth-modal note above): top-align the guest card on
   touch devices so the on-screen keyboard can't hide the centred fields. */
@media (pointer: coarse) {
    .score-auth-modal {
        align-items: flex-start;
    }
}

.score-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.score-auth-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-height: min(92vh, 760px);
    /* dvh tracks the visible viewport so the card shrinks (and scrolls) when the
       mobile keyboard opens instead of being clipped. */
    max-height: min(92dvh, 760px);
    /* Vertical scroll only when tall; never a horizontal bar (backstop — the
       content is sized to fit exactly; the real overflow culprit, the hidden
       captcha input, is fixed at [marker: core-slide-captcha]). */
    overflow-x: hidden;
    overflow-y: auto;
    /* Extra top padding reserves a clean band for the corner × so it never
       overlaps the Σύνδεση/Εγγραφή tab bar. */
    padding: 3.5rem clamp(1.25rem, 4.5vw, 1.75rem) clamp(1.5rem, 5vw, 2rem);
    border-radius: var(--radius);
    background: var(--c-panel-strong);
    border: 1px solid var(--c-line-strong);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow);
    color: var(--c-ink);
}

.score-auth-modal__close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    background: var(--c-field-bg);
    color: var(--c-ink-soft);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
}

.score-auth-modal__close:hover,
.score-auth-modal__close:focus-visible {
    background: var(--c-hover-tint-strong);
    border-color: var(--c-line-hover);
    color: var(--c-ink);
}

.score-auth-modal__close:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.score-auth-modal__lead {
    margin: .25rem 0 1.25rem;
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.score-auth-modal__error {
    margin-bottom: 0.85rem;
}

.score-auth-modal__captcha-refresh {
    margin-left: 0.4rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-field-bg);
    color: var(--c-ink);
    cursor: pointer;
}

/* In-modal tab panel visibility (score-auth-modal.js toggles
   .auth-page--login / .auth-page--register on the panels wrapper). */
.score-auth-modal__panels.auth-page--login .auth-panel--register,
.score-auth-modal__panels.auth-page--register .auth-panel--login {
    display: none;
}

.score-auth-modal__panels.auth-page--login .auth-panel--login,
.score-auth-modal__panels.auth-page--register .auth-panel--register {
    display: block;
}

/* The modal hosts the shared auth tabs as <button>s; neutralise the UA
   button chrome so they match the core.css pill tabs. */
.score-auth-modal__tabs .auth-tabs__tab {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.score-auth-modal__tabs .auth-tabs__tab.is-active {
    color: var(--c-bg);
    background: var(--c-ink);
}

/* Popup: tabs + form read as one card inside the dialog (owner request — no
   floating-pill gap). The tab bar sits a short space above the lead/form, and
   the inner .auth-panel card chrome is stripped so the form merges into the
   dialog surface (same treatment as .auth-modal .auth-panel). */
.score-auth-modal__tabs {
    margin-bottom: 0.9rem;
}

.score-auth-modal .auth-panel {
    border: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}