/* ═══════════════════════════════════════════════════════════════
   AFAQ RESPONSIVE NORMALIZE - Universal sizing across all screens
   Loaded last - overrides any conflicting !important rules.
   ═══════════════════════════════════════════════════════════════ */

/* === ROOT: Fluid font scaling that works from 320px to 4K === */
html {
    /* Base font: scales smoothly between 14px (small phones) and 17px (large desktops) */
    font-size: clamp(14px, 0.875rem + 0.2vw, 17px) !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* === BODY: Cap maximum width on huge screens (4K, ultra-wide) === */
body {
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    background-color: var(--body-bg, #f8fafc);
}

/* === Containers: Max width on big screens === */
.container,
.main-container,
.page-content,
.dashboard-container,
.admin-container,
.content-wrap,
.wrapper,
main {
    max-width: min(100%, 1600px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(12px, 2vw, 32px) !important;
    padding-right: clamp(12px, 2vw, 32px) !important;
    box-sizing: border-box !important;
}

/* === Headings: Fluid scaling === */
h1, .h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
}
h2, .h2 {
    font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem) !important;
    line-height: 1.25 !important;
}
h3, .h3 {
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem) !important;
    line-height: 1.3 !important;
}
h4, .h4 {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem) !important;
    line-height: 1.35 !important;
}
h5, .h5, h6, .h6 {
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem) !important;
    line-height: 1.4 !important;
}

/* === Forms: Consistent input sizes === */
input, textarea, select, button {
    font-size: max(16px, 1rem) !important; /* 16px min prevents iOS zoom */
    line-height: 1.5 !important;
}

/* === Buttons: Don't shrink on tiny screens, don't balloon on huge === */
.btn, button.primary, button.secondary,
input[type="button"], input[type="submit"] {
    padding: clamp(8px, 1vw, 14px) clamp(14px, 2vw, 28px) !important;
    font-size: clamp(13px, 0.9rem, 1rem) !important;
    border-radius: clamp(6px, 0.5vw, 10px) !important;
}

/* === Tables: Don't overflow on small, don't stretch infinitely on large === */
table {
    font-size: clamp(13px, 0.85rem + 0.1vw, 15px) !important;
    max-width: 100% !important;
}
th, td {
    padding: clamp(6px, 0.8vw, 14px) clamp(8px, 1vw, 16px) !important;
}

/* === Cards / panels: Reasonable max sizes === */
.card, .panel, .box, .stat-card, .feature-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* === Grid systems: Sensible gap scaling === */
.grid, .row, .flex-row,
[class*="grid-"] {
    gap: clamp(12px, 1.5vw, 24px) !important;
}

/* === Images: Always responsive === */
img {
    max-width: 100% !important;
    height: auto;
}

/* === HUGE screens (≥ 1921px): center everything, prevent overflow === */
@media (min-width: 1921px) {
    body {
        font-size: 17px !important;
        max-width: 1920px !important;
    }
    /* Don't let any element grow infinitely */
    .navbar, header, footer, section {
        max-width: 1920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* === Standard desktop (1200-1920px): default === */
@media (min-width: 1200px) and (max-width: 1920px) {
    /* Already handled by clamp() values above */
}

/* === Tablet (768px - 1199px) === */
@media (min-width: 768px) and (max-width: 1199px) {
    .container, .wrapper, main {
        padding-left: clamp(16px, 3vw, 28px) !important;
        padding-right: clamp(16px, 3vw, 28px) !important;
    }
}

/* === Mobile (≤ 767px) === */
@media (max-width: 767px) {
    body {
        font-size: 15px !important;
    }
    .container, .wrapper, main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.3rem !important; }
    h3, .h3 { font-size: 1.15rem !important; }

    /* Prevent horizontal scroll */
    body, html { overflow-x: hidden !important; }

    /* Tables: smaller font on phone */
    table, th, td { font-size: 12.5px !important; }
    th, td { padding: 6px 8px !important; }
}

/* === Small phones (≤ 360px) === */
@media (max-width: 360px) {
    body { font-size: 14px !important; }
    h1, .h1 { font-size: 1.35rem !important; }
    .btn, button.primary { padding: 8px 14px !important; font-size: 13px !important; }
}

/* === Logo fixes: never distort === */
.nav-brand-img,
.logo-img,
img.logo,
.navbar img,
.header-logo,
.brand-logo {
    object-fit: contain !important;
    height: auto !important;
    width: auto !important;
    max-height: clamp(36px, 5vw, 80px) !important;
    max-width: clamp(120px, 18vw, 240px) !important;
}

/* === Prevent overly-long lines on huge screens === */
p, li, .text, article {
    max-width: 75ch;
}
.full-width-text {
    max-width: none !important;
}

/* === Sidebars / drawers: cap width === */
.sidebar, .drawer, .nav-drawer, aside {
    max-width: clamp(260px, 25vw, 360px) !important;
}

/* === Modal / dialog: comfortable size === */
.modal, .dialog, .popup, [role="dialog"] {
    max-width: min(95vw, 600px) !important;
    max-height: 90vh !important;
}

/* === Footer: prevent stretching === */
footer, .footer {
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════
   STRONGER OVERRIDE for SGW Gateway — uses ID for higher specificity
   Forces sane sizes regardless of inline styles or later CSS files.
   ═══════════════════════════════════════════════════════════════════ */

/* === الـ box نفسه (الصندوق الأبيض الكبير) === */
#sgwOverlay .sgw-box,
.sgw-overlay .sgw-box,
.sgw-overlay.open .sgw-box {
    max-width: min(92vw, 980px) !important;
    width: auto !important;
    padding: clamp(20px, 3vw, 44px) clamp(16px, 2.5vw, 36px) !important;
    border-radius: clamp(16px, 1.8vw, 26px) !important;
    margin: clamp(8px, 2vh, 24px) auto !important;
}

/* === Header === */
#sgwOverlay .sgw-head-title,
.sgw-overlay .sgw-head-title {
    font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}
#sgwOverlay .sgw-head-sub,
.sgw-overlay .sgw-head-sub {
    font-size: clamp(12px, 0.75rem + 0.2vw, 15px) !important;
    line-height: 1.5 !important;
}
#sgwOverlay .sgw-head,
.sgw-overlay .sgw-head {
    margin-bottom: clamp(16px, 2vw, 28px) !important;
}

/* === Cards container === */
#sgwOverlay .sgw-cards,
.sgw-overlay .sgw-cards {
    gap: clamp(10px, 1.2vw, 18px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
}

@media (min-width: 600px) {
    #sgwOverlay .sgw-cards,
    .sgw-overlay .sgw-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* === Each card === */
#sgwOverlay .sgw-card,
.sgw-overlay .sgw-card {
    padding: clamp(14px, 2vw, 24px) clamp(12px, 1.6vw, 18px) !important;
    border-radius: clamp(12px, 1.4vw, 18px) !important;
    border-width: 2px !important;
    gap: clamp(8px, 1vw, 14px) !important;
}

/* === Icon === */
#sgwOverlay .sgw-icon,
.sgw-overlay .sgw-icon {
    width: clamp(48px, 5.5vw, 78px) !important;
    height: clamp(48px, 5.5vw, 78px) !important;
    border-radius: clamp(12px, 1.2vw, 18px) !important;
    font-size: clamp(20px, 2.4vw, 34px) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06) !important;
}

/* === Card title === */
#sgwOverlay .sgw-card-title,
.sgw-overlay .sgw-card-title {
    font-size: clamp(14px, 0.85rem + 0.35vw, 18px) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* === Card description === */
#sgwOverlay .sgw-card-desc,
.sgw-overlay .sgw-card-desc {
    font-size: clamp(11.5px, 0.72rem + 0.2vw, 14px) !important;
    line-height: 1.55 !important;
    color: #475569 !important;
}

/* === CTA button === */
#sgwOverlay .sgw-cta,
.sgw-overlay .sgw-cta {
    padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 26px) !important;
    font-size: clamp(12.5px, 0.78rem + 0.2vw, 15px) !important;
    border-radius: clamp(20px, 2vw, 30px) !important;
    gap: 6px !important;
    box-shadow: 0 5px 14px rgba(0,0,0,0.10) !important;
}

/* === Close button === */
#sgwOverlay .sgw-close,
.sgw-overlay .sgw-close {
    width: clamp(32px, 3.2vw, 42px) !important;
    height: clamp(32px, 3.2vw, 42px) !important;
    font-size: clamp(13px, 1vw, 17px) !important;
    border-width: 2px !important;
    top: 12px !important;
    left: 12px !important;
}

/* === GPS badge if present === */
#sgwOverlay .sgw-gps-badge,
.sgw-overlay .sgw-gps-badge {
    font-size: clamp(10px, 0.65rem + 0.1vw, 12px) !important;
    padding: 4px 10px !important;
}

/* === Force these limits regardless of viewport size === */
@media (min-width: 1280px) {
    #sgwOverlay .sgw-box,
    .sgw-overlay .sgw-box {
        max-width: 920px !important;
        padding: 36px 32px !important;
    }
    #sgwOverlay .sgw-icon,
    .sgw-overlay .sgw-icon { width: 72px !important; height: 72px !important; font-size: 30px !important; }
    #sgwOverlay .sgw-card-title,
    .sgw-overlay .sgw-card-title { font-size: 17px !important; }
    #sgwOverlay .sgw-card-desc,
    .sgw-overlay .sgw-card-desc { font-size: 13.5px !important; }
    #sgwOverlay .sgw-cta,
    .sgw-overlay .sgw-cta { font-size: 14px !important; padding: 11px 24px !important; }
}

@media (min-width: 1920px) {
    #sgwOverlay .sgw-box,
    .sgw-overlay .sgw-box {
        max-width: 1000px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   SGW 2-Column Gateway (Login + Register)
   ═══════════════════════════════════════════════════════════ */

/* Make the cards grid 2 columns (instead of 3) on tablet+ */
.sgw-cards.sgw-cards-2col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(12px, 1.5vw, 22px) !important;
}

@media (min-width: 640px) {
    .sgw-cards.sgw-cards-2col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Card body — slightly wider since only 2 columns */
.sgw-cards-2col .sgw-card {
    padding: clamp(18px, 2.5vw, 32px) clamp(16px, 2vw, 26px) !important;
    border-radius: clamp(14px, 1.6vw, 22px) !important;
    border-width: 2px !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
}

/* Login card — primary brand color */
.sgw-cards-2col .sgw-c-login {
    background: linear-gradient(160deg, #ffffff 0%, #f0f9ff 100%) !important;
    border-color: #93c5fd !important;
}
.sgw-cards-2col .sgw-c-login .sgw-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
}
.sgw-cards-2col .sgw-c-login .sgw-cta {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
}

/* Register card — gold theme */
.sgw-cards-2col .sgw-c-register {
    background: linear-gradient(160deg, #ffffff 0%, #fffbeb 100%) !important;
    border-color: #fcd34d !important;
}
.sgw-cards-2col .sgw-c-register .sgw-icon {
    background: linear-gradient(135deg, #d4af37, #b8941f) !important;
    color: #fff !important;
}
.sgw-cards-2col .sgw-c-register .sgw-cta {
    background: linear-gradient(135deg, #d4af37, #b8941f) !important;
    color: #fff !important;
}

/* Actions stack — primary button on top, secondary link below */
.sgw-cards-2col .sgw-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 8px !important;
}

.sgw-cards-2col .sgw-cta {
    width: 100% !important;
    text-align: center !important;
    padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 22px) !important;
    font-size: clamp(13px, 0.82rem + 0.2vw, 15px) !important;
    font-weight: 700 !important;
    border-radius: clamp(20px, 2vw, 28px) !important;
    text-decoration: none !important;
    transition: transform .2s !important;
}
.sgw-cards-2col .sgw-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15) !important;
}

/* Secondary link — smaller, outlined */
.sgw-cards-2col .sgw-cta-secondary {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 9px 16px !important;
    font-size: clamp(12px, 0.75rem + 0.15vw, 13.5px) !important;
    color: #475569 !important;
    text-decoration: none !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 22px !important;
    background: #fff !important;
    transition: all .2s !important;
}
.sgw-cards-2col .sgw-cta-secondary:hover {
    border-color: #d4af37 !important;
    color: #0f172a !important;
    background: #fffbeb !important;
}

/* Cap the box width tighter for 2-column */
.sgw-overlay .sgw-box,
#sgwOverlay .sgw-box {
    max-width: min(92vw, 820px) !important;
}

@media (min-width: 1280px) {
    .sgw-overlay .sgw-box,
    #sgwOverlay .sgw-box {
        max-width: 780px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   SGW Gateway v3 — Booking + Admin (Owner/Staff)
   ═══════════════════════════════════════════════════════════ */

/* === Card: Booking (Customer) === */
.sgw-cards-2col .sgw-c-booking {
    background: linear-gradient(160deg, #ffffff 0%, #ecfdf5 100%) !important;
    border-color: #86efac !important;
}
.sgw-cards-2col .sgw-c-booking .sgw-icon {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
}
.sgw-cards-2col .sgw-c-booking .sgw-cta {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
}

/* === Card: Admin (Owner/Staff) === */
.sgw-cards-2col .sgw-c-admin {
    background: linear-gradient(160deg, #ffffff 0%, #eff6ff 100%) !important;
    border-color: #93c5fd !important;
}
.sgw-cards-2col .sgw-c-admin .sgw-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
}
.sgw-cards-2col .sgw-c-admin .sgw-cta {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
}

/* Alt button (staff login) — secondary style */
.sgw-cards-2col .sgw-cta-alt {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: clamp(9px, 1.1vw, 12px) clamp(14px, 1.8vw, 20px) !important;
    font-size: clamp(12.5px, 0.78rem + 0.2vw, 14.5px) !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    background: #fff !important;
    border: 2px solid #93c5fd !important;
    border-radius: clamp(20px, 2vw, 28px) !important;
    text-decoration: none !important;
    transition: all .2s !important;
    margin-top: 6px !important;
}
.sgw-cards-2col .sgw-cta-alt:hover {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    transform: translateY(-2px) !important;
}

/* Extra links section (Create Account + Forgot Password) */
.sgw-cards-2col .sgw-extra-links {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px dashed #cbd5e1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.sgw-cards-2col .sgw-link-primary {
    display: block !important;
    text-align: center !important;
    padding: 8px 12px !important;
    color: #d4af37 !important;
    text-decoration: none !important;
    font-size: clamp(12px, 0.75rem + 0.2vw, 14px) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all .2s !important;
    line-height: 1.4 !important;
}
.sgw-cards-2col .sgw-link-primary:hover {
    background: #fffbeb !important;
    color: #b8941f !important;
}
.sgw-cards-2col .sgw-link-primary .sgw-hint {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.sgw-cards-2col .sgw-link-secondary {
    display: block !important;
    text-align: center !important;
    padding: 6px 12px !important;
    color: #64748b !important;
    text-decoration: none !important;
    font-size: clamp(11.5px, 0.7rem + 0.15vw, 13px) !important;
    border-radius: 8px !important;
    transition: color .2s !important;
}
.sgw-cards-2col .sgw-link-secondary:hover {
    color: #0f172a !important;
}