/* ============================================================
   JANOSCI — Mobile Final Polish
   Loaded last. Fixes safe areas, sticky add-to-cart,
   horizontal scrolls, admin overrides, drawer/modal a11y,
   and edge cases for every storefront page on phones.
   ============================================================ */

/* ── PWA-like safe areas (iPhone notch + home indicator) ── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --bottom-nav-h: 62px;
}

/* ── Global overflow guard (kills horizontal scroll on phones) ── */
html, body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }

/* Container clamp */
@media (max-width: 768px) {
  .container { max-width: 100% !important; }
}

/* ── BOTTOM NAV: safe-area aware ── */
.bottom-nav {
  padding-bottom: calc(0.25rem + var(--safe-bottom)) !important;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Ensure content isn't hidden behind bottom-nav on mobile */
@media (max-width: 900px) {
  body:not(.no-bottom-nav) .page-wrapper,
  body:not(.no-bottom-nav) .footer {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  }
  /* Hide bottom-nav on admin & auth pages */
  body.admin-body .bottom-nav,
  body.auth-body .bottom-nav { display: none !important; }
}

/* ── MOBILE SIDEBAR DRAWER polish ── */
.mobile-sidebar {
  padding-top: var(--safe-top);
  max-width: 86vw !important;
}
.sidebar-overlay { backdrop-filter: blur(2px); }

/* ── STICKY ADD-TO-CART BAR on PDP (Nykaa/Amazon-style) ── */
@media (max-width: 900px) {
  body.pdp-mobile-atc {
    padding-bottom: calc(var(--bottom-nav-h) + 64px + var(--safe-bottom));
  }
  .pdp-mobile-atc-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    background: #fff;
    border-top: 1px solid #F3E8FF;
    padding: 0.65rem 0.85rem;
    z-index: 90;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    box-shadow: 0 -6px 18px rgba(15,23,42,0.10);
  }
  .pdp-mobile-atc-bar .price {
    font-weight: 800;
    font-size: 1rem;
    color: #1E1B2E;
    margin-right: auto;
    line-height: 1.1;
  }
  .pdp-mobile-atc-bar .price small {
    display: block;
    font-size: 0.65rem;
    color: #6B5B7A;
    font-weight: 500;
    margin-top: 2px;
  }
  .pdp-mobile-atc-bar .btn {
    flex: 1 1 auto;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.82rem !important;
  }
}
@media (min-width: 901px) {
  .pdp-mobile-atc-bar { display: none !important; }
}

/* ── PRODUCT DETAIL extra mobile polish ── */
@media (max-width: 768px) {
  .pdp-gallery-grid {
    position: static !important;
    flex-direction: column !important;
  }
  .thumb-sidebar {
    flex-direction: row !important;
    width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    order: 2;
    padding: 0.4rem 0;
    scrollbar-width: none;
  }
  .thumb-sidebar::-webkit-scrollbar { display: none; }
  .thumb-item {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px;
  }
  .zoom-wrap { cursor: default !important; }
  .countdown-bar {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.6rem 0.85rem !important;
  }
}

/* ── CART summary stacked, full-width CTAs ── */
@media (max-width: 768px) {
  .cart-summary {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .cart-summary .btn { width: 100% !important; }
  .cart-item-controls .qty-control { margin: 0 !important; }
}

/* ── CHECKOUT step pills compact ── */
@media (max-width: 600px) {
  .steps-header,
  .checkout-steps {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.25rem;
  }
  .steps-header::-webkit-scrollbar,
  .checkout-steps::-webkit-scrollbar { display: none; }
  .step-item,
  .checkout-step {
    flex: 0 0 auto;
  }
}

/* ── PROFILE: tabs scrollable horizontally on phones ── */
@media (max-width: 768px) {
  .profile-nav {
    display: flex !important;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #F3E8FF;
  }
  .profile-nav::-webkit-scrollbar { display: none; }
  .profile-nav a {
    flex: 0 0 auto !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap;
  }
  .profile-nav a.active {
    border-left: none !important;
    border-bottom-color: var(--vt-purple, #9333EA) !important;
  }
}

/* ── ORDERS list: card-style with horizontal scroll for table-like rows ── */
@media (max-width: 768px) {
  table:not(.no-mobile) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .order-card,
  .order-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
}

/* ── WISHLIST grid: 2 columns ── */
@media (max-width: 768px) {
  .wishlist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.65rem !important; }
}
@media (max-width: 380px) {
  .wishlist-grid { grid-template-columns: 1fr !important; }
}

/* ── BLOG single post — readable on phones ── */
@media (max-width: 768px) {
  .blog-single-content {
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .blog-single-content img { border-radius: 10px; }
  .blog-single-content h2 { font-size: 1.2rem !important; }
  .blog-single-content h3 { font-size: 1.05rem !important; }
}

/* ── SEARCH dropdown full-width on phones ── */
@media (max-width: 768px) {
  #searchDropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 60px !important;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 0 0 16px 16px !important;
    z-index: 1000;
  }
}

/* ── MOBILE: floating scroll-to-top ── */
@media (max-width: 768px) {
  .scroll-top-btn {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
  }
}

/* ── MODALS — full-screen-ish on small phones ── */
@media (max-width: 600px) {
  .modal-card,
  .modal-content {
    max-width: 95vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }
  .modal-body { padding: 1rem !important; }
  .modal-foot,
  .modal-footer {
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }
  .modal-foot .btn,
  .modal-footer .btn { width: 100% !important; }
}

/* ── TOASTS: wider on mobile ── */
@media (max-width: 600px) {
  #toastContainer {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
    width: auto !important;
    max-width: none !important;
  }
  .toast { width: 100% !important; }
}

/* ── Form grids & modal fields (quotation, checkout modals) ── */
.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.modal .field,
.modal-card .field {
  margin-bottom: 0.85rem;
}

.modal .field label,
.modal-card .field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0a2540;
  margin-bottom: 0.35rem;
}

.modal .field input,
.modal .field select,
.modal .field textarea,
.modal-card .field input,
.modal-card .field select,
.modal-card .field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #fff;
}

.modal .field textarea,
.modal-card .field textarea {
  min-height: 88px;
  resize: vertical;
}

@media (max-width: 768px) {
  .field-grid-2,
  .field-grid-3,
  *[style*="grid-template-columns:1fr 1fr"]:not(.products-grid):not(.product-grid):not(.wishlist-grid):not(.category-tiles):not(.hero-stats):not(.offer-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* ── Auth pages: comfortable card padding ── */
@media (max-width: 600px) {
  .auth-card {
    border-radius: 14px !important;
    margin: 0.5rem !important;
  }
  .auth-header {
    padding: 1.5rem 1.25rem 0.75rem !important;
  }
  .auth-body { padding: 0 1.25rem 1.5rem !important; }
  .auth-footer { padding: 1rem 1.25rem !important; }
  body { padding: 0.5rem !important; }
}

/* ── Bigger taps for icon-only buttons ── */
@media (max-width: 768px) {
  .wishlist-btn,
  .navbar-icon-btn,
  .qty-btn,
  .modal-close {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ── Smoother iOS-like scrolling for scrollable areas ── */
.scrollable-x,
.thumb-sidebar,
.trust-grid,
.profile-nav,
.steps-header {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* ============================================================
   ADMIN PANEL — mobile patches
   ============================================================ */
@media (max-width: 768px) {
  /* Admin top bar wraps cleanly */
  .topbar,
  .admin-topbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.4rem !important;
  }
  .topbar-title,
  .admin-topbar-title {
    font-size: 0.95rem !important;
    flex: 1 1 100%;
    order: -1;
  }

  /* Admin content padding */
  .content,
  .admin-content { padding: 0.75rem !important; }

  /* Admin tables → wrap, scroll horizontally, cleaner */
  .admin-layout table,
  .admin-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.78rem !important;
  }
  .admin-table th,
  .admin-table td {
    padding: 0.5rem 0.65rem !important;
  }

  /* Admin modal full-screen on phones */
  .admin-layout .modal,
  .modal {
    padding: 0 !important;
  }
  .admin-layout .modal-card,
  .admin-layout .modal-content {
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .admin-layout .modal-body { flex: 1; overflow-y: auto; }

  /* Sidebar is already a drawer at ≤1023px — ensure it's full-height + safe area */
  .admin-layout .sidebar {
    padding-top: var(--safe-top) !important;
    padding-bottom: var(--safe-bottom) !important;
    z-index: 9999 !important;
  }

  /* Admin stat cards: ensure pair-up at very small sizes already handled */
  .stats-grid > .stat-card { padding: 0.85rem !important; }

  /* Admin field grids stack */
  .field-grid-2,
  .field-grid-3 { grid-template-columns: 1fr !important; }

  /* Filter bars on listings */
  .filter-bar,
  .admin-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .filter-bar > *,
  .admin-filter-bar > * { width: 100% !important; }
}

/* Admin sidebar drawer backdrop */
@media (max-width: 1023px) {
  .admin-layout .sidebar.open + .main::before,
  body.admin-sidebar-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 99;
    backdrop-filter: blur(2px);
  }
}

/* ============================================================
   ACCESSIBILITY: reduced motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   PRINT: clean invoice/order print
   ============================================================ */
@media print {
  .navbar, .bottom-nav, .ann-bar, .footer, .newsletter-section,
  .scroll-top-btn, .pdp-mobile-atc-bar, .mobile-sidebar,
  .sidebar-overlay, #toastContainer { display: none !important; }
  body, .container { background: #fff !important; color: #000 !important; }
}