/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TYPOGRAPHY & UI SCALING OPTIMIZATION FOR J-BROK GAT-JET
   Target: 320px - 480px mobile screens
   Version: 2.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   SECTION 1: FLUID TYPOGRAPHY SYSTEM
   Uses clamp() for smooth scaling between viewport widths
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Fluid Font Sizes - clamp(min, preferred, max) */
  --fs-xs: clamp(0.625rem, 0.55rem + 0.375vw, 0.75rem);      /* 10-12px */
  --fs-sm: clamp(0.75rem, 0.675rem + 0.375vw, 0.875rem);     /* 12-14px */
  --fs-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14-16px - minimum readable */
  --fs-md: clamp(0.9375rem, 0.85rem + 0.4375vw, 1.125rem);   /* 15-18px */
  --fs-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);             /* 16-20px */
  --fs-xl: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);          /* 18-24px */
  --fs-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);        /* 20-28px */
  --fs-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.2rem);         /* 24-35px */
  --fs-4xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);         /* 28-40px */
  
  /* Fluid Spacing Scale */
  --sp-2xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);      /* 2-4px */
  --sp-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);        /* 4-6px */
  --sp-sm: clamp(0.375rem, 0.3rem + 0.375vw, 0.5rem);        /* 6-8px */
  --sp-md: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);           /* 8-12px */
  --sp-lg: clamp(0.625rem, 0.5rem + 0.625vw, 1rem);          /* 10-16px */
  --sp-xl: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);         /* 12-20px */
  --sp-2xl: clamp(1rem, 0.8rem + 1vw, 1.5rem);               /* 16-24px */
  --sp-3xl: clamp(1.25rem, 1rem + 1.25vw, 2rem);             /* 20-32px */
  
  /* Touch Target (WCAG 2.5.5 minimum 44x44px) */
  --touch-min: 44px;
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
}

/* ────────────────────────────────────────────────────────────────────────────
   SECTION 2: OVERFLOW PREVENTION
   Ensures no horizontal scrolling on any device
   ──────────────────────────────────────────────────────────────────────────── */

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent horizontal scroll safely without breaking flex/grid */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}

/* Break long words/URLs in text elements */
.lk-title, .sec-title, .ri-dev, .dc-name, .rc-dev, .sb-name, .mob-name, .prof-name,
.pc-title, .card-title, h1, h2, h3, h4, h5, h6, p, a, span, td, th, li,
.rc-note span, .dc-sub, .rc-svc, .suggestion-ta, .rc-rv-ta {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Fix for long monospace IDs */
.mono, .ri-id, .rc-id, .dc-qrid, .lk-input {
  word-break: break-all;
}

/* ────────────────────────────────────────────────────────────────────────────
   SECTION 3: FLUID TYPOGRAPHY REPLACEMENTS
   Applies fluid sizing to key text elements
   ──────────────────────────────────────────────────────────────────────────── */

/* Login Section */
.lk-title {
  font-size: var(--fs-2xl) !important;
  line-height: var(--lh-tight);
}

.lk-sub {
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-normal);
}

.lk-tab {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-sm) var(--sp-md);
  min-height: var(--touch-min);
}

.lk-input {
  font-size: max(16px, var(--fs-base)) !important; /* Prevent iOS zoom */
  padding: var(--sp-md) var(--sp-md) var(--sp-md) calc(var(--sp-md) + 36px);
  min-height: var(--touch-min);
}

.lk-btn {
  font-size: var(--fs-base) !important;
  padding: var(--sp-md) var(--sp-lg);
  min-height: var(--touch-min);
}

.lk-links {
  font-size: var(--fs-xs) !important;
}

.lk-err {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-sm) var(--sp-md);
}

/* Section Titles */
.sec-title {
  font-size: var(--fs-3xl) !important;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-xs);
}

.sec-sub {
  font-size: var(--fs-sm) !important;
  margin-bottom: var(--sp-lg);
}

/* Sidebar User */
.sb-name {
  font-size: var(--fs-md) !important;
}

.sb-ph {
  font-size: var(--fs-xs) !important;
}

.sb-cv {
  font-size: var(--fs-lg) !important;
}

.sb-cl {
  font-size: 0.6rem; /* Keep tiny */
}

.sb-item {
  font-size: var(--fs-sm) !important;
  padding: var(--sp-sm) var(--sp-md);
  min-height: var(--touch-min);
}

/* Mobile Header */
.mob-name {
  font-size: var(--fs-sm) !important;
}

.mob-ph {
  font-size: var(--fs-xs) !important;
}

/* Stats */
.ms-v, .bc-val {
  font-size: var(--fs-lg) !important;
}

.ms-l, .bc-lbl {
  font-size: var(--fs-xs) !important;
}

/* Cards */
.pc-title {
  font-size: var(--fs-md) !important;
}

.ri-dev, .dc-name, .rc-dev {
  font-size: var(--fs-sm) !important;
}

.ri-svc, .dc-sub, .rc-svc {
  font-size: var(--fs-xs) !important;
}

.ri-id, .rc-id, .dc-qrid {
  font-size: var(--fs-xs) !important;
}

/* Badges */
.badge {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-2xs) var(--sp-xs);
}

/* Timeline */
.rtm-lbl {
  font-size: 0.55rem !important; /* Keep very small for mobile */
}

.rtm-dot {
  width: clamp(22px, 5vw, 28px) !important;
  height: clamp(22px, 5vw, 28px) !important;
}

/* Device Cards */
.dc-ml, .rc-ml, .dc-qrl {
  font-size: 0.58rem !important;
}

.dc-mv, .rc-mv {
  font-size: var(--fs-xs) !important;
}

.dc-qrbtn, .dc-acts .btn {
  font-size: var(--fs-xs) !important;
  min-height: var(--touch-min);
}

/* Review Section */
.rc-rv-hd {
  font-size: var(--fs-sm) !important;
}

.rc-rv-ta {
  font-size: max(16px, var(--fs-sm)) !important;
  min-height: 70px;
}

.rc-rv-btn {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-sm) var(--sp-md);
  min-height: var(--touch-min);
}

/* Suggestion Section */
.suggestion-title {
  font-size: var(--fs-sm) !important;
}

.suggestion-sub {
  font-size: var(--fs-xs) !important;
}

.suggestion-ta {
  font-size: max(16px, var(--fs-sm)) !important;
  min-height: 80px;
}

.suggestion-btn {
  font-size: var(--fs-sm) !important;
  padding: var(--sp-sm) var(--sp-md);
  min-height: var(--touch-min);
}

/* Profile Section */
.prof-name {
  font-size: var(--fs-md) !important;
}

.prof-ph {
  font-size: var(--fs-xs) !important;
}

.ps-v {
  font-size: var(--fs-lg) !important;
}

.ps-l {
  font-size: var(--fs-xs) !important;
}

.ql-name {
  font-size: var(--fs-xs) !important;
}

/* Buttons */
.btn {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-xs) var(--sp-sm);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

.btn.sm {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-2xs) var(--sp-xs);
  min-height: 36px;
}

/* Buzz & Notify Buttons */
.buzz-btn {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-xs) var(--sp-sm);
  min-height: var(--touch-min);
}

.notify-btn {
  font-size: var(--fs-xs) !important;
  padding: var(--sp-2xs) var(--sp-xs);
  min-height: var(--touch-min);
}

/* Empty State */
.empty h4 {
  font-size: var(--fs-sm) !important;
}

.empty p {
  font-size: var(--fs-xs) !important;
}

.empty-ico {
  font-size: var(--fs-2xl) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   SECTION 4: FLUID SPACING REPLACEMENTS
   Applies fluid padding and margins
   ──────────────────────────────────────────────────────────────────────────── */

/* Login Card */
.lk-card {
  padding: var(--sp-xl) var(--sp-lg);
}

/* Sidebar */
.sidebar {
  padding: var(--sp-md);
}

.sb-user {
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.sb-chips {
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-md);
}

/* Main Content */
.main {
  padding: var(--sp-lg);
}

/* Cards */
.pc, .dcard, .rcard, .ocard, .bkcard {
  padding: var(--sp-md);
}

.pc-hd {
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-sm);
}

.bcard {
  padding: var(--sp-md);
}

/* Bento Grid */
.bento {
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.two-col {
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}

/* Timeline */
.rtm {
  margin-top: var(--sp-sm);
}

/* Form Elements */
.lk-iw {
  margin-bottom: var(--sp-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: MEDIA QUERIES - 320px to 479px (EXTRA SMALL DEVICES)
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 479px) {
  :root {
    /* Reduce max sizes for smallest screens */
    --fs-3xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);   /* 20-24px */
    --fs-2xl: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);    /* 18-22px */
    --fs-xl: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);          /* 16-20px */
    --fs-lg: clamp(0.9375rem, 0.85rem + 0.4375vw, 1.125rem); /* 15-18px */
    --fs-md: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);       /* 14-16px */
    
    /* Tighter spacing */
    --sp-lg: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --sp-xl: clamp(0.625rem, 0.5rem + 0.625vw, 1rem);
    --sp-2xl: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --sp-3xl: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  }
  
  /* Login optimizations */
  .lk-card {
    padding: var(--sp-lg) var(--sp-md);
    border-radius: 18px;
    max-width: 100%;
  }
  
  .lk-title {
    font-size: var(--fs-xl) !important;
    margin-bottom: var(--sp-xs);
  }
  
  .lk-sub {
    font-size: var(--fs-xs) !important;
    margin-bottom: var(--sp-lg);
  }
  
  .lk-tabs {
    padding: 4px;
    margin-bottom: var(--sp-sm);
    border-radius: 12px;
  }
  
  .lk-tab {
    font-size: 0.7rem !important;
    padding: var(--sp-xs) var(--sp-sm);
  }
  
  .lk-iw {
    margin-bottom: var(--sp-xs);
  }
  
  .lk-input {
    font-size: 16px !important; /* Fixed for iOS zoom prevention */
    padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) 44px;
  }
  
  .lk-btn {
    font-size: var(--fs-sm) !important;
    padding: var(--sp-sm) var(--sp-md);
  }
  
  .brand-orbit {
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-lg);
  }
  
  .brand-core {
    font-size: 1.5rem;
    border-radius: 18px;
  }
  
  .orbit-ring {
    inset: -8px;
    border-radius: 26px;
  }
  
  /* App Layout */
  .main {
    padding: var(--sp-sm);
    padding-bottom: 80px;
  }
  
  /* Section Headers */
  .sec-title {
    font-size: var(--fs-xl) !important;
    margin-bottom: var(--sp-2xs);
  }
  
  .sec-sub {
    font-size: var(--fs-xs) !important;
    margin-bottom: var(--sp-md);
  }
  
  /* Bento Stats - Compact Grid */
  .bento {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-xs);
    margin-bottom: var(--sp-md);
  }
  
  .bcard {
    padding: var(--sp-sm);
    border-radius: 14px;
  }
  
  .bc-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: var(--sp-sm);
    border-radius: 10px;
  }
  
  .bc-val {
    font-size: var(--fs-md) !important;
    margin-bottom: var(--sp-2xs);
  }
  
  .bc-lbl {
    font-size: 0.65rem !important;
  }
  
  /* Two Column Layout - Stack on mobile */
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
  
  /* Cards */
  .pc {
    padding: var(--sp-sm);
    border-radius: 14px;
    margin-bottom: var(--sp-sm);
  }
  
  .pc-hd {
    margin-bottom: var(--sp-sm);
    padding-bottom: var(--sp-xs);
  }
  
  .pc-title {
    font-size: var(--fs-sm) !important;
  }
  
  .pc-act {
    font-size: var(--fs-xs) !important;
  }
  
  /* Sidebar chips */
  .sb-chips {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2xs);
    padding: var(--sp-xs) var(--sp-sm);
  }
  
  .sb-chip {
    padding: var(--sp-xs) 2px;
  }
  
  .sb-cv {
    font-size: var(--fs-sm) !important;
  }
  
  /* Mobile Header */
  .mob-hdr {
    height: 56px;
    padding: 0 var(--sp-sm);
  }
  
  .mob-av {
    width: 36px;
    height: 36px;
    font-size: var(--fs-xs) !important;
    border-radius: 10px;
  }
  
  .mob-name {
    font-size: var(--fs-xs) !important;
  }
  
  .mob-ph {
    font-size: 0.65rem !important;
  }
  
  .mob-out {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
  
  /* Mobile Stats */
  .mob-stats {
    padding: var(--sp-xs) var(--sp-sm);
  }
  
  .ms-chip {
    padding: var(--sp-xs) 4px;
    border-radius: 10px;
  }
  
  .ms-v {
    font-size: var(--fs-sm) !important;
  }
  
  .ms-l {
    font-size: 0.55rem !important;
  }
  
  /* Mobile Tabs */
  .mob-tabs {
    padding: 6px var(--sp-xs);
    gap: 4px;
  }
  
  .mtab {
    padding: 6px 10px;
    font-size: 0.58rem !important;
    border-radius: 10px;
  }
  
  .mtab i {
    font-size: 0.85rem;
  }
  
  /* Repair Items */
  .ri {
    padding: var(--sp-sm);
    border-radius: 12px;
    margin-bottom: var(--sp-sm);
  }
  
  .ri-id {
    font-size: 0.65rem !important;
  }
  
  .ri-dev {
    font-size: var(--fs-xs) !important;
  }
  
  .ri-svc {
    font-size: 0.7rem !important;
  }
  
  .ri-hd {
    margin-bottom: var(--sp-sm);
  }
  
  /* Timeline - Compact */
  .rtm {
    margin-top: var(--sp-xs);
  }
  
  .rtm-dot {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.55rem !important;
  }
  
  .rtm-lbl {
    font-size: 0.5rem !important;
    line-height: 1.1;
  }
  
  .rtm-step {
    gap: 4px;
  }
  
  /* Device Cards */
  .dcgrid {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
  
  .dcard {
    padding: var(--sp-sm);
    border-radius: 14px;
  }
  
  .dc-ico {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    border-radius: 12px;
    margin-bottom: var(--sp-sm);
  }
  
  .dc-name {
    font-size: var(--fs-sm) !important;
  }
  
  .dc-sub {
    font-size: var(--fs-xs) !important;
    margin-bottom: var(--sp-sm);
  }
  
  .dc-photos {
    gap: 6px;
    margin-bottom: var(--sp-sm);
  }
  
  .dc-photo, .dc-noph {
    width: 64px;
    height: 52px;
    border-radius: 8px;
  }
  
  .dc-meta {
    margin: var(--sp-xs) -2px;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dc-mc {
    padding: var(--sp-xs);
  }
  
  .dc-ml {
    font-size: 0.52rem !important;
  }
  
  .dc-mv {
    font-size: var(--fs-xs) !important;
  }
  
  .dc-qrw {
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
    padding-top: var(--sp-sm);
  }
  
  .dc-qr {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }
  
  .dc-qrl {
    font-size: 0.5rem !important;
  }
  
  .dc-qrid {
    font-size: 0.65rem !important;
    margin-bottom: 6px;
  }
  
  .dc-qrbtn {
    padding: 5px 10px;
    font-size: 0.65rem !important;
    min-height: 32px;
  }
  
  .dc-acts {
    gap: 6px;
    margin-top: var(--sp-sm);
  }
  
  .dc-acts .btn {
    flex: 1;
    justify-content: center;
    font-size: 0.7rem !important;
    padding: var(--sp-xs) var(--sp-sm);
    min-height: 38px;
  }
  
  /* Repair Cards */
  .rgrid {
    gap: var(--sp-sm);
  }
  
  .rcard {
    border-radius: 14px;
  }
  
  .rc-hd {
    padding: var(--sp-sm);
    gap: var(--sp-sm);
  }
  
  .rc-id {
    font-size: 0.65rem !important;
  }
  
  .rc-dev {
    font-size: var(--fs-sm) !important;
  }
  
  .rc-svc {
    font-size: var(--fs-xs) !important;
  }
  
  .rc-body {
    padding: var(--sp-sm);
  }
  
  .rc-note {
    padding: var(--sp-xs) var(--sp-sm);
    font-size: var(--fs-xs) !important;
    margin: var(--sp-sm) 0;
    border-radius: 8px;
  }
  
  .rc-meta {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .rc-mc {
    padding: var(--sp-xs) var(--sp-sm);
  }
  
  .rc-ml {
    font-size: 0.52rem !important;
  }
  
  .rc-mv {
    font-size: var(--fs-xs) !important;
  }
  
  .rc-acts {
    padding: var(--sp-sm);
    gap: var(--sp-xs);
    flex-direction: column;
  }
  
  .rc-acts .buzz-btn,
  .rc-acts .notify-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Review Section */
  .rc-review {
    padding: var(--sp-sm);
  }
  
  .rc-rv-hd {
    font-size: var(--fs-xs) !important;
    margin-bottom: var(--sp-xs);
  }
  
  .rc-rv-stars {
    gap: 4px;
    margin-bottom: var(--sp-xs);
  }
  
  .rv-star {
    font-size: 1.1rem;
    padding: 2px;
    min-height: 32px;
    min-width: 32px;
  }
  
  .rc-rv-ta {
    font-size: 16px !important;
    padding: var(--sp-xs) var(--sp-sm);
    min-height: 60px;
    border-radius: 10px;
    margin-bottom: var(--sp-xs);
  }
  
  .rc-rv-btn {
    font-size: var(--fs-xs) !important;
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: 8px;
    width: 100%;
  }
  
  /* Orders & Bookings */
  .lgrid {
    gap: var(--sp-xs);
  }
  
  .ocard, .bkcard {
    padding: var(--sp-sm);
    border-radius: 12px;
  }
  
  .oc-hd {
    margin-bottom: var(--sp-xs);
  }
  
  .oi-row {
    padding: var(--sp-xs) 0;
    font-size: var(--fs-xs) !important;
  }
  
  .ot-row {
    padding-top: var(--sp-xs);
    font-size: var(--fs-xs) !important;
  }
  
  /* Profile Section */
  .prof-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
  
  .prof-banner {
    height: 60px;
  }
  
  .prof-body {
    padding: 0 var(--sp-sm) var(--sp-sm);
  }
  
  .prof-avw {
    margin-top: -24px;
    margin-bottom: var(--sp-sm);
  }
  
  .prof-av {
    width: 48px;
    height: 48px;
    font-size: var(--fs-md) !important;
    border-radius: 14px;
  }
  
  .prof-name {
    font-size: var(--fs-sm) !important;
  }
  
  .prof-ph {
    font-size: var(--fs-xs) !important;
    margin-bottom: var(--sp-sm);
  }
  
  .prof-stats {
    gap: 6px;
  }
  
  .ps-cell {
    padding: var(--sp-xs) 6px;
    border-radius: 10px;
  }
  
  .ps-v {
    font-size: var(--fs-sm) !important;
  }
  
  .ps-l {
    font-size: 0.55rem !important;
  }
  
  .prof-side {
    gap: var(--sp-sm);
  }
  
  .qlgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-xs);
  }
  
  .ql-item {
    padding: var(--sp-sm);
    border-radius: 12px;
    gap: var(--sp-xs);
  }
  
  .ql-ico {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    border-radius: 10px;
  }
  
  .ql-name {
    font-size: var(--fs-xs) !important;
  }
  
  .wa-big-btn {
    padding: var(--sp-sm);
    font-size: var(--fs-xs) !important;
    border-radius: 12px;
  }
  
  /* Suggestion Box */
  .suggestion-section {
    margin-top: var(--sp-md);
    padding: var(--sp-sm);
    border-radius: 14px;
  }
  
  .suggestion-hd {
    gap: var(--sp-sm);
    margin-bottom: var(--sp-sm);
  }
  
  .suggestion-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    border-radius: 10px;
  }
  
  .suggestion-title {
    font-size: var(--fs-xs) !important;
  }
  
  .suggestion-sub {
    font-size: 0.65rem !important;
  }
  
  .suggestion-ta {
    font-size: 16px !important;
    padding: var(--sp-sm);
    min-height: 70px;
    border-radius: 10px;
    margin-bottom: var(--sp-sm);
  }
  
  .suggestion-btn {
    font-size: var(--fs-xs) !important;
    padding: var(--sp-sm) var(--sp-md);
    border-radius: 10px;
    width: 100%;
  }
  
  /* Empty State */
  .empty {
    padding: var(--sp-lg) var(--sp-sm);
  }
  
  .empty-ico {
    font-size: var(--fs-xl) !important;
    margin-bottom: var(--sp-sm);
  }
  
  .empty h4 {
    font-size: var(--fs-sm) !important;
    margin-bottom: var(--sp-2xs);
  }
  
  .empty p {
    font-size: var(--fs-xs) !important;
  }
  
  /* Badges */
  .badge {
    font-size: 0.6rem !important;
    padding: 2px 6px;
    border-radius: 12px;
  }
  
  /* Buzz Button */
  .buzz-btn {
    font-size: 0.7rem !important;
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: 10px;
  }
  
  .notify-btn {
    font-size: 0.65rem !important;
    padding: 4px 8px;
  }
  
  /* Lightbox */
  .lb-bar {
    height: 48px;
    padding: 0 var(--sp-sm);
  }
  
  .lb-label {
    font-size: var(--fs-xs) !important;
  }
  
  .lb-icon-btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 0.85rem;
  }
  
  .lb-nav {
    width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 0.9rem;
  }
  
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  
  .lb-foot {
    padding: var(--sp-sm);
  }
  
  .lb-dot {
    width: 6px;
    height: 6px;
  }
  
  .lb-info {
    font-size: 0.65rem !important;
  }
  
  .lb-swipe-hint {
    bottom: 56px;
    font-size: 0.65rem !important;
    padding: 4px 12px;
  }
  
  /* Chat Widget */
  .chat-widget {
    bottom: 16px;
    right: 16px;
  }
  
  .chat-btn {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
  }
  
  .chat-window {
    width: calc(100vw - 32px);
    right: -8px;
    bottom: 64px;
    border-radius: 16px;
  }
  
  .chat-hd {
    padding: var(--sp-sm);
  }
  
  .chat-title {
    font-size: var(--fs-xs) !important;
  }
  
  .chat-status {
    font-size: 0.6rem !important;
  }
  
  .chat-body {
    padding: var(--sp-sm);
  }
  
  .chat-msg {
    font-size: var(--fs-xs) !important;
    padding: var(--sp-xs) var(--sp-sm);
  }
  
  .chat-input-area {
    padding: var(--sp-xs);
  }
  
  .chat-input {
    font-size: 16px !important;
    padding: var(--sp-xs) var(--sp-sm);
  }
  
  .chat-send {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: MEDIA QUERIES - 480px to 640px (SMALL DEVICES)
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 480px) and (max-width: 640px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .two-col {
    grid-template-columns: 1fr;
  }
  
  .dcgrid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  
  .sec-title {
    font-size: var(--fs-2xl) !important;
  }
  
  .rc-acts {
    flex-direction: row;
  }
  
  .rc-acts .buzz-btn,
  .rc-acts .notify-btn {
    width: auto;
    flex: 0 1 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: LANDSCAPE MOBILE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 900px) and (orientation: landscape) {
  .mob-hdr {
    height: 48px;
  }
  
  .mob-stats {
    padding: 8px var(--sp-sm);
  }
  
  .mob-tabs {
    padding: 4px var(--sp-xs);
  }
  
  .mtab {
    padding: 4px 10px;
  }
  
  .main {
    padding-top: calc(var(--navbar-height, 68px) + 140px);
  }
  
  /* Reduce vertical spacing in landscape */
  .bento {
    gap: var(--sp-xs);
    margin-bottom: var(--sp-sm);
  }
  
  .bcard {
    padding: var(--sp-xs);
  }
  
  .bc-icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--sp-xs);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: TOUCH TARGET ENFORCEMENT (WCAG 2.5.5)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* All interactive elements must have min 44px touch target */
  button, 
  .btn, 
  .lk-btn, 
  .lk-tab,
  .sb-item,
  .sb-wa,
  .sb-out,
  .mtab,
  .mobile-tab,
  .dc-qrbtn,
  .rc-rv-btn,
  .suggestion-btn,
  .buzz-btn,
  .notify-btn,
  .rv-star,
  .wa-big-btn,
  .mob-out,
  .ql-item,
  a {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
  
  /* Small buttons allowed if spaced properly */
  .btn.sm {
    min-height: 36px;
    min-width: 36px;
  }
  
  .lb-icon-btn {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: ACCESSIBILITY ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .badge {
    border-width: 2px;
  }
  
  .btn, .lk-btn {
    border: 2px solid currentColor;
  }
  
  .glass, .card, .pc, .dcard, .rcard, .ocard, .bkcard {
    border-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .nebula-bg,
  .nebula-bg::before,
  .particle,
  .orbit-ring {
    animation: none !important;
  }
}

/* Focus Visible for Keyboard Navigation */
:focus-visible {
  outline: 2px solid var(--ac, #d4664a);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9.5: iOS KEYBOARD VIEWPORT FIX
   ═══════════════════════════════════════════════════════════════════════════ */

html.ios-keyboard-visible {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html.ios-keyboard-visible body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep navs hidden during keyboard */
html.ios-keyboard-visible .mobile-bottom-nav {
  transform: translateY(100%) !important;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

html.ios-keyboard-visible .navbar {
  transform: translateY(-100%) !important;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Ensure modals and drawers work above keyboard */
html.ios-keyboard-visible .modal-overlay,
html.ios-keyboard-visible .cart-overlay,
html.ios-keyboard-visible .cart-drawer {
  z-index: 10000;
}

html.ios-keyboard-visible .cart-drawer {
  bottom: 0;
  max-height: 100vh;
  overflow-y: auto;
}

html.ios-keyboard-visible .bnav-more-menu {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9.6: EXTRA COMPACT PUBLIC PAGE ELEMENTS (Mobile)
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 479px) {
  /* Hero section compact */
  .hero {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 30px;
  }
  
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 24px;
  }
  
  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    margin-bottom: 16px;
  }
  
  .hero-desc {
    font-size: .85rem !important;
    margin-bottom: 20px;
    padding-right: 0;
  }
  
  .hero-actions {
    margin-bottom: 30px;
    gap: 10px;
  }
  
  .hero-actions .btn {
    padding: 10px 18px;
    font-size: .78rem;
  }
  
  .hero-stats {
    gap: 16px;
    padding-top: 20px;
  }
  
  .stat-num {
    font-size: 1.4rem !important;
  }
  
  .hero-visual {
    display: none; /* Hide visual on very small screens */
  }
  
  .hero-float-cards {
    display: none;
  }
  
  /* Service cards compact */
  .service-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .service-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  
  .service-icon i {
    font-size: .9rem !important;
  }
  
  .service-card h3 {
    font-size: .9rem !important;
    margin-bottom: 6px;
  }
  
  .service-card p {
    font-size: .78rem !important;
    margin-bottom: 10px;
    line-height: 1.5;
  }
  
  /* Blog cards compact */
  .blog-body {
    padding: 14px;
  }
  
  .blog-card h3 {
    font-size: .85rem !important;
    margin-bottom: 6px;
  }
  
  .blog-card p {
    font-size: .78rem !important;
  }
  
  .blog-meta {
    font-size: .65rem;
    margin-top: 10px;
  }
  
  /* Review cards compact */
  .review-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .review-stars {
    margin-bottom: 10px;
    font-size: .8rem;
  }
  
  .review-card p {
    font-size: .82rem !important;
    margin-bottom: 14px;
  }
  
  .reviewer-avatar-wrap {
    width: 34px;
    height: 34px;
    font-size: .78rem;
  }
  
  .reviewer strong {
    font-size: .8rem;
  }
  
  .reviewer span {
    font-size: .65rem;
  }
  
  /* Product cards compact */
  .product-body {
    padding: 10px;
  }
  
  .product-card h3 {
    font-size: .8rem !important;
    margin-bottom: 6px;
  }
  
  .product-price {
    font-size: 1rem !important;
    margin-bottom: 8px;
  }
  
  .product-badge {
    font-size: .58rem;
    padding: 2px 8px;
  }
  
  /* Form compact */
  .form-group {
    margin-bottom: 12px;
  }
  
  .form-label {
    font-size: .65rem;
    margin-bottom: 4px;
  }
  
  .form-control {
    padding: 9px 10px;
    font-size: 16px;
    border-radius: 12px;
  }
  
  .form-row {
    gap: 10px;
  }
  
  /* FAQ compact */
  .faq-question {
    padding: 14px 16px;
    font-size: .85rem;
  }
  
  .faq-answer {
    padding: 0 16px 14px;
    font-size: .8rem;
  }
  
  /* Footer compact */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .footer-brand p {
    font-size: .8rem;
  }
  
  .footer-col h4 {
    font-size: .85rem;
    margin-bottom: 10px;
  }
  
  .footer-col ul li {
    font-size: .78rem;
    padding: 3px 0;
  }
  
  .footer-contact li {
    font-size: .78rem;
    gap: 8px;
  }
  
  .footer-contact li i {
    font-size: .75rem;
    width: 14px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding-top: 20px;
    margin-top: 20px;
  }
  
  .footer-bottom p {
    font-size: .7rem;
  }
  
  .footer-badges span, .footer-badges a {
    font-size: .65rem;
  }
  
  /* Social links compact */
  .social-links a {
    width: 34px;
    height: 34px;
    font-size: .85rem;
  }
  
  /* Section eyebrow compact */
  .eyebrow {
    font-size: .55rem !important;
    padding: 3px 8px;
    margin-bottom: 8px;
    letter-spacing: .12em;
  }
  
  /* Ticker compact */
  .ticker-wrap {
    padding: 8px 0;
  }
  
  .ticker span {
    font-size: .65rem !important;
    padding: 0 18px;
  }
  
  /* Filter buttons compact */
  .filter-btn {
    padding: 5px 12px;
    font-size: .7rem;
    border-radius: 100px;
  }
  
  /* Card action link */
  .card-action {
    font-size: .7rem;
  }
  
  /* Alert compact */
  .alert {
    padding: 10px 14px;
    font-size: .8rem;
    border-radius: 12px;
  }
  
  /* Float cards on hero */
  .float-card {
    padding: 6px 10px;
    font-size: .65rem;
    gap: 6px;
    border-radius: 10px;
    box-shadow: var(--sh-card);
  }
  
  .float-card i {
    font-size: .8rem;
  }
  
  /* Booking stepper compact */
  .step-indicator {
    gap: 4px;
    margin-bottom: 24px;
  }
  
  /* Training promo card */
  .trp-body {
    padding: 16px;
    gap: 16px;
  }
  
  .trp-title {
    font-size: .95rem;
  }
  
  .trp-desc {
    font-size: .78rem;
    margin-bottom: 12px;
  }
  
  .trp-pills {
    gap: 5px;
  }
  
  .trp-pill {
    font-size: .6rem;
    padding: 3px 7px;
  }
  
  /* CTA section */
  .section-cta {
    margin-top: 24px;
  }
  
  .section-cta .btn {
    padding: 10px 20px;
    font-size: .8rem;
  }
}

@media screen and (max-width: 340px) {
  .hero-title {
    font-size: 1.6rem !important;
  }
  
  .hero-desc {
    font-size: .78rem !important;
  }
  
  .service-card h3 {
    font-size: .85rem !important;
  }
  
  .stat-num {
    font-size: 1.2rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .sidebar,
  .mob-hdr,
  .mob-stats,
  .mob-tabs,
  .chat-widget,
  .lb,
  .nebula-bg,
  .particles,
  .buzz-btn,
  .notify-btn,
  .suggestion-section {
    display: none !important;
  }
  
  .main {
    margin-left: 0 !important;
    padding: 1rem !important;
  }
  
  body {
    background: #fff !important;
    color: #000 !important;
  }
  
  .glass, .card, .pc, .dcard, .rcard {
    background: #fff !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  
  .sec-title {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
}