/* =========================================================================
   Signature theme: the look of the public home page, shared by the customer
   portal (layout, dashboard and every .cp page) and the login page.
   Ink #0b0c0d with the award backdrop #201e1f for dark bands, teal #0f766e as
   the accent and #5eead4 on dark, Inter throughout (bold, tight headings),
   16px rounded cards, and gentle entrance animations (see signature-motion.js).
   Layout chrome rules are prefixed with "html body" so they win over the
   layout's own inline styles without !important.
   ========================================================================= */
:root {
    --sg-ink: #0b0c0d;
    --sg-ink-2: #141618;
    --sg-night: #201e1f;
    --sg-graphite: #2e3338;
    --sg-muted: #5b6168;
    --sg-faint: #8b9197;
    --sg-line: #e5e7e9;
    --sg-soft: #f6f7f8;
    --sg-teal: #0f766e;
    --sg-teal-dark: #0b5f58;
    --sg-teal-soft: #e8f5f3;
    --sg-teal-light: #5eead4;
    --sg-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Type ---------- */
html body, html body .cp, html body button, html body input, html body select, html body textarea, html body .menu-link {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html body { -webkit-font-smoothing: antialiased; }
html body :is(h1, .cp-title, .cd-title, .pc-hero h1) { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: -.8px; }

/* ---------- Sidebar: ink with a teal glow on the current page ---------- */
html body .customer-sidebar { background: var(--sg-ink); border-right: 1px solid rgba(255,255,255,.06); }
html body .brand-wrap { border-bottom-color: rgba(255,255,255,.08); }
html body .menu-caption { color: #6b7279; letter-spacing: 2.2px; }
html body .menu-link { position: relative; margin: 2px 10px; padding: 10px 12px; border-left: 0; border-radius: 10px; color: #b4b9be; transition: background-color .2s, color .2s; }
html body .menu-link i { color: #7d848a; transition: color .2s; }
html body .menu-link:hover { background: rgba(255,255,255,.05); color: #fff; }
html body .menu-link:hover i { color: var(--sg-teal-light); }
html body .menu-link.active { background: rgba(94,234,212,.10); color: #fff; font-weight: 700; }
html body .menu-link.active i { color: var(--sg-teal-light); }
html body .menu-link.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sg-teal-light); }
html body .sidebar-bottom { border-top-color: rgba(255,255,255,.08); }
html body .sidebar-bottom button { color: #b4b9be; transition: color .2s; }
html body .sidebar-bottom button:hover { color: var(--sg-teal-light); }
/* Menu items slide in once when the page opens */
@keyframes sg-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
html.sg-menu-in body .sidebar-menu .menu-link { opacity: 0; animation: sg-slide .5s var(--sg-ease) forwards; animation-delay: calc(var(--sg-i, 0) * 25ms + .2s); }

/* ---------- Top bar ---------- */
html body .customer-topbar { background: #fff; box-shadow: none; border-bottom: 1px solid var(--sg-line); padding-top: 16px; padding-bottom: 16px; }
html body .customer-topbar .kicker { color: var(--sg-teal); font-weight: 700; letter-spacing: 2.2px; }
html body .icon-pill { border-radius: 12px; transition: border-color .2s, color .2s, background-color .2s; }
html body .icon-pill:hover { border-color: #c6e6e1; color: var(--sg-teal); background: var(--sg-teal-soft); }
html body .profile-pill { border-radius: 14px; }
html body .avatar-box { background: linear-gradient(135deg, var(--sg-teal) 0%, #14b8a6 100%); }
html body .cart-badge { background: var(--sg-teal); }

/* ---------- Page canvas ---------- */
html body .customer-main, html body .customer-page { background: #fbfbfc; }

/* ---------- Shared components (.cp pages) ---------- */
html body .cp-head { border-bottom: 0; padding-bottom: 8px; }
html body .cp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--sg-teal); }
html body .cp-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }
html body .cp-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; }
html body .cp-sub { font-size: 14.5px; color: var(--sg-muted); }
html body .cp-btn { border-radius: 10px; padding: 10px 18px; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; }
html body .cp-btn:hover { border-color: var(--sg-teal); color: var(--sg-teal); }
html body .cp-btn.primary { position: relative; overflow: hidden; background: var(--sg-teal); border-color: var(--sg-teal); color: #fff; }
html body .cp-btn.primary:hover { background: var(--sg-teal-dark); border-color: var(--sg-teal-dark); color: #fff; }
html body .cp-btn.primary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transition: left .6s ease; }
html body .cp-btn.primary:hover::after { left: 130%; }
html body .cp-panel, html body .cd-sec, html body .cl { border-radius: 16px; border-color: var(--sg-line); box-shadow: 0 1px 2px rgba(11,12,13,.03); transition: border-color .3s, box-shadow .3s; }
html body .cp-panel:hover, html body .cd-sec:hover { box-shadow: 0 14px 34px -26px rgba(11,12,13,.35); }
html body .cp-summary { border-radius: 16px; }
html body .cp-sum-val, html body .cd-sum-val { font-weight: 800; letter-spacing: -.6px; }
html body .cp-chip.ok { background: var(--sg-teal-soft); color: var(--sg-teal); }
html body .cp-empty { border-radius: 16px; }

/* ---------- Entrance animations (classes added by signature-motion.js) ---------- */
@keyframes sg-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sg-line { from { transform: translateY(110%); } to { transform: none; } }
@keyframes sg-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sg-pre { opacity: 0; transform: translateY(22px); }
.sg-in { animation: sg-rise .75s var(--sg-ease) forwards; animation-delay: var(--sg-delay, 0s); }

/* ---------- Dark welcome banner (dashboard and other page heroes) ---------- */
.sg-hero { position: relative; overflow: hidden; border-radius: 20px; background: var(--sg-night); color: #fff; padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 30px; align-items: center; isolation: isolate; }
.sg-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/images/landing/brand-of-the-year-2025.jpg') right center / cover no-repeat; opacity: .35; }
.sg-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--sg-night) 35%, rgba(32,30,31,.55) 75%, rgba(32,30,31,.2)); }
.sg-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--sg-teal-light); margin-bottom: 14px; }
.sg-hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; transform-origin: left; animation: sg-grow .9s var(--sg-ease) .1s both; }
.sg-hero h1, html body .sg-hero h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -1.2px; margin: 0 0 12px; color: #fff; }
.sg-hero h1 em { font-style: normal; color: var(--sg-teal-light); }
.sg-line { display: block; overflow: hidden; padding-bottom: .06em; }
.sg-line > span { display: inline-block; animation: sg-line 1s var(--sg-ease) both; animation-delay: calc(var(--i, 0) * .12s); }
.sg-hero p { color: #c4c8cc; font-size: 15px; margin: 0 0 20px; max-width: 560px; }
.sg-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.sg-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 12.5px; font-weight: 600; color: #e5e7e9; }
.sg-pill i { color: var(--sg-teal-light); }
.sg-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #8b9197; }
.sg-pill .dot.on { background: var(--sg-teal-light); box-shadow: 0 0 0 4px rgba(94,234,212,.18); }
.sg-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.sg-btn i { transition: transform .25s var(--sg-ease); }
.sg-btn:hover i.fa-arrow-right { transform: translateX(4px); }
.sg-btn.teal { background: var(--sg-teal); color: #fff; }
.sg-btn.teal:hover { background: var(--sg-teal-dark); color: #fff; }
.sg-btn.teal::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation: sg-shine 5s ease-in-out 1.5s infinite; }
@keyframes sg-shine { 0% { left: -60%; } 22%, 100% { left: 130%; } }
.sg-btn.ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.sg-btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; }
.sg-hero-card { perspective: 1200px; animation: sg-card-in 1.2s var(--sg-ease) .35s both; }
@keyframes sg-card-in { from { opacity: 0; transform: translateY(40px) rotateY(-35deg); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
    .sg-hero { grid-template-columns: 1fr; padding: 26px 22px; }
    .sg-hero::after { background: linear-gradient(180deg, rgba(32,30,31,.92), rgba(32,30,31,.75)); }
    .sg-hero-card { max-width: 340px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) { .sg-hero { border-radius: 16px; } .sg-hero-cta .sg-btn { flex: 1 1 100%; } }

/* ---------- Membership card designs: Silver, Gold, Platinum (same as the home page) ---------- */
.scard { position: relative; aspect-ratio: 1.586; border-radius: 18px; padding: 7% 7.5%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #0b0c0d; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5); isolation: isolate; font-family: 'Inter', sans-serif; }
.scard::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.07) 14px 15px); }
.scard-top, .scard-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.scard-logo { height: 24px; width: auto; }
.scard-tier { font-size: 12px; font-weight: 800; letter-spacing: 3.2px; text-transform: uppercase; }
.scard-chip { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #f5e7b8, #c9a64a 45%, #f0dc9a 70%, #a8862e); position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.scard-chip::before { content: ''; position: absolute; inset: 7px 11px; border: 1px solid rgba(0,0,0,.28); border-radius: 3px; }
.scard-chip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(0,0,0,.22); }
.scard-num { font-size: clamp(12px, 1.5vw, 16px); font-weight: 600; letter-spacing: 3px; font-variant-numeric: tabular-nums; opacity: .85; }
.scard-bottom { align-items: flex-end; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; opacity: .9; }
.scard-bottom strong { display: block; font-size: 12px; letter-spacing: 1px; margin-top: 2px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-off { text-align: right; line-height: 1; text-transform: none; }
.scard-off b { display: block; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -1px; }
.scard-off small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; margin-top: 4px; text-transform: uppercase; opacity: .85; }
/* Silver: light grey metal. Gold: warm champagne into charcoal (no bright yellow). Platinum: black with a white pearl sheen. */
.scard.silver { background: linear-gradient(135deg, #f6f6f7 0%, #d6d7da 38%, #f0f0f2 55%, #b9bbc0 100%); color: #111113; }
.scard.gold { background: linear-gradient(135deg, #2b2825 0%, #4d463f 38%, #a8998a 66%, #d9cfc3 84%, #8a7e71 100%); color: #f7f3ee; }
.scard.platinum { background: linear-gradient(135deg, #0a0a0b 0%, #1b1b1e 45%, #2c2c31 70%, #4a4a50 100%); color: #fff; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.14); }
.scard.platinum::before { opacity: 1; background: radial-gradient(90% 70% at 85% 10%, rgba(255,255,255,.28), transparent 60%), radial-gradient(60% 50% at 10% 100%, rgba(225,225,235,.12), transparent 70%); }
.scard.platinum .scard-tier { background: linear-gradient(90deg, #ffffff, #d9d9e0, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scard.platinum .scard-off b { color: #ffffff; }
/* No card yet: a dark preview of the Silver card */
.scard.locked { background: linear-gradient(135deg, #2e3338 0%, #1b1e21 60%, #0b0c0d 100%); color: #fff; }
.scard.locked .scard-off b { color: var(--sg-teal-light); }
.scard .sheen { position: absolute; top: -40%; bottom: -40%; width: 45%; left: -70%; transform: rotate(12deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); pointer-events: none; animation: sg-sheen 1.2s ease-out 1.2s forwards; }
.scard.platinum .sheen { background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.scard.locked .sheen { background: linear-gradient(90deg, transparent, rgba(94,234,212,.4), transparent); }
@keyframes sg-sheen { to { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
    html.sg-menu-in body .sidebar-menu .menu-link { opacity: 1; animation: none; }
    .sg-pre { opacity: 1; transform: none; }
    .sg-in, .sg-line > span, .sg-hero-card, .sg-hero-eyebrow::before, .sg-btn.teal::after, .scard .sheen { animation: none !important; }
    html body .cp-btn.primary::after { display: none; }
}