/* ============================================================
   HollowBoosts — Global Responsive Fixes
   Loaded last on every page. Fixes mobile & tablet layouts.
   ============================================================ */

/* ── Prevent horizontal overflow ── */
/* Only on body — putting this on html clips drop-shadow/box-shadow on nav elements */
body { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; }

/* ══════════════════════════════════════════════════════════
   NAV — single locked mobile layout, ≤860px
   Everything is hard-fixed so the nav never compresses,
   regardless of whether the viewport is 280px or 860px.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Consistent container padding at all phone widths */
  .wrap, .container { padding: 0 14px !important; }

  /* Nav bar itself: fixed vertical rhythm */
  .nav-inner {
    padding: 10px 0 !important;
    min-height: 60px !important;
    box-sizing: border-box;
  }

  /* Discord button removed from nav — lives in the ham menu instead */
  .discord-btn-nav,
  .discord-btn-styled { display: none !important; }

  /* ── Logo: fixed size, never shrink, never wrap ── */
  /* Other pages use .logo + .logo-img */
  .logo {
    font-size: 15px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 130px); /* room for 3 right icons */
  }
  .logo-img {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }

  /* index.html uses .logo-link + .logo-img-wrap img + .logo-text */
  .logo-link {
    gap: 8px !important;
    flex-shrink: 0 !important;
    min-width: 0;
    max-width: calc(100vw - 130px);
    overflow: hidden;
  }
  .logo-link .logo-img-wrap {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }
  .logo-img-wrap img {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }
  .logo-text {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── nav-cta: fixed, never shrink ── */
  .nav-cta {
    flex-shrink: 0 !important;
    gap: 6px !important;
  }

  /* Cart icon */
  .cart-icon-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
  }
  .cart-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Hamburger */
  .menu-toggle {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* ── Sign In / user button: icon-only, fixed size ── */
  .hb-login-btn {
    font-size: 0 !important;
    padding: 8px !important;
    gap: 0 !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hb-login-btn .hb-avatar-dot {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
  .hb-user-btn {
    font-size: 0 !important;
    padding: 8px !important;
    gap: 0 !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .hb-user-btn .hb-avatar-dot,
  .hb-user-btn img {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
  }
}

/* Allow mobile menu to grow tall enough for all items
   (styles.css already bumped to 900px; this is intentionally removed to avoid duplication) */

/* ── Footer ── */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ── Trust strip ──
   Flex+wrap alone never wraps here because flex:1 items with min-width:0
   can shrink indefinitely, so all 4 badges got crammed onto one row and
   their text truncated/overlapped. Force a real grid on small screens. */
@media (max-width: 700px) {
  .trust-strip { display: grid !important; grid-template-columns: 1fr 1fr; }
  .trust-badge {
    min-width: 0; border-right: none !important;
    border-bottom: 1px solid var(--border); border-left: none;
  }
  .trust-badge:nth-child(odd) { border-right: 1px solid var(--border) !important; }
  .trust-badge:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 420px) {
  .trust-strip { grid-template-columns: 1fr; }
  .trust-badge:nth-child(odd) { border-right: none !important; }
  .trust-badge:not(:last-child) { border-bottom: 1px solid var(--border); }
}

/* ── Info-stat buttons: always full-width on phones ── */
@media (max-width: 520px) {
  .info-stat-row  { flex-wrap: wrap; }
  .info-stat-btn  { min-width: 0; flex: 1 1 100%; }
}

/* ── Section headings ── */
@media (max-width: 480px) {
  .section-head h2 { font-size: 22px; }
}

/* ── Hero panel image mode (shared .hero-panel-img) ── */
@media (max-width: 480px) {
  .hero-panel-img { min-height: 200px; }
  .hero-panel-bg  { min-height: 200px; max-height: 260px; }
  /* Stack the action bar vertically on tiny screens */
  .hero-img-actions  { flex-direction: column; min-height: unset; }
  .hia-sep           { width: 100%; height: 1px; }
  .hia-discord       { justify-content: center; padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE (index.html)
   ═══════════════════════════════════════════════════════════ */

/* Hero CTAs stack on phones */
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas > * { width: 100% !important; text-align: center; justify-content: center; }
}

/* Bento cards: reduce padding + remove fixed min-height on phones */
@media (max-width: 480px) {
  .bento-card { padding: 24px 20px; min-height: unset; }
}

/* Step cards: reduce padding on phones */
@media (max-width: 480px) {
  .step { padding: 24px 20px; }
}

/* Review grid: 3→2→1 instead of 3→1 */
@media (max-width: 820px) {
  .review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* Services rec-grid on landing: already 3→2→1, add 2-col intermediate */
/* (handled by landing.css already at 900→600) */

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGES — Hero panels
   ═══════════════════════════════════════════════════════════ */

/* Hero layout stacks at 900px (done inline), reduce padding on phones */
@media (max-width: 480px) {
  .hero-panel       { padding: 28px 20px !important; }
  .hero-panel h1    { font-size: 26px !important; }
  .hero-panel p     { font-size: 13.5px; }
  .hero-cta         { flex-wrap: wrap; }
  .hero-cta > *     { flex: 1; min-width: 140px; justify-content: center; }
}

/* Quick-links grid (apex-rank-boost sidebar) → 1 col on phones */
@media (max-width: 520px) {
  .quick-links { grid-template-columns: 1fr !important; }
}

/* ── .rec-grid-3 (apex-rank-boost service cards) ──
   3 → 2 at 900px → 1 at 560px  */
@media (max-width: 900px) {
  .rec-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .feature-card { grid-column: span 2; }
}
@media (max-width: 560px) {
  .rec-grid-3   { grid-template-columns: 1fr; }
  .feature-card { grid-column: span 1; }
}

/* Tier-row: 3 → 2 columns on phones so badges aren't squeezed */
@media (max-width: 480px) {
  .tier-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   PACKAGE PAGES (pkg-grid: afk-lobbies, coins, cod pages)
   3 → 2 at tablet → 1 at phone
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .pkg-grid { grid-template-columns: 1fr !important; }
}

/* Banner hero: reduce fixed height on phones */
@media (max-width: 640px) {
  .banner { height: 220px; }
  .banner h1 { font-size: 24px !important; }
  .banner p  { font-size: 13.5px !important; max-width: 100% !important; }
}
@media (max-width: 400px) {
  .banner { height: 180px; }
}

/* How-it-works perks: remove max-width constraint on small screens */
@media (max-width: 560px) {
  .how-it-works .perks { max-width: 100%; }
  .how-it-works         { padding: 18px 18px; }
}

/* ── .rec-grid (more-services sections on service pages) ──
   Pages use @media (max-width:780px){1fr} — add 2-col intermediate */
@media (max-width: 780px) {
  .more-services .rec-grid,
  .rec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .more-services .rec-grid,
  .rec-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════════════════════════ */

/* Cart item: improve 1-col mode at 600px */
@media (max-width: 600px) {
  .cart-item .line-right { align-items: flex-start; flex-direction: row; justify-content: space-between; }
}

/* Summary panel: don't stick on mobile (no room) */
@media (max-width: 900px) {
  .cart-page   .summary,
  .checkout-page .summary { position: static; top: auto; }
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .pay-methods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .checkout-title { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════
   COD RANK BOOST — Game toggle & pkg-grid
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .game-toggle          { flex-direction: column; }
  .game-toggle button   { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL BUTTON SIZES ON PHONES
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .btn-lg { padding: 13px 18px; font-size: 13.5px; }
}

/* ── Ticker overflow guard (mobile only — avoids clipping desktop glows) ── */
@media (max-width: 860px) {
  .ticker-outer { overflow: hidden; }
}

/* ── Sections: cap overflow only on small screens ── */
@media (max-width: 860px) {
  section { overflow-x: hidden; }
}

/* ── Logo: hide text on very small phones (≤360px) — icon only ──
   Text is a bare text node inside .logo, so font-size:0 collapses it.
   .logo-text (used on index.html) gets display:none instead. */
@media (max-width: 360px) {
  .logo {
    font-size: 0 !important;
    gap: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .logo-img {
    width: 32px !important;
    height: 32px !important;
  }
  .logo-text { display: none !important; }
  .logo-link  { max-width: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ADDITIONAL RESPONSIVE FIXES — targeted per-component
   ═══════════════════════════════════════════════════════════ */

/* ── Checkout: cobrand-strip flex-wrap on tiny screens ── */
@media (max-width: 400px) {
  .cobrand-strip {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .cobrand-strip .verified { margin-left: 0 !important; }
}

/* ── Checkout: panel padding on very small phones ── */
@media (max-width: 380px) {
  .checkout-page .panel { padding: 18px 14px !important; }
  .checkout-title { font-size: 22px !important; }
}

/* ── Apex Ranked Boost: price-amount shrinks on mobile ── */
@media (max-width: 480px) {
  .price-amount { font-size: 28px !important; }
}

/* ── COD & Apex hero panels: reduce padding/font on phones ── */
@media (max-width: 480px) {
  .hero-panel { padding: 24px 18px !important; }
  .hero-panel h1 { font-size: 26px !important; }
}

/* ── Trust page: reduce gap and padding on phones ── */
@media (max-width: 600px) {
  .trust-stats { gap: 24px !important; }
}
@media (max-width: 480px) {
  .trust-hero h1 { font-size: 26px !important; }
  .trust-cta { padding: 24px 20px !important; }
}

/* ── General: section/container padding floor on tiny screens ── */
@media (max-width: 360px) {
  .wrap, .container { padding: 0 12px !important; }
}

/* ── Banner height: keep readable on very small phones ── */
@media (max-width: 360px) {
  .banner { height: 160px !important; }
  .banner h1 { font-size: 20px !important; }
}

/* ── Grid gaps: reduce on phones to reclaim vertical space ── */
@media (max-width: 480px) {
  .page     { gap: 20px !important; }
  .checkout-layout { gap: 16px !important; }
  .cart-layout     { gap: 16px !important; }
}