/* =============================================
   GiftByTicket — MOBILE APP UI v6 (PRODUCTION)
   Loaded LAST · All rules inside @media (max-width: 767px)
   ============================================= */

/* ─── CSS VARIABLES ─── */
@media (max-width: 767px) {
  :root {
    --mob-pad:  14px;
    --mob-r:    8px;    /* Google-style subtle radius */
    --mob-rsm:  6px;
    --mob-rl:   12px;   /* larger containers */
    --mob-sh:   0 2px 8px rgba(0,0,0,0.08);
  }
}

/* ─── GLOBAL ─── */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { padding-bottom: 62px !important; }
  img  { max-width: 100% !important; height: auto !important; }
}

/* ─────────────────────────────────────────────
   1. NAVBAR
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .navbar {
    position: sticky !important;
    top: 0 !important; z-index: 999 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 14px rgba(0,0,0,0.06) !important;
  }
  .navbar-inner { height: 58px !important; padding: 0 var(--mob-pad) !important; }
  .navbar-logo img { height: 34px !important; width: auto !important; }
  .navbar-nav, .city-dropdown, .profile-dropdown-wrapper { display: none !important; }
  .navbar-actions .btn-outline, .navbar-actions .btn-primary { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  .navbar-actions { display: flex !important; align-items: center !important; }
}

/* ─────────────────────────────────────────────
   2. BOTTOM NAV
───────────────────────────────────────────── */
.mob-bottom-nav { display: none; }

@media (max-width: 767px) {
  .mob-bottom-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 58px; z-index: 9000;
    background: #fff;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.07), 0 -3px 16px rgba(0,0,0,0.08);
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    text-decoration: none; color: #9CA3AF;
    font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 500;
    padding: 4px 2px; border: none; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color 0.15s;
  }
  .mob-nav-item:active { transform: scale(0.88); }
  .mob-nav-item i {
    font-size: 17px; line-height: 1;
    width: 32px; height: 22px; border-radius: var(--mob-r);
    display: flex; align-items: center; justify-content: center;
  }
  .mob-nav-item span { font-size: 9px; font-weight: 500; line-height: 1; }
  .mob-nav-item.active { color: #6D28D9; }
  .mob-nav-item.active i { background: rgba(109,40,217,0.1); color: #6D28D9; }
  .mob-nav-item.active span { font-weight: 700; color: #6D28D9; }
}

/* ─────────────────────────────────────────────
   3. HERO BANNER — Side-by-side (text + image)
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-banner {
    padding-top: 0 !important; padding-bottom: 0 !important;
    min-height: unset !important; overflow: hidden !important;
  }

  .hb-inner {
    display: grid !important;
    grid-template-columns: 1fr 112px !important;
    grid-template-rows: auto !important;
    gap: 0 10px !important;
    padding: 16px var(--mob-pad) 14px !important;
    align-items: center !important;
    text-align: left !important;
    max-width: 100% !important; width: 100% !important; box-sizing: border-box !important;
  }

  .hb-left {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 0 !important;
    grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important;
  }
  .hb-center {
    display: flex !important; align-items: center !important; justify-content: center !important;
    grid-column: 2 !important; grid-row: 1 !important;
  }
  .hb-right { display: none !important; }

  .hb-headline {
    font-size: 21px !important; line-height: 1.07 !important;
    margin-bottom: 5px !important; letter-spacing: -0.025em !important;
  }
  .hb-subhead {
    font-size: 11px !important; line-height: 1.4 !important;
    margin-bottom: 10px !important; color: #374151 !important; font-weight: 600 !important;
  }
  .hb-ticket-img {
    width: 104px !important; height: 104px !important;
    max-width: 112px !important; max-height: 112px !important;
    object-fit: contain !important;
    border-radius: var(--mob-rl) !important; /* subtle radius */
    display: block !important; margin: 0 auto !important; animation: none !important;
    filter: drop-shadow(0 5px 14px rgba(109,40,217,0.22)) !important;
  }
  .hb-cta-row {
    display: flex !important; flex-direction: row !important;
    gap: 6px !important; width: 100% !important; flex-wrap: nowrap !important;
  }
  .hb-btn-primary, .hb-btn-outline {
    flex: 0 0 auto !important; height: 34px !important;
    border-radius: var(--mob-r) !important;
    font-size: 10px !important; padding: 0 9px !important;
    white-space: nowrap !important; font-weight: 700 !important;
    gap: 4px !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .hb-headline { font-size: 19px !important; margin-bottom: 4px !important; }
  .hb-subhead  { font-size: 10.5px !important; }
  .hb-btn-primary, .hb-btn-outline { font-size: 9.5px !important; padding: 0 7px !important; }
  .hb-ticket-img { width: 92px !important; height: 92px !important; max-width: 100px !important; }
}

/* ─────────────────────────────────────────────
   4. STATS BAR — Horizontal scroll (purple bg)
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .statsbar {
    background: linear-gradient(135deg,#4C1D95 0%,#6D28D9 55%,#7C3AED 100%) !important;
  }
  .statsbar::before { display: none !important; }

  .statsbar-inner {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important;
    gap: 8px !important;
    padding: 10px var(--mob-pad) 12px !important;
    max-width: 100% !important; width: 100% !important; box-sizing: border-box !important;
    align-items: stretch !important; margin: 0 !important;
  }
  .statsbar-inner::-webkit-scrollbar { display: none !important; }

  .sb-stat {
    flex: 0 0 auto !important; flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    width: 102px !important; min-width: 102px !important;
    background: rgba(255,255,255,0.13) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: var(--mob-r) !important;
    display: flex !important; flex-direction: column !important;
    gap: 3px !important; padding: 9px 9px 8px !important;
    border-right: 1px solid rgba(255,255,255,0.22) !important;
    border-bottom: 1px solid rgba(255,255,255,0.22) !important;
    grid-column: unset !important;
  }
  .sb-stat:nth-child(1),.sb-stat:nth-child(2),.sb-stat:nth-child(3),.sb-stat:nth-child(4) {
    border: 1px solid rgba(255,255,255,0.22) !important;
    padding: 9px 9px 8px !important; width: 102px !important;
  }

  .sb-icon {
    width: 24px !important; height: 24px !important; border-radius: 6px !important;
    background: rgba(255,255,255,0.18) !important; color: #fff !important;
    font-size: 10px !important; display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important;
  }
  .sb-num { font-size: 15px !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; }
  .sb-lbl { font-size: 9px !important; color: rgba(255,255,255,0.82) !important; font-weight: 500 !important; line-height: 1.2 !important; }

  .sb-priority {
    flex: 0 0 auto !important; flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    width: 148px !important; min-width: 148px !important;
    background: rgba(251,191,36,0.2) !important;
    border: 1px solid rgba(251,191,36,0.45) !important;
    border-radius: var(--mob-r) !important;
    margin: 0 !important; grid-column: unset !important;
    padding: 9px 9px 8px !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 3px !important;
  }
  .sb-crown { display: none !important; }
  .sb-p-title { font-size: 10px !important; color: #FBBF24 !important; font-weight: 700 !important; white-space: normal !important; line-height: 1.25 !important; }
  .sb-p-sub   { font-size: 8.5px !important; color: rgba(255,255,255,0.8) !important; white-space: normal !important; line-height: 1.25 !important; }
  .sb-p-btn {
    font-size: 9px !important; padding: 4px 9px !important;
    border-radius: 99px !important; margin-left: 0 !important;
    align-self: flex-start !important; flex-shrink: 0 !important;
    background: linear-gradient(135deg,#D97706,#FBBF24) !important;
    color: #1C1C1C !important; font-weight: 700 !important;
    text-decoration: none !important; display: inline-block !important; margin-top: 2px !important;
  }
}

/* ─────────────────────────────────────────────
   5. SECTION SPACING
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-wrap { padding: 16px 0 !important; }
  .container { padding: 0 var(--mob-pad) !important; }

  .section-hdr {
    flex-direction: row !important; align-items: center !important;
    justify-content: space-between !important; gap: 8px !important;
    margin-bottom: 10px !important; flex-wrap: nowrap !important;
  }
  .section-hdr-left {
    flex: 1 !important; min-width: 0 !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
    overflow: hidden !important;
  }
  .section-ttl {
    font-size: 14px !important; line-height: 1.2 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }
  .view-all-link { font-size: 11px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* ─────────────────────────────────────────────
   6. WHY SECTION — CSS grid-area layout
   Icon left column, badge/title/desc/list right
   KEY FIX: min-width:0 + overflow-wrap:break-word
   stops text from escaping the column boundary
───────────────────────────────────────────── */
@media (max-width: 767px) {
  #why-section { padding: 16px 0 !important; }

  /* Heading area */
  #why-section > .container > div:first-child { margin-bottom: 12px !important; text-align: left !important; }
  #why-section > .container > div:first-child > span {
    font-size: 9.5px !important; padding: 3px 9px !important; margin-bottom: 5px !important;
  }
  #why-section h2 { font-size: 17px !important; line-height: 1.2 !important; margin-bottom: 3px !important; }
  #why-section p  { font-size: 11.5px !important; line-height: 1.5 !important; max-width: 100% !important; margin: 0 !important; }

  /* 1-column grid */
  #why-cards-grid { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 12px !important; }

  /* CARD: CSS named grid areas — icon spans left column, content in right */
  .why-card {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "icon badge"
      "icon title"
      "icon desc"
      "icon list" !important;
    column-gap: 10px !important;
    row-gap: 1px !important;
    padding: 12px !important;
    border-radius: var(--mob-r) !important;
    overflow: hidden !important;
    /* reset flex */
    flex-direction: unset !important; gap: unset !important; align-items: unset !important;
  }

  .why-card-icon-wrap {
    grid-area: icon !important; grid-row: 1 / 5 !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    border-radius: var(--mob-r) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; align-self: start !important;
  }
  .why-card-icon-wrap i { font-size: 1.1rem !important; }

  .why-card-badge {
    grid-area: badge !important;
    font-size: 8.5px !important; padding: 2px 7px !important;
    display: inline-block !important; width: fit-content !important; align-self: center !important;
  }
  .why-card-title {
    grid-area: title !important;
    font-size: 13px !important; font-weight: 800 !important;
    line-height: 1.2 !important; margin: 0 !important; align-self: center !important;
    /* Prevent overflow */
    min-width: 0 !important; overflow-wrap: break-word !important; word-break: break-word !important;
  }
  .why-card-desc {
    grid-area: desc !important;
    font-size: 11px !important; line-height: 1.5 !important; margin: 2px 0 0 !important;
    /* CRITICAL: constrain width so text wraps, NOT clips */
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important; /* never clip — let grid row expand */
    display: block !important;
  }
  .why-card-list {
    grid-area: list !important;
    gap: 2px !important; margin-top: 4px !important;
    padding: 0 !important; list-style: none !important;
    display: flex !important; flex-direction: column !important;
    min-width: 0 !important;
  }
  .why-card-list li {
    font-size: 11px !important; line-height: 1.4 !important;
    display: flex !important; align-items: center !important;
    gap: 5px !important; white-space: normal !important;
    min-width: 0 !important; overflow-wrap: break-word !important;
  }

  .why-card-featured { transform: none !important; }

  /* Bottom CTA */
  #why-cta-btn {
    font-size: 13px !important; padding: 11px 20px !important;
    border-radius: var(--mob-r) !important; /* Google style */
    width: 100% !important; justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────
   7. GIVEAWAY CARDS (Campaign section)
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .gc-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  .gc-card {
    border-radius: var(--mob-r) !important;
    border: 1px solid rgba(109,40,217,0.07) !important;
    display: flex !important; flex-direction: row !important;
    overflow: hidden !important; min-height: 100px !important; background: #fff !important;
  }

  .gc-img-area {
    width: 90px !important; min-width: 90px !important;
    height: auto !important; min-height: 100px !important;
    border-right: 1px solid rgba(0,0,0,0.04) !important;
    border-bottom: none !important; flex-shrink: 0 !important;
    padding: 8px 5px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: linear-gradient(135deg,#F5F3FF,#EDE9FE) !important;
  }
  .gc-img { max-height: 68px !important; max-width: 76px !important; width: 100% !important; object-fit: contain !important; }
  .gc-card:hover .gc-img { transform: none !important; }

  .gc-body {
    padding: 9px 10px 9px !important; flex: 1 !important;
    display: flex !important; flex-direction: column !important;
    gap: 2px !important; overflow: hidden !important; min-width: 0 !important;
  }
  .gc-title { font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; }
  .gc-worth { font-size: 10.5px !important; font-weight: 600 !important; }
  .gc-benefits-list, .gc-body > div[style*="10b981"] { display: none !important; }

  .gc-footer {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 5px !important;
    padding-top: 6px !important; margin-top: auto !important;
    border-top: 1px solid rgba(0,0,0,0.04) !important; flex-wrap: nowrap !important;
  }
  .gc-free-tag {
    font-size: 9px !important; padding: 2px 6px !important;
    border-radius: 4px !important; white-space: nowrap !important;
    flex-shrink: 0 !important; display: inline-flex !important;
    align-items: center !important; gap: 3px !important;
  }
  .gc-register-btn {
    font-size: 10px !important; padding: 5px 9px !important;
    border-radius: var(--mob-r) !important; margin-left: auto !important;
    white-space: nowrap !important; flex: 0 0 auto !important; line-height: 1.4 !important;
  }
  .gc-badge { font-size: 7.5px !important; padding: 2px 5px !important; top: 5px !important; left: 5px !important; border-radius: 3px !important; }

  .progress-bar  { height: 3px !important; border-radius: 2px !important; background: rgba(0,0,0,0.07) !important; }
  .progress-fill { height: 100% !important; background: linear-gradient(90deg,#4C1D95,#7C3AED) !important; }
  .slots-text    { font-size: 9px !important; color: #9CA3AF !important; margin-top: 2px !important; }
}

/* ─────────────────────────────────────────────
   8. COUPON CARDS — 1 card per row, full width
   User request: row-by-row, no horizontal scroll
───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Single column — one card per row, full width */
  #coupons-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .coupon-card {
    border-radius: var(--mob-r) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Card header strip */
  .coupon-card > div:first-child {
    padding: 12px 14px 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Card body */
  .coupon-card > div:last-child {
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Text inside card — prevent overflow */
  .coupon-card * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Copy button */
  .coupon-card button[id^="copy-"] {
    padding: 0 10px !important;
    font-size: 11px !important;
    height: 32px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }
  
  /* Disable reveal animation on mobile to prevent missing cards */
  .coupon-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────
   9. FILTER CHIPS
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .coupon-filters, .giveaway-filters {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important;
    gap: 6px !important; padding: 0 0 5px !important; margin-bottom: 10px !important;
  }
  .coupon-filters::-webkit-scrollbar, .giveaway-filters::-webkit-scrollbar { display: none !important; }

  .coupon-filters a, .coupon-filters button,
  .giveaway-filters a, .giveaway-filters button, .cat-filter-btn {
    flex: 0 0 auto !important; scroll-snap-align: start !important;
    height: 30px !important; padding: 0 10px !important;
    border-radius: 99px !important;
    font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
    display: inline-flex !important; align-items: center !important;
    gap: 4px !important; text-decoration: none !important;
  }
}

/* ─────────────────────────────────────────────
   10. HOW IT WORKS — Scrollable steps
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hiw-pp-row { 
    grid-template-columns: minmax(0, 1fr) !important; /* Prevents grid blowout */
    gap: 12px !important; 
  }

  .hiw-steps {
    display: flex !important; flex-direction: row !important;
    flex-wrap: nowrap !important; /* override premium 900px: wrap */
    overflow-x: scroll !important; /* use scroll not auto to force it */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    gap: 0 !important; padding-bottom: 4px !important;
    align-items: flex-start !important; justify-content: flex-start !important;
    /* Break out of container padding so full-width scroll works */
    margin-left: calc(-1 * var(--mob-pad)) !important;
    margin-right: calc(-1 * var(--mob-pad)) !important;
    padding-left: var(--mob-pad) !important;
    padding-right: var(--mob-pad) !important;
    width: 100vw !important; /* Use 100vw instead of calc to avoid stretching grid */
  }
  .hiw-steps::-webkit-scrollbar { display: none !important; }

  /* Fixed width = 4 steps overflow and are scrollable */
  .hiw-step {
    flex: 0 0 auto !important; /* override: flex:1 */
    width: 118px !important; min-width: 118px !important;
    scroll-snap-align: start !important;
    padding: 0 8px !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center !important; gap: 5px !important;
  }

  .hiw-badge { width: 22px !important; height: 22px !important; font-size: 10px !important; margin-bottom: 4px !important; }

  .hiw-step-icon {
    width: 46px !important; height: 46px !important; border-radius: var(--mob-r) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .hiw-step-icon i { font-size: 1.2rem !important; }
  .hiw-step-title { font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #111827 !important; }
  .hiw-step-desc  { font-size: 10px !important; line-height: 1.4 !important; color: #6B7280 !important; white-space: normal !important; }

  /* Show arrows between steps (override premium: display:none) */
  .hiw-arrow {
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; padding-top: 24px !important;
    color: #D1C4E9 !important; font-size: 0.75rem !important; width: 16px !important;
  }

  /* Priority Pass */
  .pp-card {
    border-radius: var(--mob-rl) !important; padding: 16px !important;
    min-height: unset !important; overflow: hidden !important;
    box-sizing: border-box !important; width: 100% !important;
  }
  .pp-crown { display: none !important; }
  .pp-title {
    font-size: 13.5px !important; font-weight: 800 !important;
    margin-bottom: 4px !important; line-height: 1.25 !important; white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  .pp-desc {
    font-size: 11.5px !important; margin-bottom: 10px !important;
    line-height: 1.5 !important; white-space: normal !important;
  }
  .pp-card ul li { font-size: 11.5px !important; }
  .pp-btn { height: 38px !important; font-size: 12.5px !important; padding: 0 16px !important; border-radius: var(--mob-r) !important; }
}

/* ─────────────────────────────────────────────
   11. FINAL CTA — Text visibility fix
   The disclaimer text "₹29 service fee..." was
   light on light bg — ensure it's readable.
   Also fix dark mode text issues.
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .final-cta-box {
    border-radius: var(--mob-rl) !important;
    padding: 20px 14px !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important; width: 100% !important;
  }
  .final-cta-title { font-size: 18px !important; margin-bottom: 5px !important; }
  .final-cta-desc  { font-size: 11.5px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }

  /* Fix buttons wrapper */
  .final-cta-box > div[style*="display:flex"][style*="justify-content:center"] {
    display: flex !important; flex-direction: column !important; gap: 7px !important;
    align-items: stretch !important;
  }

  /* Join Free + Browse All Deals buttons */
  #cta-join-btn, #cta-deals-btn {
    width: 100% !important; justify-content: center !important;
    height: 42px !important; border-radius: var(--mob-r) !important;
    font-size: 13px !important; padding: 0 16px !important;
    display: flex !important; align-items: center !important;
  }

  /* FIX: Disclaimer text — final-cta-box has LIGHT purple bg, not dark.
     White text is invisible on light bg. Use dark gray instead. */
  .final-cta-box p:last-child {
    color: #6B7280 !important; /* dark gray — readable on light purple bg */
    font-size: 10.5px !important;
    margin-top: 10px !important;
    line-height: 1.4 !important;
  }
  .final-cta-box p:last-child a { color: #7C3AED !important; font-weight: 700 !important; }
}

/* ─────────────────────────────────────────────
   12. DARK MODE TEXT FIX
   Ensure all text is visible in dark mode and
   light mode. Common issue: white text on light bg.
───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Why card */
  .why-card-desc { color: #9CA3AF !important; }
  .why-card-list li { color: #9CA3AF !important; }

  /* Section text */
  .section-ttl, .hiw-step-title { color: #F9FAFB !important; }
  .hiw-step-desc { color: #9CA3AF !important; }

  /* Stats labels */
  .sb-lbl { color: rgba(255,255,255,0.8) !important; }

  /* Footer text */
  .footer-tagline, .footer-link { color: #9CA3AF !important; }
}

/* ─────────────────────────────────────────────
   13. PAGE BANNERS
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-banner { padding: 12px 0 10px !important; }
  .page-banner h1 { font-size: 18px !important; margin-bottom: 2px !important; }
  .page-banner p  { font-size: 11.5px !important; }

  div[style*="linear-gradient(135deg,#EDE9FE,#F5F3FF,#FFF7ED)"] { padding: 12px 0 10px !important; }
  div[style*="linear-gradient(135deg,#EDE9FE,#F5F3FF,#FFF7ED)"] h1 { font-size: 18px !important; margin-bottom: 2px !important; }
}

/* ─────────────────────────────────────────────
   14. GIVEAWAYS PAGE SEARCH
───────────────────────────────────────────── */
@media (max-width: 767px) {
  div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column !important; gap: 7px !important;
    align-items: stretch !important; margin-bottom: 10px !important;
  }
  #giveaways-search {
    flex: 1 !important; height: 36px !important;
    border-radius: var(--mob-r) 0 0 var(--mob-r) !important;
    font-size: 12px !important; min-width: 0 !important;
  }
  form[method="GET"] button[type="submit"] {
    height: 36px !important;
    border-radius: 0 var(--mob-r) var(--mob-r) 0 !important;
    padding: 0 12px !important; flex-shrink: 0 !important;
  }
}

/* ─────────────────────────────────────────────
   15. WINNERS PAGE
───────────────────────────────────────────── */
@media (max-width: 767px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    display: flex !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; scrollbar-width: none !important;
    gap: 8px !important; padding-bottom: 3px !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] > div {
    flex: 0 0 auto !important; min-width: 105px !important;
    border-radius: var(--mob-r) !important;
    padding: 12px 9px !important; scroll-snap-align: start !important;
  }
  div[style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"] {
    grid-template-columns: 1fr !important; gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────
   16. AUTH PAGES
───────────────────────────────────────────── */
@media (max-width: 767px) {
  div[style*="padding:20px 16px 80px"] {
    padding-top: 20px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)) !important;
  }
  input[id^="otp-"] { width: 38px !important; height: 44px !important; border-radius: var(--mob-r) !important; }
}

/* ─────────────────────────────────────────────
   17. GIVEAWAY DETAIL
───────────────────────────────────────────── */
@media (max-width: 767px) {
  #gd-layout { grid-template-columns: 1fr !important; gap: 12px !important; }
  #gd-layout > div[style*="position:sticky"] { position: static !important; }
  #gd-layout div[style*="height:320px"] { height: 190px !important; border-radius: var(--mob-r) !important; }
}

/* ─────────────────────────────────────────────
   18. GOOGLE-STYLE BORDER RADIUS REDUCTION
   Apply to all cards, containers, images, buttons.
   Current values (16-24px) → reduced to ~6-10px.
───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* All general cards and containers */
  .why-card, .gc-card, .coupon-card,
  .hiw-step-icon, .pp-card, .final-cta-box,
  .page-banner, .blog-card {
    border-radius: var(--mob-r) !important;
  }

  /* Stat cards */
  .sb-stat, .sb-priority { border-radius: var(--mob-r) !important; }

  /* Why icon */
  .why-card-icon-wrap { border-radius: var(--mob-r) !important; }

  /* Buttons */
  .btn, .btn-primary, .btn-outline,
  .hb-btn-primary, .hb-btn-outline,
  .gc-register-btn, .pp-btn,
  .drawer-auth-btn { border-radius: var(--mob-r) !important; }

  /* Inline styled rounded boxes: reduce to 8px */
  [style*="border-radius:20px"], [style*="border-radius: 20px"],
  [style*="border-radius:24px"], [style*="border-radius: 24px"],
  [style*="border-radius:18px"], [style*="border-radius: 18px"] {
    border-radius: var(--mob-rl) !important; /* 12px max */
  }

  [style*="border-radius:16px"], [style*="border-radius: 16px"] {
    border-radius: var(--mob-r) !important;
  }

  /* Pill buttons (should remain pill-shaped — skip those) */
  [style*="border-radius:99px"], [style*="border-radius: 99px"],
  [style*="border-radius:999px"], [style*="border-radius: 999px"] {
    border-radius: var(--mob-r) !important; /* convert pills to Google style */
  }

  /* Images */
  .gc-img { border-radius: 4px !important; }
  .hb-ticket-img { border-radius: var(--mob-rl) !important; }
  .brand-chip img { border-radius: 4px !important; }

  /* Bottom nav item active bg */
  .mob-nav-item.active i { border-radius: 8px !important; }
  .mob-nav-item i { border-radius: 8px !important; }

  /* Badges */
  .gc-badge, .why-card-badge { border-radius: 4px !important; }

  /* Filter chips remain rounded */
  .coupon-filters a, .coupon-filters button,
  .giveaway-filters a, .giveaway-filters button { border-radius: 20px !important; }

  /* Navbar — no radius */
  .navbar { border-radius: 0 !important; }
}

/* ─────────────────────────────────────────────
   19. FOOTER
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-grid { display: block !important; padding: 14px var(--mob-pad) 10px !important; }
  .footer-brand { padding-bottom: 10px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
  .footer-tagline { font-size: 11.5px !important; margin-bottom: 7px !important; }
  .footer-social  { gap: 6px !important; }
  .social-btn { width: 30px !important; height: 30px !important; border-radius: var(--mob-r) !important; font-size: 0.78rem !important; }

  .mob-footer-accordion { border-bottom: 1px solid rgba(0,0,0,0.06); }
  .mob-footer-toggle {
    display: flex !important; width: 100%; align-items: center;
    justify-content: space-between; padding: 10px 0;
    background: none; border: none; cursor: pointer;
    font-family: 'Poppins',sans-serif; font-size: 11px;
    font-weight: 700; color: #111827; text-transform: uppercase;
    letter-spacing: 0.06em; -webkit-tap-highlight-color: transparent;
  }
  .mob-footer-toggle i { font-size: 11px; color: #9CA3AF; transition: transform 0.2s; }
  .mob-footer-toggle.open i { transform: rotate(45deg); }
  .mob-footer-panel { display: none !important; padding-bottom: 7px; }
  .mob-footer-panel.open { display: block !important; }
  .mob-footer-panel .footer-link { font-size: 12px !important; }
  .mob-footer-accordion .footer-col-title { display: none !important; }
  .mob-footer-bottom {
    flex-direction: column !important; align-items: center !important;
    gap: 7px !important; padding: 10px var(--mob-pad) !important; text-align: center !important;
  }
}

/* ─────────────────────────────────────────────
   20. TOASTS / MODALS
───────────────────────────────────────────── */
@media (max-width: 767px) {
  #flash-msg, #gbt-toast {
    top: auto !important;
    bottom: calc(65px + env(safe-area-inset-bottom,0px)) !important;
    left: var(--mob-pad) !important; right: var(--mob-pad) !important;
    max-width: unset !important; border-radius: var(--mob-r) !important;
  }
  #gbt-success-modal { align-items: flex-end !important; padding: 0 !important; }
  #gbt-success-modal > div {
    border-radius: 14px 14px 0 0 !important;
    max-height: 92vh !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom,0px)) !important;
    width: 100% !important; max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────
   21. ANIMATIONS
───────────────────────────────────────────── */
.btn-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.32);
  transform: scale(0); animation: mobRipple 0.5s linear; pointer-events: none;
}
@keyframes mobRipple { to { transform: scale(4); opacity: 0; } }

@media (max-width: 767px) {
  .reveal {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }
  .reveal.visible { opacity: 1 !important; transform: none !important; }
  .btn:active, .btn-primary:active, .hb-btn-primary:active,
  .hb-btn-outline:active, .gc-register-btn:active, .pp-btn:active {
    transform: scale(0.95) !important; transition: transform 0.1s !important;
  }
}