/* =====================================================================
   Double Play — Design System foundation (Figma "Review File" redesign)
   Node ref: 7LOGJiAZwUDhikt4TbYYcx  (Home / Member 3:299)

   COORDINATE SYSTEM: this site authors CSS in a 750px logical canvas
   (basic.js reset_win: aw = 750; body.winRq is transform:scale(deviceW/750)).
   The Figma frame is 402px wide, so every Figma px is multiplied by
   750/402 ≈ 1.866 to live in the same coordinate space as the rest of
   the site. All lengths below are therefore in "750-space" px.

   Loaded AFTER color.css. Classes are prefixed `ds-` to avoid clashes.
   ===================================================================== */

:root {
    /* -- Brand / primary -- */
    --ds-primary: #685c20;          /* primary/main (Pantone 3995C) */
    --ds-dark: #191818;             /* 副色：guideline 深色底（品牌面一律 flat primary，唔再用漸變） */
    --ds-primary-bright: #b09b36;   /* antique-gold accent（只做 accent，唔入漸變） */
    --ds-primary-soft: #e7dea9;     /* primary/soft-main */
    --ds-primary-tint: #f9f6e8;     /* primary/soft-hover (very light bg) */
    --ds-brand-gradient: var(--ds-primary); /* flat solid per client feedback 2026-08-12 */

    /* -- Supporting accents (used to keep the app from feeling all-blue) -- */
    --ds-coral: #ef6f61;
    --ds-coral-soft: #fff0ed;
    --ds-gold: #d7951b;
    --ds-gold-soft: #fff3d6;
    --ds-mint: #238c75;
    --ds-mint-soft: #e6f6f1;
    --ds-lilac: #7559b7;
    --ds-lilac-soft: #f1edfb;

    /* -- Surfaces -- */
    --ds-surface: #ffffff;          /* surface/card */
    --ds-bg: #faf7ea;               /* meeting-approved EFF6FF light-blue page background */
    --ds-bg-secondary: #f2eed6;     /* subtle divider/secondary surface; lighter than DBEAFE */
    --ds-media-bg: #eeeeee;         /* 產品去背相統一灰色底（client feedback 2026-08 p.3）*/
    --ds-logo-tint: #eae8df;        /* 商戶/優惠券 logo 統一托底（client feedback 2026-08 pp.5-6）*/

    /* -- Text (slate scale) -- */
    --ds-text: #2f2a10;             /* meeting-approved deep navy primary text */
    --ds-text-secondary: #4a4219;   /* deep-blue secondary text */
    --ds-text-tertiary: #878268;    /* neutral/tertiary-foreground */
    --ds-text-muted: #6b7280;       /* neutral/muted-foreground */
    --ds-placeholder: #b4b098;      /* surface/field-placeholder */

    /* -- Lines / status -- */
    --ds-border: #eaeae6;           /* utils/border */
    --ds-danger: #b91c1c;           /* utils/danger */
    --ds-on-primary: #ffffff;

    /* -- Radii (750-space) -- */
    --ds-radius-sm: 18px;
    --ds-radius: 30px;
    --ds-radius-lg: 38px;
    --ds-radius-pill: 999px;

    /* -- Elevation (blur scaled ~1.8x) -- */
    --ds-shadow-100: 0 2px 8px rgba(12, 12, 13, .06);
    --ds-shadow-card: 0 11px 34px rgba(28, 24, 6, .07);
    --ds-shadow-nav: 0 -8px 38px rgba(28, 24, 6, .08);

    /* -- Type families -- */
    --ds-font: "Noto Sans HK", "PingFang HK", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
    --ds-font-num: "Google Sans", "Google Sans Flex", "Roboto", var(--ds-font);
}

/* =========================== Base ================================= */
.ds-app {
    font-family: var(--ds-font);
    color: var(--ds-text);
    background: var(--ds-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ds-num {
    font-family: var(--ds-font-num);
    font-feature-settings: "tnum" 1;
    letter-spacing: -1px;
}

/* Dual-price block (Figma RedeemProdCard): HK$ … / 或 🪙 … pt.
   Shared by Home 兌換券專享 and the Products (兌換) grid. */
.rp-price { font-family: var(--ds-font-num); }
.rp-hk { color: var(--ds-text-secondary); font-size: 26px; line-height: 31px; }
.rp-pt {
    display: flex; align-items: center; gap: 6px;
    color: var(--ds-text-secondary); font-size: 26px; line-height: 31px; margin-top: 2px;
}
.rp-coin {
    width: 33px; height: 33px; flex: 0 0 33px;
    background: url("/images/redesign/gift-icon.png") center/contain no-repeat;
}

/* Typography helpers mapped to Figma text styles (×1.866) */
.ds-h3        { font-size: 41px; line-height: 52px; font-weight: 600; letter-spacing: -1px; }
.ds-headline  { font-size: 32px; line-height: 41px; font-weight: 500; }
.ds-body      { font-size: 30px; line-height: 45px; font-weight: 400; }
.ds-body-med  { font-size: 30px; line-height: 45px; font-weight: 500; }
.ds-body2     { font-size: 26px; line-height: 37px; font-weight: 400; }
.ds-caption   { font-size: 22px; line-height: 30px; font-weight: 400; }
.ds-muted     { color: var(--ds-text-tertiary); }

/* ====================== App header (blue) ========================= */
.ds-header {
    position: relative;
    /* flat solid brand surface per client feedback 2026-08-12 */
    background: var(--ds-primary);
    color: var(--ds-on-primary);
    padding: 37px 37px 86px;
    border-radius: 0 0 67px 67px;
    overflow: hidden;
}
/* 裝飾 blob 已剷（client feedback 2026-08-12：header 淨色無紋理）*/

.ds-header-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}
.ds-header-greet { font-size: 28px; line-height: 37px; opacity: .92; }
.ds-header-points {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 11px;
    text-decoration: none;
    color: inherit;
}
.ds-header-points .ds-coin {
    width: 41px; height: 41px; flex: 0 0 41px;
    background: url("/images/redesign/gift-icon.png") center/contain no-repeat;
}
.ds-header-points .ds-pts-val { font-size: 45px; line-height: 48px; font-weight: 600; }
.ds-header-points .ds-pts-unit { font-size: 26px; opacity: .9; margin-left: 4px; }
.ds-header-points .ds-chevron { opacity: .85; font-size: 30px; margin-left: 4px; }

.ds-header-actions { display: flex; gap: 22px; }
.ds-icon-btn {
    position: relative;
    width: 75px; height: 75px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    text-decoration: none;
}
.ds-icon-btn svg { width: 38px; height: 38px; }
.ds-icon-btn .ds-dot {
    position: absolute; top: 15px; right: 17px;
    width: 15px; height: 15px; border-radius: 50%;
    background: #ff3b30; border: 3px solid #fff;
}

/* Search bar — overlaps the bottom of the header */
.ds-search {
    position: relative;
    z-index: 2;
    margin: -48px 30px 0;
    height: 86px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 30px;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-pill);
    box-shadow: var(--ds-shadow-card);
    color: var(--ds-placeholder);
    font-size: 26px;
    text-decoration: none;
}
.ds-search svg { width: 34px; height: 34px; color: var(--ds-text-tertiary); flex: 0 0 34px; }

/* ============================ Cards =============================== */
.ds-card {
    background: var(--ds-surface);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-card);
}

/* Section heading + optional "view all" */
.ds-section {
    padding: 0 30px;
    margin-top: 45px;
}
.ds-section-head {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}
.ds-section-head .ds-title {
    font-size: 38px; line-height: 48px; font-weight: 600;
    color: var(--ds-text);
}
.ds-section-head .ds-more {
    margin-left: auto;
    color: var(--ds-text-tertiary);
    font-size: 24px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}

/* A blue "banner" style section header (兌換券專享) */
.ds-banner-head {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 90px;
    padding: 0 30px;
    border-radius: var(--ds-radius);
    background: var(--ds-brand-gradient);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--ds-shadow-card);
    overflow: hidden;
}
.ds-banner-head .ds-bh-title { font-size: 32px; font-weight: 600; }
.ds-banner-head .ds-bh-icon { width: 48px; height: 48px; }
.ds-banner-head .ds-bh-arrow { margin-left: auto; opacity: .9; }

/* ============================ Buttons ============================= */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    height: 90px;
    padding: 0 41px;
    border: none;
    border-radius: var(--ds-radius-pill);
    font-size: 30px;
    font-weight: 500;
    font-family: var(--ds-font);
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease, transform .05s ease;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--ds-primary); color: #fff; }
.ds-btn--primary:hover { filter: brightness(1.05); }
.ds-btn--gradient { background: var(--ds-brand-gradient); color: #fff; }
.ds-btn--ghost {
    background: var(--ds-surface);
    color: var(--ds-primary);
    box-shadow: inset 0 0 0 2px var(--ds-border);
}
.ds-btn--block { width: 100%; }

/* ========================= Pill tabs (chips) ===================== */
.ds-tabs {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
    flex: 0 0 auto;
    height: 64px;
    padding: 0 30px;
    display: inline-flex; align-items: center;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-text-tertiary);
    font-size: 26px;
    box-shadow: inset 0 0 0 2px var(--ds-border);
    cursor: pointer;
    white-space: nowrap;
}
.ds-tab.is-active {
    background: var(--ds-primary);
    color: #fff;
    box-shadow: none;
}

/* ===================== Bottom tab navigation ===================== */
/* `.footer.ds-bottom-nav` (0,2,0) intentionally out-specifies legacy
   `.footer` rules in pub.css (0,1,0), which load later in the cascade. */
.footer.ds-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    height: 119px;
    display: flex;
    align-items: stretch;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-nav);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ds-bottom-nav .ds-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ds-text-tertiary);
    text-decoration: none;
    font-size: 21px;
    line-height: 1.1;
}
.ds-bottom-nav .ds-nav-item svg { width: 45px; height: 45px; }
/* .atc is the legacy active class set by per-page JS; keep it in sync */
.ds-bottom-nav .ds-nav-item.is-active,
.ds-bottom-nav .ds-nav-item.atc { color: var(--ds-primary); font-weight: 600; }

/* Center elevated QR / member-code button */
.ds-bottom-nav .ds-nav-center {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.ds-bottom-nav .ds-nav-center .ds-nav-fab {
    margin-top: -43px;
    width: 134px; height: 134px;
    border-radius: 50%;
    background: var(--ds-brand-gradient);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 15px 34px rgba(104, 92, 32, .40);
    border: 8px solid var(--ds-surface);
    text-decoration: none;
}
.ds-bottom-nav .ds-nav-center .ds-nav-fab svg { width: 56px; height: 56px; }

/* Give pages room so fixed nav never covers content */
.ds-has-bottom-nav { padding-bottom: 150px; }

/* ── Focus/tap affordances for the redesigned listing controls ──
   Replace the browser's default focus ring (a heavy blue rounded rect on
   iOS Safari, flagged by design) with design-system states. Keyboard users
   keep a visible ring via :focus-visible. */
.listing-search input:focus { outline: none; }
.listing-search:focus-within { box-shadow: 0 0 0 4px rgba(176, 155, 54, .22); }
.merchant-carousel-item:focus,
.merchant-category:focus,
.redeem-category-item:focus,
#merchant-sort-button:focus,
#product-sort-button:focus { outline: none; }
.merchant-carousel-item:focus-visible,
.merchant-category:focus-visible,
.redeem-category-item:focus-visible {
    outline: 3px solid var(--ds-primary-bright);
    outline-offset: 2px;
}