/* Google Fonts Inter is loaded via <link> in header_customer.php / header_admin.php.
   @import removed to avoid double-fetch and render-blocking delay. */

:root {
    /* === Komorebi Matcha Gallery Theme Tokens === */
    
    /* Surfaces */
    --matcha:        #7FA85B;
    --matcha-rgb:    127, 168, 91;
    --matcha-light:  #95BD6F;
    --matcha-pale:   #EEF3E6;
    --matcha-dark:   #5F873F;
    --matcha-deep:   #1F3A2E;
    --cream:         #F9FAF4;
    --cream-dark:    #EEF3E6;
    --brown:         #B08A3C;
    --brown-light:   #c4a27a;
    --white:         #ffffff;
    --white-rgb:     255, 255, 255;
    
    /* Text */
    --text-dark:     #18251D;
    --text-body:     #344437;
    --text-muted:    #687667;
    --text-faint:    #879383;
    
    /* Borders */
    --border:        #DDE7D2;
    --border-light:  #E8EFE0;
    
    /* Glass (simplified — no heavy blur) */
    --glass-bg:      rgba(255, 255, 255, 0.58);
    --glass-bg-solid: rgba(255, 255, 255, 0.85);
    --glass-border:  1px solid rgba(255, 255, 255, 0.5);
    --glass-border-light: 1px solid #E8EFE0;
    --glass-blur:    blur(12px);
    --glass-shadow:  0 18px 50px rgba(31,58,46,0.08);

    /* Semantic */
    --danger:        #B85B50;
    --danger-strong: #c0392b;
    --danger-soft:   #fde8e6;
    --warning-text:  #B08A3C;
    --warning-soft:  #fef3cd;
    --info:          #668E7A;
    --info-text:     #344437;
    --info-soft:     #e8f4ed;
    --info-border:   #668E7A;
    --success-soft:  #DCEBCB;
    --success-text:  #5F873F;
    --muted-surface: #F6F8F1;
    
    /* Shadows — minimal */
    --shadow-sm:     0 0 0 1px rgba(24,37,29,0.08);
    --shadow:        0 18px 50px rgba(31,58,46,0.08);
    --shadow-lg:     0 18px 55px rgba(31,58,46,0.16);
    
    /* Radius */
    --radius-sm:     10px;
    --radius:        20px;
    --radius-lg:     28px;
    --radius-full:   999px;
    
    /* Motion — Apple-style */
    --transition:    0.2s cubic-bezier(.2,.8,.2,1);
    --dur-fast:      160ms;
    --dur-normal:    260ms;
    --ease-out-expo: cubic-bezier(.16,1,.3,1);
    
    /* Layout */
    --max-width:     1120px;
    --nav-height:    64px;
    --header-total-height: var(--nav-height);
    --hero-safe-bottom: max(2rem, env(safe-area-inset-bottom, 0px) + 1.5rem);

    /* =======================================================================
       Liquid Glass Design Tokens (appended — see design.md § Fix Implementation #1)
       NOTE: append-only. Existing tokens above this block are untouched.
       ======================================================================= */

    /* ——— Liquid Glass: tint layers ——— */
    --glass-tint-light:   rgba(255, 255, 255, 0.55);
    --glass-tint-light-2: rgba(255, 255, 255, 0.35);
    --glass-tint-dark:    rgba(12, 24, 18, 0.45);
    --glass-tint-dark-2:  rgba(12, 24, 18, 0.28);
    --glass-tint-matcha:  rgba(var(--matcha-rgb), 0.22);

    /* ——— Liquid Glass: specular gradients ——— */
    --glass-specular-top:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.08) 42%,
            rgba(255, 255, 255, 0) 100%);
    --glass-specular-edge:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0) 28%,
            rgba(255, 255, 255, 0) 72%,
            rgba(255, 255, 255, 0.18) 100%);

    /* ——— Liquid Glass: blur + saturate scale ——— */
    /* --glass-blur-md is aliased to existing --glass-blur value */
    --glass-blur-xs: blur(8px)  saturate(150%);
    --glass-blur-sm: blur(14px) saturate(170%);
    --glass-blur-md: blur(20px) saturate(180%);
    --glass-blur-lg: blur(30px) saturate(190%);
    --glass-blur-xl: blur(44px) saturate(200%);

    /* ——— Liquid Glass: shadow stack ——— */
    --glass-shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.04);
    --glass-shadow-key:     0 10px 30px rgba(0, 0, 0, 0.08);
    --glass-shadow-lift:    0 18px 48px rgba(0, 0, 0, 0.12);
    --glass-shadow-stack:   var(--glass-shadow-ambient), var(--glass-shadow-key);
    --glass-shadow-hover:   var(--glass-shadow-ambient), var(--glass-shadow-lift);

    /* ——— Motion: easing curves ——— */
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ——— Motion: duration scale ——— */
    --dur-instant: 80ms;
    --dur-fast:    160ms;
    --dur-base:    240ms;
    --dur-slow:    360ms;
    --dur-page:    480ms;

    /* ——— Breakpoint scale (reference tokens; @media uses literal px values) ——— */
    --bp-xs:  360px;
    --bp-sm:  480px;
    --bp-md:  600px;
    --bp-lg:  768px;
    --bp-xl:  1024px;
    --bp-2xl: 1280px;
    --bp-3xl: 1440px;
    --bp-4xl: 1920px;

    /* ——— Container scale ——— */
    --container-pad:      clamp(1rem, 2.5vw, 2rem);
    --container-max:      1200px;
    --admin-content-max:  1440px;

    /* ——— Focus ring ——— */
    --focus-ring:         0 0 0 3px rgba(var(--matcha-rgb), 0.28);
    --focus-ring-outline: 2px solid var(--matcha);
    --focus-ring-offset:  2px;
}

/* Reduced-motion override — collapses duration scale to 0ms so every
   component that wires its transitions through --dur-* becomes non-animated.
   Does NOT touch --transition (legacy token) to preserve existing components
   that rely on it verbatim. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-instant: 0ms;
        --dur-fast:    0ms;
        --dur-base:    0ms;
        --dur-slow:    0ms;
        --dur-page:    0ms;
    }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-behavior moved to liquid.css; overscroll-behavior-y removed
   (broke iOS Safari rubber-band). */

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #F6F8F1;
    color: var(--text-body);
    line-height: 1.6;
    font-size: 1rem;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-anchor: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    line-height: 1.2;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { color: var(--text-body); }

.section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--matcha);
    margin-bottom: 0.5rem;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.section    { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 550;
    border-radius: var(--radius-full);
    transform: translateY(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform var(--dur-fast) cubic-bezier(.32,.72,0,1),
                background-color 0.18s ease,
                color 0.18s ease,
                border-color 0.18s ease;
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
    line-height: 1;
}
.btn-primary { background-color: var(--matcha); color: var(--white); border-color: var(--matcha); }
.btn-primary:hover { background-color: var(--matcha-light); border-color: var(--matcha-light); }
.btn-secondary { background-color: transparent; color: var(--matcha-dark); border-color: var(--border); }
.btn-secondary:hover { background-color: var(--matcha-pale); border-color: var(--matcha-dark); }
.btn-cream { background-color: var(--cream); color: var(--text-dark); border-color: var(--border); }
.btn-cream:hover { background-color: var(--cream-dark); transform: translateY(-1px); }
.btn-danger { background-color: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background-color: var(--danger-soft); }
.btn-sm    { padding: 0.5rem 1.25rem; font-size: 0.8rem; }
.btn-lg    { padding: 1rem 2.5rem; font-size: 0.95rem; }
.btn-block { width: 100%; }
.btn:active {
    transform: scale(0.96);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-dark); margin-bottom: 0.4rem; }
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    background-color: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.form-control:focus { border-color: var(--matcha); box-shadow: 0 0 0 3px rgba(74,124,89,0.12); }
.form-control::placeholder { color: var(--text-muted); }
select.form-control { appearance: none; cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 90px; }

.card { 
    background: var(--glass-bg-solid); 
    backdrop-filter: var(--glass-blur); 
    -webkit-backdrop-filter: var(--glass-blur); 
    border: var(--glass-border-light); 
    border-radius: var(--radius); 
    padding: 1.5rem; 
    box-shadow: var(--glass-shadow); 
}

.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: 0.72rem; font-weight: 600; border-radius: var(--radius-full); letter-spacing: 0.03em; }
.badge-pending    { background: var(--warning-soft); color: var(--warning-text); }
.badge-processing { background: #cfe2ff; color: #0a58ca; }
.badge-completed  { background: var(--matcha-pale); color: var(--matcha-dark); }
.badge-cancelled  { background: var(--danger-soft); color: var(--danger); }

.divider { border: none; border-top: 1px solid var(--border-light); margin: 1.5rem 0; }

.alert { padding: 0.875rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; margin-bottom: 1rem; }
.alert-success { background: var(--success-soft); color: var(--success-text); border-left: 3px solid var(--matcha); }
.alert-error   { background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger-strong); }
.alert-info    { background: var(--info-soft); color: var(--info-text); border-left: 3px solid var(--info); }

.u-mb-0 { margin-bottom: 0; }
.u-mt-sm { margin-top: 0.5rem; }
.u-mt-md { margin-top: 1.25rem; }
.u-mt-xl { margin-top: 3rem; }
.u-my-sm { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.u-center { text-align: center; }
.u-form-row { gap: 1rem; }
.u-form-inline { margin: 0; }
.u-inline { display: inline; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }
.u-gap-xs { gap: 0.4rem; }
.u-gap-sm { gap: 0.5rem; }
.u-gap-lg { gap: 4rem; }
.u-align-center { align-items: center; }
.u-hidden { display: none; }
.u-contents { display: contents; }
.u-shrink-0 { flex-shrink: 0; }
.u-nowrap { white-space: nowrap; }
.u-center-block { margin-inline: auto; }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-overflow { overflow: hidden; }
.cell-empty { text-align: center; }
.empty-note { text-align: center; color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-muted); }
.text-matcha { color: var(--matcha); }
.font-semibold { font-weight: 600; }
.is-muted-disabled { opacity: 0.55; cursor: not-allowed; }
.is-checkout-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    text-align: center;
}

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 769px) and (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .section { padding: 3.5rem 0; } .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* =======================================================================
   Liquid Glass Recipe Utilities + Global Motion/Focus Primitives
   Appended per design.md § Fix Implementation #2.
   Rules:
     - Append-only. No existing selectors renamed or removed.
     - .btn / .card / .form-control base rules above are augmented via
       later-cascading overrides here; hover/active end-states preserved.
     - Principle: iOS Liquid Glass animates motion (transform, opacity,
       filter), not color. Color changes snap.
   ======================================================================= */

/* ——— .glass base recipe ——— */
.glass {
    position: relative;
    isolation: isolate;
    background: var(--glass-tint-light);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow-stack);
}

/* Top specular highlight — simulates light catching the upper edge. */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-specular-top);
    opacity: 0.9;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

/* Edge specular — 1px "rim light" via mask-composite cutout so the
   gradient renders only on the border ring, not across the body. */
.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-specular-edge);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.glass > * { position: relative; z-index: 1; }

/* ——— .glass variants ——— */
.glass[data-glass="dark"] {
    background: var(--glass-tint-dark);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f3f6f3;
}
.glass[data-glass="matcha"] {
    background: linear-gradient(180deg,
        var(--glass-tint-matcha),
        var(--glass-tint-light-2));
}
.glass[data-glass-blur="sm"] {
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
}
.glass[data-glass-blur="lg"] {
    backdrop-filter: var(--glass-blur-lg);
    -webkit-backdrop-filter: var(--glass-blur-lg);
}

/* ——— Fallback for browsers without backdrop-filter support ——— */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass                        { background: var(--glass-bg-solid); }
    .glass[data-glass="dark"]     { background: #263b30; }
    .glass[data-glass="matcha"]   { background: var(--matcha-pale); }
}

/* ——— Global :focus-visible ring ———
   Keyboard-only focus gets a matcha outline + ring. Suppress the default
   browser outline on mouse-click button focus. */
:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring);
}
button:focus:not(:focus-visible) {
    outline: none;
}

/* ——— .btn migration: compositor-only base transition + specular overlay ———
   Only transform is transitioned on the base rule. Variant hover end-states
   (.btn-primary:hover etc.) still apply their color/shadow/translate
   changes — color/border-color/box-shadow simply snap instead of easing,
   while transform rides the animation. ::before at z-index:-1 under an
   isolation boundary gives a subtle specular lift on hover without
   covering inline text (which is common for .btn-primary/.btn-secondary). */
.btn {
    position: relative;
    isolation: isolate;
    transition: transform var(--dur-fast) var(--ease-out-expo);
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    display: none;
}
.btn > *                { position: relative; z-index: 1; }
.btn:hover::before      { display: none; }
.btn:active::before     { opacity: 0.35; }
.btn:disabled::before   { opacity: 0; }

/* ——— .card migration: stacked shadow + specular pseudo-elements ———
   Keeps the existing .card background/backdrop-filter/padding; only the
   shadow token is refreshed and two specular pseudos are layered below
   content. */
.card {
    position: relative;
    isolation: isolate;
    box-shadow: var(--glass-shadow-stack);
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-specular-top);
    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-specular-edge);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}
.card > * { position: relative; z-index: 1; }

/* ——— .form-control focus transition ———
   Intentional exception: form field focus IS animated with color-ish
   properties (border-color, box-shadow) because it aids learnability
   (Apple HIG). Existing :focus end-state above is preserved; only the
   transition timing is upgraded to --dur-fast + --ease-out-expo. */
.form-control {
    transition: border-color var(--dur-fast) var(--ease-out-expo),
                box-shadow   var(--dur-fast) var(--ease-out-expo);
}