/* ============================================
   STOKER'S MOBILE — v2.0 UI Refresh
   ============================================
   Brand Palette:
     Dark:    #2D2A26  (headers, nav, dark surfaces)
     Cream:   #F5F0E6  (page backgrounds)
     Orange:  #D35400  (primary action)
     Olive:   #5D5D3D  (secondary surfaces, cards)
     Tan:     #AA9A84  (subtle accents)
     Light:   #EDE8DD  (card backgrounds, borders)
   ============================================ */

:root {
    --stokers-dark: #2D2A26;
    --stokers-cream: #F5F0E6;
    --stokers-orange: #D35400;
    --stokers-orange-hover: #B84500;
    --stokers-olive: #5D5D3D;
    --stokers-olive-light: #737258;
    --stokers-tan: #AA9A84;
    --stokers-light: #EDE8DD;
    --stokers-text: #3A3832;
    --stokers-muted: #8A8478;
    /* Spacing scale */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(45,42,38,0.08);
    --shadow-md: 0 4px 12px rgba(45,42,38,0.10);
    --shadow-lg: 0 8px 24px rgba(45,42,38,0.12);
    --shadow-xl: 0 12px 36px rgba(45,42,38,0.16);
}


/* ============================================
   BASE & TYPOGRAPHY
   ============================================ */

html {
    font-size: 16px;
}

    html.precheck body {
        visibility: hidden;
    }

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--stokers-cream);
    color: var(--stokers-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body.blocked {
        overflow: hidden;
    }

        body.blocked main, body.blocked footer {
            filter: blur(8px);
            pointer-events: none;
        }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--stokers-dark);
}


/* ============================================
   HEALTH WARNING BANNER
   ============================================ */

.sgw-banner {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: 18vh;
    background-color: #111;
    color: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    text-align: center;
    border: 3px solid #fff;
}

.sgw-orange-line {
    height: 3px;
    background-color: var(--stokers-orange);
    width: 100%;
}

.sgw-text {
    font-family: 'Teko', sans-serif;
    font-weight: 500;
    font-size: clamp(23px, 4.5vw, 30px);
    line-height: 1.3;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}


/* ============================================
   NAVBAR
   ============================================ */

.navbar {
    background: var(--stokers-dark) !important;
    padding: 12px var(--sp-md);
    z-index: 1050;
    border-bottom: 3px solid var(--stokers-orange);
}

.navbar-brand img {
    height: 42px;
}

.nav-link {
    color: var(--stokers-orange) !important;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: 10px 0 !important;
    transition: color 0.2s ease;
}

    .nav-link:hover,
    .nav-link:focus {
        color: #fff !important;
    }

.navbar-nav .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}


/* ============================================
   BUTTON SYSTEM
   ============================================
   .btn-stokers          — Primary (orange, solid)
   .btn-stokers-outline  — Primary outline
   .btn-back             — Go Back (dark, always readable)
   .btn-done             — Olive solid
   .btn-ready            — Large orange (coupon confirm)
   ============================================ */

.btn-stokers {
    display: block;
    width: 100%;
    background: var(--stokers-orange);
    border: none;
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: 16px var(--sp-xl);
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

    .btn-stokers:hover,
    .btn-stokers:focus {
        background: var(--stokers-orange-hover);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn-stokers:active {
        transform: translateY(0);
        box-shadow: none;
    }

.btn-stokers-outline {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--stokers-orange);
    color: var(--stokers-orange);
    font-family: 'Teko', sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: 12px var(--sp-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-stokers-outline:hover,
    .btn-stokers-outline:focus {
        background: var(--stokers-orange);
        color: #fff;
    }

/* Back — dark solid, always legible on any background */
.btn-back {
    display: block;
    width: 100%;
    background: var(--stokers-dark);
    border: none;
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-size: 19px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: 14px var(--sp-lg);
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-back:hover,
    .btn-back:focus {
        background: #1A1815;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

/* Done — olive */
.btn-done {
    display: block;
    width: 100%;
    background: var(--stokers-olive);
    border: none;
    border-radius: var(--radius-md);
    padding: 16px var(--sp-lg);
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-done:hover,
    .btn-done:focus {
        background: #4A4A30;
        color: #fff;
        transform: translateY(-1px);
    }

/* Ready — primary orange, large */
.btn-ready {
    display: block;
    width: 100%;
    background: var(--stokers-orange);
    border: none;
    border-radius: var(--radius-lg);
    padding: 20px var(--sp-lg);
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-ready:hover {
        background: var(--stokers-orange-hover);
    }

    .btn-ready:disabled {
        background: #999;
        cursor: not-allowed;
        opacity: 0.6;
    }

.not-ready-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

    .not-ready-link:hover {
        color: #fff;
        text-decoration: underline;
    }

/* Continue — olive, used in QR code page */
.btn-continue {
    display: inline-block;
    background: var(--stokers-olive);
    color: #fff;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    font-weight: 500;
    padding: 14px 48px;
    border-radius: var(--radius-md);
    border: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
}

    .btn-continue:hover {
        background: #4A4A30;
        color: #fff;
        transform: translateY(-1px);
    }

    .btn-continue:active {
        transform: scale(0.98);
    }


/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    background: linear-gradient(160deg, var(--stokers-dark) 0%, #3D3A35 100%);
    color: #fff;
    padding: var(--sp-xl) var(--sp-lg);
    text-align: center;
}

    .hero-section h1 {
        font-size: 26px;
        color: #fff;
        margin-bottom: var(--sp-sm);
    }

    .hero-section p {
        font-size: 16px;
        opacity: 0.85;
        margin: 0;
    }


/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb-bar {
    background: var(--stokers-light);
    padding: var(--sp-md);
    border-bottom: 1px solid rgba(45,42,38,0.06);
}

    .breadcrumb-bar a {
        color: var(--stokers-muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        .breadcrumb-bar a:hover {
            color: var(--stokers-orange);
        }


/* ============================================
   CONTENT & PAGE CONTAINERS
   ============================================ */

.content-section {
    background: var(--stokers-cream);
}

.page-container {
    background: url('/img/page-bg.png') center top / 100% auto no-repeat;
    background-color: #2D2A26;
    min-height: calc(100vh - 18vh - 56px);
    padding: var(--sp-lg);
}


/* ============================================
   CARDS
   ============================================ */

.card-stokers {
    background: #fff;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

    .card-stokers .card-header {
        background: var(--stokers-dark);
        color: #fff;
        font-family: 'Oswald', sans-serif;
        font-size: 15px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 14px var(--sp-lg);
        border: none;
    }

    .card-stokers .card-body {
        padding: var(--sp-lg);
    }

.info-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    margin-bottom: var(--sp-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.info-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    color: var(--stokers-dark);
    margin-bottom: var(--sp-sm);
    text-transform: none;
}

.info-text {
    font-size: 15px;
    color: var(--stokers-muted);
    line-height: 1.55;
    margin-bottom: var(--sp-md);
}

.info-cta {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    color: var(--stokers-orange);
    margin: 0;
    text-transform: none;
    line-height: 1.25;
}


/* ============================================
   LOGIN
   ============================================ */

.login-page {
    min-height: 100vh;
}

.login-hero {
    background: linear-gradient(160deg, var(--stokers-dark) 0%, #3D3A35 100%);
    padding: 28px var(--sp-lg) 24px;
    text-align: center;
}

.login-logo {
    max-width: 180px;
    margin-bottom: var(--sp-sm);
}

.login-tagline {
    color: rgba(255,255,255,0.8);
    font-size: 17px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    margin: 0;
}

.login-form-container {
    padding: var(--sp-lg);
}

/* Forgot / Reset Password */
.fp-success-panel {
    text-align: center;
    padding: 10px 0;
}

.fp-success-icon {
    font-size: 48px;
    color: var(--stokers-orange);
    margin-bottom: 16px;
}

.fp-success-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--stokers-dark);
    margin-bottom: 12px;
}

.fp-success-msg {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
}

.fp-pw-rules ul {
    padding-left: 20px;
    list-style: disc;
}

.fp-pw-rules li {
    line-height: 1.6;
}
/* ============================================
   FORMS
   ============================================ */

.form-control {
    border: 2px solid var(--stokers-light);
    border-radius: var(--radius-sm);
    padding: 13px var(--sp-md);
    font-size: 16px;
    background: #fff;
    color: var(--stokers-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus {
        border-color: var(--stokers-orange);
        box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.12);
    }

.form-label {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--stokers-muted);
    margin-bottom: var(--sp-sm);
}

.field-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}


/* ============================================
   MAIN MENU (Landing)
   ============================================ */

.main-menu-container {
    background: url('/img/menu-bg.png') center/cover no-repeat;
    min-height: calc(100vh - 18vh - 56px);
    padding: 20px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.promo-banner {
    text-align: center;
    margin-bottom: 2px;
}

.promo-banner-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(82, 81, 50, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    text-decoration: none;
    padding: 28px var(--sp-lg);
    border-radius: 14px;
    border: 2.5px solid #fff;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

    .menu-btn:hover,
    .menu-btn:focus {
        background: rgba(82, 81, 50, 0.92);
        color: #fff;
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.65);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .menu-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .menu-btn span {
        font-family: 'Teko', sans-serif;
        font-size: 22px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

.menu-btn-large {
    padding: 32px var(--sp-lg);
    background: rgba(82, 81, 50, 0.85);
}

    .menu-btn-large span {
        font-size: 24px;
        font-weight: 600;
    }

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
    margin-top: 2px;
}

    .menu-grid .menu-btn {
        padding: 24px var(--sp-md);
    }

        .menu-grid .menu-btn span {
            font-size: 16px;
            font-weight: 500;
        }

.menu-btn-wrapper {
    position: relative;
    display: block;
}

.main-menu-container > .menu-btn-wrapper {
    margin-bottom: 0;
}

    .main-menu-container > .menu-btn-wrapper .menu-btn-large {
        margin-bottom: 0;
    }

.menu-grid .menu-btn-wrapper .menu-btn {
    width: 100%;
}


/* ============================================
   COUPON BADGES
   ============================================ */

.coupon-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: var(--stokers-orange);
    color: #fff;
    border: 2.5px solid #fff;
    border-radius: var(--radius-full);
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.main-menu-container > .menu-btn-wrapper .coupon-badge {
    top: -8px;
    right: 4px;
}

.menu-grid .menu-btn-wrapper .coupon-badge {
    top: -8px;
    right: -4px;
}

/* Nav menu coupon badges (inline pill next to menu text) */
.nav-coupon-badge {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--stokers-orange);
    color: #fff;
    border-radius: var(--radius-full);
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    margin-left: 6px;
    vertical-align: middle;
}


/* ============================================
   COUPON BUTTONS
   ============================================ */

.coupon-btn {
    display: block;
    background: var(--stokers-olive);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    margin-bottom: var(--sp-md);
    text-decoration: none;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

    .coupon-btn:hover {
        background: #4A4A30;
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

.coupon-value {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.coupon-desc {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    margin-top: var(--sp-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.coupon-image-btn {
    margin-bottom: var(--sp-md);
}

    .coupon-image-btn a {
        display: block;
    }

    .coupon-image-btn img {
        width: 100%;
        max-width: 320px;
        min-height: 79px;
        padding: 4px 0;
        border-radius: var(--radius-md);
        cursor: pointer;
        box-shadow: var(--shadow-md);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .coupon-image-btn img:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .coupon-image-btn img:active {
            transform: scale(0.98);
        }

.coupon-btn-fallback {
    background: var(--stokers-olive);
    border-radius: var(--radius-md);
    padding: var(--sp-xl) var(--sp-lg);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-align: center;
}

.coupon-disclaimer {
    background: var(--stokers-light);
    padding: var(--sp-md);
    margin-top: var(--sp-lg);
    border-radius: var(--radius-sm);
}

    .coupon-disclaimer p {
        font-size: 12px;
        color: var(--stokers-muted);
        line-height: 1.5;
        margin: 0;
        text-align: left;
    }

    .coupon-disclaimer strong {
        font-weight: 700;
        color: var(--stokers-text);
    }


/* ============================================
   STORES
   ============================================ */

.store-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--sp-md);
    margin-bottom: var(--sp-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--stokers-text);
    transition: all 0.2s ease;
}

    .store-card:hover {
        color: var(--stokers-text);
        transform: translateX(4px);
        box-shadow: var(--shadow-md);
    }

.store-icon {
    width: 48px;
    height: 48px;
    background: var(--stokers-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--sp-md);
    flex-shrink: 0;
}

    .store-icon i {
        color: var(--stokers-orange);
        font-size: 18px;
    }

.store-info {
    flex: 1;
}

.store-name {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.store-address {
    font-size: 13px;
    color: var(--stokers-muted);
}

.store-distance {
    font-size: 13px;
    color: var(--stokers-orange);
    font-weight: 600;
    margin-top: 3px;
}

.store-arrow {
    color: var(--stokers-tan);
    font-size: 18px;
}

.store-select-btn {
    display: block;
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    margin-bottom: var(--sp-md);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .store-select-btn:hover {
        background: #fff;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.store-select-name {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--stokers-dark);
}

.store-select-addr {
    font-size: 14px;
    color: var(--stokers-muted);
    margin-top: 3px;
}

.store-select-dist {
    font-size: 13px;
    color: var(--stokers-orange);
    font-weight: 600;
    margin-top: var(--sp-xs);
}

/* --- Store Select: Back link, banner, offer bar --- */
.store-back-link {
    padding: 12px 0 4px;
}

    .store-back-link a {
        font-family: 'Oswald', sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0.03em;
        text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.3);
        background: rgba(0,0,0,0.35);
        padding: 4px 12px;
        border-radius: 4px;
    }

        .store-back-link a:hover {
            color: var(--stokers-orange);
        }

    .store-back-link i {
        margin-right: 4px;
        font-size: 13px;
    }

.store-choose-banner {
    background: var(--stokers-orange);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 14px;
    text-align: center;
}

    .store-choose-banner h2 {
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0;
    }

.store-offer-desc {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    text-align: center;
}

    .store-offer-desc span {
        font-family: 'Oswald', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

/* --- Store Card (FRE-style) --- */
.store-card-wrapper {
    background: #fff;
    border: 1px solid #e0ddd8;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

    .store-card-wrapper:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

.store-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    cursor: pointer;
}

.store-card-info {
    flex: 1;
    min-width: 0;
}

.store-card-name {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--stokers-orange);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.store-card-addr {
    font-size: 13px;
    color: #5a5a5a;
    margin-top: 4px;
    line-height: 1.35;
}

.store-card-dist {
    margin-top: 8px;
}

.dist-badge {
    display: inline-block;
    background: #4a4a4a;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.store-card-arrow {
    flex-shrink: 0;
    color: var(--stokers-orange);
    font-size: 18px;
    padding-left: 12px;
}

.store-card-map-btn {
    display: block;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6b6b6b;
    text-decoration: none;
    padding: 11px 16px;
    border-top: 1px solid #e8e5e0;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
}

    .store-card-map-btn:hover {
        background: #f8f6f3;
        color: var(--stokers-orange);
    }


/* ============================================
   BARCODE PAGE
   ============================================ */

.barcode-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.barcode-store {
    padding-bottom: var(--sp-md);
    border-bottom: 1px solid var(--stokers-light);
    margin-bottom: var(--sp-md);
}

    .barcode-store .store-name {
        font-family: 'Oswald', sans-serif;
        font-size: 20px;
        font-weight: 600;
        color: var(--stokers-dark);
        text-transform: uppercase;
    }

    .barcode-store .store-address {
        font-size: 14px;
        color: var(--stokers-muted);
        margin-top: var(--sp-xs);
    }

.barcode-timestamp {
    color: var(--stokers-orange);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--sp-md);
}

.barcode-offer {
    font-size: 17px;
    color: var(--stokers-dark);
    margin-bottom: var(--sp-sm);
}

.barcode-timer {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--stokers-orange);
    margin-bottom: var(--sp-lg);
    line-height: 1;
}

.barcode-display {
    background: #fff;
    padding: var(--sp-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-lg);
    border: 1px solid var(--stokers-light);
}

    .barcode-display svg {
        max-width: 100%;
        height: auto;
    }

.barcode-timer-label {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--stokers-orange);
    text-align: center;
    margin-bottom: var(--sp-md);
}

/* Flashing SINGLE USE warning overlay (from fre_pouch) */
.barcode-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFF00;
    color: #000000;
    padding: 20px 15px;
    border: 4px solid #000000;
    text-align: center;
    font-weight: bold;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    width: 70%;
    max-width: 280px;
}

    .barcode-overlay.show {
        opacity: 1;
    }

    .barcode-overlay .line1 {
        font-size: 26px;
        margin-bottom: 8px;
        letter-spacing: 0.5px;
        font-weight: 900;
    }

    .barcode-overlay .line2 {
        font-size: 20px;
        line-height: 1.2;
        font-weight: 900;
    }


/* ============================================
   CONFIRM CARD
   ============================================ */

.confirm-card {
    background: var(--stokers-dark);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
    box-shadow: var(--shadow-xl);
}

.confirm-image {
    margin-bottom: var(--sp-md);
}

.confirm-coupon-img {
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
}

.confirm-store {
    text-align: center;
    color: var(--stokers-light);
    margin-bottom: var(--sp-md);
    line-height: 1.6;
}

    .confirm-store .store-name {
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
        color: var(--stokers-light);
    }

    .confirm-store .store-address,
    .confirm-store .store-city {
        font-size: 14px;
        color: var(--stokers-tan);
    }

.confirm-warning {
    text-align: center;
    color: var(--stokers-light);
    margin-bottom: var(--sp-lg);
    line-height: 1.6;
}

    .confirm-warning p {
        margin-bottom: var(--sp-xs);
        color: var(--stokers-light);
    }

    .confirm-warning .expire-time {
        font-family: 'Oswald', sans-serif;
        font-size: 32px;
        color: var(--stokers-orange);
    }

    .confirm-warning .small {
        font-size: 12px;
        opacity: 0.7;
    }


/* ============================================
   TERMS
   ============================================ */

.terms-section {
    background: var(--stokers-light);
    padding: var(--sp-md);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin: var(--sp-lg) calc(-1 * var(--sp-lg)) 0;
}

.terms-text {
    font-size: 11px;
    color: var(--stokers-muted);
    line-height: 1.45;
    margin-bottom: var(--sp-sm);
}

    .terms-text:last-child {
        margin-bottom: 0;
    }

    .terms-text strong {
        font-weight: 700;
        color: var(--stokers-text);
    }


/* ============================================
   LOCATION PAGE
   ============================================ */

.location-container {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--stokers-cream) 0%, var(--stokers-light) 100%);
    display: flex;
    flex-direction: column;
}

.location-banner {
    background: linear-gradient(160deg, var(--stokers-dark) 0%, #3D3A35 100%);
    padding: var(--sp-lg);
    text-align: center;
}

.banner-content {
    max-width: 320px;
    margin: 0 auto;
}

.alert-icon {
    color: var(--stokers-orange);
    margin-bottom: var(--sp-sm);
}

.banner-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    display: block;
    margin-bottom: var(--sp-sm);
    letter-spacing: 0.04em;
}

.banner-text {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.location-image-section {
    text-align: center;
    padding: var(--sp-xl) var(--sp-md);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-image {
    max-width: 260px;
    width: 80%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15));
}

.location-buttons {
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.btn-location-primary {
    display: block;
    width: 100%;
    background: var(--stokers-orange);
    border: none;
    border-radius: var(--radius-md);
    padding: 18px var(--sp-lg);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-md);
}

    .btn-location-primary:hover,
    .btn-location-primary:focus {
        background: var(--stokers-orange-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

.btn-location-secondary {
    display: block;
    width: 100%;
    background: var(--stokers-dark);
    border: none;
    border-radius: var(--radius-md);
    padding: 16px var(--sp-lg);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-location-secondary:hover,
    .btn-location-secondary:focus {
        background: #1A1815;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }


/* ============================================
   PROXIMITY MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--sp-lg);
}

.modal-card {
    background: var(--stokers-dark);
    border-radius: var(--radius-lg);
    padding: var(--sp-xl);
    text-align: center;
    max-width: 320px;
    width: 100%;
    box-shadow: var(--shadow-xl);
}

.modal-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    color: var(--stokers-orange);
    margin-bottom: var(--sp-md);
}

.modal-text {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--sp-lg);
}

/* Gate modals (Desktop Blocker, Orientation Blocker) — dark theme to match custom modals */
#desktopBlocker .modal-content,
#orientationBlocker .modal-content {
    background: var(--stokers-dark);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

#desktopBlocker .modal-header,
#orientationBlocker .modal-header {
    background: transparent;
    padding-bottom: 0;
}

#desktopBlocker .modal-title,
#orientationBlocker .modal-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    color: var(--stokers-orange);
}

#desktopBlocker .modal-body,
#orientationBlocker .modal-body {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
}

#desktopBlocker .modal-body .text-muted,
#orientationBlocker .modal-body .text-muted {
    color: rgba(255,255,255,0.6) !important;
}

#desktopBlocker .modal-body strong,
#orientationBlocker .modal-body strong {
    color: var(--stokers-orange);
}


/* ============================================
   MAILING COUPONS
   ============================================ */

.mail-coupon-header {
    background: rgba(255,255,255,0.96);
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    text-align: center;
    margin-bottom: var(--sp-lg);
    box-shadow: var(--shadow-sm);
}

    .mail-coupon-header h2 {
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
        color: var(--stokers-dark);
        margin-bottom: var(--sp-sm);
    }

    .mail-coupon-header p {
        font-size: 14px;
        color: var(--stokers-muted);
        margin-bottom: var(--sp-md);
    }

.mail-coupon-cta {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    color: var(--stokers-orange);
    line-height: 1.25;
}

.mail-coupon-btn {
    display: block;
    width: 100%;
    margin-bottom: var(--sp-md);
}

    .mail-coupon-btn img {
        width: 100%;
        max-width: 300px;
        min-height: 83px;
        padding: 4px 0;
        border-radius: var(--radius-md);
        cursor: pointer;
        box-shadow: var(--shadow-md);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .mail-coupon-btn img:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

.no-coupons-card {
    background: rgba(255,255,255,0.96);
    border-radius: var(--radius-md);
    padding: var(--sp-xl) var(--sp-lg);
    text-align: center;
    color: var(--stokers-muted);
    box-shadow: var(--shadow-sm);
}

    .no-coupons-card h3 {
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
        color: var(--stokers-dark);
        margin-bottom: var(--sp-md);
    }

.mail-confirm-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* --- Coupon Image --- */
.mc-image-wrap {
    background: #f5f3f0;
    padding: 0;
    text-align: center;
}

.mc-coupon-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Info Section --- */
.mc-info {
    padding: 24px 22px 20px;
}

.mc-title {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--stokers-olive);
    margin: 0 0 14px;
}

.mc-instructions {
    font-size: 14px;
    line-height: 1.55;
    color: #444;
    margin-bottom: 18px;
}

/* --- Address Block --- */
.mc-address {
    font-size: 15px;
    line-height: 1.55;
    color: var(--stokers-text);
    margin-bottom: 6px;
}

.mc-addr-name {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--stokers-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

/* --- Action Links --- */
.mc-link-row {
    margin: 10px 0 18px;
}

.mc-action-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--stokers-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

    .mc-action-link:hover {
        color: var(--stokers-orange);
    }

/* --- Complete Button --- */
.mc-complete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--stokers-orange);
    border: none;
    border-radius: 10px;
    padding: 14px 36px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 14px;
}

    .mc-complete-btn:hover {
        background: var(--stokers-orange-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(209, 84, 42, 0.3);
    }

    .mc-complete-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

    .mc-complete-btn i {
        font-size: 14px;
    }

/* --- Success Alert --- */
.mc-success {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    color: #2e7d32;
    font-size: 14px;
    line-height: 1.4;
}

    .mc-success i {
        font-size: 20px;
        flex-shrink: 0;
    }

/* --- Disclaimer --- */
.mc-disclaimer {
    font-size: 12px;
    color: #999;
    margin: 0;
    line-height: 1.4;
}

.change-link {
    color: var(--stokers-orange);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease;
}

    .change-link:hover {
        text-decoration: underline;
        color: var(--stokers-orange-hover);
    }


/* ============================================
   PROFILE
   ============================================ */

.profile-header {
    background: linear-gradient(160deg, var(--stokers-dark) 0%, #3D3A35 100%);
    color: #fff;
    padding: var(--sp-xl) var(--sp-lg);
    text-align: center;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    background: var(--stokers-orange);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-md);
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(211,84,0,0.3);
}

.profile-name {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    margin-bottom: var(--sp-xs);
    color: #fff;
}

.profile-email {
    font-size: 14px;
    opacity: 0.75;
}

.profile-item {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid var(--stokers-light);
}

    .profile-item:last-child {
        border-bottom: none;
    }

.profile-label {
    font-weight: 600;
    color: var(--stokers-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-value {
    color: var(--stokers-text);
    font-weight: 500;
}


/* ============================================
   TOASTS
   ============================================ */

#toast-container {
    position: fixed;
    top: 70px;
    right: 16px;
    left: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.toast-notification {
    background: var(--stokers-dark);
    border-radius: var(--radius-md);
    padding: var(--sp-md);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
    box-shadow: var(--shadow-xl);
    animation: toast-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    border-left: 3px solid var(--stokers-orange);
}

    .toast-notification.toast-fade-out {
        animation: toast-fade-out 0.3s ease-out forwards;
    }

@keyframes toast-slide-in {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.toast-icon {
    flex-shrink: 0;
}

    .toast-icon img {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-full);
    }

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--stokers-orange);
    margin-bottom: 3px;
}

.toast-message {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

    .toast-close:hover {
        color: #fff;
    }


/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    flex-shrink: 0;
}

/* Copyright bar — dark background, bracketed by tan lines */
.footer-copyright {
    background: var(--stokers-dark);
    border-top: 2px solid var(--stokers-tan);
    border-bottom: 2px solid var(--stokers-tan);
    padding: 10px 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .footer-copyright p {
        color: rgba(255,255,255,0.5);
        font-size: 12px;
        margin: 0;
    }

/* Links bar — olive background */
.footer-links-bar {
    background: var(--stokers-olive);
    padding: 10px 16px;
    text-align: center;
}

.site-footer a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .site-footer a:hover {
        color: var(--stokers-orange);
    }


/* ============================================
   SPINNER
   ============================================ */

.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================
   QR CODE PAGE (inline overrides)
   ============================================ */

.qrcode-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: var(--radius-md);
    padding: var(--sp-xl) var(--sp-lg);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}

.qrcode-title {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    color: var(--stokers-orange);
    margin-bottom: var(--sp-lg);
    text-transform: uppercase;
}

.qrcode-description {
    font-size: 15px;
    color: var(--stokers-text);
    line-height: 1.6;
    margin-bottom: var(--sp-lg);
}

.qrcode-image-container {
    background: #fff;
    padding: var(--sp-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-lg);
    display: inline-block;
    box-shadow: var(--shadow-sm);
}

.qrcode-image {
    max-width: 250px;
    width: 100%;
    height: auto;
    display: block;
}

.qrcode-subtext {
    font-size: 14px;
    color: var(--stokers-muted);
    margin-bottom: var(--sp-lg);
    line-height: 1.5;
}

    .qrcode-subtext strong {
        color: var(--stokers-orange);
    }


/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* ============================================
   PROFILE PAGES
   ============================================ */

.profile-landing {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--sp-lg) var(--sp-md);
    text-align: center;
}

.profile-welcome h2 {
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 2.2em;
    font-weight: 800;
    color: #D1542A;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 8px;
}

.profile-subtitle p {
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 1.15em;
    color: #48472C;
    text-align: center;
    margin-bottom: 16px;
}

.profile-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-profile-primary {
    display: block;
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    background-color: #D1542A;
    border: none;
    border-radius: 15px;
    padding: 14px 0;
    width: 300px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .btn-profile-primary:hover {
        opacity: 0.8;
        color: #fff;
        text-decoration: none;
    }

.btn-profile-secondary {
    display: block;
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    background-color: #737245;
    border: none;
    border-radius: 15px;
    padding: 14px 0;
    width: 300px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .btn-profile-secondary:hover {
        opacity: 0.8;
        color: #fff;
        text-decoration: none;
    }

/* Sub-navigation bar (INFO | E-MAIL | PASSWORD | COMMUNICATIONS) */
.profile-subnav {
    background-color: #D9CBAC;
    border-radius: 3px;
    margin-bottom: 12px;
}

    .profile-subnav ul {
        list-style: none;
        margin: 0;
        padding: 5px 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .profile-subnav li {
        display: inline-block;
        font-family: 'Teko', Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    .profile-subnav a {
        color: #D4674F;
        text-decoration: none;
        font-size: 12px;
    }

        .profile-subnav a:hover {
            color: #D4674F;
        }

        .profile-subnav a.active {
            font-weight: 700;
        }

    .profile-subnav .sep {
        display: inline-block;
        color: #98522A;
        padding: 0 1em;
    }

/* Profile form container */
.profile-form-container {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--sp-md);
}

.profile-form-title {
    text-align: center;
}

    .profile-form-title h2 {
        font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
        color: #48472C;
        font-size: 1.6em;
        margin-bottom: 12px;
    }

.profile-text {
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 15px;
    color: #48472C;
}

.profile-field {
    margin-bottom: 12px;
}

    .profile-field label {
        font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
        font-size: 15px;
        color: #48472C;
        margin-bottom: 2px;
        display: block;
    }

    .profile-field .form-control {
        font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
        font-size: 15px;
        color: #48472C;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 8px 10px;
    }

    .profile-field select.form-control {
        font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
        font-size: 15px;
        color: #48472C;
    }

.btn-profile-update {
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #FFFDF7;
    color: #ff6e40;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 24px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-profile-update:hover {
        background-color: #FFFF99;
    }


/* ============================================
   PRODUCTS PAGES
   ============================================ */

.product-content {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 var(--sp-md);
}

.page-container.products-bg {
    background: url('/img/wood-bg.png') center/cover no-repeat;
}

.product-stamp {
    max-width: 200px;
    height: auto;
}

.product-text-card {
    background: rgba(255,255,255,0.95);
    border-radius: var(--radius-md);
    padding: var(--sp-lg) var(--sp-md);
    margin-bottom: var(--sp-lg);
}

.product-heading {
    font-family: 'Teko', Arial, Helvetica, sans-serif;
    font-size: 2.2em;
    font-weight: 500;
    color: #737245;
    line-height: 0.9;
    text-align: left;
    margin-bottom: 10px;
}

.product-body {
    font-family: 'Teko', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #48472c;
    line-height: 1.3;
    text-align: left;
    margin-bottom: 12px;
}

.product-note {
    font-family: 'Teko', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #737245;
    text-align: left;
    margin-bottom: 16px;
}

.product-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.btn-product {
    display: inline-block;
    font-family: 'Oswald', Arial Narrow, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    background-color: #D1542A;
    border: none;
    border-radius: 15px;
    padding: 14px 30px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .btn-product:hover {
        background-color: #D1542A;
        opacity: 0.8;
        color: #fff;
        text-decoration: none;
    }

    .btn-product:active {
        transform: scale(0.98);
    }


/* ============================================
   MEDIA QUERIES
   ============================================ */

@media screen and (min-width: 500px) {
    .sgw-text {
        font-size: 20px;
    }
}

@media (pointer: coarse) {
    .menu-btn,
    .store-select-btn,
    .btn-stokers,
    .btn-back,
    .btn-done,
    .btn-location-primary,
    .btn-location-secondary {
        min-height: 48px;
    }
}


/* ============================================
   INFO / CONTENT PAGES (About, Heritage, Quality, Help, FAQ, Terms, Privacy, ContactUs)
   ============================================ */

.info-page-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.info-page-heading {
    font-family: 'Teko', Arial, sans-serif;
    font-size: 2.2em;
    font-weight: 500;
    color: #737245;
    line-height: 1;
    margin-bottom: 12px;
}

.info-page-subheading {
    font-family: 'Teko', Arial, sans-serif;
    font-size: 1.6em;
    font-weight: 500;
    color: #737245;
    line-height: 1;
    margin: 16px 0 8px;
}

.info-page-body {
    font-family: 'Teko', Arial, sans-serif;
    font-size: 18px;
    text-align: left;
    line-height: 1.4;
    color: #48472c;
}

.info-page-body-bold {
    font-family: 'Teko', Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    line-height: 1.6;
    color: #48472c;
}

.info-page-red-title {
    font-family: 'Teko', Arial, sans-serif;
    font-size: 1.8em;
    font-weight: 500;
    color: #D1542A;
    margin-bottom: 8px;
}

.btn-stokers-page {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 15px;
    background-color: #D1542A;
    color: #fff;
    font-family: 'Oswald', Arial Narrow, sans-serif;
    font-size: 1.4em;
    text-align: center;
    text-decoration: none;
    border: none;
    transition: opacity 0.15s ease;
}

    .btn-stokers-page:hover {
        opacity: 0.85;
        color: #fff;
    }

    .btn-stokers-page:active {
        opacity: 0.7;
        color: #fff;
    }

/* Info page FAQ list styles */
.info-faq-list {
    padding-left: 20px;
    margin-bottom: 16px;
}

    .info-faq-list li {
        font-family: 'Teko', Arial, sans-serif;
        font-size: 18px;
        color: #48472c;
        line-height: 1.5;
    }

    .info-faq-list.circle {
        list-style-type: circle;
    }

    .info-faq-list.decimal {
        list-style-type: decimal;
    }

/* Footer link grid matching Blazor */
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    text-align: center;
}

    .footer-links a {
        color: rgba(255,255,255,0.85);
        text-decoration: none;
        font-family: 'Oswald', Arial Narrow, sans-serif;
        font-size: 15px;
        font-weight: 500;
        padding: 4px 12px;
        transition: color 0.15s ease;
    }

        .footer-links a:hover {
            color: var(--stokers-orange);
        }
        /* Vertical pipe dividers between links */
        .footer-links a + a {
            border-left: 1px solid rgba(255,255,255,0.3);
        }