/* ══════════════════════════════════════════════════════════════════════════════
   HIKE THEME — Unified Design Tokens
   Based on: https://github.com/abn-digital/guidelines-marca-hike/DESIGN_SYSTEM.md
   Philosophy: limpio, denso, premium
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="hike"] {
    /* ── Backgrounds (warm off-white) ── */
    --bg-color:       #FCF9F7;
    --surface:        #FFFFFF;
    --surface-hover:  #F7F4F1;
    --surface-raised: #FFFFFF;
    --surface-2:      #F7F4F1;

    /* Canvas-specific aliases */
    --bg:             #FCF9F7;
    --node-bg:        #FFFFFF;

    /* ── Borders ── */
    --border:         rgba(26, 20, 32, 0.07);
    --border-hover:   rgba(26, 20, 32, 0.13);
    --border-md:      rgba(26, 20, 32, 0.13);
    --node-border:    rgba(26, 20, 32, 0.07);

    /* ── Text ── */
    --text-primary:   #1A1420;
    --text-secondary: #6B6272;
    --text-muted:     #9E97A5;
    --text:           #1A1420;
    --text-dim:       #6B6272;
    --text-3:         #9E97A5;

    /* ── Brand ── */
    --brand:          #2D1B4E;
    --brand-dark:     #1A0A2E;
    --brand-fg:       #FFFFFF;
    --focus-ring:     rgba(126, 110, 148, 0.15);

    /* ── Accent — Hike Mauve ── */
    --hike-accent:       #7E6E94;
    --hike-accent-dark:  #2D1B4E;
    --hike-accent-deep:  #5E5070;
    --hike-accent-light: rgba(126, 110, 148, 0.08);
    --hike-accent-border: rgba(126, 110, 148, 0.18);

    /* Yellow (only on dark backgrounds) */
    --hike-yellow:       #F4EB33;

    /* ── Header (dark navy) ── */
    --hike-dark:         #1A0A2E;
    --hike-header:       #1A0A2E;

    /* ── Canvas-specific ── */
    --node-glow:   rgba(126, 110, 148, 0.06);
    --accent:      #2D1B4E;
    --accent2:     #5E5070;
    --handle:      #D4D4D8;
    --conn:        #D4D4D8;

    /* ── Overrides ── */
    --accent-primary: #7E6E94;
    --accent-glow: rgba(126, 110, 148, 0.08);
    --scrollbar-thumb: #D4D4D8;
    --radius: 12px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Shadow System ── */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-focus: 0 0 0 3px rgba(126, 110, 148, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALICIA BRAND MODE OVERRIDES
   Scoped to [data-theme="hike"][data-brand="galicia"] — overrides Hike tokens
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="hike"][data-brand="galicia"] {
    --brand:          #c85001; /* Galicia Orange */
    --brand-dark:     #C83B00;
    --brand-fg:       #FFFFFF;
    --focus-ring:     rgba(200, 80, 1, 0.15);

    --hike-accent:        #c85001;
    --hike-accent-dark:   #C83B00;
    --hike-accent-deep:   #E30613;
    --hike-accent-light:  rgba(200, 80, 1, 0.08);
    --hike-accent-border: rgba(200, 80, 1, 0.18);

    --hike-accent-gold:        #c85001;
    --hike-accent-gold-light:  rgba(200, 80, 1, 0.08);
    --hike-accent-gold-border: rgba(200, 80, 1, 0.2);
    --hike-yellow:             #FF9F00;

    --hike-dark:         #c85001; /* Galicia Orange Header */
    --hike-header:       #c85001;

    --node-glow:   rgba(200, 80, 1, 0.06);
    --accent:      #c85001;
    --accent2:     #E30613;
    
    --accent-primary: #c85001;
    --accent-glow: rgba(200, 80, 1, 0.08);
    --shadow-focus: 0 0 0 3px rgba(200, 80, 1, 0.12);
}

/* Overrides for specific styling rules that reference gold color codes */
[data-theme="hike"][data-brand="galicia"] .token-bar-track {
    background: rgba(200, 80, 1, 0.08);
    border-color: rgba(200, 80, 1, 0.15);
}

[data-theme="hike"][data-brand="galicia"] .token-bar-fill {
    background: linear-gradient(90deg, #e66202, #c85001);
    box-shadow: 0 0 8px rgba(200, 80, 1, 0.3);
}

[data-theme="hike"][data-brand="galicia"] .neural-heartbeat {
    background-color: #c85001;
    box-shadow: 0 0 0 0 rgba(200, 80, 1, 0.5);
    animation: heartbeat-galicia 2s infinite;
}

@keyframes heartbeat-galicia {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(200, 80, 1, 0.5); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(200, 80, 1, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(200, 80, 1, 0); }
}

/* Force Galicia logo on brand theme */
[data-theme="hike"][data-brand="galicia"] .splash-logo,
[data-theme="hike"][data-brand="galicia"] #splash img,
[data-theme="hike"][data-brand="galicia"] .lobby-logo,
[data-theme="hike"][data-brand="galicia"] .lobby-container > div > img,
[data-theme="hike"][data-brand="galicia"] .h-logo img,
[data-theme="hike"][data-brand="galicia"] .logo img {
    content: url('https://elfaroboutiquehotel.com.ar/wp-content/uploads/2025/09/logo_galicia_blanco.png') !important;
    opacity: 1 !important;
}

/* Style header tabs and links on Galicia orange background */
[data-theme="hike"][data-brand="galicia"] header {
    background: #c85001 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

[data-theme="hike"][data-brand="galicia"] .h-tab {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="hike"][data-brand="galicia"] .h-tab:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="hike"][data-brand="galicia"] .h-tab.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="hike"][data-brand="galicia"] .nav-token-text {
    color: #fff !important;
}

[data-theme="hike"][data-brand="galicia"] .nav-token-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="hike"][data-brand="galicia"] .add-more-btn {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="hike"][data-brand="galicia"] .nav-signout-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="hike"][data-brand="galicia"] .nav-signout-link:hover {
    color: #fff !important;
}

/* Force white logo on all themes under /galicia path for visual excellence */
[data-brand="galicia"] .h-logo img,
[data-brand="galicia"] .logo img,
[data-brand="galicia"] .splash-logo,
[data-brand="galicia"] #splash img,
[data-brand="galicia"] .lobby-logo,
[data-brand="galicia"] .lobby-container > div > img,
[data-brand="galicia"] #authGate img {
    filter: brightness(0) invert(1) !important;
}

/* Premium login card style for Galicia Mode */
[data-brand="galicia"] #authGate .auth-card,
[data-brand="galicia"] #authGate .intro-card {
    background: #0F172A !important; /* deep professional dark blue/slate card background */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(200, 80, 1, 0.15), 0 4px 20px rgba(0,0,0,0.3) !important;
    padding: 2.5rem 2.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 360px !important;
}

[data-brand="galicia"] #authGate h2,
[data-brand="galicia"] #authGate .intro-card h2 {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
}

[data-brand="galicia"] #authGate .btn-p,
[data-brand="galicia"] #authGate .btn-primary {
    background: #c85001 !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(200, 80, 1, 0.3) !important;
    border: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 0.7rem 1.5rem !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 280px !important;
}

[data-brand="galicia"] #authGate .btn-p:hover,
[data-brand="galicia"] #authGate .btn-primary:hover {
    background: #a83d00 !important;
    box-shadow: 0 6px 20px rgba(200, 80, 1, 0.45) !important;
    transform: translateY(-1px) !important;
}

/* Fix color contrast for profile card name, links, and theme toggle badges on orange background */
[data-theme="hike"][data-brand="galicia"] .nav-profile-name {
    color: #ffffff !important;
}

[data-theme="hike"][data-brand="galicia"] .nav-admin-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="hike"][data-brand="galicia"] .nav-admin-link:hover {
    color: #ffffff !important;
}

[data-theme="hike"][data-brand="galicia"] .test-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="hike"][data-brand="galicia"] .theme-toggle-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Galicia Brand overrides for Modals (Redeem & Share) */
[data-brand="galicia"] .redeem-modal {
    border-color: rgba(200, 80, 1, 0.25) !important;
}

[data-brand="galicia"] .redeem-input:focus {
    border-color: rgba(200, 80, 1, 0.5) !important;
}

[data-brand="galicia"] .btn-p {
    background: #c85001 !important;
    color: #ffffff !important;
}

[data-brand="galicia"] .btn-p:hover {
    background: #a83d00 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LA TINKA BRAND MODE OVERRIDES
   Primary: Yellow (#FFED00) — La Tinka's signature vibrant yellow
   Secondary: Green (#006B2D) — header, buttons, logo
   Accent: Red (#E30613) — urgency, bullseye
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="hike"][data-brand="latinka"] {
    /* ── Yellow-primary brand tokens ── */
    --brand:          #FFED00;
    --brand-dark:     #E5D500;
    --brand-fg:       #00461E;
    --focus-ring:     rgba(255, 237, 0, 0.25);

    /* ── Surfaces: warm yellow tints ── */
    --bg-color:       #FFFDE6;
    --surface:        #FFFFFF;
    --surface-hover:  #FFFACC;
    --surface-raised: #FFFFFF;
    --surface-2:      #FFFACC;
    --bg:             #FFFDE6;
    --node-bg:        #FFFFFF;

    /* ── Accent system: yellow primary with green CTA ── */
    --hike-accent:        #FFED00;
    --hike-accent-dark:   #E5D500;
    --hike-accent-deep:   #CCB800;
    --hike-accent-light:  rgba(255, 237, 0, 0.12);
    --hike-accent-border: rgba(255, 237, 0, 0.35);

    --hike-accent-gold:        #FFED00;
    --hike-accent-gold-light:  rgba(255, 237, 0, 0.10);
    --hike-accent-gold-border: rgba(255, 237, 0, 0.30);
    --hike-yellow:             #FFED00;

    --hike-dark:         #006B2D;
    --hike-header:       #006B2D;

    --node-glow:   rgba(255, 237, 0, 0.10);
    --accent:      #FFED00;
    --accent2:     #006B2D;

    --accent-primary: #FFED00;
    --accent-glow: rgba(255, 237, 0, 0.12);
    --shadow-focus: 0 0 0 3px rgba(255, 237, 0, 0.20);

    /* ── Borders with yellow tint ── */
    --border:         rgba(0, 107, 45, 0.10);
    --border-hover:   rgba(0, 107, 45, 0.18);
    --border-md:      rgba(0, 107, 45, 0.15);
    --node-border:    rgba(255, 237, 0, 0.25);
}

/* ── Token bar: yellow fill ── */
[data-theme="hike"][data-brand="latinka"] .token-bar-track {
    background: rgba(255, 237, 0, 0.12);
    border-color: rgba(255, 237, 0, 0.25);
}

[data-theme="hike"][data-brand="latinka"] .token-bar-fill {
    background: linear-gradient(90deg, #E5D500, #FFED00);
    box-shadow: 0 0 8px rgba(255, 237, 0, 0.4);
}

/* ── Heartbeat: green pulse ── */
[data-theme="hike"][data-brand="latinka"] .neural-heartbeat {
    background-color: #006B2D;
    box-shadow: 0 0 0 0 rgba(0, 107, 45, 0.5);
    animation: heartbeat-latinka 2s infinite;
}

@keyframes heartbeat-latinka {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 107, 45, 0.5); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(0, 107, 45, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 107, 45, 0); }
}

/* ── Force La Tinka logo ── */
/* Splash/lobby logos: keep original colors (shown on light backgrounds) */
[data-theme="hike"][data-brand="latinka"] .splash-logo,
[data-theme="hike"][data-brand="latinka"] #splash img,
[data-theme="hike"][data-brand="latinka"] .lobby-logo,
[data-theme="hike"][data-brand="latinka"] .lobby-container > div > img,
[data-theme="hike"][data-brand="latinka"] .logo img {
    content: url('/assets/latinka-logo.png') !important;
    opacity: 1 !important;
}

/* Header logo: make WHITE on green header using brightness filter */
[data-theme="hike"][data-brand="latinka"] .h-logo img {
    content: url('/assets/latinka-logo.png') !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    height: 28px !important;
}

/* ── Header: green bar (matches their website/app) ── */
[data-theme="hike"][data-brand="latinka"] header {
    background: #006B2D !important;
    border-bottom: 2px solid #FFED00 !important;
    box-shadow: 0 2px 12px rgba(0, 107, 45, 0.15) !important;
}

[data-theme="hike"][data-brand="latinka"] .h-tab {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="hike"][data-brand="latinka"] .h-tab:hover {
    color: #FFED00 !important;
    background: rgba(255, 237, 0, 0.08) !important;
}

[data-theme="hike"][data-brand="latinka"] .h-tab.active {
    color: #FFED00 !important;
    background: rgba(255, 237, 0, 0.12) !important;
    border-color: #FFED00 !important;
}

[data-theme="hike"][data-brand="latinka"] .nav-token-text {
    color: #fff !important;
}

[data-theme="hike"][data-brand="latinka"] .nav-token-badge {
    background: rgba(255, 237, 0, 0.15) !important;
    border-color: rgba(255, 237, 0, 0.30) !important;
    color: #FFED00 !important;
}

[data-theme="hike"][data-brand="latinka"] .add-more-btn {
    color: #FFED00 !important;
}

[data-theme="hike"][data-brand="latinka"] .nav-signout-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="hike"][data-brand="latinka"] .nav-signout-link:hover {
    color: #FFED00 !important;
}

/* ── Logo across all themes ── */
[data-brand="latinka"] .h-logo img,
[data-brand="latinka"] .logo img,
[data-brand="latinka"] .splash-logo,
[data-brand="latinka"] #splash img,
[data-brand="latinka"] .lobby-logo,
[data-brand="latinka"] .lobby-container > div > img,
[data-brand="latinka"] #authGate img {
    max-height: 48px;
}

/* ── Premium login card: dark with yellow/green accents ── */
[data-brand="latinka"] #authGate {
    background: linear-gradient(135deg, #00461E 0%, #006B2D 50%, #004D20 100%) !important;
}

[data-brand="latinka"] #authGate .auth-card,
[data-brand="latinka"] #authGate .intro-card {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 237, 0, 0.20) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 237, 0, 0.06) !important;
    padding: 2.5rem 2.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 360px !important;
}

[data-brand="latinka"] #authGate h2,
[data-brand="latinka"] #authGate .intro-card h2 {
    color: #FFED00 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
}

[data-brand="latinka"] #authGate .btn-p,
[data-brand="latinka"] #authGate .btn-primary {
    background: #FFED00 !important;
    color: #00461E !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(255, 237, 0, 0.35) !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 280px !important;
}

[data-brand="latinka"] #authGate .btn-p:hover,
[data-brand="latinka"] #authGate .btn-primary:hover {
    background: #FFE000 !important;
    box-shadow: 0 6px 25px rgba(255, 237, 0, 0.50) !important;
    transform: translateY(-1px) !important;
}

/* ── Profile, admin links ── */
[data-theme="hike"][data-brand="latinka"] .nav-profile-name {
    color: #ffffff !important;
}

[data-theme="hike"][data-brand="latinka"] .nav-admin-link {
    color: rgba(255, 237, 0, 0.8) !important;
}

[data-theme="hike"][data-brand="latinka"] .nav-admin-link:hover {
    color: #FFED00 !important;
}

[data-theme="hike"][data-brand="latinka"] .theme-toggle-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Send button: yellow ── */
[data-theme="hike"][data-brand="latinka"] .btn-p,
[data-theme="hike"][data-brand="latinka"] .send-btn,
[data-theme="hike"][data-brand="latinka"] button[type="submit"] {
    background: #006B2D !important;
    color: #FFFFFF !important;
}

[data-theme="hike"][data-brand="latinka"] .btn-p:hover,
[data-theme="hike"][data-brand="latinka"] .send-btn:hover {
    background: #00461E !important;
}

/* ── Chat bubbles: yellow tint for AI responses ── */
[data-theme="hike"][data-brand="latinka"] .msg.ai {
    background: rgba(255, 237, 0, 0.08) !important;
    border-color: rgba(255, 237, 0, 0.15) !important;
}

/* ── Modals: yellow accents ── */
[data-brand="latinka"] .redeem-modal {
    border-color: rgba(255, 237, 0, 0.25) !important;
}

[data-brand="latinka"] .redeem-input:focus {
    border-color: rgba(255, 237, 0, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 237, 0, 0.12) !important;
}

/* ── Global buttons: green CTA (like their "Juega aquí" buttons) ── */
[data-brand="latinka"] .btn-p {
    background: #006B2D !important;
    color: #ffffff !important;
}

[data-brand="latinka"] .btn-p:hover {
    background: #00461E !important;
}

/* ── Dark mode under La Tinka ── */
[data-brand="latinka"]:not([data-theme="hike"]) {
    --accent: #FFED00;
    --accent2: #006B2D;
    --accent-primary: #FFED00;
    --accent-glow: rgba(255, 237, 0, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DUNKIN' BRAND MODE OVERRIDES  (Dunkin' Perú)
   Primary:   Orange  (#FF6E0C) — Dunkin's signature orange
   Secondary: Magenta (#E31C79) — CTA, accents, "% DTO"
   Accent:    White   (#FFFFFF) — headlines, product plane
   ══════════════════════════════════════════════════════════════════════════════ */
[data-theme="hike"][data-brand="dunkin"] {
    /* ── Orange-primary brand tokens ── */
    --brand:          #FF6E0C;
    --brand-dark:     #E85D00;
    --brand-fg:       #FFFFFF;
    --focus-ring:     rgba(227, 28, 121, 0.25);

    /* ── Surfaces: warm cream / peach tints ── */
    --bg-color:       #FFF7F0;
    --surface:        #FFFFFF;
    --surface-hover:  #FFE9D9;
    --surface-raised: #FFFFFF;
    --surface-2:      #FFEEE1;
    --bg:             #FFF7F0;
    --node-bg:        #FFFFFF;

    /* ── Accent system: orange primary with magenta CTA ── */
    --hike-accent:        #FF6E0C;
    --hike-accent-dark:   #E85D00;
    --hike-accent-deep:   #CC5200;
    --hike-accent-light:  rgba(255, 110, 12, 0.12);
    --hike-accent-border: rgba(255, 110, 12, 0.35);

    --hike-accent-gold:        #FF6E0C;
    --hike-accent-gold-light:  rgba(255, 110, 12, 0.10);
    --hike-accent-gold-border: rgba(255, 110, 12, 0.30);
    --hike-yellow:             #FF6E0C;

    --hike-dark:         #E31C79;
    --hike-header:       #FF6E0C;

    --node-glow:   rgba(255, 110, 12, 0.10);
    --accent:      #FF6E0C;
    --accent2:     #E31C79;

    --accent-primary: #FF6E0C;
    --accent-glow: rgba(255, 110, 12, 0.12);
    --shadow-focus: 0 0 0 3px rgba(227, 28, 121, 0.20);

    /* ── Borders with magenta tint ── */
    --border:         rgba(227, 28, 121, 0.10);
    --border-hover:   rgba(227, 28, 121, 0.18);
    --border-md:      rgba(227, 28, 121, 0.15);
    --node-border:    rgba(255, 110, 12, 0.25);
}

/* ── Token bar: orange fill ── */
[data-theme="hike"][data-brand="dunkin"] .token-bar-track {
    background: rgba(255, 110, 12, 0.12);
    border-color: rgba(255, 110, 12, 0.25);
}

[data-theme="hike"][data-brand="dunkin"] .token-bar-fill {
    background: linear-gradient(90deg, #E85D00, #FF6E0C);
    box-shadow: 0 0 8px rgba(255, 110, 12, 0.4);
}

/* ── Heartbeat: magenta pulse ── */
[data-theme="hike"][data-brand="dunkin"] .neural-heartbeat {
    background-color: #E31C79;
    box-shadow: 0 0 0 0 rgba(227, 28, 121, 0.5);
    animation: heartbeat-dunkin 2s infinite;
}

@keyframes heartbeat-dunkin {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(227, 28, 121, 0.5); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 10px rgba(227, 28, 121, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(227, 28, 121, 0); }
}

/* ── Force Dunkin' logo ── */
/* Splash/lobby logos: keep original colors (shown on light backgrounds) */
[data-theme="hike"][data-brand="dunkin"] .splash-logo,
[data-theme="hike"][data-brand="dunkin"] #splash img,
[data-theme="hike"][data-brand="dunkin"] .lobby-logo,
[data-theme="hike"][data-brand="dunkin"] .lobby-container > div > img,
[data-theme="hike"][data-brand="dunkin"] .logo img {
    content: url('/assets/dunkin-logo.png') !important;
    opacity: 1 !important;
}

/* Header logo: make WHITE on orange header using brightness filter */
[data-theme="hike"][data-brand="dunkin"] .h-logo img {
    content: url('/assets/dunkin-logo.png') !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    height: 24px !important;
}

/* ── Header: orange bar (matches their brand) ── */
[data-theme="hike"][data-brand="dunkin"] header {
    background: #FF6E0C !important;
    border-bottom: 2px solid #E31C79 !important;
    box-shadow: 0 2px 12px rgba(255, 110, 12, 0.15) !important;
}

[data-theme="hike"][data-brand="dunkin"] .h-tab {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="hike"][data-brand="dunkin"] .h-tab:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="hike"][data-brand="dunkin"] .h-tab.active {
    color: #FFFFFF !important;
    background: rgba(227, 28, 121, 0.85) !important;
    border-color: #E31C79 !important;
}

[data-theme="hike"][data-brand="dunkin"] .nav-token-text {
    color: #fff !important;
}

[data-theme="hike"][data-brand="dunkin"] .nav-token-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: #FFFFFF !important;
}

[data-theme="hike"][data-brand="dunkin"] .add-more-btn {
    color: #FFFFFF !important;
}

[data-theme="hike"][data-brand="dunkin"] .nav-signout-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="hike"][data-brand="dunkin"] .nav-signout-link:hover {
    color: #FFFFFF !important;
}

/* ── Logo across all themes ── */
[data-brand="dunkin"] .h-logo img,
[data-brand="dunkin"] .logo img,
[data-brand="dunkin"] .splash-logo,
[data-brand="dunkin"] #splash img,
[data-brand="dunkin"] .lobby-logo,
[data-brand="dunkin"] .lobby-container > div > img,
[data-brand="dunkin"] #authGate img {
    max-height: 44px;
}

/* ── Premium login card: orange→magenta gradient ── */
[data-brand="dunkin"] #authGate {
    background: linear-gradient(135deg, #FF6E0C 0%, #FF3E9A 55%, #E31C79 100%) !important;
}

[data-brand="dunkin"] #authGate .auth-card,
[data-brand="dunkin"] #authGate .intro-card {
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(120, 20, 60, 0.35), 0 0 40px rgba(255, 255, 255, 0.06) !important;
    padding: 2.5rem 2.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 360px !important;
}

[data-brand="dunkin"] #authGate h2,
[data-brand="dunkin"] #authGate .intro-card h2 {
    color: #FFFFFF !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
}

[data-brand="dunkin"] #authGate .btn-p,
[data-brand="dunkin"] #authGate .btn-primary {
    background: #FFFFFF !important;
    color: #E31C79 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20) !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 280px !important;
}

[data-brand="dunkin"] #authGate .btn-p:hover,
[data-brand="dunkin"] #authGate .btn-primary:hover {
    background: #FFF0F7 !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(-1px) !important;
}

/* ── Profile, admin links ── */
[data-theme="hike"][data-brand="dunkin"] .nav-profile-name {
    color: #ffffff !important;
}

[data-theme="hike"][data-brand="dunkin"] .nav-admin-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="hike"][data-brand="dunkin"] .nav-admin-link:hover {
    color: #FFFFFF !important;
}

[data-theme="hike"][data-brand="dunkin"] .theme-toggle-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── Send button: magenta CTA (like their "Comprar" buttons) ── */
[data-theme="hike"][data-brand="dunkin"] .btn-p,
[data-theme="hike"][data-brand="dunkin"] .send-btn,
[data-theme="hike"][data-brand="dunkin"] button[type="submit"] {
    background: #E31C79 !important;
    color: #FFFFFF !important;
}

[data-theme="hike"][data-brand="dunkin"] .btn-p:hover,
[data-theme="hike"][data-brand="dunkin"] .send-btn:hover {
    background: #C4126A !important;
}

/* ── Chat bubbles: orange tint for AI responses ── */
[data-theme="hike"][data-brand="dunkin"] .msg.ai {
    background: rgba(255, 110, 12, 0.08) !important;
    border-color: rgba(255, 110, 12, 0.15) !important;
}

/* ── Modals: magenta accents ── */
[data-brand="dunkin"] .redeem-modal {
    border-color: rgba(227, 28, 121, 0.25) !important;
}

[data-brand="dunkin"] .redeem-input:focus {
    border-color: rgba(227, 28, 121, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(227, 28, 121, 0.12) !important;
}

/* ── Global buttons: magenta CTA ── */
[data-brand="dunkin"] .btn-p {
    background: #E31C79 !important;
    color: #ffffff !important;
}

[data-brand="dunkin"] .btn-p:hover {
    background: #C4126A !important;
}

/* ── Dark mode under Dunkin' ── */
[data-brand="dunkin"]:not([data-theme="hike"]) {
    --accent: #FF6E0C;
    --accent2: #E31C79;
    --accent-primary: #FF6E0C;
    --accent-glow: rgba(255, 110, 12, 0.08);
}