/**
 * UrbanArtzStudio — ENTIRE SITE mobile layout
 * Aggressive shrink + reflow for phones (≈95% traffic).
 * Linked from every layout after app.css.
 */

/* ============================================================
   BASE: stop horizontal scroll
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}
body {
  overscroll-behavior-x: none;
  min-width: 0;
}
img, video, canvas, svg, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* ============================================================
   TABLET + PHONE (≤991px) — whole site
   ============================================================ */
@media (max-width: 991.98px) {

  /* ---- Containers & grid ---- */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.65rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
  }
  .row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  /* ---- Type scale (smaller) ---- */
  body { font-size: 15px; }
  h1, .h1 { font-size: 1.35rem !important; line-height: 1.25 !important; }
  h2, .h2 { font-size: 1.2rem !important; line-height: 1.3 !important; }
  h3, .h3 { font-size: 1.08rem !important; }
  h4, .h4, h5, .h5 { font-size: 1rem !important; }
  h6, .h6 { font-size: 0.9rem !important; }
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: 1.5rem !important;
  }
  p, .small, small { max-width: 100%; }

  /* ---- Spacing shrink ---- */
  .section-pad, .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-4 { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }
  .p-5 { padding: 1.1rem !important; }
  .p-4 { padding: 0.95rem !important; }
  .p-3 { padding: 0.75rem !important; }
  .mb-5 { margin-bottom: 1.35rem !important; }
  .mb-4 { margin-bottom: 1rem !important; }
  .mt-5 { margin-top: 1.35rem !important; }
  .g-4, .gy-4 { --bs-gutter-y: 0.85rem !important; }
  .g-5 { --bs-gutter-x: 0.85rem !important; --bs-gutter-y: 0.85rem !important; }

  /* ---- Cards / panels ---- */
  .card, .ks-card, .metric-card, .price-card, .auth-card, .hello-banner {
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .ks-card.p-4, .card .card-body { padding: 0.9rem !important; }

  /* ---- Buttons: smaller, fit rows ---- */
  .btn {
    max-width: 100%;
    font-size: 0.82rem !important;
    padding: 0.48rem 0.75rem !important;
    min-height: 40px;
    line-height: 1.25 !important;
  }
  .btn-sm {
    font-size: 0.76rem !important;
    padding: 0.4rem 0.6rem !important;
    min-height: 36px;
  }
  .btn-lg {
    font-size: 0.92rem !important;
    padding: 0.55rem 0.9rem !important;
  }
  .btn-group {
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
  }

  /* Any 2–4 action buttons in a flex row stay on ONE line when possible */
  .d-flex.gap-1,
  .d-flex.gap-2,
  .d-flex.gap-3 {
    max-width: 100%;
  }
  .d-flex.flex-wrap.gap-2 > .btn,
  .d-flex.flex-wrap.gap-1 > .btn,
  .d-flex.gap-2 > .btn,
  .d-flex.gap-1 > .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Page heads */
  .page-head {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 0.85rem !important;
  }
  .page-head h1, .page-head h2 {
    font-size: 1.15rem !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .page-head-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-head-actions .btn {
    flex: 1 1 0;
    white-space: nowrap;
    min-width: max-content;
  }

  /* Forms */
  .form-control, .form-select, .form-control-sm, .form-select-sm,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  select, textarea {
    max-width: 100% !important;
    font-size: 16px !important; /* no iOS zoom */
  }
  .form-label { font-size: 0.82rem !important; }
  .form-ks.ks-card, form.ks-card { padding: 0.85rem !important; }
  .form-actions-bottom, .form-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: rgba(255,255,255,0.97);
    padding: 0.55rem 0;
    margin: 0;
  }
  .form-actions-bottom .btn, .form-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  /* Tables scroll inside only */
  .table-responsive, .ks-card.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-ks th, .table-ks td, .table th, .table td {
    font-size: 0.78rem !important;
    padding: 0.5rem 0.45rem !important;
  }

  /* Modals */
  .modal-dialog {
    margin: 0.4rem auto !important;
    max-width: calc(100vw - 0.8rem) !important;
  }
  .modal-content { border-radius: 12px !important; }
  .modal-body { padding: 0.9rem !important; }
  .modal-header, .modal-footer {
    padding: 0.65rem 0.9rem !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .modal-footer .btn { flex: 1 1 auto; }

  /* Hide heavy decoration */
  .page-anime-bg,
  .scatter-icons-overlay,
  .orbit,
  .hm-float-circle {
    display: none !important;
  }
}

/* ============================================================
   PHONE (≤575px) — tighter still
   ============================================================ */
@media (max-width: 575.98px) {
  body { font-size: 14.5px; }
  .container, .container-fluid {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
  h1, .h1 { font-size: 1.22rem !important; }
  h2, .h2 { font-size: 1.1rem !important; }
  .p-4, .ks-card.p-4, .card .card-body { padding: 0.75rem !important; }
  .p-3 { padding: 0.65rem !important; }
  .btn {
    font-size: 0.78rem !important;
    padding: 0.42rem 0.55rem !important;
  }
  .btn-sm {
    font-size: 0.72rem !important;
    padding: 0.36rem 0.48rem !important;
    min-height: 34px;
  }
}

/* ============================================================
   PUBLIC SITE
   ============================================================ */
@media (max-width: 991.98px) {
  .ks-navbar { padding: 0.35rem 0 !important; }
  .ks-brand { max-width: 52vw; min-width: 0; }
  .ks-brand .brand-logo, .brand-logo, .ks-brand img {
    width: 34px !important; height: 34px !important;
  }
  .ks-brand .brand-name { font-size: 0.88rem !important; }
  .ks-brand .brand-tagline { font-size: 0.58rem !important; }

  .navbar-toggler {
    min-width: 40px; min-height: 40px;
    padding: 0.3rem 0.45rem !important;
  }

  #mainNav {
    background: #fff;
    border-radius: 12px;
    margin-top: 0.45rem;
    padding: 0.55rem 0.65rem 0.75rem;
    box-shadow: 0 10px 28px rgba(45,20,70,0.12);
    border: 1px solid #efe8f5;
  }
  #mainNav .nav-link {
    padding: 0.55rem 0.65rem !important;
    border-radius: 8px;
    font-size: 0.88rem !important;
    font-weight: 700;
  }
  #mainNav .nav-link.active { background: #f3e8ff; }
  #mainNav .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    width: 100%;
    margin-top: 0.4rem;
  }
  #mainNav .btn { flex: 1 1 45%; justify-content: center; }

  .offer-bar, .ks-offer-bar {
    font-size: 0.68rem !important;
    padding: 0.35rem 0.45rem !important;
    text-align: center;
  }

  .banner-carousel-wrap { max-width: 100vw; overflow: hidden; }
  .banner-scroll-link { height: clamp(140px, 28vh, 220px) !important; }
  .banner-scroll-caption {
    padding: 0.5rem 0 0.85rem !important;
    background: linear-gradient(0deg, rgba(20,8,30,0.78) 0%, rgba(20,8,30,0.12) 75%, transparent 100%) !important;
  }
  .banner-title { font-size: 1.05rem !important; }
  .banner-sub { font-size: 0.76rem !important; margin-bottom: 0.3rem !important; }

  .price-card { margin-bottom: 0.75rem; transform: none !important; }
  .price-card.popular { transform: none !important; }

  .ks-footer {
    padding: 1.25rem 0 1.75rem !important;
    text-align: center;
    font-size: 0.85rem;
  }
  .ks-footer .row > [class*="col-"] { margin-bottom: 0.9rem; }
  .ks-footer .d-flex { justify-content: center !important; flex-wrap: wrap; }

  /* Public cart panel */
  .ks-cart-panel, #cartDropdown {
    position: fixed !important;
    top: 54px !important;
    left: 0.45rem !important;
    right: 0.45rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 480px) !important;
    z-index: 2000 !important;
  }
}

@media (max-width: 575.98px) {
  .ks-brand .brand-tagline { display: none !important; }
  .banner-scroll-link { height: clamp(130px, 26vh, 190px) !important; }

  /* Single column course / shop / blog / gallery */
  .courses-grid, .course-grid, .home-courses-grid,
  .blog-grid, .mc-shop-grid, .mc-enrolled-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }
  .gallery-grid, .gal-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
  }
  .course-card, .ks-course-card { width: 100% !important; max-width: 100% !important; }

  /* Checkout */
  .checkout-inline-handler { padding-top: 1.1rem !important; padding-bottom: 1.5rem !important; }
  .checkout-steps { max-width: 100%; gap: 0.2rem; }
  .cs-line { width: 16px !important; }
  .checkout-step .cs-label { font-size: 0.65rem !important; }
  .coupon-chip { width: 100%; white-space: normal !important; }
}

/* ============================================================
   AUTH
   ============================================================ */
@media (max-width: 767.98px) {
  body.auth-layout { padding: 0.55rem !important; }
  .auth-card, .auth-wrap, .login-card, .auth-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.4rem auto !important;
    padding: 1rem 0.85rem !important;
    border-radius: 14px !important;
  }
  .auth-card .btn, .auth-box .btn { width: 100%; }
}

/* ============================================================
   DASHBOARDS (student / parent / teacher / admin)
   ============================================================ */
@media (max-width: 991.98px) {
  body.student-theme,
  body.parent-theme,
  body.teacher-theme,
  body.admin-theme {
    display: block !important;
    overflow-x: hidden !important;
  }

  .dash-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .dash-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }
  .dash-sidebar {
    width: min(292px, 86vw) !important;
    max-width: 86vw !important;
    z-index: 1100 !important;
  }
  .dash-sidebar .nav-link {
    min-height: 42px;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.88rem !important;
  }
  .dash-sidebar-backdrop.show { z-index: 1090 !important; }

  .dash-topbar {
    position: fixed !important;
    top: 0; left: 0 !important; right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 1050 !important;
    padding: 0.4rem 0.5rem !important;
    gap: 0.25rem !important;
    min-height: 52px !important;
    box-sizing: border-box;
  }
  .dash-topbar > .d-flex { min-width: 0; }
  .dash-topbar .fw-bold {
    max-width: 28vw !important;
    font-size: 0.82rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-toggle {
    display: inline-flex !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .dash-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.65rem 0.6rem 1.5rem !important;
    padding-top: calc(0.6rem + 52px) !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  /* Student app: extra bottom space for kid bottom nav */
  body.student-theme .dash-content {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .metric-card { padding: 0.6rem 0.7rem !important; }
  .metric-card .metric-value { font-size: 1.05rem !important; }
  .hello-banner { padding: 0.95rem !important; border-radius: 12px !important; }

  .admin-actions .btn-label { display: none; }
  .admin-actions .btn {
    min-width: 34px !important;
    width: 34px;
    height: 34px;
    padding: 0 !important;
  }
}

/* Student topbar compact */
@media (max-width: 991.98px) {
  .student-theme .student-reward-pill {
    padding: 0.22rem 0.38rem !important;
    font-size: 0.65rem !important;
    min-height: 30px;
    gap: 0.15rem !important;
  }
  .student-theme .student-reward-pill .pill-icon { font-size: 0.72rem !important; }
  .student-theme .student-topbar-home,
  .student-theme .student-topbar-logout,
  .student-theme .student-cart-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 0.8rem !important;
  }
  .student-theme .student-topbar-avatar {
    width: 30px !important;
    height: 30px !important;
  }
  .student-theme .dash-topbar > .d-flex:last-child {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.22rem !important;
    min-width: 0;
  }
  .student-cart-panel {
    position: fixed !important;
    top: 52px !important;
    left: 0.45rem !important;
    right: 0.45rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68vh, 460px) !important;
    z-index: 2000 !important;
  }
}
/* Student topbar: NEVER hide coins / cart / home / logout on any phone size */
@media (max-width: 430px) {
  .student-theme .dash-topbar .fw-bold { display: none !important; }
  .student-theme .student-reward-pill.is-xp { display: none !important; }
  .student-theme .student-topbar-home,
  .student-theme .student-topbar-logout,
  .student-theme .student-cart-toggle,
  .student-theme .student-reward-pill.is-coin {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
@media (max-width: 360px) {
  .student-theme .student-reward-pill.is-streak { display: none !important; }
  .student-theme .student-topbar-home,
  .student-theme .student-topbar-logout,
  .student-theme .student-cart-toggle,
  .student-theme .student-reward-pill.is-coin {
    display: inline-flex !important;
  }
}

/* ============================================================
   STUDENT PAGES
   ============================================================ */
@media (max-width: 767.98px) {
  .sd-hero { padding: 0.9rem !important; border-radius: 12px !important; }
  .sd-info-label { width: 80px !important; font-size: 0.68rem !important; }
  .sd-charts-row, .sd-quizzes-grid { grid-template-columns: 1fr !important; }
  .sd-stat .val { font-size: 1.1rem !important; }

  .mc-page,
  .mc-page.kid-page,
  .kid-page,
  .kid-home {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  .mc-hero { padding: 0.9rem 0.8rem !important; border-radius: 12px !important; overflow: hidden !important; }
  .mc-hero-deco { display: none !important; }
  .mc-title { font-size: 1.2rem !important; }
  .mc-sub { font-size: 0.8rem !important; max-width: 100% !important; }
  .mc-stat { min-width: 0 !important; flex: 1 1 calc(50% - 0.35rem); padding: 0.4rem 0.5rem !important; }
  .mc-enrolled-grid, .mc-shop-grid { grid-template-columns: 1fr !important; gap: 0.65rem !important; }
  .mc-qz-list { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; }
  a.mc-qz-card, .mc-qz-card { width: 100% !important; max-width: 100% !important; }
  .mc-charts { grid-template-columns: 1fr !important; }
  .mc-hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    overflow-x: auto;
  }
  .mc-hero-actions .mc-btn,
  .mc-hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .act-search-box { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; }
  .act-modal-box, .act-modal { width: 96% !important; max-width: 96vw !important; }
  .gifts-grid, .sg-grid { grid-template-columns: 1fr 1fr !important; gap: 0.45rem !important; }
  .cert-grid, .ach-grid { grid-template-columns: 1fr !important; }
  .lb-table-wrap { overflow-x: auto; }
}

/* ============================================================
   LEARN PAGE — action buttons same row (critical)
   ============================================================ */
@media (max-width: 991.98px) {
  .ws-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .ws-actions-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .ws-actions-row > .btn,
  .ws-actions-row > a.btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 0.74rem !important;
    padding: 0.45rem 0.4rem !important;
  }
  .ws-actions-row > .ws-complete-form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    margin: 0 !important;
  }
  .ws-actions-row > .ws-complete-form .btn {
    width: 100% !important;
    font-size: 0.74rem !important;
    padding: 0.45rem 0.4rem !important;
    white-space: nowrap !important;
  }
  .ws-actions-secondary:empty { display: none !important; }

  /* Upload view buttons row */
  #submission-status-card .d-flex.gap-2,
  #submission-status-card .mb-2.d-flex {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
  }
  #submission-status-card .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    justify-content: center;
  }

  /* Lesson complete / nav buttons */
  #lesson-complete-card .btn + .btn,
  #lesson-complete-card .btn + a.btn,
  #lesson-complete-card a.btn + a.btn {
    margin-top: 0.4rem;
  }
  #lesson-nav-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
  }
  #lesson-nav-wrap .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  .lesson-player { font-size: 2.2rem !important; border-radius: 12px !important; }
  .ws-panel-title { font-size: 0.92rem !important; }
  .ws-panel-head { gap: 0.45rem !important; }
}

@media (max-width: 400px) {
  .ws-actions-row > .btn,
  .ws-actions-row > a.btn,
  .ws-actions-row > .ws-complete-form .btn {
    font-size: 0.68rem !important;
    padding: 0.42rem 0.3rem !important;
  }
}

/* ============================================================
   QUIZ + GAME ACTIONS — clear of kid bottom nav
   ============================================================ */
@media (max-width: 991.98px) {
  /* Lift sticky quiz bar above fixed bottom nav (~70px + safe area) */
  body.student-theme .qz-sticky-bar {
    bottom: calc(4.55rem + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0.5rem 0.55rem !important;
    z-index: 1055 !important;
  }
  body.student-theme .qz-wrap,
  body.student-theme .qq-wrap,
  body.student-theme .qr-wrap {
    padding-bottom: calc(11.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.student-theme .qz-save-indicator {
    bottom: calc(9.8rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Play Zone modal: sticky actions always visible, space above home indicator */
  body.student-theme .act-modal {
    max-height: min(92dvh, calc(100dvh - 0.5rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.student-theme .act-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem !important;
  }
  body.student-theme .act-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%) !important;
    padding: 0.85rem 0 calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
  }
  body.student-theme.act-modal-open .kid-bottom-nav {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .qz-wrap, .qq-wrap, .qr-wrap {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .qz-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 0.4rem !important; }
  .qz-stat-card { padding: 0.45rem !important; }
  .qz-stat-card .val { font-size: 1.05rem !important; }
  .qz-header { padding: 0.85rem !important; }
  .qz-q-card, .qr-q-card { padding: 0.85rem !important; border-radius: 12px !important; }
  .qz-q-text { font-size: 0.95rem !important; }
  .qz-opt { padding: 0.58rem 0.65rem !important; font-size: 0.84rem !important; }

  .qz-sticky-bar {
    /* bottom offset handled above for student-theme; keep compact padding */
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }
  .qz-sticky-inner {
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
  .qz-sticky-stats { text-align: center; font-size: 0.72rem !important; }
  .qz-sticky-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
  }
  .qz-sticky-actions .qz-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.72rem !important;
    padding: 0.48rem 0.3rem !important;
  }
  .qz-dots {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    max-height: none !important;
  }
  .qz-top-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    overflow-x: auto;
  }
  .qz-chip-btn {
    flex: 0 0 auto;
    font-size: 0.68rem !important;
    padding: 0.35rem 0.55rem !important;
    white-space: nowrap;
  }
}

/* ============================================================
   ADMIN
   ============================================================ */
@media (max-width: 991.98px) {
  .qe-wrap { max-width: 100% !important; }
  .qe-q-body { grid-template-columns: 1fr !important; }
  .qe-section { padding: 0.85rem !important; }
  .qe-import-area { padding: 0.65rem !important; }
  .qe-import-area .d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .media-grid, .mm-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
  }
  .ad-stats, .admin-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
  }
}
@media (max-width: 575.98px) {
  .ad-stats, .admin-stats-row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   GLOBAL: force button rows in cards/panels site-wide
   ============================================================ */
@media (max-width: 767.98px) {
  /* Groups of sibling buttons — prefer side-by-side */
  .ks-card > .d-flex.gap-2:has(> .btn),
  .ks-card .d-flex.gap-2:has(> .btn):not(.flex-column),
  .card .d-flex.gap-2:has(> .btn):not(.flex-column) {
    flex-wrap: nowrap !important;
  }

  /* Fallback without :has for broader support */
  .btn-row,
  .actions-row,
  .ws-actions-row,
  .page-head-actions,
  .form-actions-bottom,
  .qz-sticky-actions {
    display: flex;
  }

  /* Toast */
  #ksToastStack, .ks-toast-stack {
    left: 0.4rem !important;
    right: 0.4rem !important;
    width: auto !important;
  }
  .ks-toast { max-width: 100% !important; font-size: 0.8rem; }

  /* Newsletter */
  .newsletter-form, .nl-form {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
  .newsletter-form input, .nl-form input,
  .newsletter-form button, .nl-form button {
    width: 100% !important;
  }
}

/* ============================================================
   SAFE AREA + TOUCH
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 991.98px) {
    .dash-content {
      padding-bottom: calc(1.35rem + env(safe-area-inset-bottom)) !important;
    }
    .qz-sticky-bar {
      padding-bottom: calc(0.45rem + env(safe-area-inset-bottom)) !important;
    }
    .ks-navbar {
      padding-top: max(0.35rem, env(safe-area-inset-top)) !important;
    }
    .dash-topbar {
      padding-top: max(0.4rem, env(safe-area-inset-top)) !important;
    }
  }
}

@media (max-width: 991.98px) {
  a, button { -webkit-tap-highlight-color: rgba(120, 36, 132, 0.12); }
  .nav-link, .btn, button.btn, a.btn, .sidebar-toggle, .ks-cart-btn {
    min-height: 38px;
  }
}

/* Utilities */
@media (max-width: 575.98px) {
  .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .mobile-full { width: 100% !important; max-width: 100% !important; }
  .mobile-hide { display: none !important; }
  .mobile-center { text-align: center !important; }
}