/* ==========================================================
   TopupHero - mobile layout fixes
   Loads AFTER style.css. Colors, fonts and the dark theme are
   NOT changed here; only spacing, sizing and wrapping.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; height: auto; }
code, pre, .copy-number { overflow-wrap: anywhere; word-break: break-word; }

/* Fluid side padding: 12px on 320px phones, up to 20px on tablets */
.container {
  padding-left: clamp(12px, 4vw, 20px);
  padding-right: clamp(12px, 4vw, 20px);
}

/* Header: keeps logo, language, cart and menu on one line */
.nav-wrapper { gap: clamp(6px, 2vw, 12px); }
.lang-toggle, .cart-btn, .mobile-menu-btn { min-height: 40px; }
.mobile-menu-btn { width: 40px; height: 40px; flex-shrink: 0; }

/* Buttons: never overflow, always easy to tap */
.btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  min-height: 44px;
}
.btn-block, .btn-whatsapp { width: 100%; max-width: 100%; }

@media (max-width: 768px) {
  /* Hero and special-offer banner */
  .hero-section { padding: clamp(20px, 6vw, 28px) 0 clamp(16px, 5vw, 22px); }
  .hero-title { font-size: clamp(22px, 7vw, 28px); }
  .hero-subtitle { font-size: 15px; margin-bottom: 18px; }
  .hero-banner-card { padding: clamp(14px, 4vw, 20px); }
  .hero-banner-card [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .hero-banner-card h3 { font-size: clamp(18px, 5.5vw, 22px) !important; }

  /* Games section spacing */
  #games-section { padding: clamp(24px, 7vw, 40px) 0 !important; }
  .section-title { font-size: clamp(18px, 5.5vw, 20px); margin-bottom: 14px; }

  /* Game cards: 2 columns with tighter type */
  .games-grid { gap: clamp(8px, 2.5vw, 12px); }
  .game-card-banner { height: clamp(74px, 22vw, 92px); }
  .game-card-content { padding: clamp(8px, 2.5vw, 12px); }
  .game-name { font-size: clamp(13px, 3.8vw, 15px); line-height: 1.25; }
  .game-desc { font-size: 12px; line-height: 1.4; }
  .game-card .btn, .game-card-content .btn { font-size: 13px; padding: 8px 10px; }

  /* Package cards on the game page */
  .packages-grid { gap: clamp(6px, 2vw, 10px); }
  .package-card { padding: clamp(8px, 2.5vw, 12px) clamp(6px, 2vw, 8px); }
  .package-label { font-size: clamp(12px, 3.6vw, 14px); line-height: 1.3; }
  .package-price { font-size: clamp(13px, 3.8vw, 15px); }

  /* Order page boxes (WhatsApp confirm box etc.) fit the screen width */
  .checkout-grid, .checkout-grid > div, .summary-card { min-width: 0; max-width: 100%; }
  .summary-card { padding: clamp(14px, 4vw, 18px); }
  .btn-whatsapp { font-size: 14px; }

  /* Footer */
  .footer-grid { gap: 22px; }
}

/* Very small phones (320px - 359px): one game card per row, smaller type */
@media (max-width: 359px) {
  .games-grid { grid-template-columns: minmax(0, 1fr); }
  .game-card-banner { height: 96px; }
  .packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-card { padding: 8px 6px; }
  .package-label { font-size: 12px; }
  .package-price { font-size: 13px; }
  .package-old-price { font-size: 11px; }
  .btn { font-size: 13px; padding: 9px 12px; }
  .lang-toggle { padding: 5px 8px; font-size: 11px; }
  .cart-btn { padding: 5px 8px; }
}

/* Large phones (430px and up): keep the 2-column grid, but do not stretch cards too wide */
@media (min-width: 430px) and (max-width: 768px) {
  .games-grid { gap: 14px; }
  .game-card-banner { height: 100px; }
}
/* ---- WhatsApp confirm box on the order-success page (added) ---- */
@media (max-width: 768px) {
  a.btn-whatsapp {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: clamp(13px, 3.8vw, 15px) !important;
    padding: 12px 14px !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
  }
  [style*="max-width: 720px"],
  [style*="max-width:720px"] {
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  [style*="rgba(37, 211, 102"],
  [style*="rgba(37,211,102"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---- Compact cart button on phones: icon + dot (added) ---- */
@media (max-width: 768px) {
  .cart-btn { padding: 8px 10px !important; gap: 4px !important; }
  .cart-btn .cart-label { display: none !important; }
  .cart-btn .cart-count {
    font-size: 0 !important;
    line-height: 0 !important;
    min-width: 9px !important;
    width: 9px !important;
    height: 9px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin-left: -8px !important;
    margin-top: -12px !important;
  }
  .cart-btn .cart-count.is-empty { display: none !important; }
}