/* SR Car Lift - Ultra-Refined Modern Light Typography & Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;
}

body {
    margin: 0;
    font-family: var(--sr-font-body, 'Inter'), 'Cairo', 'Noto Sans Arabic', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
    background-color: var(--sr-bg, #FAFAFC);
    color: var(--sr-text, #334155);
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sr-font-heading, 'Outfit'), 'Cairo', 'Noto Sans Arabic', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
    color: #1E293B;
    font-weight: 600 !important; /* Headings need hierarchy — 600 Semibold */
}

/* RTL Text Alignment & Script Support */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] a, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Inter', sans-serif !important;
}

/* Global Font Weight Reduction (-200 Step Down) */
.font-extrabold {
    font-weight: 500 !important; /* Extrabold toned to 500 Medium */
}

.font-bold,
.text-slate-900,
.text-slate-800,
.text-black {
    font-weight: 500 !important; /* Bold toned to 500 Medium */
}

.font-semibold,
.font-medium,
.text-slate-700,
.text-slate-600 {
    font-weight: 400 !important; /* Semibold/medium at 400 Regular */
}

.font-normal,
p, span, select:not(.goog-te-combo), input, textarea, label, a, li, td, th, dd, dt {
    font-weight: 400;
    font-size: inherit;
    line-height: inherit;
}

/* ===== GLOBAL MINIMUM TYPOGRAPHY FLOOR ===== */
/* No text element should be below: weight 400 | size 14px | line-height 23px */
.text-xs,
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-\[13px\] {
    font-size: 14px !important;
    line-height: 23px !important;
}

.text-sm {
    font-size: 14px !important;
    line-height: 23px !important;
}

.font-light,
.font-thin,
.font-extralight {
    font-weight: 400 !important;
}

/* Force 0px Corner Radius for ALL UI Elements (exclude Google Translate internals) */
*:not(.skiptranslate):not(.skiptranslate *):not(.goog-te-combo):not(#google_translate_element *), ::before, ::after,
input, select:not(.goog-te-combo), textarea, button, a.btn, 
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-full {
    border-radius: 0px !important;
}

/* Primary Button Style: Soft Dark Slate (#1E293B) */
.btn-primary,
button[type="submit"],
.bg-black,
.bg-slate-900,
.bg-emerald-600,
.bg-emerald-500,
.bg-amber-500,
.bg-amber-600,
.bg-amber-700 {
    background-color: #1E293B !important;
    color: #FFFFFF !important;
    font-weight: 400 !important; /* 500→400: button text lighter */
    border-radius: 0px !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Global Smooth Hover & Micro-Animations */
.btn-primary:hover,
button[type="submit"]:hover,
.bg-black:hover,
.bg-slate-900:hover,
.bg-emerald-600:hover,
.bg-emerald-500:hover,
.bg-amber-500:hover,
.bg-amber-600:hover {
    background-color: #0F172A !important; /* Elegant Midnight Slate Hover */
    color: #FFFFFF !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.25) !important;
}

/* Smooth Interactive Touch Feedback for Links, Buttons & Cards (exclude Google Translate) */
a, button, input, select:not(.goog-te-combo), textarea, .card-glow {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Equal Height & Smooth Alignment for Adjacent Action Buttons */
.flex > button:not(.hidden):not(.md\:hidden):not(#mobile-menu-toggle),
.flex > a.btn:not(.hidden):not(.md\:hidden):not(#mobile-menu-toggle),
.flex > a[class*="px-"]:not(.hidden):not(.md\:hidden):not(#mobile-menu-toggle),
.grid > button:not(.hidden):not(.md\:hidden):not(#mobile-menu-toggle),
.grid > a.btn:not(.hidden):not(.md\:hidden):not(#mobile-menu-toggle),
.grid > a[class*="px-"]:not(.hidden):not(.md\:hidden):not(#mobile-menu-toggle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* WhatsApp Brand Green Button Style (Softened Typography + Smooth Hover Lift) */
.btn-whatsapp:not(.mobile-foot-item),
a.btn-whatsapp:not(.mobile-foot-item),
a[href*="api.whatsapp.com"]:not(.mobile-foot-item),
a[href*="wa.me"]:not(.mobile-foot-item),
.bg-whatsapp:not(.mobile-foot-item) {
    background-color: #25D366 !important; /* Official WhatsApp Green */
    color: #0F172A !important; /* Soother Dark Slate Text */
    font-weight: 500 !important; /* 600→500: WhatsApp button lighter */
    border: none !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-whatsapp:not(.mobile-foot-item) i,
a.btn-whatsapp:not(.mobile-foot-item) i,
a[href*="api.whatsapp.com"]:not(.mobile-foot-item) i,
a[href*="wa.me"]:not(.mobile-foot-item) i {
    color: #0F172A !important;
}
.btn-whatsapp:not(.mobile-foot-item):hover,
a.btn-whatsapp:not(.mobile-foot-item):hover,
a[href*="api.whatsapp.com"]:not(.mobile-foot-item):hover,
a[href*="wa.me"]:not(.mobile-foot-item):hover,
.bg-whatsapp:not(.mobile-foot-item):hover {
    background-color: #128C7E !important; /* Rich Darker Teal Green */
    color: #FFFFFF !important;
    border: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -4px rgba(37, 211, 102, 0.3) !important;
}
.btn-whatsapp:not(.mobile-foot-item):hover i,
a.btn-whatsapp:not(.mobile-foot-item):hover i,
a[href*="api.whatsapp.com"]:not(.mobile-foot-item):hover i,
a[href*="wa.me"]:not(.mobile-foot-item):hover i {
    color: #FFFFFF !important;
}

/* Secondary Outline Button Style: Pure White + Emerald Green 2px Border + Dark Text */
.btn-secondary,
.btn-outline,
.btn-border,
.border-2.border-emerald-600 {
    background-color: #FFFFFF !important;
    border: 2px solid #059669 !important; /* Emerald Green Border */
    color: #0F172A !important;
    font-weight: 500 !important; /* 600→500: outline button lighter */
    border-radius: 0px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.border-2.border-emerald-600:hover {
    background-color: #ECFDF5 !important; /* Soft Emerald Light */
    border-color: #059669 !important;
    color: #059669 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -4px rgba(5, 150, 105, 0.2) !important;
}

/* Widen main content containers to 90% width on all non-mobile screen sizes (sm: 640px+) */
@media (min-width: 640px) {
    div.max-w-7xl, 
    div.max-w-6xl, 
    div.max-w-5xl, 
    div.max-w-4xl, 
    div.max-w-3xl,
    div.max-w-2xl,
    div.max-w-xl,
    section > div.max-w-7xl,
    section > div.max-w-4xl,
    header > div.max-w-7xl,
    footer > div.max-w-7xl,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl {
        max-width: 90% !important;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Predictive Search Autocomplete Dropdown - Pure White Theme */
.autocomplete-suggestions,
#from_loc_suggestions,
#to_loc_suggestions {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    border-radius: 0px !important;
    color: #0F172A !important;
}

.autocomplete-item {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 10px 14px !important;
    transition: background-color 0.15s ease !important;
    border-radius: 0px !important;
}

.autocomplete-item:hover {
    background-color: #ECFDF5 !important; /* Emerald light hover */
    color: #0F172A !important;
}

.autocomplete-item strong,
.autocomplete-item span {
    color: #0F172A !important;
    font-weight: 500 !important; /* 700→500: autocomplete highlight */
}

.autocomplete-badge {
    background-color: #D1FAE5 !important; /* emerald-100 */
    color: #065F46 !important; /* emerald-900 */
    border: 1px solid #6EE7B7 !important; /* emerald-300 */
    border-radius: 0px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important; /* 800→600: badge label */
    display: inline-block !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

/* Card Glow & Soft Elevation */
.card-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    border-radius: 0px !important;
}
.card-glow:hover {
    transform: translateY(-4px);
    border-color: rgba(5, 150, 105, 0.4);
    box-shadow: 0 20px 25px -5px rgba(5, 150, 105, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Glassmorphism Light Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 0px !important;
}

/* Strictly Hide Mobile Menu Toggle on Desktop Screens */
@media screen and (min-width: 768px) {
    #mobile-menu-toggle,
    #mobile-menu,
    button#mobile-menu-toggle,
    div#mobile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}