/* SimiTolk Responsive Styles — universal breakpoints for all devices */
/* Desktop-first cascade: 1200px → 1024px → 900px → 768px → 600px → 480px → 360px */

/* ── Large desktop / TV: >1480px ── */
@media (min-width: 1481px) {
  .header-inner, .page, .container, .footer-inner { max-width: 1600px !important; }
}

/* ── Small desktop / laptop: 1025–1200px ── */
@media (max-width: 1200px) {
  .header-inner { gap: 16px; padding: 12px 20px; }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
  .service-grid, .event-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .benefits { grid-template-columns: repeat(2, 1fr) !important; }
  .hero { grid-template-columns: 1fr 1fr !important; }
}

/* ── Tablet landscape + small laptop: 900–1024px ── */
@media (max-width: 1024px) {
  .stats, .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grid2 { grid-template-columns: 1fr !important; }
  .grid3 { grid-template-columns: 1fr 1fr !important; }
  .grid4, .tc-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .tc-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .header-inner { grid-template-columns: auto 1fr auto !important; }
  .header-inner .search-wrap { min-width: min(200px, 40%); }
  .hero { grid-template-columns: 1fr 1fr !important; gap: 24px; }
  .hero-note { position: static !important; width: 100% !important; }
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .banner { grid-template-columns: 1fr !important; }
  .footer-inner { grid-template-columns: repeat(3, 1fr) !important; gap: 32px; }
  .product-layout { grid-template-columns: 1fr !important; }
  .product-gallery { max-width: 500px; margin: 0 auto; }
  .checkout-grid { grid-template-columns: 1fr !important; }
  .grocery-layout { grid-template-columns: 1fr !important; }
  .event-detail-grid { grid-template-columns: 1fr !important; }
  .auth-container { max-width: 420px !important; padding: 24px !important; }
  .profile-grid { grid-template-columns: 1fr !important; }
  .help-grid, .request-grid { grid-template-columns: 1fr !important; }
  .pr-hero-layout { grid-template-columns: 1fr !important; }
  .pr-detail-grid { grid-template-columns: 1fr !important; }
  .order-detail-grid { grid-template-columns: 1fr !important; }
  .pgrid { grid-template-columns: repeat(3, 1fr) !important; }
  .cart-layout { grid-template-columns: 1fr !important; }
  .booking-grid { grid-template-columns: 1fr !important; }
  .gps-layout { grid-template-columns: 1fr !important; }
  .invoice-layout { grid-template-columns: 1fr !important; }
  .tracking-layout { grid-template-columns: 1fr !important; }
  .service-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Tablet portrait: 768–899px ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr !important; text-align: center; }
  .hero-visual { display: none !important; }
  .hero h1 { font-size: clamp(24px, 5vw, 36px) !important; }
  .hero p { font-size: 14px !important; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .category-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .service-grid, .event-grid { grid-template-columns: 1fr !important; }
  .benefits { grid-template-columns: 1fr !important; }
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .section-head { flex-direction: column; gap: 8px; text-align: center; }
  .showcase { grid-template-columns: 1fr !important; }
  .header-inner .search-wrap { min-width: 160px; }

  /* Event planner header */
  .ev-links { overflow-x: auto; gap: 10px; }
  .ev-links a { font-size: 12px; white-space: nowrap; padding: 4px 0; }
  .ev-search { min-width: 160px; }
  .ev-search input { min-height: 36px; font-size: 13px; }
  .ev-search button { padding: 0 14px; height: 34px; font-size: 12px; }
}

/* ── Dashboard Sidebar — collapse on tablets ── */
@media (max-width: 1024px) {
  .layout { z-index: auto !important; }
  .sidebar { transform: translateX(-100%); position: fixed; top: 0; left: 0; z-index: 250; height: 100vh; width: 260px; transition: transform 0.3s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,0.5); }
  .sidebar-shell { transform: translateX(-100%); z-index: 250; }
  .sidebar-shell.mobile-open { transform: translateX(0); z-index: 991; box-shadow: 4px 0 30px rgba(0,0,0,0.5); }
  .main { margin-left: 0 !important; }
  .main-content-space { margin-left: 0 !important; }
  .menu-toggle { display: flex !important; }
  .mobile-nav-toggle { display: inline-flex !important; }
  .overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg, rgba(0,0,0,0.5)); z-index: 200; }
  .overlay.show { display: block; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .metric-row-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .card-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  /* ── Sidebar / Dashboard ── */
  .sidebar { transform: translateX(-100%); position: fixed; top: 0; left: 0; z-index: 50; height: 100vh; width: 260px; transition: transform 0.3s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; padding: 16px !important; }
  .menu-toggle { display: flex !important; }
  .overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg, rgba(0,0,0,0.5)); z-index: 40; }
  .overlay.show { display: block; }
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 16px; }
  .topbar h1, .tb-title { font-size: 18px; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .item-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Header ── */
  .header-inner { padding: 10px 16px !important; gap: 12px; grid-template-columns: auto 1fr auto !important; }
  .header-inner .search-wrap { order: 3; grid-column: 1 / -1; }
  .header-inner .search-wrap input { height: 40px !important; font-size: 13px !important; padding: 0 56px 0 42px !important; }
  .header-inner .search-submit { height: 30px !important; font-size: 12px !important; right: 5px !important; top: 5px !important; }
  .brand-name { font-size: 16px !important; }
  .brand img { width: 32px !important; height: 32px !important; }
  .icon-btn { width: 38px !important; height: 38px !important; font-size: 14px !important; }

  /* ── Home page ── */
  .hero { padding: 40px 0 60px !important; }
  .hero h1 { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.3 !important; }
  .hero-stats { flex-wrap: wrap; gap: 8px; }
  .hero-stats .stat-item { padding: 8px 12px !important; }
  .category-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .category-grid .category-card { padding: 12px 8px !important; }
  .category-grid .category-card i { font-size: 20px !important; }
  .category-grid .category-card span { font-size: 11px !important; }
  .pgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .pcard .pinfo h3 { font-size: 13px !important; }
  .slider-track { gap: 12px !important; }
  .quick-links { gap: 8px !important; }
  .quick-links a { font-size: 12px !important; padding: 6px 12px !important; }
  .banner { padding: 20px !important; }
  .feature-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .feature-card { padding: 16px !important; }
  .benefits { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 24px; }
  .section-head h2 { font-size: 20px !important; }
  .auth-role-grid { grid-template-columns: 1fr !important; }

  /* ── Auth page ── */
  .auth-container { padding: 20px !important; margin: 16px !important; }
  .auth-container .auth-form { gap: 12px; }
  .auth-container input { padding: 10px 12px !important; font-size: 14px !important; }

  /* ── Shopping ── */
  .shop-top { padding: 12px 0 0; }
  .shop-inner { padding: 0 16px; }
  .shop-logo { font-size: 18px; gap: 8px; }
  .shop-logo .logo-mark { width: 36px; height: 36px; font-size: 17px; }
  .shop-search input { min-height: 40px; font-size: 13px; }
  .shop-search button { padding: 0 16px; height: 36px; font-size: 12px; border-radius: 10px; }
  .shop-actions { gap: 6px; }
  .s-act { width: 38px; height: 38px; border-radius: 10px; }
  .mega-cats { padding: 8px 0 12px; gap: 8px; }
  .mega-cat { padding: 8px 16px; font-size: 12px; }
  .product-toolbar { flex-direction: column; gap: 10px; align-items: stretch; }
  .product-toolbar .filter-group { flex-wrap: wrap; }
  .product-view-grid { grid-template-columns: 1fr !important; }

  /* ── Product view ── */
  .product-layout { grid-template-columns: 1fr !important; }
  .product-gallery img { max-height: 300px !important; object-fit: contain; }
  .product-info { padding: 16px 0 !important; }
  .product-info h1 { font-size: 20px !important; }

  /* ── Grocery ── */
  .grocery-header { flex-direction: column; gap: 10px; }
  .grocery-filters { overflow-x: auto; }
  .grocery-filters .tab { white-space: nowrap; font-size: 12px; }
  .cart-sidebar { position: static !important; width: 100% !important; max-height: none !important; }
  .g-header-inner { gap: 14px; padding: 8px 16px; }
  .g-brand { font-size: 17px; }
  .g-brand-mark { width: 36px; height: 36px; font-size: 17px; }
  .g-search input { min-height: 38px; font-size: 13px; }
  .g-icon { width: 38px; height: 38px; }
  .g-nav { margin-top: 16px; padding: 0 16px; }
  .g-tab { padding: 10px 18px; font-size: 13px; }

  /* ── Services / Events ── */
  .service-page .service-header { flex-direction: column; }
  .service-cards { grid-template-columns: 1fr !important; }
  .event-grid .event-card .event-image { height: 160px !important; }
  .event-planner .ep-header { flex-direction: column; text-align: center; }

  /* ── Checkout / Payment ── */
  .checkout-container { padding: 16px !important; }
  .payment-methods { grid-template-columns: 1fr !important; }
  .step-label { font-size: 11px; white-space: nowrap; }
  .step-indicator .step { padding: 6px 10px; gap: 4px; }
  .step-number { width: 24px; height: 24px; font-size: 11px; }

  /* ── Forms ── */
  .form-grid { grid-template-columns: 1fr !important; }
  .field-row { flex-direction: column; }
  .tc { grid-template-columns: 1fr !important; }
  .tc-2, .tc-3, .tc-4 { grid-template-columns: 1fr !important; }

  /* ── Tables ── */
  table { font-size: 12px; }
  th, td { padding: 6px 8px; }
  .table-wrap { overflow-x: auto; }

  /* ── Tabs ── */
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; font-size: 12px; padding: 8px 12px; }

  /* ── Modals ── */
  .modal { margin: 8px; padding: 16px; max-width: 100%; width: calc(100% - 16px) !important; }
  .modal-lg { max-width: 100% !important; }

  /* ── Misc ── */
  .search-bar { flex-direction: column; }
  .nav-btn { font-size: 12px; padding: 8px 10px; }
  .sb-logo { font-size: 16px; }
  .job-actions { flex-direction: column; }
  .job-actions .btn { width: 100%; justify-content: center; }
  .otp-display { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .otp-digit { width: 42px; height: 48px; font-size: 20px; }
  .badge-list { flex-wrap: wrap; }

  /* LetMeHelp */
  .hero-grid { grid-template-columns: 1fr !important; }
  .floating-preview { display: none !important; }
  .prod-scroll { grid-template-columns: repeat(2, 1fr) !important; overflow-x: visible !important; }
  .prod-card { min-width: 0 !important; max-width: none !important; }
  .prod-cat-header { flex-direction: column; gap: 4px; }

  /* Tracking / GPS */
  .gps-panel { grid-template-columns: 1fr !important; }
  .driver-list .driver-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Phone landscape + large phone: 600–767px ── */
@media (max-width: 600px) {
  .benefits { margin: 0 -12px !important; padding: 32px 18px !important; }
  .slider-control.next { right: -10px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .grid3 { grid-template-columns: 1fr !important; }
  .grid4, .tc-4 { grid-template-columns: 1fr !important; }
  .item-grid { grid-template-columns: 1fr !important; }
  .main { padding: 12px !important; }
  .card { padding: 14px !important; }
  .stats, .card-grid, .product-grid { gap: 10px !important; }
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .benefits { grid-template-columns: 1fr !important; }
  .footer-inner { grid-template-columns: 1fr !important; text-align: center; }
  .hero h1 { font-size: clamp(18px, 5vw, 24px) !important; }
  .hero p { font-size: 13px !important; }
  .search-wrap input { height: 38px !important; font-size: 12px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 15px !important; }
  .section-head h2 { font-size: 18px !important; }
  .header-actions { gap: 6px; }
  .icon-btn { width: 34px !important; height: 34px !important; }
  .brand img { width: 28px !important; height: 28px !important; }
  .brand-name { font-size: 14px !important; }
  .product-toolbar .view-toggles { display: none !important; }
  .cat-product-scroll { gap: 10px !important; }
  .cat-product-scroll .product-card { flex: 0 0 170px !important; }
  .cat-product-scroll .product-media { height: 110px !important; }
  .featured-scroll { gap: 10px !important; }
  .prod-scroll { grid-template-columns: 1fr 1fr !important; }
  .prod-card-img { height: 120px !important; }
  .prod-card-body { padding: 10px !important; }
  .prod-card-body .prod-name { font-size: 12px !important; }
  .prod-card-body .prod-price { font-size: 14px !important; }
  .service-cards { grid-template-columns: 1fr !important; }
  .auth-container { margin: 10px !important; padding: 16px !important; }
  .otp-digit { width: 38px; height: 42px; font-size: 18px; }
  .topbar h1, .tb-title { font-size: 16px; }
  .event-grid .event-card .event-image { height: 140px !important; }
  .dropdown-menu { width: calc(100vw - 32px) !important; left: 16px !important; }
  .notif-panel { width: calc(100vw - 32px) !important; left: 16px !important; }

  /* Shopping header compact */
  .shop-logo { font-size: 15px; }
  .shop-logo .logo-mark { width: 30px; height: 30px; font-size: 14px; }
  .shop-search { border-radius: 12px; padding: 3px 5px 3px 12px; }
  .shop-search input { min-height: 34px; font-size: 12px; }
  .shop-search button { padding: 0 12px; height: 32px; font-size: 11px; border-radius: 8px; }
  .shop-actions { gap: 4px; }
  .s-act { width: 34px; height: 34px; border-radius: 10px; }
  .s-badge { min-width: 14px; height: 14px; font-size: 8px; top: -3px; right: -3px; }

  /* Event planner header compact */
  .ev-logo { font-size: 16px; }
  .ev-logo span { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }
  .ev-btn { padding: 6px 12px; font-size: 11px; }

  /* Grocery header compact */
  .g-header-inner { padding: 6px 14px; gap: 10px; }
  .g-brand { font-size: 15px; gap: 8px; }
  .g-brand-mark { width: 32px; height: 32px; font-size: 15px; border-radius: 10px; }
  .g-brand small { font-size: 9px; }
  .g-search input { min-height: 34px; font-size: 12px; }
  .g-search button { padding: 0 14px; height: 32px; font-size: 11px; }
  .g-actions { gap: 6px !important; }
  .g-icon { width: 34px; height: 34px; }

  /* GPS tracking header */
  .header .dash-link span, .header-right .dash-link span { display: none; }
}

/* ── Small phone: 400–479px ── */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr !important; }
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .pgrid { grid-template-columns: 1fr !important; }
  .main { padding: 8px !important; }
  .stats, .card-grid, .product-grid { gap: 8px !important; }
  .page { padding-left: 12px !important; padding-right: 12px !important; }
  .card { padding: 12px !important; border-radius: 10px; }
  .modal { padding: 14px; }
  .otp-digit { width: 34px; height: 38px; font-size: 16px; }
  .topbar-inner { padding: 4px 12px !important; gap: 4px; }
  .topbar-inner #langSelect { font-size: 10px !important; padding: 2px 4px !important; max-width: 90px; }
  .topbar h1, .tb-title { font-size: 15px; }
  .btn { font-size: 11px; height: 32px; padding: 0 10px; }
  .btn-sm { height: 26px; font-size: 10px; padding: 0 6px; }
  .chip, .chip-s { font-size: 9px; padding: 2px 6px; }
  .stat strong { font-size: 20px; }
  .stat span { font-size: 10px; }
  .sb-logo { font-size: 14px; }
  .nav-btn { font-size: 11px; padding: 6px 8px; }
  .sidebar { padding: 12px 8px; width: 240px; }
  h2 { font-size: 14px !important; }
  h3 { font-size: 13px !important; }
  .badge { font-size: 10px; padding: 2px 6px; }
  .form-control { padding: 6px 10px; font-size: 13px; }
  .card h2 { font-size: 13px !important; }
  .card h3 { font-size: 12px !important; }
  .hero h1 { font-size: clamp(16px, 6vw, 20px) !important; }
  .prod-scroll { grid-template-columns: 1fr !important; }
  .prod-card-img { height: 140px !important; }
  .header-inner { padding: 8px 12px !important; }
  .header-inner .search-wrap input { height: 36px !important; font-size: 13px !important; padding: 0 50px 0 42px !important; }
  .header-inner .search-submit { height: 26px !important; font-size: 11px !important; padding: 0 10px !important; }
  .icon-btn { width: 32px !important; height: 32px !important; }
  .brand img { width: 24px !important; height: 24px !important; }
  .brand-name { font-size: 12px !important; }

  /* Shopping at 480px */
  .shop-top { padding: 6px 0 0; }
  .shop-inner { padding: 0 10px; }
  .shop-row1 { gap: 6px; margin-bottom: 6px; }
  .shop-logo { font-size: 13px; gap: 6px; }
  .shop-logo .logo-mark { width: 24px; height: 24px; font-size: 11px; border-radius: 6px; }
  .shop-search input { min-height: 30px; font-size: 11px; }
  .shop-search button { padding: 0 8px; font-size: 10px; height: 26px; border-radius: 6px; }

  /* Grocery at 480px */
  .g-header-inner { gap: 8px; padding: 6px 10px; }
  .g-brand { font-size: 13px; gap: 6px; }
  .g-brand-mark { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
  .g-brand small { font-size: 8px; }
  .g-search { border-radius: 8px; padding: 2px 4px 2px 8px; }
  .g-search input { min-height: 28px; font-size: 11px; }
  .g-search button { padding: 0 10px; height: 26px; font-size: 10px; border-radius: 6px; }
  .g-icon { width: 30px; height: 30px; border-radius: 8px; }
  .g-nav { margin-top: 8px; padding: 0 10px; }
  .g-tab { padding: 6px 12px; font-size: 11px; }

  /* Event at 480px */
  .ev-logo { font-size: 14px; gap: 6px; }
  .ev-logo span { width: 28px; height: 28px; font-size: 12px; }

  .auth-container { padding: 14px !important; margin: 8px !important; }
  .auth-container h2 { font-size: 18px !important; }
  /* Dashboard item list */
  .item { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
  .item .ii { width: 100%; }
  .item .btn-group { width: 100%; justify-content: flex-end; }
  .sh { flex-direction: column; align-items: flex-start; gap: 8px; }
  .info-banner { font-size: 12px !important; padding: 12px !important; }
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .productFormWrap .fg { grid-template-columns: 1fr !important; }
  #productFormWrap > div > div { grid-template-columns: 1fr !important; }
}

/* ── Tiny screens: <400px ── */
@media (max-width: 400px) {
  .main { padding: 6px !important; }
  .card { padding: 10px !important; }
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 4px; }
  .category-grid .category-card { padding: 8px 4px !important; }
  .category-grid .category-card i { font-size: 16px !important; }
  .category-grid .category-card span { font-size: 10px !important; }
  .otp-digit { width: 30px; height: 34px; font-size: 14px; }
  .otp-display { gap: 3px; }
  .topbar h1, .tb-title { font-size: 14px; }
  .sidebar { width: 220px; }
  .header-inner { padding: 6px 10px !important; }
  .brand-name { display: none !important; }
  .shop-logo { font-size: 0; }
  .shop-logo .logo-mark { font-size: 11px; }
  .pgrid { grid-template-columns: 1fr !important; }
  .hero-stats .stat-item strong { font-size: 18px !important; }
  .hero-stats .stat-item span { font-size: 10px !important; }
  .auth-container { padding: 12px !important; }
  .auth-container .role-grid { grid-template-columns: 1fr !important; }
  .prod-card-img { height: 120px !important; }
  .prod-card-body .prod-name { font-size: 11px !important; }
  .prod-card-body .prod-price { font-size: 13px !important; }
}

/* ── Sidebar toggle button ── */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
  z-index: 60;
  transition: all 0.2s;
}

/* ── Utility: Show/hide on mobile ── */
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: block; } .desktop-only { display: none !important; } }

/* ── Scrollbar for horizontal scroll sections ── */
.cat-product-scroll::-webkit-scrollbar, .featured-scroll::-webkit-scrollbar, .prod-scroll::-webkit-scrollbar,
.quick-links::-webkit-scrollbar, .category-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { height: 4px; }
.cat-product-scroll::-webkit-scrollbar-thumb, .featured-scroll::-webkit-scrollbar-thumb,
.prod-scroll::-webkit-scrollbar-thumb, .quick-links::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, rgba(0,0,0,0.15)); border-radius: 4px; }

/* ── Touch-friendly improvements ── */
@media (hover: none) and (pointer: coarse) {
  .icon-btn:hover { transform: none !important; }
  .btn:hover { transform: none !important; }
  a:hover { transform: none !important; }
  .category-card:hover { transform: none !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Print ── */
@media print {
  .sidebar, .menu-toggle, .overlay, .nav-bar, .footer, .app-header, .header-actions,
  .search-wrap, .product-toolbar, .tabs, .btn, button { display: none !important; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  .modal-backdrop { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal { box-shadow: none; border: 1px solid #ddd; max-width: 100%; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ── Safari / iOS specific fixes ── */
@supports (-webkit-touch-callout: none) {
  .sidebar { -webkit-overflow-scrolling: touch; }
  .cat-product-scroll, .featured-scroll, .prod-scroll { -webkit-overflow-scrolling: touch; }
  input, textarea, select { font-size: 16px !important; } /* Prevent iOS zoom on focus */
}

/* ── Safe area insets for notched devices ── */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-header { padding-top: calc(env(safe-area-inset-top)); }
  .shop-top { padding-top: calc(12px + env(safe-area-inset-top)); }
  .g-header { padding-top: calc(env(safe-area-inset-top)); }
  .ev-top { padding-top: calc(14px + env(safe-area-inset-top)); }
  .topbar { padding-top: calc(env(safe-area-inset-top)); }
  .control-topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
  .req-top { padding-top: calc(env(safe-area-inset-top)); }
  .eg-header { padding-top: calc(env(safe-area-inset-top)); }
  .pay-header { padding-top: calc(env(safe-area-inset-top)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DASHBOARD RESPONSIVE OVERRIDES — override inline fixed-width styles
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── All dashboards: modals fit mobile ── */
@media (max-width: 768px) {
  /* Override inline max-width on modals */
  .modal-backdrop > div[style*="max-width"] {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    padding: 16px !important;
    margin: 8px !important;
  }
  /* Inline style overrides - ensure HTML uses consistent spacing */
  .card[style*="width:"],
  .item[style*="width:"],
  div[style*="width: 300px"],
  div[style*="width: 350px"],
  div[style*="width: 400px"],
  div[style*="width: 500px"],
  div[style*="width: 600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Override inline fixed max-width */
  div[style*="max-width: 500px"],
  div[style*="max-width: 600px"],
  div[style*="max-width: 700px"] {
    max-width: calc(100vw - 24px) !important;
  }
  /* Tables scroll horizontally */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody, tr, th, td { min-width: 0; }
  /* Dashboard stat grids */
  .stats, .stat-grid { grid-template-columns: 1fr 1fr !important; }
  /* Dashboard item list */
  .item { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
  .item .ih { flex-direction: column; gap: 8px; }
  /* Forms single column */
  .form-grid, .form-grid-2, .grid2, .grid3, .grid4 { grid-template-columns: 1fr !important; }
  /* OTP digits */
  .otp-digit { width: 38px; height: 44px; font-size: 18px; }
  /* Info grids */
  .info-grid { grid-template-columns: 1fr !important; }
  /* Invoice meta */
  .invoice-meta { flex-direction: column !important; }
  .meta-left, .meta-right { text-align: left !important; }
}

/* ── Small phones: override inline styles ── */
@media (max-width: 480px) {
  .stats, .stat-grid { grid-template-columns: 1fr !important; }
  .item .btn-group { flex-wrap: wrap; }
  .item .btn-group .btn { font-size: 10px !important; padding: 0 8px !important; }
  .chip { font-size: 9px !important; padding: 2px 6px !important; }
  .otp-digit { width: 34px; height: 38px; font-size: 16px; }
  /* Override all inline max-width on dashboard panels */
  div[style*="max-width: 400px"],
  div[style*="max-width: 450px"] {
    max-width: calc(100vw - 20px) !important;
  }
  /* Service cards */
  .service-cards { grid-template-columns: 1fr !important; }
  /* Event cards */
  .event-grid { grid-template-columns: 1fr !important; }
  /* Product grid */
  .pgrid { grid-template-columns: 1fr !important; }
  /* Category grid */
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Touch targets: minimum 44px ── */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px !important; }
  .icon-btn { min-width: 44px !important; min-height: 44px !important; }
  .chip { min-height: 28px !important; }
  input, textarea, select { min-height: 44px !important; }
  .otp-digit { min-width: 40px !important; min-height: 48px !important; }
}

/* ── Prevent horizontal overflow on all pages ── */
html { overflow-x: clip; }
body { max-width: 100vw; overflow-x: clip; }
img { max-width: 100%; height: auto; }
video { max-width: 100%; }

/* ── Dashboard sidebar overlay on mobile ── */
@media (max-width: 768px) {
  .sidebar { width: 260px !important; max-width: 80vw; }
  .main { margin-left: 0 !important; padding: 12px !important; }
  .topbar-inner { padding: 8px 12px !important; flex-wrap: wrap; }
}

/* ── Invoice print on mobile ── */
@media (max-width: 600px) {
  .invoice { padding: 16px !important; }
  .invoice table { font-size: 10px !important; }
  .invoice th, .invoice td { padding: 4px !important; }
  .totals { width: 100% !important; }
  .footer { flex-direction: column !important; gap: 16px; }
  .footer > div { text-align: left !important; }
}

/* ── OTP Verification section responsive ── */
@media (max-width: 600px) {
  .otp-verify-body{grid-template-columns:1fr}
  .otp-panel+.otp-panel{border-left:none;border-top:1px solid var(--border-color)}
  .otp-panel{padding:14px 16px}
}

/* ── DreamHome header (developer-profile / product-details) ── */
@media (max-width: 640px) {
  .dh-hdr-in { padding: 10px 12px; gap: 8px; }
  .dh-back { padding: 6px 10px; font-size: 12px; }
  .dh-logo span { display: none; }
  .dh-nav { gap: 4px; }
  .dh-nav a, .dh-nav button { padding: 6px 10px; font-size: 12px; }
}

/* ════ 390px mobile overflow sweep fixes ════ */
html, body { overflow-x: clip; }

@media (max-width: 768px) {
  /* Cart progress steps: wrap instead of cutting Payment off-screen */
  .steps { flex-wrap: wrap !important; justify-content: center !important; row-gap: 8px; }
  .step-line { width: 16px !important; margin: 0 4px !important; }

  /* Event planner header links wrap */
  .req-links { flex-wrap: wrap !important; row-gap: 6px; justify-content: flex-end; }

  /* Grocery orders + developer profile tab bars scroll horizontally */
  .g-tab-bar { overflow-x: auto !important; }
  .dp-tabs { overflow-x: auto !important; scrollbar-width: none; }
  .dp-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  /* Grocery section header: brand + icon row, search on its own full-width row */
  .g-header .g-header-inner { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .g-header .g-brand { flex: 0 0 auto; }
  .g-header .g-actions { margin-left: auto; }
  .g-header .g-search { order: 3; flex: 1 1 100% !important; min-width: 0 !important; }

  /* Festival header: same two-row layout */
  .fest-header .fest-header-inner { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .fest-header .fest-brand { flex: 0 0 auto; }
  .fest-header .fest-actions { margin-left: auto; }
  .fest-header .fest-search { order: 3; flex: 1 1 100% !important; min-width: 0 !important; }

  /* SimiTolk Official header: logo row, search full row, actions row */
  .s-top .s-row { gap: 8px !important; }
  .s-top .s-search { order: 1 !important; flex: 1 1 100% !important; min-width: 0 !important; }
  .s-top .s-acts { order: 2 !important; margin-left: auto; }
}

/* ── Auth page: keep decorative orbs away from the form on mobile ── */
@media (max-width: 768px) {
  .bg-canvas .orb:nth-child(2) { right: -45%; bottom: -65%; }
  .bg-canvas .orb:nth-child(3) { left: 85%; }
}

/* [hidden] attribute must win over component display rules */
[hidden]{display:none !important;}