/* ==========================================================================
   SmartFix — unified mobile / touch adaptation
   Phones 320px+ · tablets · safe-area · 44px touch targets
   ========================================================================== */

:root {
  --bp-phone-sm: 380px;
  --bp-phone: 640px;
  --bp-tablet: 900px;
  --bp-desktop: 1200px;
  --mobile-pad: max(0.75rem, var(--safe-l));
  --mobile-pad-r: max(0.75rem, var(--safe-r));
}

/* --- Global foundation --- */
html {
  overflow-x: clip;
  overflow-x: hidden;
}

body {
  overflow-x: clip;
  overflow-x: hidden;
  padding-bottom: var(--safe-b);
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  font: inherit;
}

/* Touch-friendly controls in toolbars / dense UI */
@media (max-width: 900px) {
  .btn,
  .btn-sm,
  .link-btn,
  .desk-filter,
  .rent-pager-btn,
  .rent-toolbar-btn,
  .rent-chip-btn,
  .dpc-card-btn,
  .shop-header-seg-btn,
  .shop-pay-btn,
  .acc-nav-link,
  .ra-nav-link,
  .bot-hub-tab-premium,
  .rent-subnav-btn,
  .rent-action-btn,
  .seg-btn,
  .seg-btn-wide {
    min-height: var(--touch);
    touch-action: manipulation;
  }

  .btn-sm {
    min-height: 2.5rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .rod-close,
  .shop-order-modal-close,
  .shop-dhru-modal-close {
    min-width: var(--touch);
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .rent-check-ui {
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* Horizontal scroll strips — momentum + snap */
.sf-scroll,
.rent-table-wrap,
.rent-history-scroll,
.desk-pc-list,
.acc-sidebar-nav,
.ra-sidebar-nav,
.shop-header-nav,
.desk-filter-tabs,
.vmp-library-table-wrap,
.ra-table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ==========================================================================
   ADMIN (style.css)
   ========================================================================== */
@media (max-width: 900px) {
  body.is-admin .dash {
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
    gap: 0.75rem;
  }

  .dash-command-bar {
    padding: 0.65rem;
    border-radius: 18px;
  }

  .dash-stats-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem;
  }

  nav.bot-hub-nav.bot-hub-nav-wide,
  .bot-hub-nav.bot-hub-nav-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem;
  }

  .bot-hub-tab-premium {
    min-height: 2.85rem;
    font-size: 0.78rem;
    padding: 0.55rem 0.45rem;
  }

  .bot-hub-tab-icon {
    font-size: 0.9rem;
  }

  .desk-admin-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .desk-admin-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .desk-admin-head-actions .btn-sm {
    flex: 1 1 auto;
    min-width: 0;
  }

  .desk-tg-notify-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .desk-stats-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .desk-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .desk-search {
    width: 100%;
    min-height: var(--touch);
  }

  .desk-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .desk-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .dpc-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .dpc-card-btn.primary,
  .dpc-card-btn.desk-open {
    grid-column: 1 / -1;
  }

  .admin-admin-row .log-section-side {
    min-height: 16rem;
  }

  .guest-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .guest-topbar-tools {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .guest-location-inline {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: calc(0.55rem + var(--safe-t));
  }

  .topbar-brand {
    font-size: 0.88rem;
  }

  .dash-stats-premium,
  .desk-stats-premium {
    grid-template-columns: 1fr 1fr;
  }

  .rent-stats-grid,
  .rent-stats-grid--wide {
    grid-template-columns: 1fr 1fr;
  }

  .rent-actions-grid--main {
    grid-template-columns: 1fr 1fr;
  }

  .rent-actions-grid--orders {
    grid-template-columns: 1fr;
  }

  .bot-bcast-grid {
    grid-template-columns: 1fr !important;
  }

  .bot-bcast-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bot-bcast-actions .btn {
    width: 100%;
  }

  .payment-revenue-grid,
  .stars-product-grid {
    grid-template-columns: 1fr !important;
  }

  .seg {
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .seg-btn,
  .seg-btn-wide {
    min-height: 2.85rem;
    font-size: 0.72rem;
    padding: 0.45rem 0.35rem;
  }

  .seg-wide-label {
    font-size: 0.74rem;
  }

  .seg-wide-sub {
    font-size: 0.62rem;
  }

  .temp-link-layout-premium {
    flex-direction: column;
    align-items: stretch;
  }

  .temp-link-config-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  nav.bot-hub-nav.bot-hub-nav-wide,
  .bot-hub-nav.bot-hub-nav-wide {
    grid-template-columns: 1fr 1fr !important;
  }

  .bot-hub-tab-label {
    font-size: 0.72rem;
  }

  .dash-stats-premium .dash-stat-v,
  .desk-stat-v {
    font-size: 1.15rem;
  }

  .rent-stat-v {
    font-size: 1.1rem;
  }
}

/* Admin tables — scroll + sticky first column */
@media (max-width: 900px) {
  .rent-table-wrap,
  .rent-history-scroll,
  .vmp-library-table-wrap,
  .desk-keygen-table-wrap,
  .desk-lic-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rent-table {
    min-width: 42rem;
  }

  .rent-history-table {
    min-width: 38rem;
  }

  .vmp-library-table {
    min-width: 0;
  }

  .rent-table th:first-child,
  .rent-table td:first-child,
  .rent-history-table th:first-child,
  .rent-history-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(19,15,28,0.98);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  }

  .rent-table thead th:first-child {
    z-index: 4;
  }
}

/* Rent order detail — bottom sheet on phone */
@media (max-width: 720px) {
  .rent-history-layout:has(.rent-order-detail:not([hidden])) {
    position: relative;
  }

  .rent-order-detail.rod {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 200;
    max-height: min(88vh, 720px);
    margin: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
    animation: mobile-sheet-up 0.22s ease-out;
  }

  .rent-order-detail.rod::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
  }

  .rod-close {
    min-width: var(--touch);
    min-height: var(--touch);
  }
}

@keyframes mobile-sheet-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* Desk / VMP modals — bottom sheet */
@media (max-width: 640px) {

  .vmp-library-card {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    padding: 0.85rem 0.85rem calc(0.85rem + var(--safe-b));
  }

  .vmp-library-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .vmp-library-search-wrap {
    width: 100%;
  }

  .vmp-library-toolbar .btn-sm {
    width: 100%;
  }

  .dpc-quickbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
}

/* ==========================================================================
   SHOP (shop.css supplements)
   ========================================================================== */
@media (max-width: 720px) {
  .shop-page .shop-header-premium,
  .shop-page .shop-header {
    flex-wrap: nowrap;
    padding-left: 0;
    padding-right: 0;
  }

  .shop-page .shop-header-nav {
    width: 100%;
  }

  .shop-page .shop-dhru-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-page .shop-dhru-search-wrap {
    width: 100%;
  }

  .shop-page .shop-dhru-catalog {
    grid-template-columns: 1fr !important;
  }

  .shop-page .shop-master--compact .shop-master-inner {
    grid-template-columns: 1fr !important;
  }

  .shop-page .shop-pay-row {
    flex-direction: column;
  }

  .shop-page .shop-pay-row .shop-pay-btn {
    width: 100%;
  }

  .shop-page .shop-footer-cards {
    grid-template-columns: 1fr;
  }

  .shop-page .shop-dhru-modal,
  .shop-page .shop-order-modal,
  .shop-page .shop-account-modal {
    align-items: flex-end;
    padding: 0;
  }

  .shop-page .shop-dhru-modal-card,
  .shop-page .shop-order-modal-card,
  .shop-page .shop-account-modal-card,
  .shop-page .shop-lightbox-card {
    width: 100%;
    max-width: none;
    border-radius: 20px 20px 0 0;
    max-height: 96vh;
    max-height: 96dvh;
  }

  .shop-page .shop-dhru-modal-card {
    overflow: hidden !important;
  }

  .shop-page .shop-dhru-modal-foot,
  .shop-page .shop-order-modal-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .shop-page .shop-dhru-modal-foot .shop-pay-btn,
  .shop-page .shop-order-modal-foot .btn {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .shop-brand-text .shop-brand-sub {
    display: none;
  }

  .shop-header-balance {
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
  }

  .shop-gen-seg {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   ACCOUNT (account.css supplements)
   ========================================================================== */
@media (max-width: 900px) {
  .account-page .acc-topbar {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
  }

  .account-page .acc-topbar-inner {
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    padding: calc(0.55rem + var(--safe-t)) var(--mobile-pad-r) 0.65rem var(--mobile-pad);
    min-height: 0;
  }

  .account-page .acc-topbar-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .account-page .acc-topbar-brand-text small {
    display: none;
  }

  .account-page .acc-topbar-nav {
    order: 3;
    width: 100%;
    margin-right: 0;
    justify-content: stretch;
  }

  .account-page .acc-topbar-pill {
    flex: 1;
  }

  .account-page .acc-topbar-tools {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .acc-topbar-balance-label {
    display: none;
  }

  .acc-topbar-balance {
    padding: 6px 10px;
  }

  .acc-sidebar {
    padding: 0.65rem var(--mobile-pad);
    gap: 0.65rem;
    height: auto !important;
    max-height: none !important;
  }

  .acc-sidebar-user {
    width: 100%;
  }

  .acc-sidebar-balance {
    width: 100%;
  }

  .acc-sidebar-menu {
    width: 100%;
    display: block;
    overflow: visible;
  }

  .acc-sidebar-nav {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 8px;
    flex: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 2px 0 6px;
  }

  .acc-nav-link {
    flex: 0 0 auto !important;
    white-space: nowrap;
    min-height: 50px;
    padding: 12px 16px !important;
    border-radius: 14px;
    font-size: 14.5px !important;
    font-weight: 700;
    gap: 10px;
  }

  .acc-nav-ico {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px;
    font-size: 14px;
  }

  .acc-sidebar-nav .acc-sidebar-logout,
  .acc-sidebar-logout {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 50px;
    margin-top: 0 !important;
    margin-left: 0;
    padding: 12px 18px !important;
    white-space: nowrap;
    border-radius: 14px;
    font-size: 14.5px !important;
    font-weight: 700;
    flex: 0 0 auto !important;
  }

  .acc-main {
    padding: 1rem var(--mobile-pad) calc(1.25rem + var(--safe-b)) var(--mobile-pad-r);
  }

  .acc-stat-grid,
  .acc-quick-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }

  .acc-orders-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .acc-orders-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  .acc-filter-pill {
    padding: 8px 11px;
    font-size: 12px;
    gap: 6px;
  }

  .acc-filter-ico {
    width: 14px;
    height: 14px;
  }

  .acc-orders-group-head {
    gap: 10px;
  }

  .acc-orders-group-ico {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .acc-orders-group-ico svg {
    width: 14px;
    height: 14px;
  }

  .shop-topup-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .shop-order-modal-card {
    width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
}

@media (max-width: 480px) {
  .acc-stat-grid,
  .acc-quick-grid,
  .shop-topup-presets {
    grid-template-columns: 1fr;
  }

  .acc-guest-wrap {
    padding: 6px var(--mobile-pad, 12px) 16px;
    min-height: calc(100dvh - 56px);
  }

  .acc-auth {
    border-radius: 18px;
  }

  .acc-auth-brand {
    padding: 14px 14px 10px;
  }

  .acc-auth-brand-title {
    font-size: 17px;
  }

  .acc-guest-card {
    padding: 16px 14px 18px;
  }

  .acc-auth-head { margin-bottom: 12px; }

  .acc-guest-card h1,
  .acc-auth-head h1 {
    font-size: 19px;
  }

  .acc-guest-lead {
    font-size: 12.5px;
  }

  .shop-account-tabs { margin-bottom: 12px; }
  .acc-auth-foot { margin-top: 12px; font-size: 12.5px; }
}

/* ==========================================================================
   RESELLER ADMIN (resadmin.css supplements)
   ========================================================================== */
@media (max-width: 900px) {
  .ra-shell {
    min-height: 100dvh;
  }

  .ra-sidebar {
    padding: 0.65rem var(--mobile-pad);
    gap: 0.55rem;
  }

  .ra-sidebar-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    width: 100%;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .ra-nav-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
  }

  .ra-sidebar-logout {
    flex: 0 0 auto;
    min-height: var(--touch);
  }

  .ra-main {
    padding: 0.85rem var(--mobile-pad) calc(1rem + var(--safe-b)) var(--mobile-pad-r);
  }

  .ra-grid {
    grid-template-columns: 1fr !important;
  }

  .ra-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .ra-filters .btn {
    width: 100%;
  }

  .ra-split {
    grid-template-columns: 1fr !important;
  }

  .ra-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--mobile-pad));
    margin-right: calc(-1 * var(--mobile-pad-r));
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
  }

  .ra-table {
    min-width: 44rem;
  }

  .ra-detail {
    position: sticky;
    bottom: 0;
    z-index: 5;
    max-height: 50vh;
    overflow: auto;
  }

  .rent-hub .rent-stats-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ra-login-card {
    padding: 1.25rem 1rem;
  }

  .ra-main-head {
    margin-bottom: 0.85rem;
  }

  .ra-main-head h1 {
    font-size: 1.35rem;
  }
}

/* ==========================================================================
   LEGAL + misc
   ========================================================================== */
@media (max-width: 640px) {
  .legal-wrap {
    padding: 1rem var(--mobile-pad) calc(1.5rem + var(--safe-b)) var(--mobile-pad-r);
  }

  .legal-doc {
    padding: 1.25rem 1rem;
  }

  .shop-header.legal-page-header,
  header.shop-header {
    flex-wrap: wrap;
    padding: 0.75rem var(--mobile-pad);
  }
}

/* Landscape phones — reduce vertical waste */
@media (max-height: 480px) and (orientation: landscape) {
  .acc-order-modal-card {
    max-height: 96vh;
    max-height: 96dvh;
  }

  .rent-order-detail.rod {
    max-height: 96vh;
  }

  .gen-log-list,
  .desk-pc-list {
    max-height: 40vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rent-order-detail.rod {
    animation: none;
  }
}

/* Scroll jank: sticky glass + animated fixed layers hurt phones hardest */
@media (max-width: 900px), (pointer: coarse) {
  .bg::before {
    animation: none !important;
    filter: none !important;
  }

  .shop-header-premium,
  .shop-header-shell,
  .shop-dhru-toolbar,
  .shop-main-nav,
  .acc-topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .shop-orb,
  .shop-hero-orbs,
  .login-orb {
    animation: none !important;
  }
}

/* ===== Mobile UX/perf pass (2026-10-18) ===== */
@media (max-width: 900px) {
  /* H4: version picker + buy first, screenshots gallery after */
  .shop-master-inner > .shop-master-content { order: -1; }
  .shop-master-inner > .shop-master-visual {
    order: 1;
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* H2: backdrop-filter over a huge scrolling block is the main mobile jank source */
  .shop-master,
  .shop-pill,
  .shop-preview-zoom,
  .shop-version-dd-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .shop-master {
    background:
      linear-gradient(165deg, rgba(35,26,58,0.55) 0%, rgba(11,8,18,0.96) 55%),
      rgb(15,12,22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
  /* H4: tap targets >= 44px */
  .acc-topbar-brand,
  .acc-topbar-pill { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .acc-topbar-lang-btn { min-width: 44px; min-height: 44px; }
  .shop-dl-btn { min-height: 44px; }
  .shop-qty-btn { min-width: 44px; min-height: 44px; }
  .shop-pay-balance-hint-link { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
  .shop-legal-links a, .legal-links a, footer a { display: inline-block; padding: 12px 0; }
  html, body { max-width: 100%; overflow-x: clip; }
}

/* Sticky buy bar (mobile only, created by shop_mobile.js) */
.shop-sticky-buy { display: none; }
@media (max-width: 900px) {
  .shop-sticky-buy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #110d1a; border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  }
  .shop-sticky-buy[hidden] { display: none; }
  .shop-sticky-buy-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .shop-sticky-buy-ver { font-size: 12px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shop-sticky-buy-price { font-size: 18px; color: #fff; }
  .shop-sticky-buy-btn {
    flex: 0 0 auto; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
    font: inherit; font-weight: 700; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #8d63f8, #8456f8);
  }
  body.has-sticky-buy { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}