/* ============================================================
   RESPONSIVE — Layout breakpoints only
   Theme colors / component styles → casino-blue-v21.css
   ============================================================ */


/* ─── Desktop ≥1024px ─────────────────────────────────────── */
@media (min-width:1024px) {
  /* Show desktop-only elements */
  .desktop-promo-btn,
  .desktop-search-btn,
  .desktop-auth     { display: inline-flex }
  .site-nav-primary { display: flex; min-width: 0; justify-content: center }
  /* cat-tabs hidden globally */

  /* Auth modal side panel */
  .auth-modal.has-side .modal-card {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 0;
  }
  .auth-modal.has-side .auth-side {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    border-radius: 18px 0 0 18px;
  }
  .auth-modal.has-side .modal-head   { display: none }
  .auth-modal.has-side .auth-tabs    { border-radius: 0 18px 0 0 }
  .auth-modal.has-side .auth-tab:first-child { border-radius: 0 }
  .auth-modal.has-side .auth-tab:last-child  { border-radius: 0 18px 0 0 }
  .auth-modal.has-side .modal-card-inner { display: flex; flex-direction: column; min-height: 600px }
}

/* Game grid responsive moved to casino-blue-v21.css */


/* ─── Tablet <1024px ──────────────────────────────────────── */
@media (max-width:1023px) {
  .right-sidebar  { display: none }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 18px }
  .deposit-wrap   { grid-template-columns: 1fr }
  .deposit-methods { grid-template-columns: repeat(3,1fr) }
  .deposit-method { flex-direction: column; text-align: center; padding: 8px 6px; font-size: 12px; min-height: 64px }
  .deposit-method small { display: none }
  .deposit-account-list { grid-template-columns: 1fr }
  .form-grid  { grid-template-columns: 1fr }
  .bank-list  { grid-template-columns: 1fr 1fr }
  .promo-layout { grid-template-columns: 1fr; padding: 0 }
  .promo-list   { display: none }
  .promo-mobile-carousel { display: block }
  .promo-preview       { display: none }
  .promo-mobile-action { display: block }
}

/* ─── iPad / Tablet Portrait (768px-1023px) ──────────────── */
@media (min-width:768px) and (max-width:1023px) {
  html, body { max-width: 100%; overflow-x: hidden }

  /* App layout for iPad - ซ่อน sidebar ใช้แบบ mobile */
  .app {
    display: block !important;
    max-width: 820px !important;
    margin: 0 auto;
    padding: 12px 14px calc(var(--bottom) + 18px) !important;
  }

  /* ซ่อน sidebar บน iPad - ใช้ bottom nav แทน */
  .desktop-side { display: none !important }
  .right-sidebar { display: none !important }
  .rail-account { display: none !important }

  /* Main content full width */
  .main { width: 100% !important }

  /* Game grid for iPad - 3 columns */
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  /* Provider grid for iPad - 3 columns */
  .provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  /* Quick menu for iPad */
  .rb-quick-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .rb-quick-item { height: 88px; border-radius: 16px }
  .rb-quick-item span { width: 38px; height: 38px; font-size: 17px }
  .rb-quick-item b { font-size: 12px }

  /* Hero slider for iPad */
  .hero-slider {
    height: clamp(200px, 22vw, 280px);
    border-radius: 14px;
  }

  /* Bottom nav for iPad */
  .bottom-nav { display: block }
  .drawer-open .bottom-nav { display: none }

  /* Section head */
  .section-head h2 { font-size: 22px }

  /* Cards */
  .game-card { border-radius: 14px }
  .game-info { padding: 22px 10px 8px }
  .game-info b { font-size: 12px }
  .game-info span { font-size: 9px }
  .game-badge { top: 6px; right: 6px; padding: 3px 8px; font-size: 9px }

  /* Casino stats */
  .casino-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px }
  .casino-stats > div { min-height: 76px; border-radius: 16px }

  /* Footer */
  .footer { padding-bottom: calc(var(--bottom) + 18px) }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }

  /* Promo modal */
  .promo-modal .modal-card { width: min(720px, 94vw) }
  .promo-layout { grid-template-columns: 240px 1fr; gap: 16px }

  /* Auth modal */
  .auth-modal.has-side .modal-card {
    width: min(860px, 94vw);
    max-height: 88vh;
  }

  /* Jackpot */
  .jp-img.jackpot-gif { min-height: 160px; background-size: 110% auto }
}

/* ─── Mobile <768px ───────────────────────────────────────── */
@media (max-width:767px) {
  html, body { max-width: 100%; overflow-x: hidden }
  .bottom-nav { display: block }
  .drawer-open .bottom-nav { display: none }

  .footer-grid { grid-template-columns: 1fr 1fr }
  .promo-modal .modal-card { width: 96vw }
  .promo-preview h2 { font-size: 18px }
  .promo-preview p  { font-size: 13px }
  .promo-preview-img { width: min(280px,100%) }
  .shortcut-card { grid-template-columns: 1fr; text-align: center }
  .shortcut-right { display: none }
  .partners { gap: 6px }
  .partner-pill { height: 30px; min-width: 78px; font-size: 10px; padding: 0 10px }

  .toolbar { display: grid; grid-template-columns: 1fr; gap: 8px }
  .toolbar .input, .toolbar .btn-main { width: 100%; height: 46px }
  .games-back { height: 36px; padding: 0 12px; font-size: 12px; border-radius: 9px }
  .section-head { gap: 8px; align-items: center }
  .section-head .btn-dark { height: 38px; padding: 0 12px; font-size: 12px }
}

@media (max-width:420px) {
  .provider-grid { gap: 6px }
}

/* Game card styles moved to casino-blue-v21.css */
.provider-card { min-width: 0 }
.provider-logo img { user-select: none; -webkit-user-drag: none }