/*===========================================================================*/
/* CS CLUB — Responsive Overrides                                           */
/* Load AFTER app.css and rewards.css                                       */
/* Mobile-first: base = smallest screens, scale UP via min-width            */
/*                                                                           */
/* BREAKPOINT SYSTEM:                                                        */
/*   XS:    0–359px    (very small phones)                                   */
/*   SM:    360–389px  (small phones, Galaxy S8, Z Fold closed)              */
/*   MD:    390–427px  (standard phones, iPhone 12–14)                       */
/*   LG:    428–599px  (large phones, iPhone Plus/Max/Ultra)                 */
/*   TB:    600–767px  (small tablets, foldables open)                       */
/*   TB-MD: 768–899px  (iPad Mini, standard tablets)                         */
/*   TB-LG: 900–1023px (iPad Air, large tablets)                             */
/*   XL:    1024px+    (iPad Pro 12.9", Surface Pro)                         */
/*===========================================================================*/


/* ==========================================================================
   0. BASE — GLOBAL FIXES (all screens)
   ========================================================================== */

/* --- Safe area support --- */
html {
    /* Ensure viewport-fit=cover is respected (meta tag must also be set) */
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    padding: 0; /* Reset — we apply per-element instead */
}

/* --- NOTE: Do NOT set overflow on .app-wrapper — it breaks position:sticky ---
   CSS spec: overflow-x:hidden forces overflow-y:auto, creating a scroll container
   that prevents sticky elements (top-bar, store-bar, category-tabs) from sticking. */

/* --- Typography: clamp() for core font sizes --- */
body {
    font-size: clamp(14px, 3.8vw, 16px);
}

/* Arabic text needs slightly larger minimums */
[dir="rtl"] body {
    font-size: clamp(14.5px, 3.9vw, 16.5px);
}

/* --- Auth screens --- */
.auth-brand {
    font-size: clamp(22px, 7vw, 28px);
}
.auth-brand span {
    font-size: clamp(11px, 3.5vw, 14px);
}
.auth-subtitle {
    font-size: clamp(12px, 3.5vw, 14px);
}
.auth-form-title {
    font-size: clamp(18px, 5.5vw, 22px);
}
.auth-form-wrapper {
    padding: 28px clamp(20px, 5vw, 28px) 40px;
}
.auth-header {
    padding: clamp(32px, 8vw, 48px) clamp(20px, 5vw, 32px) clamp(20px, 5vw, 32px);
}

/* --- Top bar --- */
.top-bar {
    padding-top: env(safe-area-inset-top, 0);
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-inline: clamp(12px, 3vw, 16px);
}
.top-bar-logo .brand-text {
    font-size: clamp(14px, 4.3vw, 17px);
}
.top-bar-logo .brand-text small {
    font-size: clamp(8px, 2.3vw, 9px);
}
.top-bar-logo img {
    height: clamp(36px, 10vw, 48px);
}

/* --- Side menu safe-area --- */
.side-menu {
    padding-top: env(safe-area-inset-top, 0);
}
.menu-header {
    padding-top: calc(22px + env(safe-area-inset-top, 0px));
}

/* --- Bottom nav safe-area & sizing --- */
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-item {
    min-height: 48px; /* Material Design minimum */
    padding: clamp(8px, 2.5vw, 11.5px) 4px clamp(10px, 2.8vw, 13.5px);
}
.bottom-nav-item i {
    font-size: clamp(20px, 5.5vw, 22.5px);
}
.bottom-nav-item span {
    font-size: clamp(9px, 2.6vw, 10.8px);
}
.has-bottom-nav main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.has-bottom-nav .campaign-footer-bar {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* --- Dashboard hero --- */
.welcome-text {
    font-size: clamp(11px, 3.1vw, 12px);
}
.user-name {
    font-size: clamp(15px, 4.5vw, 17px);
}
.points-value {
    font-size: clamp(22px, 6.5vw, 26px);
}
.points-label {
    font-size: clamp(10px, 2.7vw, 11px);
}
.hero-tier-label {
    font-size: clamp(9px, 2.5vw, 10px);
}
.points-card-tier .tier-levels {
    font-size: clamp(8px, 2.3vw, 10px);
}

/* --- Section headers --- */
.section-title {
    font-size: clamp(14px, 3.8vw, 15px);
}
.section-link {
    font-size: clamp(11px, 3vw, 12px);
}

/* --- Announcements --- */
.announcement-card {
    flex: 0 0 clamp(78%, 80vw, 85%);
    max-width: clamp(280px, 80vw, 340px);
}
.announcement-body h4 {
    font-size: clamp(12px, 3.3vw, 13px);
}

/* --- Campaign cards --- */
.campaign-name {
    font-size: clamp(13px, 3.7vw, 15px);
}
.campaign-dates {
    font-size: clamp(10px, 2.7vw, 11px);
}
.campaign-thumb {
    width: clamp(90px, 25vw, 110px);
}

/* --- Campaign hero --- */
.campaign-hero-title {
    font-size: clamp(20px, 6vw, 26px);
}
.campaign-hero-dates {
    font-size: clamp(11px, 3.2vw, 13px);
}

/* --- Category / division tabs --- */
.category-tab {
    font-size: clamp(11px, 3.2vw, 13px);
    min-height: 48px;
}
.division-tab {
    font-size: clamp(10px, 2.8vw, 12px);
    min-height: 48px;
}

/* --- Products grid --- */
.products-grid {
    gap: clamp(10px, 3vw, 18px) clamp(8px, 2.5vw, 14px);
}
.product-upc {
    font-size: clamp(13px, 3.8vw, 16px);
}
.product-name {
    font-size: clamp(9px, 2.6vw, 11px);
}
.product-price {
    font-size: clamp(17px, 5vw, 22px);
}
.product-price small {
    font-size: clamp(12px, 3.5vw, 15px);
}
.product-rrp {
    font-size: clamp(13px, 3.5vw, 16px);
}
.product-info {
    padding: 0 clamp(8px, 2.5vw, 14px) clamp(6px, 1.5vw, 8px) clamp(8px, 2.5vw, 14px);
}
/* Fix the diagonal triangle cut to not use hardcoded 400px border */
.product-img-wrap::after {
    border-width: 0 100vw 18px 0;
}

/* --- Points page --- */
.points-big {
    font-size: clamp(40px, 14vw, 56px);
}
.points-hero p {
    font-size: clamp(12px, 3.3vw, 14px);
}

/* --- Invoice detail --- */
.inv-amount {
    font-size: clamp(28px, 9vw, 38px);
}
.inv-amount small {
    font-size: clamp(14px, 4.5vw, 18px);
}

/* --- Purchases --- */
.purchase-total {
    font-size: clamp(17px, 5vw, 20px);
}

/* --- Profile / Tier card --- */
.tier-name {
    font-size: clamp(22px, 7vw, 28px);
}
.tier-label {
    font-size: clamp(10px, 2.8vw, 11px);
}
.tier-levels {
    font-size: clamp(8px, 2.3vw, 10px);
}

/* --- Coupons --- */
.coupon-amount {
    font-size: clamp(22px, 7vw, 28px);
}
.coupon-left {
    width: clamp(80px, 24vw, 100px);
}
.coupon-title {
    font-size: clamp(12px, 3.5vw, 14px);
}
.coupon-code {
    font-size: clamp(12px, 3.3vw, 14px);
}

/* --- Stores --- */
.store-name {
    font-size: clamp(15px, 4.5vw, 18px);
}
.store-img {
    height: clamp(120px, 35vw, 160px);
}

/* --- About --- */
.about-hero h1 {
    font-size: clamp(20px, 6vw, 24px);
}
.about-content p {
    font-size: clamp(13px, 3.7vw, 15px);
}

/* --- Page header: sticky below top-bar for back navigation --- */
.page-header {
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 90;
    background: var(--surface);
    padding: 13px 20px; /* reduced from 16px → ~8% shorter bar */
}
.page-header h1 {
    font-size: clamp(16px, 4.5vw, 18px);
}

/* --- Popups / Modals --- */
.popup-title {
    font-size: clamp(17px, 5vw, 20px);
}
.popup-text {
    font-size: clamp(13px, 3.5vw, 14px);
}
.popup-points-value {
    font-size: clamp(36px, 12vw, 48px);
}

/* --- QR Fullscreen --- */
.qr-fullscreen-name {
    font-size: clamp(16px, 4.5vw, 18px);
}
.qr-fullscreen-code {
    font-size: clamp(12px, 3.5vw, 14px);
}
.qr-fullscreen-inner {
    padding: clamp(20px, 5vw, 28px);
}
.qr-fullscreen-inner canvas,
.qr-fullscreen-inner svg {
    width: clamp(180px, 55vw, 220px);
    height: clamp(180px, 55vw, 220px);
}

/* --- Countdown --- */
.countdown-title {
    font-size: clamp(18px, 5.5vw, 22px);
}
.countdown-subtitle {
    font-size: clamp(13px, 3.8vw, 15px);
}
.countdown-number {
    font-size: clamp(28px, 9vw, 40px);
    padding: clamp(8px, 2.5vw, 12px) clamp(4px, 1.5vw, 6px);
}
.countdown-unit {
    min-width: clamp(50px, 15vw, 64px);
}
.countdown-sep {
    font-size: clamp(22px, 7vw, 32px);
}

/* --- Form inputs: prevent iOS zoom (must be ≥16px) --- */
.form-input,
.form-select,
.support-select,
.support-textarea,
.chat-reply-input {
    font-size: max(16px, 1rem);
}
/* Ensure minimum touch target */
.form-input,
.form-select,
.btn,
.store-picker-btn,
.support-submit-btn,
.checkin-btn,
.spin-btn,
.game-play-btn,
.share-btn {
    min-height: 48px;
}

/* --- OTP fix: remove erroneous safe-area-inset-top --- */
.otp-box {
    height: 56px;
    width: clamp(42px, 12vw, 48px);
}

/* --- Chat bubble images fix: remove erroneous safe-area-inset-top --- */
.chat-bubble-images a {
    height: 56px;
}

/* --- Stories bar --- */
.story-card {
    width: clamp(90px, 28vw, 110px);
    height: clamp(156px, 48vw, 192px);
}
.story-card-name {
    font-size: clamp(9px, 2.7vw, 11px);
}

/* --- Feed posts --- */
.post-publisher-name {
    font-size: clamp(13px, 3.5vw, 14px);
}
.post-publisher-meta {
    font-size: clamp(11px, 2.8vw, 12px);
}
.post-caption {
    font-size: clamp(13px, 3.5vw, 14px);
}

/* --- Lightbox --- */
.lightbox-counter {
    font-size: clamp(12px, 3.3vw, 14px);
    top: calc(16px + env(safe-area-inset-top, 0px));
}
.lightbox-close {
    top: calc(12px + env(safe-area-inset-top, 0px));
}

/* --- Story viewer safe areas --- */
.story-viewer-close {
    top: calc(8px + env(safe-area-inset-top, 0px));
}

/* --- Rewards --- */
.checkin-balance-value {
    font-size: clamp(24px, 7.5vw, 32px);
}
.checkin-day {
    min-width: clamp(44px, 13vw, 52px);
    padding: clamp(6px, 2vw, 10px) clamp(2px, 1vw, 4px) clamp(6px, 2vw, 8px);
}
.checkin-day-label {
    font-size: clamp(8px, 2.3vw, 10px);
}
.checkin-day-points {
    font-size: clamp(11px, 3.2vw, 13px);
}
.reward-feature-title {
    font-size: clamp(10px, 2.7vw, 11px);
}
.referral-code {
    font-size: clamp(18px, 5.5vw, 24px);
}
.referral-reward-pts {
    font-size: clamp(22px, 7vw, 28px);
}

/* --- Wheel container responsiveness --- */
.wheel-container canvas {
    max-width: 100%;
    height: auto !important;
}
.reward-modal-body {
    overflow-x: hidden;
}

/* --- Toast --- */
.reward-toast {
    top: calc(70px + env(safe-area-inset-top, 0px));
    max-width: calc(90vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
}
.share-toast {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}
.has-bottom-nav .share-toast {
    bottom: calc(95px + env(safe-area-inset-bottom, 0px));
}

/* --- Images: global safety net --- */
img, video {
    max-width: 100%;
}
video {
    width: 100%;
}

/* --- Video aspect ratio --- */
.lightbox-slide video,
.story-viewer-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Support / ticket --- */
.ticket-card-number {
    font-size: clamp(12px, 3.3vw, 13px);
}
.ticket-card-desc {
    font-size: clamp(12px, 3.3vw, 13px);
}

/* --- Store bar sticky position fix --- */
.store-bar {
    top: calc(56px + env(safe-area-inset-top, 0px));
}
/* Store picker button: reduce height ~10% */
.store-bar .store-picker-btn {
    padding: 6px 12px;
    font-size: 13px;
}
.category-tabs {
    top: calc(108px + env(safe-area-inset-top, 0px));
}
.category-tabs.division-tabs {
    top: calc(156px + env(safe-area-inset-top, 0px));
}

/* --- Campaign footer bar --- */
.campaign-footer-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* --- Prevent text overflow everywhere --- */
.campaign-name,
.announcement-body h4,
.coupon-title,
.store-name,
.ticket-card-desc,
.inv-item-name,
.purchase-inv {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Brand preference bottom sheet: cap height --- */
.brand-modal-overlay .brand-modal,
.brand-preference-modal {
    max-height: calc(85dvh - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

/* --- Menu overlay: use logical properties for RTL --- */
.menu-close {
    inset-inline-end: 16px;
}

/* --- Fix Laravel pagination --- */
/* app.css sets .pagination-wrapper a/span to width:36px circles.
   We override with SAME selectors (wins by source order) to allow
   text content like "Previous"/"Next" to fit properly. */
.pagination-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 8px;
}
/* Reset fixed circle sizing → flexible pill buttons */
.pagination-wrapper a,
.pagination-wrapper span {
    width: auto;
    min-width: 36px;
    height: 38px;
    padding: 0 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    text-decoration: none;
}
.pagination-wrapper a:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Active page */
.pagination-wrapper span.current,
.pagination-wrapper .active > span,
.pagination-wrapper span[aria-current="page"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Disabled state */
.pagination-wrapper .disabled > span,
.pagination-wrapper span[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    border-color: var(--border-light);
    color: var(--text-light);
}
/* List reset (for simple-default / bootstrap views) */
.pagination-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.pagination-wrapper li {
    display: inline-flex;
}
/* Nav reset (for tailwind view) */
.pagination-wrapper nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 8px;
}
.pagination-wrapper nav > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* Hide the "Showing X to Y" text from tailwind view */
.pagination-wrapper nav > div > p {
    display: none;
}
/* SVG arrows */
.pagination-wrapper svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}


/* ==========================================================================
   1. XS — Very small phones (max-width: 359px)
   ========================================================================== */
@media screen and (max-width: 359px) {
    /* Tighten container padding */
    .container {
        padding: 0 12px;
    }

    /* Shrink auth header */
    .auth-logo {
        width: 72px;
    }

    /* OTP: shrink boxes to fit */
    .otp-box {
        width: 38px;
        height: 48px;
        font-size: 18px;
    }
    .otp-display {
        gap: 6px;
    }

    /* Buttons: tighten */
    .btn {
        padding: 12px 20px;
        font-size: 13px;
    }

    /* Coupon card: tighter */
    .coupon-left {
        width: 72px;
    }
    .coupon-amount {
        font-size: 20px;
    }
    .coupon-right {
        padding: 10px 12px;
    }

    /* Campaign thumb */
    .campaign-thumb {
        width: 80px;
    }

    /* Rewards feature cards: allow wrap */
    .rewards-features {
        flex-wrap: wrap;
    }
    .reward-feature-card {
        flex: 1 1 calc(50% - 5px);
    }

    /* Check-in days: scroll */
    .checkin-day {
        flex: 0 0 calc((100% - 24px) / 5);
        min-width: 44px;
    }

    /* Side menu */
    .side-menu {
        width: 260px;
        left: -280px;
    }
    [dir="rtl"] .side-menu {
        right: -280px;
    }

    /* Profile form: single column on XS */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Dashboard QR btn */
    .dashboard-qr-btn,
    .tier-qr {
        width: 40px;
        height: 40px;
    }

    /* Countdown: tighter */
    .countdown-unit {
        min-width: 46px;
    }
    .countdown-number {
        font-size: 26px;
        padding: 8px 3px;
    }
    .countdown-timer {
        gap: 4px;
    }
    .countdown-sep {
        font-size: 20px;
    }

    /* Store bar select */
    .store-bar select {
        min-width: 140px;
        font-size: 13px;
    }
}


/* ==========================================================================
   2. SM — Small phones (min-width: 360px) — base reference
   ========================================================================== */
/* Most styles in app.css are designed for ~375px, so 360px is close.
   Only minor tweaks needed. */


/* ==========================================================================
   3. MD — Standard phones (min-width: 390px)
   ========================================================================== */
@media screen and (min-width: 390px) {
    /* Slightly more breathing room */
    .dashboard-hero {
        padding: 18px 18px 22px;
    }

    /* Announcements: show a peek of next card */
    .announcement-card {
        flex: 0 0 82%;
    }
}


/* ==========================================================================
   4. LG — Large phones / phablets (min-width: 428px)
   ========================================================================== */
@media screen and (min-width: 428px) {
    /* Relax container */
    .container {
        padding: 0 20px;
    }

    /* Dashboard hero */
    .dashboard-hero {
        padding: 20px 20px 24px;
    }

    /* Story cards: slightly larger */
    .story-card {
        width: 115px;
        height: 200px;
    }

    /* Announcements peek */
    .announcement-card {
        flex: 0 0 78%;
    }

    /* Rewards features can breathe */
    .rewards-features {
        gap: 12px;
    }

    /* Bigger check-in days */
    .checkin-day {
        min-width: 54px;
        padding: 10px 6px 8px;
    }

    /* Coupon left */
    .coupon-left {
        width: 105px;
    }
}


/* ==========================================================================
   5. TB — Small tablets, foldables open (min-width: 600px)
   ========================================================================== */
@media screen and (min-width: 600px) {
    /* --- UNLOCK APP WRAPPER for tablets --- */
    .app-wrapper {
        max-width: 100%;
    }

    .container {
        max-width: 600px;
        padding: 0 24px;
    }

    /* Bottom nav: unlock width */
    .bottom-nav {
        max-width: 600px;
    }
    .bottom-nav-item {
        padding: 12px 8px 14px;
    }
    .bottom-nav-item i {
        font-size: 24px;
    }
    .bottom-nav-item span {
        font-size: 11px;
    }

    /* Campaign footer bar */
    .campaign-footer-bar {
        max-width: 600px;
    }

    /* Cart sheet */
    .cart-sheet {
        max-width: 500px;
    }

    /* Products grid: 3 columns */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Modals: centered, not full-width */
    .popup-box {
        max-width: 420px;
    }
    .store-picker-modal {
        max-width: 420px;
    }
    .reward-modal {
        max-width: 440px;
    }

    /* Side menu: slightly wider */
    .side-menu {
        width: 320px;
    }

    /* Auth: constrain width */
    .auth-screen {
        align-items: center;
    }
    .auth-form-wrapper {
        max-width: 500px;
        border-radius: 28px;
        margin: 20px auto 0;
    }
    .auth-header {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Stories: larger cards */
    .story-card {
        width: 120px;
        height: 210px;
    }

    /* Announcements: show 2 cards */
    .announcement-card {
        flex: 0 0 55%;
        max-width: 360px;
    }

    /* Campaign cards: horizontal layout stays, bigger thumb */
    .campaign-thumb {
        width: 130px;
    }

    /* Store cards: can be side by side */
    .stores-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Invoice items: more spacious */
    .inv-item {
        padding: 16px 20px;
    }

    /* Feed posts: constrain width */
    .post-card,
    .feed-post {
        max-width: 560px;
        margin-inline: auto;
    }

    /* Profile form: keep 2 col */
    .profile-form {
        max-width: 560px;
        margin-inline: auto;
    }

    /* Points hero */
    .points-hero {
        padding: 40px 32px;
    }

    /* QR fullscreen: larger */
    .qr-fullscreen-inner canvas,
    .qr-fullscreen-inner svg {
        width: 260px;
        height: 260px;
    }

    /* Rewards: keep inline */
    .rewards-features {
        max-width: 560px;
        margin-inline: auto;
    }
    .rewards-section {
        max-width: 560px;
        margin-inline: auto;
    }

    /* Check-in days: all visible */
    .checkin-day {
        flex: 1;
        min-width: 0;
    }

    /* Game field */
    .game-field {
        min-height: 340px;
    }
}


/* ==========================================================================
   6. TB-MD — Standard tablets: iPad Mini, Galaxy Tab (min-width: 768px)
   ========================================================================== */
@media screen and (min-width: 768px) {
    /* Override the existing media query that only set app-wrapper max-width */
    .app-wrapper {
        max-width: 100%;
    }

    .container {
        max-width: 720px;
    }

    /* Bottom nav */
    .bottom-nav {
        max-width: 720px;
    }

    /* Campaign footer */
    .campaign-footer-bar {
        max-width: 720px;
    }

    /* Products grid: 3 columns with more gap */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 16px;
    }

    /* Dashboard hero: more spacious */
    .dashboard-hero {
        padding: 28px 28px 32px;
    }
    .points-card {
        padding: 16px 20px;
    }

    /* Announcements: show 2+ cards */
    .announcement-card {
        flex: 0 0 45%;
        max-width: 400px;
    }

    /* Feed: constrain */
    .post-card,
    .feed-post {
        max-width: 640px;
    }

    /* Stories bar: larger */
    .story-card {
        width: 130px;
        height: 225px;
    }

    /* Store cards: still 2 col */
    .stores-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Coupons: 2 columns */
    .coupons-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* History items: more padding */
    .history-list {
        max-width: 640px;
        margin-inline: auto;
    }

    /* Profile: centered */
    .profile-form {
        max-width: 640px;
    }

    /* Points hero */
    .points-hero {
        padding: 48px 40px;
    }

    /* Rewards section */
    .rewards-section {
        max-width: 640px;
    }
    .rewards-features {
        max-width: 640px;
    }

    /* Auth: more centered */
    .auth-form-wrapper {
        max-width: 460px;
    }

    /* Cart sheet: centered */
    .cart-sheet {
        max-width: 480px;
    }

    /* Modals: proper centering with max-width */
    .popup-box {
        max-width: 440px;
    }

    /* Invoice detail */
    .inv-detail {
        max-width: 640px;
        margin-inline: auto;
    }

    /* Support form */
    .support-form {
        max-width: 600px;
        margin-inline: auto;
    }
}


/* ==========================================================================
   7. TB-LG — Large tablets (min-width: 900px)
   ========================================================================== */
@media screen and (min-width: 900px) {
    .container {
        max-width: 860px;
    }

    .app-wrapper {
        max-width: 100%;
    }

    /* Bottom nav */
    .bottom-nav {
        max-width: 860px;
    }
    .bottom-nav-item i {
        font-size: 24px;
    }
    .bottom-nav-item span {
        font-size: 12px;
    }

    /* Campaign footer */
    .campaign-footer-bar {
        max-width: 860px;
    }

    /* Products grid: 4 columns */
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px 18px;
    }

    /* Announcements: 3 visible */
    .announcement-card {
        flex: 0 0 32%;
    }

    /* Store cards: 3 columns */
    .stores-list {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Feed: constrain more */
    .post-card,
    .feed-post {
        max-width: 680px;
    }

    /* Coupons: 2 columns wider */
    .coupons-list {
        gap: 18px;
    }

    /* Support hub: more space */
    .support-hub {
        max-width: 720px;
        margin-inline: auto;
    }

    /* Profile form: 2 column fields */
    .profile-form {
        max-width: 720px;
    }

    /* Rewards */
    .rewards-section {
        max-width: 720px;
    }
    .rewards-features {
        max-width: 720px;
    }
}


/* ==========================================================================
   8. XL — iPad Pro, Surface Pro (min-width: 1024px)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    /* Cap at largest tablet width — desktop displays the tablet layout centered */
    .app-wrapper {
        max-width: 100%;
        /* margin: 0 auto inherited from app.css — centers on wide viewports */
    }

    .container {
        max-width: 960px;
    }

    /* Bottom nav: match */
    .bottom-nav {
        max-width: 960px;
    }

    /* Campaign footer */
    .campaign-footer-bar {
        max-width: 960px;
    }

    /* Products grid: 4 columns with generous gap */
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px 20px;
    }

    /* Dashboard hero */
    .dashboard-hero {
        padding: 32px 32px 36px;
    }

    /* Feed: constrained center */
    .post-card,
    .feed-post {
        max-width: 720px;
    }

    /* Stories: larger */
    .story-card {
        width: 140px;
        height: 240px;
    }
    .story-card-name {
        font-size: 12px;
    }

    /* Announcements */
    .announcement-card {
        flex: 0 0 28%;
        max-width: 320px;
    }

    /* Store cards: 3 columns */
    .stores-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Coupons: 3 columns */
    .coupons-list {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Points hero */
    .points-hero {
        padding: 56px 40px;
    }
    .points-big {
        font-size: 64px;
    }

    /* Auth: tighter centering */
    .auth-form-wrapper {
        max-width: 440px;
        margin-top: 40px;
    }

    /* Modals */
    .popup-box {
        max-width: 460px;
    }

    /* Side menu: align to app frame edge, not viewport edge */
    .side-menu {
        width: 360px;
        left: calc((100vw - 960px) / 2);
        transform: translateX(-100%);
        visibility: hidden;
    }
    .side-menu.active {
        transform: translateX(0);
        visibility: visible;
    }
    [dir="rtl"] .side-menu {
        left: auto;
        right: calc((100vw - 960px) / 2);
        transform: translateX(100%);
        visibility: hidden;
    }
    [dir="rtl"] .side-menu.active {
        left: auto;
        right: calc((100vw - 960px) / 2);
        transform: translateX(0);
        visibility: visible;
    }

    /* Menu overlay: constrain to app frame
    .menu-overlay {
        left: calc((100vw - 960px) / 2);
        right: calc((100vw - 960px) / 2);
    } */

    /* Profile */
    .profile-form {
        max-width: 760px;
    }

    /* Rewards */
    .rewards-section {
        max-width: 760px;
    }
    .rewards-features {
        max-width: 760px;
    }

    /* Game field */
    .game-field {
        min-height: 380px;
    }

    /* Support */
    .support-form {
        max-width: 640px;
    }

    /* Invoice */
    .inv-detail {
        max-width: 720px;
    }
}


/* ==========================================================================
   9. LANDSCAPE ORIENTATION FIXES
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* On landscape phones, reduce vertical padding */
    .dashboard-hero {
        padding: 12px 16px 16px;
    }
    .auth-header {
        padding: 20px 24px 16px;
    }
    .points-hero {
        padding: 20px;
    }
    .campaign-hero {
        height: 50dvh;
        min-height: 180px;
    }

    /* Story viewer: full screen still */
    .story-viewer {
        height: 100dvh;
    }

    /* Countdown: compact */
    .countdown-content {
        padding: 16px;
    }
    .countdown-timer {
        margin-bottom: 20px;
    }

    /* Rewards: compact */
    .checkin-card {
        padding: 12px;
    }
}


/* ==========================================================================
   10. FOLDABLE-SPECIFIC (Galaxy Z Fold open state)
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 768px) and (min-height: 700px) {
    /* Foldable open: treat like small tablet */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================================
   11. DARK MODE AWARENESS (if ever added)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* Placeholder: dark mode overrides would go here */
    /* Currently app uses fixed dark theme for primary/headers */
}


/* ==========================================================================
   12. REDUCED MOTION (accessibility)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .product-card:hover {
        transform: none;
    }
    .bottom-nav {
        transition: none;
    }
}


/* ==========================================================================
   13. PRINT STYLES (if customer tries to print)
   ========================================================================== */
@media print {
    .top-bar,
    .bottom-nav,
    .side-menu,
    .menu-overlay,
    .spinner-overlay,
    .qr-fullscreen,
    .cart-sheet-overlay {
        display: none !important;
    }
    .app-wrapper {
        max-width: 100%;
        box-shadow: none;
    }
    .has-bottom-nav main {
        padding-bottom: 0;
    }
}