/* ==========================================================================
   CSS Variables & Typography
   ========================================================================== */
   :root {
    /* Brand Colors (Matched perfectly to Logo) */
    --color-primary: #004282;        /* Royal Deep Blue */
    --color-primary-light: #0056a8;  /* Vibrant Blue Gradient */
    --color-primary-dark: #002d5a;   /* Deepest Navy */
    --color-secondary: #f3821a;      /* Bold Brand Orange */
    --color-secondary-hover: #d87114;
    --color-secondary-light: rgba(243, 130, 26, 0.1);
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-light: #f8f9fa;
    --color-gray: #6c757d;
    --color-dark: #212529;
    --color-black: #000000;

    /* Styling Variables */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-pill: 50px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 15px 40px rgba(0, 51, 102, 0.15);
    --transition: all 0.3s ease-in-out;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Dark Mode Variables */
html[data-theme="dark"] {
    --color-white: #1a1a2e;
    --color-light: #16213e;
    --color-dark: #f0f0f5;
    --color-gray: #c8cdd8;
    --color-black: #ffffff;
    --color-primary: #6aadee;
    --color-primary-light: #89c2f5;
    --color-primary-dark: #4a90d9;
    --color-secondary-light: rgba(243, 130, 26, 0.18);
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body {
    background-color: #1a1a2e;
    color: #e8eaf0;
}

html[data-theme="dark"] .navbar {
    background-color: rgba(26, 26, 46, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .nav-links a {
    color: #e0e4ee;
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active {
    color: var(--color-secondary);
}

html[data-theme="dark"] .car-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .partner-logo {
    background: #1e2545;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .car-details h3,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .offer-card h3,
html[data-theme="dark"] .step-card h3,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .faq-question,
html[data-theme="dark"] .testimonial-author h4,
html[data-theme="dark"] .contact-info-card h4,
html[data-theme="dark"] .contact-form label {
    color: #ffffff;
}

html[data-theme="dark"] .car-features {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .input-with-icon input,
html[data-theme="dark"] .input-with-icon select,
html[data-theme="dark"] .contact-form textarea {
    background-color: #161a30;
    border-color: rgba(255, 255, 255, 0.15);
    color: #eaedf5;
}

html[data-theme="dark"] .lang-btn {
    border-color: #e0e4ee;
    color: #e0e4ee;
}

html[data-theme="dark"] .lang-btn:hover {
    background: #e0e4ee;
    color: #1a1a2e;
}

html[data-theme="dark"] .quick-booking-form {
    background: #1e2545;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .partner-logo span {
    color: #e0e4ee;
}

html[data-theme="dark"] .offer-card.featured {
    background: linear-gradient(180deg, rgba(243, 130, 26, 0.12), #1e2545);
}

/* --- Enhanced Dark Mode Colors (Visibility Fix) --- */

/* Section titles → pure white for max readability */
html[data-theme="dark"] .section-title h2 {
    color: #ffffff;
}

/* Card headings → bright white */
html[data-theme="dark"] .car-details h3,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .offer-card h3,
html[data-theme="dark"] .step-card h3 {
    color: #f0f4ff;
}

/* Body text / descriptions → much brighter */
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .about-desc,
html[data-theme="dark"] .step-card p,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .offer-card p {
    color: #d0d6e4;
}

html[data-theme="dark"] .car-price {
    color: #c8d0e0;
}

html[data-theme="dark"] .car-features {
    color: #c8d0e0;
}

/* Car price strong → bright */
html[data-theme="dark"] .car-price strong {
    color: #ffffff;
}

html[data-theme="dark"] .car-features i {
    color: #89c2f5;
}

/* About section */
html[data-theme="dark"] .about-section {
    background: #1a1a2e;
}

html[data-theme="dark"] .about-feature {
    color: #e0e6f0;
}

html[data-theme="dark"] .about-img-wrapper {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Testimonials */
html[data-theme="dark"] .testimonials-section {
    background: linear-gradient(180deg, #1a1a2e, #16213e);
}

html[data-theme="dark"] .testimonial-text {
    color: #dde1eb;
}

html[data-theme="dark"] .testimonial-author {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .testimonial-author h4 {
    color: #f0f4ff;
}

html[data-theme="dark"] .testimonial-author span {
    color: #a8b2c4;
}

html[data-theme="dark"] .author-avatar {
    color: #89c2f5;
}

/* Testimonial carousel controls */
html[data-theme="dark"] .testimonial-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: #e0e4ee;
}

html[data-theme="dark"] .testimonial-btn:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

html[data-theme="dark"] .testimonials-dots .t-dot {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .testimonials-dots .t-dot.active {
    background: var(--color-secondary);
}

/* FAQ section */
html[data-theme="dark"] .faq-item {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .faq-item.active {
    border-color: var(--color-secondary);
    box-shadow: 0 8px 25px rgba(243, 130, 26, 0.15);
}

html[data-theme="dark"] .faq-question {
    color: #f0f4ff;
}

html[data-theme="dark"] .faq-question:hover {
    color: var(--color-secondary);
}

html[data-theme="dark"] .faq-question i {
    background: rgba(243, 130, 26, 0.2);
    color: var(--color-secondary);
}

html[data-theme="dark"] .faq-answer p {
    color: #d0d6e4;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Contact section */
html[data-theme="dark"] .contact-section {
    background: #16213e;
}

html[data-theme="dark"] .contact-form label {
    color: #e0e6f0;
}

html[data-theme="dark"] .contact-form .input-with-icon input,
html[data-theme="dark"] .contact-form .input-with-icon select {
    background-color: #161a30;
    border-color: rgba(255, 255, 255, 0.15);
    color: #eaedf5;
}

html[data-theme="dark"] .contact-form textarea {
    background-color: #161a30;
    border-color: rgba(255, 255, 255, 0.15);
    color: #eaedf5;
}

html[data-theme="dark"] .contact-form .input-with-icon input:focus,
html[data-theme="dark"] .contact-form .input-with-icon select:focus,
html[data-theme="dark"] .contact-form textarea:focus {
    border-color: var(--color-secondary);
    background-color: #1e2545;
    box-shadow: 0 0 0 4px rgba(243, 130, 26, 0.15);
}

html[data-theme="dark"] .contact-form .input-with-icon i {
    color: #89c2f5;
}

html[data-theme="dark"] .contact-info-card {
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .contact-info-card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .contact-info-card h4 {
    color: #f0f4ff;
}

html[data-theme="dark"] .contact-info-card p,
html[data-theme="dark"] .contact-info-card a {
    color: #c8d0e0;
}

html[data-theme="dark"] .contact-info-card a:hover {
    color: var(--color-secondary);
}

/* Map container */
html[data-theme="dark"] .map-container {
    border-color: #1e2545;
}

/* Fleet filter buttons */
html[data-theme="dark"] .filter-btn {
    border-color: rgba(255, 255, 255, 0.25);
    color: #e0e4ee;
}

html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-btn:hover {
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: #fff;
    border-color: var(--color-secondary);
}

/* Sort buttons */
html[data-theme="dark"] .sort-btn {
    border-color: rgba(255, 255, 255, 0.15);
    background: #1e2545;
    color: #d0d6e4;
}

html[data-theme="dark"] .sort-btn:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

html[data-theme="dark"] .sort-btn.active {
    background: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

/* Car card hover */
html[data-theme="dark"] .car-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(243, 130, 26, 0.3);
}

/* Service section */
html[data-theme="dark"] .services-section {
    background-color: #151528;
}

html[data-theme="dark"] .service-card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .service-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .service-icon-wrapper {
    background: rgba(243, 130, 26, 0.15);
}

/* Partners section */
html[data-theme="dark"] .partners-section {
    background: #151528;
}

html[data-theme="dark"] .partners-track-wrapper::before {
    background: linear-gradient(to right, #151528, transparent);
}

html[data-theme="dark"] .partners-track-wrapper::after {
    background: linear-gradient(to left, #151528, transparent);
}

html[data-theme="dark"] .partner-logo {
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
}

/* Gallery section */
html[data-theme="dark"] .gallery-section {
    background: #1a1a2e;
}

/* CTA Banner */
html[data-theme="dark"] .cta-banner {
    background: linear-gradient(135deg, #0d0d1f, #16213e, #1e2d50);
}

/* Footer */
html[data-theme="dark"] .footer {
    background: linear-gradient(180deg, #0d0d1f, #111128);
}

html[data-theme="dark"] .footer h3 {
    color: #ffffff;
}

html[data-theme="dark"] .footer-col p {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .footer-col.links a,
html[data-theme="dark"] .footer-col.contact li {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .footer-col.links a:hover {
    color: var(--color-secondary);
}

/* Quick booking inputs */
html[data-theme="dark"] .quick-booking-form .input-with-icon input,
html[data-theme="dark"] .quick-booking-form .input-with-icon select {
    background-color: #161a30;
    border-color: rgba(255, 255, 255, 0.15);
    color: #eaedf5;
}

html[data-theme="dark"] .quick-booking-form label {
    color: #e0e6f0;
}

html[data-theme="dark"] .quick-booking-form .input-with-icon i {
    color: #89c2f5;
}

/* Offer section */
html[data-theme="dark"] .offer-card {
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .offer-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

/* Step card */
html[data-theme="dark"] .step-card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .step-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .process-steps::before {
    opacity: 0.15;
}

/* Countdown timer */
html[data-theme="dark"] .countdown-label {
    color: #d0d6e4;
}

/* Navbar mobile btn */
html[data-theme="dark"] .mobile-menu-btn {
    color: #e0e4ee;
}

/* Back to top */
html[data-theme="dark"] .back-to-top {
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    box-shadow: 0 5px 20px rgba(243, 130, 26, 0.3);
}

/* Cookie banner */
html[data-theme="dark"] .cookie-banner {
    background: #0d0d1f;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.4);
}

/* Toast */
html[data-theme="dark"] .toast {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Form validation */
html[data-theme="dark"] .form-error-msg {
    color: #fc8181;
}

html[data-theme="dark"] .form-group.success .input-with-icon input,
html[data-theme="dark"] .form-group.success .input-with-icon select,
html[data-theme="dark"] .form-group.success textarea {
    border-color: #25d366;
}

html[data-theme="dark"] .form-group.error .input-with-icon input,
html[data-theme="dark"] .form-group.error .input-with-icon select,
html[data-theme="dark"] .form-group.error textarea {
    border-color: #fc8181;
}

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a4568;
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a5880;
}

/* Selection */
html[data-theme="dark"] ::selection {
    background: rgba(243, 130, 26, 0.35);
    color: #fff;
}

/* Placeholders */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #6a7390;
}

/* Stats section text */
html[data-theme="dark"] .stat-number {
    background: linear-gradient(135deg, #ffffff, var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Buttons in dark mode — keep them vibrant */
html[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #2a7cc7, #4a9cee);
}

html[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #4a9cee, #2a7cc7);
    box-shadow: 0 10px 25px rgba(42, 124, 199, 0.4);
}

/* Title underline stays vibrant */
html[data-theme="dark"] .title-underline {
    background: linear-gradient(90deg, var(--color-secondary), #89c2f5);
}

/* Loader */
html[data-theme="dark"] .loader {
    background: #0d0d1f;
}

/* --- End Enhanced Dark Mode --- */

body {
    font-family: 'Cairo', sans-serif;
    color: var(--color-dark);
    background-color: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
}

html[dir="ltr"] body {
    font-family: 'Outfit', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--color-light);
}

/* ==========================================================================
   Loading Screen
   ========================================================================== */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 800;
    animation: pulse-text 1.5s ease-in-out infinite;
}

html[lang="en"] .loader-text {
    letter-spacing: 4px;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   Typography & Titles
   ========================================================================== */
.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 800;
}

.title-underline {
    height: 4px;
    width: 80px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    margin: 0 auto;
    border-radius: var(--border-radius-pill);
    position: relative;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--border-radius-pill);
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.3);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #ffab40, var(--color-secondary));
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.1rem;
}

.btn-block {
    width: 100%;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.btn-outline-white:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    padding: 10px 0; /* تقليل الهامش لتوفير مساحة للوجو الكبير */
}

.navbar.scrolled {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 90px;
}

.logo img {
    height: 115px;
    object-fit: contain;
    transition: var(--transition);
    image-rendering: -webkit-optimize-contrast;
    display: block;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}

.logo:hover img {
    transform: scale(1.08); /* تأثير تكبير بسيط عند التمرير */
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    transition: var(--transition);
}

.logo-text strong {
    font-family: 'Cairo', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.5px;
}

.logo-text small {
    font-family: 'Cairo', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 1px;
}

html[data-theme="dark"] .logo-text strong {
    color: #7eb8f7;
}

html[data-theme="dark"] .logo-text small {
    color: var(--color-secondary);
}

.nav-links {
    display: flex;
    gap: 22px;
    flex-wrap: nowrap;
}

.nav-links a {
    font-weight: 600;
    color: var(--color-primary);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    transition: var(--transition);
    border-radius: 2px;
}

html[dir="ltr"] .nav-links a::after {
    right: auto;
    left: 0;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.lang-btn {
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    padding: 5px 12px;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: 0.8rem;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.lang-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
}

.dark-mode-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
}

.dark-mode-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

html[data-theme="dark"] .dark-mode-btn {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

html[data-theme="dark"] .dark-mode-btn:hover {
    background: var(--color-secondary);
    color: #1a1a2e;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-color: var(--color-primary);
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active {
    opacity: 1;
}

.hero-content {
    text-align: center;
    color: var(--color-white);
    position: relative;
    z-index: 10;
    transform: translateY(-50px);
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    animation: fadeUp 1s ease 0.3s both;
    min-height: 1.2em;
}

.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    background: var(--color-secondary);
    margin-right: 5px;
    animation: blink-cursor 0.8s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink-cursor {
    50% { opacity: 0; }
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    animation: fadeUp 1s ease 0.5s both;
}

.hero-content .btn {
    animation: fadeUp 1s ease 0.7s both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dynamic Patterns in Hero */
.hero-pattern {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(255, 140, 0, 0.3);
    animation: rotate 30s linear infinite;
    z-index: 1;
}

.pattern-1 {
    width: 600px;
    height: 600px;
    top: -100px;
    right: -100px;
}

.pattern-2 {
    width: 400px;
    height: 400px;
    bottom: -50px;
    left: -50px;
    border-color: rgba(255, 255, 255, 0.1);
    animation-direction: reverse;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 20;
}

.slider-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    backdrop-filter: blur(5px);
}

.slider-btn:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: var(--color-secondary);
    width: 30px;
    border-radius: 6px;
}

/* ==========================================================================
   Quick Booking Widget
   ========================================================================== */
/* Quick Booking Widget Refinement */
.quick-booking-container {
    position: absolute;
    bottom: -40px; /* تداخل مع الهيرو */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1100px;
    z-index: 20;
}

.quick-booking-form {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15); /* ظل عميق لإعطاء شعور بالطفو */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) 180px;
    gap: 20px;
    align-items: flex-end;
    border: 1px solid rgba(0, 66, 130, 0.05);
}

.quick-booking-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-booking-form label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    right: 15px;
    color: var(--color-secondary);
    font-size: 1.1rem;
    pointer-events: none;
}

html[dir="ltr"] .input-with-icon i {
    right: auto;
    left: 15px;
}

.input-with-icon input,
.input-with-icon select {
    width: 100%;
    padding: 14px 45px 14px 15px;
    border: 1.5px solid #e1e8ed;
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
    background-color: #fcfdfe;
    outline: none;
}

html[dir="ltr"] .input-with-icon input,
html[dir="ltr"] .input-with-icon select {
    padding: 14px 15px 14px 45px;
}

.input-with-icon input:focus,
.input-with-icon select:focus {
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(0, 66, 130, 0.1);
}

.quick-booking-form .btn-secondary {
    height: 52px;
    font-size: 1.1rem;
}

/* ==========================================================================
   Stats Section
   ========================================================================== */
.stats-section {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--color-secondary);
}

.stats-section::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 20c0 11.05-8.95 20-20 20v-40c11.05 0 20 8.95 20 20z'/%3E%3C/g%3E%3C/svg%3E");
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.stat-item {
    text-align: center;
    color: var(--color-white);
    padding: 20px;
}

.stat-icon {
    font-size: 2.5rem;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--color-white), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item p {
    font-size: 1.1rem;
    opacity: 0.85;
    font-weight: 600;
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-section {
    background: var(--color-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.about-img-wrapper {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 66, 130, 0.15);
}

.about-img-wrapper img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.about-experience-badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: var(--color-white);
    padding: 18px 24px;
    border-radius: var(--border-radius-md);
    text-align: center;
    box-shadow: 0 10px 30px rgba(243, 130, 26, 0.4);
}

html[dir="ltr"] .about-experience-badge {
    right: auto;
    left: 24px;
}

.experience-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.about-experience-badge span:last-child {
    font-size: 0.85rem;
    font-weight: 600;
}

.about-content .section-title {
    margin-bottom: 25px;
}

html[dir="ltr"] .about-content .section-title {
    text-align: left !important;
}

.about-desc {
    color: var(--color-gray);
    line-height: 1.9;
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 35px;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    color: var(--color-dark);
    font-weight: 600;
}

.about-feature i {
    color: var(--color-secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.about-local-value {
    background: linear-gradient(135deg, var(--color-primary) 0%, #005bb5 100%);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 28px;
    box-shadow: 0 6px 20px rgba(0, 66, 130, 0.2);
}

.local-value-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.local-value-label {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.local-value-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-secondary);
    line-height: 1;
}

.local-value-bar {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    height: 8px;
    overflow: hidden;
}

.local-value-fill {
    height: 100%;
    background: var(--color-secondary);
    border-radius: 50px;
    transition: width 1.5s ease;
}

/* ==========================================================================
   Vision Mission Goals Section
   ========================================================================== */
.vision-section {
    background: linear-gradient(160deg, #f0f6ff 0%, #ffffff 50%, #f5f9ff 100%);
    position: relative;
    overflow: hidden;
}

.vision-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,66,130,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.vision-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(243,130,26,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.vmg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 20px;
}

.vmg-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: 40px 32px;
    box-shadow: 0 8px 40px rgba(0, 66, 130, 0.07);
    border: 1px solid rgba(0, 66, 130, 0.06);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vmg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 0;
    transition: height 0.3s ease;
}

.vmg-vision.vmg-icon-wrap ~ * ~ * ~ ::before,
.vmg-card:nth-child(1)::before { background: linear-gradient(90deg, #004282, #1a6cc8); }
.vmg-card:nth-child(2)::before { background: linear-gradient(90deg, #f3821a, #ffab40); }
.vmg-card:nth-child(3)::before { background: linear-gradient(90deg, #0d9e6e, #2ec99c); }

.vmg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 66, 130, 0.13);
}

.vmg-icon-wrap {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.vmg-vision  { background: linear-gradient(135deg, rgba(0,66,130,0.12), rgba(26,108,200,0.08)); color: var(--color-primary); }
.vmg-mission { background: linear-gradient(135deg, rgba(243,130,26,0.12), rgba(255,171,64,0.08)); color: var(--color-secondary); }
.vmg-goals   { background: linear-gradient(135deg, rgba(13,158,110,0.12), rgba(46,201,156,0.08)); color: #0d9e6e; }

.vmg-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0;
}

.vmg-card p {
    color: var(--color-gray);
    line-height: 1.85;
    font-size: 0.97rem;
    margin: 0;
    flex: 1;
}

.vmg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 18px;
}

.vmg-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
}

.vmg-card:nth-child(1) .vmg-list li i { color: var(--color-primary); }
.vmg-card:nth-child(2) .vmg-list li i { color: var(--color-secondary); }
.vmg-card:nth-child(3) .vmg-list li i { color: #0d9e6e; }

/* Dark mode */
html[data-theme="dark"] .vision-section {
    background: linear-gradient(160deg, #0d1f33 0%, #0a1829 50%, #0e2236 100%);
}

html[data-theme="dark"] .vmg-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.07);
}

html[data-theme="dark"] .vmg-card h3 { color: var(--color-white); }
html[data-theme="dark"] .vmg-list li { color: rgba(255,255,255,0.85); }
html[data-theme="dark"] .vmg-list { border-color: rgba(255,255,255,0.08); }

/* Responsive */
@media (max-width: 900px) {
    .vmg-grid { grid-template-columns: 1fr; gap: 24px; }
    .vmg-card { padding: 32px 24px; }
}

/* ==========================================================================
   Fleet Section
   ========================================================================== */
.fleet-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 24px;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--border-radius-pill);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.filter-btn.active,
.filter-btn:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    border-color: var(--color-primary);
}

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.car-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg); /* زوايا أكثر نعومة */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* ظل أنعم وأكثر حداثة */
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    display: flex;
    flex-direction: column;
}

.car-card:hover {
    transform: translateY(-12px); /* حركة للأعلى أكثر وضوحاً */
    box-shadow: 0 20px 50px rgba(0, 66, 130, 0.12); /* ظل أزرق براند عند التمرير */
    border-color: var(--color-secondary-light);
}

.car-image {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7fc 50%, #e1eef8 100%);
}

[data-theme="dark"] .car-image {
    background: linear-gradient(135deg, #1a2a3a 0%, #1e3045 50%, #162535 100%);
}

.car-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    opacity: 0;
    transition: var(--transition);
}

.car-card:hover .car-image::after {
    opacity: 1;
}

.car-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    transition: transform 0.5s ease;
    position: relative;
    z-index: 3;
}

.car-card:hover .car-image img {
    transform: scale(1.08);
}

.car-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: var(--color-white);
    padding: 5px 15px;
    border-radius: var(--border-radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 3;
}

html[dir="ltr"] .car-badge {
    right: auto;
    left: 15px;
}

/* Luxury badge — gold gradient */
.car-badge--luxury {
    background: linear-gradient(135deg, #b8860b, #f5d27e, #b8860b);
    color: #3d2200;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.45);
}

/* Luxury car card — subtle gold accent */
.car-card[data-category="luxury"] {
    border-top: 3px solid #d4af37;
}

.car-card[data-category="luxury"] .car-details h3 {
    background: linear-gradient(90deg, #b8860b, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-theme="dark"] .car-card[data-category="luxury"] {
    border-top-color: #f5d27e;
}

.car-details {
    padding: 25px;
}

.car-details h3 {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.car-features {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    padding: 15px;
    background: var(--color-light); /* خلفية خفيفة للمميزات */
    border-radius: var(--border-radius-md);
    color: var(--color-gray);
    font-size: 0.9rem;
}

.car-features span {
    display: flex;
    flex-direction: column; /* ترتيب أيقونة فوق النص */
    align-items: center;
    gap: 8px;
    flex: 1;
}

.car-features i {
    color: var(--color-primary); /* تغيير الأيقونات للأزرق البراند */
    font-size: 1.2rem;
}

.car-price-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.car-price {
    font-size: 1rem;
    color: var(--color-gray);
}

.car-price strong {
    font-size: 1.8rem;
    color: var(--color-primary);
    font-weight: 800;
}

.car-card .btn-primary {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.car-card:hover .btn-primary {
    background: var(--color-secondary); /* زر استأجر يتحول للبرتقالي عند التأشير */
    transform: scale(1.02);
}

/* ==========================================================================
   Special Offers
   ========================================================================== */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.offer-card {
    background: var(--color-white);
    padding: 40px 30px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    border: 2px solid transparent;
}

.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-hover);
}

.offer-card.featured {
    border-color: var(--color-secondary);
    background: linear-gradient(180deg, var(--color-secondary-light), var(--color-white));
}

.offer-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), #ffab40);
}

.offer-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #e53e3e, #fc8181);
    color: var(--color-white);
    padding: 8px 16px;
    border-radius: var(--border-radius-pill);
    font-weight: 800;
    font-size: 1rem;
}

html[dir="rtl"] .offer-badge {
    left: auto;
    right: 20px;
}

.offer-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 25px;
}

.offer-card h3 {
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.offer-card p {
    color: var(--color-gray);
    margin-bottom: 25px;
    line-height: 1.8;
}

/* Section Subtitle */
.section-subtitle {
    color: var(--color-gray);
    font-size: 1.1rem;
    margin-top: 15px;
}

/* Offers Countdown Timer */
.offers-countdown {
    text-align: center;
    margin-bottom: 50px;
}

.countdown-label {
    font-size: 1.1rem;
    color: var(--color-gray);
    margin-bottom: 15px;
    font-weight: 600;
}

.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    padding: 20px 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0, 66, 130, 0.2);
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.countdown-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-white);
    line-height: 1;
}

.countdown-unit {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    font-weight: 600;
}

.countdown-separator {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-secondary);
    line-height: 1;
    margin-bottom: 15px;
}

/* Offer Ribbon */
.offer-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: 700;
    transform: rotate(45deg);
    z-index: 2;
}

html[dir="ltr"] .offer-ribbon {
    right: auto;
    left: -35px;
    transform: rotate(-45deg);
}

/* ==========================================================================
   Booking Process
   ========================================================================== */
.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 45px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
    opacity: 0.3;
    z-index: 0;
}

.step-card {
    background: var(--color-white);
    padding: 40px 30px;
    text-align: center;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-hover);
}

.step-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 25px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 51, 102, 0.2);
}

.step-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--color-secondary);
    top: -3px;
    left: -3px;
    padding: 3px;
    box-sizing: content-box;
    border-top-color: transparent;
    border-bottom-color: transparent;
    transition: all 0.5s ease;
}

.step-card:hover .step-icon::after {
    transform: rotate(180deg);
}

.step-card h3 {
    margin-bottom: 15px;
    color: var(--color-primary);
    font-size: 1.3rem;
}

.step-card p {
    color: var(--color-gray);
}

/* ==========================================================================
   Services Section Refinement
   ========================================================================== */
.services-section {
    padding: 100px 0;
    background-color: var(--color-light);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--color-white);
    padding: 40px 30px;
    border-radius: var(--border-radius-lg);
    text-align: center;
    transition: var(--transition);
    border-bottom: 4px solid transparent;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 66, 130, 0.08);
    border-bottom-color: var(--color-secondary);
}

.service-icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--color-secondary-light);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 0 auto 25px;
    font-size: 2rem;
    transition: var(--transition);
}

.service-card:hover .service-icon-wrapper {
    background: var(--color-secondary);
    color: var(--color-white);
    transform: rotateY(360deg);
}

.service-card h3 {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.service-card p {
    color: var(--color-gray);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials-section {
    background: linear-gradient(180deg, var(--color-white), var(--color-light));
}

/* testimonials-slider replaced by testimonials-carousel — see carousel section below */

.testimonial-card {
    background: var(--color-white);
    padding: 35px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-top: 4px solid transparent;
    position: relative;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 5rem;
    color: var(--color-secondary);
    opacity: 0.15;
    font-family: Georgia, serif;
    line-height: 1;
}

html[dir="ltr"] .testimonial-card::before {
    right: auto;
    left: 25px;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-hover);
    border-top-color: var(--color-secondary);
}

.testimonial-stars {
    color: #ffc107;
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: flex;
    gap: 3px;
}

.testimonial-text {
    color: var(--color-dark);
    margin-bottom: 25px;
    line-height: 1.9;
    font-size: 1rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.author-avatar {
    font-size: 3rem;
    color: var(--color-primary);
    opacity: 0.7;
}

.testimonial-author h4 {
    color: var(--color-primary);
    font-weight: 700;
}

.testimonial-author span {
    color: var(--color-gray);
    font-size: 0.9rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background: linear-gradient(180deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-white);
}

.footer-top {
    padding: 80px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 20px;
}

.footer-logo img {
    height: 70px;
    filter: brightness(0) invert(1); /* جعل اللوجو أبيض */
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.footer-logo-text strong {
    font-family: 'Cairo', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.footer-logo-text small {
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 1px;
}

.footer h3 {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: var(--color-white);
    position: relative;
    padding-bottom: 15px;
}

.footer h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
}

html[dir="ltr"] .footer h3::after {
    right: auto;
    left: 0;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    line-height: 1.7;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    font-size: 1rem;
}

.social-links a:hover {
    background: var(--color-secondary);
    transform: translateY(-3px);
}

.footer-col.links ul,
.footer-col.contact ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col.links a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.footer-col.links a:hover {
    color: var(--color-secondary);
    padding-right: 5px;
}

html[dir="ltr"] .footer-col.links a:hover {
    padding-right: 0;
    padding-left: 5px;
}

.footer-col.contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-col.contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.footer-col.contact a:hover {
    color: var(--color-secondary);
}

.footer-col.contact i {
    color: var(--color-secondary);
    font-size: 1.1rem;
    min-width: 20px;
}

/* Hours List */
.hours-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.7);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
}

.hours-list li.hours-note {
    border: none;
    color: var(--color-secondary);
    font-weight: 600;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 5px;
}

/* Newsletter */
.newsletter {
    margin-top: 25px;
}

.newsletter h4 {
    color: var(--color-white);
    margin-bottom: 12px;
    font-size: 1rem;
}

.newsletter-form {
    display: flex;
    border-radius: var(--border-radius-pill);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.newsletter-form input {
    flex: 1;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--color-white);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.newsletter-form button {
    padding: 12px 20px;
    background: var(--color-secondary);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem;
}

.newsletter-form button:hover {
    background: var(--color-secondary-hover);
}

/* Footer Bottom */
.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.footer-payments {
    display: flex;
    gap: 15px;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-payments i:hover {
    color: var(--color-white);
    transition: var(--transition);
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: var(--transition);
}

.footer-legal-links a:hover {
    color: var(--color-secondary);
}

.footer-legal-links span {
    color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   WhatsApp Float
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: linear-gradient(135deg, #25d366, #128C7E);
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: var(--border-radius-pill);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    z-index: 999;
    font-weight: 700;
    transition: var(--transition);
    animation: bounce-gentle 2s ease-in-out infinite;
}

html[dir="rtl"] .whatsapp-float {
    left: auto;
    right: 30px;
}

.whatsapp-float:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5);
}

.whatsapp-float i {
    font-size: 1.5rem;
}

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ==========================================================================
   Back to Top
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 5px 20px rgba(0, 51, 102, 0.3);
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[dir="rtl"] .back-to-top {
    right: auto;
    left: 30px;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary));
}

/* Scroll Animations — see Enhanced Scroll Reveal section below */

/* ==========================================================================
   Reading Progress Bar
   ========================================================================== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-secondary));
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    z-index: 10000;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(243, 130, 26, 0.5);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Partners Section
   ========================================================================== */
.partners-section {
    padding: 60px 0;
    background: var(--color-light);
    overflow: hidden;
}

.partners-track-wrapper {
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.partners-track-wrapper::before,
.partners-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.partners-track-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-light), transparent);
}

.partners-track-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, var(--color-light), transparent);
}

.partners-track {
    display: flex;
    gap: 60px;
    animation: scroll-partners 25s linear infinite;
    width: max-content;
}

.partners-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-partners {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

html[dir="ltr"] .partners-track {
    animation-name: scroll-partners-ltr;
}

@keyframes scroll-partners-ltr {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.partner-item {
    flex-shrink: 0;
}

.partner-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 25px 40px;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    border: 2px solid rgba(0, 66, 130, 0.06);
    transition: var(--transition);
    cursor: pointer;
    min-width: 160px;
}

.partner-logo:hover {
    border-color: var(--color-secondary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 66, 130, 0.1);
}

.partner-logo i {
    font-size: 2.5rem;
    color: var(--color-primary);
    transition: var(--transition);
}

.partner-logo:hover i {
    color: var(--color-secondary);
    transform: scale(1.15);
}

.partner-logo span {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ==========================================================================
   Clients Section
   ========================================================================== */
.clients-section {
    background: var(--color-white);
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .clients-grid {
        grid-template-columns: 1fr;
    }
}

.client-card {
    position: relative;
    background: var(--color-white);
    border: 2px solid rgba(0, 66, 130, 0.08);
    border-radius: var(--border-radius-lg);
    padding: 36px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    transition: var(--transition);
    box-shadow: 0 4px 18px rgba(0, 66, 130, 0.05);
}

.client-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-secondary);
    box-shadow: 0 16px 40px rgba(0, 66, 130, 0.12);
}

.client-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 18px;
    border-radius: var(--border-radius-pill);
    white-space: nowrap;
}

/* letter-spacing + uppercase يكسران اتصال الحروف العربية فيُظهرانها مشوّهة —
   يُطبَّقان فقط عند العرض بالإنجليزية */
html[lang="en"] .client-badge {
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-gov  { background: #e8f0fa; color: #004282; }
.badge-auth { background: #e6f7f4; color: #0a7a65; }
.badge-edu  { background: #f0ebfb; color: #6b35c5; }
.badge-priv { background: #fff3e6; color: #c8620a; }

.client-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.client-icon i {
    font-size: 2rem;
    color: var(--color-primary);
    transition: var(--transition);
}

.client-card:hover .client-icon {
    background: var(--color-secondary-light);
}

.client-card:hover .client-icon i {
    color: var(--color-secondary);
    transform: scale(1.15);
}

.client-icon img.gov-emblem {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: none;
    transition: var(--transition);
}

.client-card:hover .client-icon img.gov-emblem {
    transform: scale(1.12);
}

html[data-theme="dark"] .client-icon img.gov-emblem {
    filter: brightness(0.85) contrast(1.05);
}

.client-icon-circle {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 72px;
    height: 72px;
}

.client-icon-circle img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    transition: var(--transition);
}

.client-card:hover .client-icon-circle img {
    transform: scale(1.08);
}

.client-icon-college {
    background: transparent !important;
    border-radius: 18px !important;
    overflow: hidden;
    width: 72px;
    height: 72px;
}

.client-icon-college img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 18px;
    transition: var(--transition);
}

.client-card:hover .client-icon-college img {
    transform: scale(1.08);
}

.client-name-ar {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.5;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.client-name-en {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-light, #888);
    line-height: 1.5;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

html[data-theme="dark"] .client-card {
    background: var(--color-white);
    border-color: rgba(106, 173, 238, 0.12);
}

html[data-theme="dark"] .badge-gov  { background: rgba(0,66,130,0.30); color: #89c2f5; }
html[data-theme="dark"] .badge-auth { background: rgba(10,122,101,0.25); color: #4ecdb4; }
html[data-theme="dark"] .badge-edu  { background: rgba(107,53,197,0.25); color: #c39ef7; }
html[data-theme="dark"] .badge-priv { background: rgba(200,98,10,0.25); color: #f3a45e; }

html[data-theme="dark"] .client-name-en {
    color: #8899aa;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-section {
    background: linear-gradient(180deg, var(--color-white), var(--color-light));
}

.faq-grid {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1.5px solid rgba(0, 66, 130, 0.08);
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
    border-color: rgba(0, 66, 130, 0.15);
    box-shadow: 0 5px 20px rgba(0, 66, 130, 0.06);
}

.faq-item.active {
    border-color: var(--color-secondary);
    box-shadow: 0 8px 25px rgba(243, 130, 26, 0.1);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: right;
    gap: 15px;
    transition: var(--transition);
}

html[dir="ltr"] .faq-question {
    text-align: left;
}

.faq-question:hover {
    color: var(--color-secondary);
}

.faq-question i {
    font-size: 0.85rem;
    color: var(--color-secondary);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary-light);
    border-radius: 50%;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    background: var(--color-secondary);
    color: var(--color-white);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 28px;
}

.faq-item.active .faq-answer {
    max-height: 250px;
    padding: 0 28px 22px;
}

.faq-answer p {
    color: var(--color-gray);
    line-height: 1.9;
    font-size: 0.98rem;
    border-top: 1px solid rgba(0, 66, 130, 0.06);
    padding-top: 18px;
}

/* ==========================================================================
   Gallery Section
   ========================================================================== */
.gallery-section {
    background: var(--color-white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-item.tall {
    grid-row: span 2;
}

.gallery-item.wide {
    grid-column: span 2;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 66, 130, 0.7), rgba(243, 130, 26, 0.5));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: var(--transition);
    color: var(--color-white);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 66, 130, 0.2);
}

.gallery-overlay i {
    font-size: 2.5rem;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-overlay i {
    transform: translateY(0);
}

.gallery-overlay span {
    font-size: 1.1rem;
    font-weight: 700;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}

.gallery-item:hover .gallery-overlay span {
    transform: translateY(0);
}

/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-section {
    background: var(--color-light);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
}

.contact-form-wrapper {
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.contact-form label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
}

.contact-form .input-with-icon input,
.contact-form .input-with-icon select {
    width: 100%;
    padding: 14px 45px 14px 15px;
    border: 1.5px solid #e1e8ed;
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
    background-color: #fcfdfe;
    outline: none;
}

html[dir="ltr"] .contact-form .input-with-icon input,
html[dir="ltr"] .contact-form .input-with-icon select {
    padding: 14px 15px 14px 45px;
}

.contact-form .input-with-icon input:focus,
.contact-form .input-with-icon select:focus,
.contact-form textarea:focus {
    border-color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(0, 66, 130, 0.1);
}

.contact-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #e1e8ed;
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 120px;
    transition: var(--transition);
    background-color: #fcfdfe;
    outline: none;
}

.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: var(--transition);
    border: 1px solid rgba(0, 66, 130, 0.05);
}

.contact-info-card:hover {
    transform: translateX(-5px);
    box-shadow: 0 8px 25px rgba(0, 66, 130, 0.08);
    border-color: var(--color-secondary);
}

html[dir="ltr"] .contact-info-card:hover {
    transform: translateX(5px);
}

.info-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: var(--color-white);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.contact-info-card h4 {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 1rem;
}

.contact-info-card p {
    color: var(--color-gray);
    font-size: 0.9rem;
}

.contact-info-card a {
    color: var(--color-gray);
    transition: var(--transition);
}

.contact-info-card a:hover {
    color: var(--color-secondary);
}

.map-container {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    border: 3px solid var(--color-white);
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */
.cta-banner {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light));
    padding: 80px 0;
    overflow: hidden;
}

.cta-pattern {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.cta-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    color: var(--color-white);
}

.cta-text h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.cta-text p {
    font-size: 1.15rem;
    opacity: 0.85;
    max-width: 500px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
    .quick-booking-form {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-booking-form .btn {
        grid-column: span 2;
    }
    .offers-grid {
        grid-template-columns: 1fr 1fr;
    }
    .offers-grid .offer-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cta-content {
        flex-direction: column;
        text-align: center;
    }
    .cta-text p {
        max-width: 100%;
    }
    .cta-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    font-weight: 700;
    z-index: 10010;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   Testimonials Carousel
   ========================================================================== */
.testimonials-carousel {
    position: relative;
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonials-track .testimonial-card {
    min-width: 100%;
    padding: 35px;
    box-sizing: border-box;
}

.testimonials-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
}

.testimonial-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.testimonial-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.testimonials-dots {
    display: flex;
    gap: 10px;
}

.testimonials-dots .t-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 66, 130, 0.2);
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.testimonials-dots .t-dot.active {
    background: var(--color-secondary);
    width: 30px;
    border-radius: 6px;
}

@media (min-width: 769px) {
    .testimonials-track .testimonial-card {
        min-width: 33.333%;
    }
}

/* ==========================================================================
   Fleet Controls & Sorting
   ========================================================================== */
.fleet-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.fleet-view-options {
    display: flex;
    gap: 8px;
}

.sort-btn {
    padding: 8px 16px;
    border-radius: var(--border-radius-pill);
    border: 2px solid #e1e8ed;
    background: var(--color-white);
    color: var(--color-gray);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sort-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sort-btn.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ==========================================================================
   Form Validation Styles
   ========================================================================== */
.form-group.success .input-with-icon input,
.form-group.success .input-with-icon select,
.form-group.success textarea {
    border-color: #25d366;
}

.form-group.error .input-with-icon input,
.form-group.error .input-with-icon select,
.form-group.error textarea {
    border-color: #e53e3e;
    animation: shake 0.4s ease;
}

.form-error-msg {
    color: #e53e3e;
    font-size: 0.8rem;
    margin-top: 5px;
    font-weight: 600;
    display: none;
}

.form-group.error .form-error-msg {
    display: block;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* ==========================================================================
   Enhanced Scroll Reveal Animations
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.slide-right {
    transform: translateX(-40px);
}

.animate-on-scroll.slide-right.visible {
    transform: translateX(0);
}

.animate-on-scroll.slide-left {
    transform: translateX(40px);
}

.animate-on-scroll.slide-left.visible {
    transform: translateX(0);
}

.animate-on-scroll.scale-in {
    transform: scale(0.85);
}

.animate-on-scroll.scale-in.visible {
    transform: scale(1);
}

/* ==========================================================================
   Print Stylesheet
   ========================================================================== */
@media print {
    .navbar, .reading-progress, .loader, .whatsapp-float, .back-to-top,
    .cookie-banner, .toast-container, .lightbox, .slider-controls,
    .quick-booking-container, .cta-banner, .dark-mode-btn, .mobile-menu-btn,
    #langToggle, .testimonials-controls, .fleet-view-options {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000 !important;
        background: #fff !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .hero {
        height: auto !important;
        min-height: auto !important;
        padding: 30px 0 !important;
    }

    .section {
        padding: 20px 0 !important;
        page-break-inside: avoid;
    }

    a[href^="tel:"]::after { content: " (" attr(href) ")"; }
    a[href^="mailto:"]::after { content: " (" attr(href) ")"; }

    .car-card, .offer-card, .service-card, .testimonial-card {
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }

    .footer {
        background: #333 !important;
    }

    .fleet-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .testimonials-track {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .testimonials-track .testimonial-card {
        min-width: 100% !important;
    }
}

/* شاشات الديسك توب المتوسطة — حماية الشعار من التزاحم مع روابط التنقل */
@media (min-width: 993px) and (max-width: 1400px) {
    .logo img {
        height: 80px;
    }
    .navbar.scrolled .logo img {
        height: 55px;
    }
    .nav-links {
        gap: 10px;
    }
    .nav-links a {
        font-size: 0.82rem;
    }
}

@media (max-width: 992px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        padding: 80px 30px 30px;
        gap: 0;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        transform: translateX(100%);
        transition: transform 0.4s ease;
    }

    html[dir="ltr"] .nav-links {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }

    .nav-links.open {
        display: flex;
        transform: translateX(0);
    }

    .nav-links a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 1.1rem;
    }
    
    .nav-actions .btn-primary {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }

    .quick-booking-form {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .quick-booking-form .btn {
        grid-column: span 1;
    }
    .quick-booking-container {
        position: relative;
        bottom: 0;
        transform: none;
        left: 0;
        width: 100%;
        margin-top: -50px;
    }
    .hero {
        height: auto;
        padding-bottom: 50px;
    }
    .slide {
        min-height: 500px;
    }

    .slider-controls {
        bottom: 80px;
    }

    .fleet-filters {
        flex-wrap: wrap;
    }

    .fleet-grid {
        grid-template-columns: 1fr;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-content .section-title {
        text-align: center !important;
    }

    .about-content .title-underline {
        margin: 0 auto !important;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .process-steps::before {
        display: none;
    }

    .offers-grid {
        grid-template-columns: 1fr;
    }
    .offers-grid .offer-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .countdown-timer {
        padding: 15px 20px;
        gap: 8px;
    }

    .countdown-number {
        font-size: 1.8rem;
    }

    .testimonials-track .testimonial-card {
        min-width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stat-number {
        font-size: 2.2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        text-align: center;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }

    .gallery-item.tall,
    .gallery-item.wide {
        grid-column: span 1;
        grid-row: span 1;
    }

    .whatsapp-float span {
        display: none;
    }

    .whatsapp-float {
        padding: 14px;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .section {
        padding: 60px 0;
    }
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast-container {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-radius: var(--border-radius-md);
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    animation: toastSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    min-width: 300px;
    max-width: 500px;
    backdrop-filter: blur(10px);
}

.toast.toast-success {
    background: linear-gradient(135deg, #25d366, #128C7E);
}

.toast.toast-error {
    background: linear-gradient(135deg, #e53e3e, #c53030);
}

.toast.toast-info {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

.toast i {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.toast.toast-hide {
    animation: toastSlideOut 0.4s ease forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-30px) scale(0.9); }
}

/* ==========================================================================
   Gallery Lightbox
   ========================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(8px);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    max-width: 85vw;
    max-height: 85vh;
    position: relative;
    text-align: center;
}

.lightbox-image {
    width: 80vw;
    height: 70vh;
    max-width: 1000px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-lg);
    transition: all 0.4s ease;
    transform: scale(0.9);
}

.lightbox.active .lightbox-image {
    transform: scale(1);
}

.lightbox-caption {
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 20px;
    opacity: 0.9;
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    font-size: 1.3rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.lightbox-close:hover {
    background: #e53e3e;
    border-color: #e53e3e;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.lightbox-nav:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.lightbox-prev { left: 25px; }
.lightbox-next { right: 25px; }

html[dir="ltr"] .lightbox-prev i { transform: scaleX(-1); }
html[dir="ltr"] .lightbox-next i { transform: scaleX(-1); }

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding: 20px 30px;
    z-index: 10000;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cookie-banner.visible {
    transform: translateY(0);
}

.cookie-banner.hidden {
    transform: translateY(100%);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cookie-icon {
    font-size: 2rem;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.cookie-content p {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
}

.cookie-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-small {
    padding: 10px 22px;
    font-size: 0.9rem;
}

.btn-outline-dark {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    
    .fleet-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .fleet-view-options {
        justify-content: center;
    }
    
    .testimonials-controls {
        gap: 12px;
    }
    
    .testimonial-btn {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   PROFESSIONAL ENHANCEMENTS
   ========================================================================== */

/* ==========================================================================
   SVG Wave Section Dividers
   ========================================================================== */
.wave-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -2px;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 80px;
}

.wave-stats-about svg path {
    fill: var(--color-white);
}

.wave-offers-booking svg path {
    fill: var(--color-white);
}

.wave-services-cta svg path {
    fill: var(--color-primary-dark);
}

/* ==========================================================================
   Trust / Social Proof Bar
   ========================================================================== */
.trust-bar {
    padding: 30px 0;
    background: var(--color-white);
    border-bottom: 1px solid rgba(0, 66, 130, 0.06);
}

.trust-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.trust-bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    padding: 16px 20px;
    border-radius: var(--border-radius-md);
    background: var(--color-light);
    transition: var(--transition);
    border: 1px solid transparent;
}

.trust-bar-item:hover {
    border-color: var(--color-secondary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 66, 130, 0.08);
}

.trust-bar-item i {
    font-size: 1.8rem;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.trust-bar-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
}

.trust-bar-item span {
    font-size: 0.8rem;
    color: var(--color-gray);
}

/* ==========================================================================
   Section Number Labels
   ========================================================================== */
.section-number {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(0, 66, 130, 0.08), rgba(243, 130, 26, 0.08));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -2px;
}

/* ==========================================================================
   Hero Badge
   ========================================================================== */
.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 28px;
    border-radius: var(--border-radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 24px;
    animation: fadeUp 1s ease 0.1s both;
}

html[lang="en"] .hero-badge {
    letter-spacing: 0.5px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 1s ease 0.7s both;
}

.hero-buttons .btn {
    animation: none;
}

.hero-secondary-btn {
    backdrop-filter: blur(5px);
}

/* ==========================================================================
   Glassmorphism Booking Widget
   ========================================================================== */
.quick-booking-form {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .quick-booking-form {
    background: rgba(30, 37, 69, 0.92);
    backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Button Ripple Effect
   ========================================================================== */
.btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.6s;
}

.btn:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

/* ==========================================================================
   Professional Card Hover Effects
   ========================================================================== */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(243, 130, 26, 0.04), transparent);
    transition: left 0.6s ease;
}

.service-card:hover::before {
    left: 100%;
}

.step-card {
    position: relative;
    overflow: hidden;
}

.step-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

html[dir="rtl"] .step-card::after {
    transform-origin: right;
}

.step-card:hover::after {
    transform: scaleX(1);
}

/* ==========================================================================
   Enhanced Section Title Animations
   ========================================================================== */
.title-underline {
    position: relative;
    overflow: hidden;
}

.title-underline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer-underline 3s ease-in-out infinite;
}

@keyframes shimmer-underline {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* ==========================================================================
   Footer Trust Badges
   ========================================================================== */
.footer-trust {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px 0;
}

.footer-trust-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
}

.footer-trust-item:hover {
    color: var(--color-white);
}

.footer-trust-item i {
    font-size: 1.3rem;
    color: var(--color-secondary);
}

/* ==========================================================================
   Floating Decorations
   ========================================================================== */
.fleet-section-decor {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 66, 130, 0.06);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Enhanced Stats Section
   ========================================================================== */
.stat-item {
    position: relative;
}

.stat-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px;
    opacity: 0;
    transition: var(--transition);
}

.stat-item:hover::after {
    opacity: 1;
}

.stat-item:hover .stat-icon {
    transform: scale(1.15);
    transition: transform 0.3s ease;
}

.stat-icon {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Enhanced Process Steps Connector
   ========================================================================== */
.process-steps .step-card .step-number {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--color-secondary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    z-index: 2;
}

/* ==========================================================================
   Professional Scrollbar Enhancement
   ========================================================================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-light);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
    border-radius: 5px;
    border: 2px solid var(--color-light);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-secondary));
}

/* ==========================================================================
   Image Shimmer Loading
   ========================================================================== */
.car-image {
    background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 400% 400%;
    animation: image-shimmer 1.5s ease infinite;
}

.car-image img[src] {
    animation: none;
}

@keyframes image-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.car-card:hover .car-image {
    animation: none;
}

/* ==========================================================================
   Professional Nav Enhancement
   ========================================================================== */
.navbar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    padding: 6px 0;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.97);
}

html[data-theme="dark"] .navbar.scrolled {
    background-color: rgba(26, 26, 46, 0.97);
}

.navbar.scrolled .logo img {
    height: 65px;
}

.navbar.scrolled .logo-text strong {
    font-size: 1.3rem;
}

.navbar.scrolled .logo-text small {
    font-size: 0.72rem;
}

/* ==========================================================================
   Selection Enhancement
   ========================================================================== */
::selection {
    background: rgba(0, 66, 130, 0.15);
    color: var(--color-primary-dark);
}

/* ==========================================================================
   Enhanced About Section
   ========================================================================== */
.about-img-wrapper::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 100px;
    height: 100px;
    border-top: 4px solid var(--color-secondary);
    border-right: 4px solid var(--color-secondary);
    border-radius: 0 var(--border-radius-md) 0 0;
    z-index: -1;
}

html[dir="ltr"] .about-img-wrapper::before {
    right: auto;
    left: -10px;
    border-right: none;
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--border-radius-md) 0 0 0;
}

.about-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 100px;
    height: 100px;
    border-bottom: 4px solid var(--color-primary);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 0 0 var(--border-radius-md);
    z-index: -1;
}

html[dir="ltr"] .about-img-wrapper::after {
    left: auto;
    right: -10px;
    border-left: none;
    border-right: 4px solid var(--color-primary);
    border-radius: 0 0 var(--border-radius-md) 0;
}

.about-img-wrapper {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Enhanced Offer Cards
   ========================================================================== */
.offer-card {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.offer-card:hover .offer-icon {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s ease;
}

.offer-icon {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   Enhanced Partners Section
   ========================================================================== */
.partner-logo {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.partner-logo:hover {
    box-shadow: 0 15px 40px rgba(0, 66, 130, 0.12);
}

/* ==========================================================================
   CTA Banner Enhancement
   ========================================================================== */
.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    border: 2px dashed rgba(255, 140, 0, 0.1);
    border-radius: 50%;
    animation: rotate 25s linear infinite reverse;
    pointer-events: none;
}

/* ==========================================================================
   Enhanced Gallery Hover
   ========================================================================== */
.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent 50%);
    z-index: 1;
    pointer-events: none;
}

.gallery-overlay {
    z-index: 2;
}

/* ==========================================================================
   Smooth Focus Styles (Accessibility)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* ==========================================================================
   Professional Dark Mode — NEW Elements
   ========================================================================== */
html[data-theme="dark"] .wave-stats-about svg path {
    fill: #1a1a2e;
}

html[data-theme="dark"] .wave-offers-booking svg path {
    fill: #1a1a2e;
}

html[data-theme="dark"] .wave-services-cta svg path {
    fill: #0d0d1f;
}

html[data-theme="dark"] .trust-bar {
    background: #1a1a2e;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .trust-bar-item {
    background: #1e2545;
}

html[data-theme="dark"] .trust-bar-item strong {
    color: #f0f4ff;
}

html[data-theme="dark"] .trust-bar-item span {
    color: #c8cdd8;
}

html[data-theme="dark"] .section-number {
    background: linear-gradient(135deg, rgba(106, 173, 238, 0.15), rgba(243, 130, 26, 0.15));
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="dark"] .hero-badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .footer-trust {
    border-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .about-img-wrapper::before {
    border-color: var(--color-secondary);
    opacity: 0.5;
}

html[data-theme="dark"] .about-img-wrapper::after {
    border-color: #4a90d9;
    opacity: 0.5;
}

html[data-theme="dark"] .car-image {
    background: linear-gradient(-90deg, #1e2545 0%, #16213e 50%, #1e2545 100%);
    background-size: 400% 400%;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3a4568, #4a5880);
    border-color: #1a1a2e;
}

/* ==========================================================================
   Responsive — NEW Elements
   ========================================================================== */
@media (max-width: 1024px) {
    .trust-bar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .wave-divider svg {
        height: 50px;
    }

    .hero-badge {
        font-size: 0.85rem;
        padding: 8px 20px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .section-number {
        font-size: 2.5rem;
    }

    .footer-trust-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .trust-bar-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .trust-bar-item {
        padding: 12px 14px;
    }

    .trust-bar-item i {
        font-size: 1.4rem;
    }

    .trust-bar-item strong {
        font-size: 0.9rem;
    }

    .footer-trust-grid {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .trust-bar-grid {
        grid-template-columns: 1fr;
    }

    .wave-divider svg {
        height: 35px;
    }

    .logo-text strong {
        font-size: 1.3rem;
    }

    .logo-text small {
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   QATAR LANDMARK BACKGROUNDS
   ========================================================================== */
.car-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.5s ease;
}

.car-image::after {
    z-index: 2;
}

.car-card:hover .car-image::before {
    opacity: 0.9;
}

/* Doha West Bay Skyline */
.car-card:nth-child(3n+1) .car-image::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 V45 H12 V30 H16 V15 L18,8 L20,15 V30 H24 V45 H35 V38 H39 V22 L41,16 L43,22 V38 H47 V45 H58 V35 H62 V18 L64,10 L66,18 V35 H70 V45 H80 V40 H84 V25 L86,18 L88,25 V40 H92 V45 H102 V38 H106 V20 L108,12 L110,20 V38 H114 V45 H125 V40 H129 V28 L131,22 L133,28 V40 H137 V45 H148 V42 H152 V32 H156 V42 H160 V45 H172 V42 H180 V38 H184 V42 H188 V48 H200 V60Z' fill='%23fff' fill-opacity='0.18'/%3E%3C/svg%3E") no-repeat bottom center / 100% 45%,
        linear-gradient(to top, rgba(0,42,82,0.55) 0%, rgba(0,42,82,0.15) 50%, transparent 70%),
        linear-gradient(to bottom, rgba(243,130,26,0.1) 0%, transparent 25%);
}

/* Desert Sand Dunes */
.car-card:nth-child(3n+2) .car-image::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C0,42 20,38 40,44 C60,50 75,30 95,36 C115,42 130,28 150,32 C170,36 185,40 200,38 V60Z' fill='%23fff' fill-opacity='0.14'/%3E%3Cpath d='M0,60 C0,50 25,46 50,50 C75,54 90,42 110,46 C130,50 155,44 175,48 C190,52 200,48 200,48 V60Z' fill='%23fff' fill-opacity='0.1'/%3E%3C/svg%3E") no-repeat bottom center / 100% 50%,
        linear-gradient(to top, rgba(180,120,40,0.5) 0%, rgba(140,90,30,0.12) 50%, transparent 70%),
        linear-gradient(to bottom, rgba(255,170,50,0.08) 0%, transparent 25%);
}

/* Islamic Architecture - Mosques & Minarets */
.car-card:nth-child(3n) .car-image::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 V48 H25 V42 H30 C30,30 37,22 45,20 C53,22 60,30 60,42 H65 V48 H75 V38 H77 V14 L79,6 L81,14 V38 H83 V48 H95 V42 H100 C100,30 107,22 115,20 C123,22 130,30 130,42 H135 V48 H145 V38 H147 V16 L149,8 L151,16 V38 H153 V48 H165 V42 H170 V48 H200 V60Z' fill='%23fff' fill-opacity='0.16'/%3E%3C/svg%3E") no-repeat bottom center / 100% 45%,
        linear-gradient(to top, rgba(0,50,90,0.5) 0%, rgba(0,50,90,0.12) 50%, transparent 70%),
        linear-gradient(to bottom, rgba(200,160,80,0.08) 0%, transparent 25%);
}

/* Qatar Backgrounds Dark Mode */
[data-theme="dark"] .car-card:nth-child(3n+1) .car-image::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 V45 H12 V30 H16 V15 L18,8 L20,15 V30 H24 V45 H35 V38 H39 V22 L41,16 L43,22 V38 H47 V45 H58 V35 H62 V18 L64,10 L66,18 V35 H70 V45 H80 V40 H84 V25 L86,18 L88,25 V40 H92 V45 H102 V38 H106 V20 L108,12 L110,20 V38 H114 V45 H125 V40 H129 V28 L131,22 L133,28 V40 H137 V45 H148 V42 H152 V32 H156 V42 H160 V45 H172 V42 H180 V38 H184 V42 H188 V48 H200 V60Z' fill='%23fff' fill-opacity='0.1'/%3E%3C/svg%3E") no-repeat bottom center / 100% 45%,
        linear-gradient(to top, rgba(0,30,60,0.7) 0%, rgba(0,30,60,0.2) 50%, transparent 70%),
        linear-gradient(to bottom, rgba(106,173,238,0.06) 0%, transparent 25%);
}
[data-theme="dark"] .car-card:nth-child(3n+2) .car-image::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C0,42 20,38 40,44 C60,50 75,30 95,36 C115,42 130,28 150,32 C170,36 185,40 200,38 V60Z' fill='%23fff' fill-opacity='0.08'/%3E%3Cpath d='M0,60 C0,50 25,46 50,50 C75,54 90,42 110,46 C130,50 155,44 175,48 C190,52 200,48 200,48 V60Z' fill='%23fff' fill-opacity='0.06'/%3E%3C/svg%3E") no-repeat bottom center / 100% 50%,
        linear-gradient(to top, rgba(120,80,20,0.6) 0%, rgba(100,70,20,0.15) 50%, transparent 70%),
        linear-gradient(to bottom, rgba(200,150,50,0.05) 0%, transparent 25%);
}
[data-theme="dark"] .car-card:nth-child(3n) .car-image::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 V48 H25 V42 H30 C30,30 37,22 45,20 C53,22 60,30 60,42 H65 V48 H75 V38 H77 V14 L79,6 L81,14 V38 H83 V48 H95 V42 H100 C100,30 107,22 115,20 C123,22 130,30 130,42 H135 V48 H145 V38 H147 V16 L149,8 L151,16 V38 H153 V48 H165 V42 H170 V48 H200 V60Z' fill='%23fff' fill-opacity='0.08'/%3E%3C/svg%3E") no-repeat bottom center / 100% 45%,
        linear-gradient(to top, rgba(0,35,70,0.65) 0%, rgba(0,35,70,0.15) 50%, transparent 70%),
        linear-gradient(to bottom, rgba(160,130,60,0.05) 0%, transparent 25%);
}

/* ==========================================================================
   LOYALTY CARD SECTION
   ========================================================================== */
.loyalty-section {
    background: linear-gradient(160deg, #0a1829 0%, #003366 50%, #004282 100%);
    position: relative;
    overflow: hidden;
    color: var(--color-white);
}

.loyalty-section::before {
    content: '';
    position: absolute;
    top: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(243,130,26,0.12) 0%, transparent 65%);
    pointer-events: none;
}

.loyalty-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 65%);
    pointer-events: none;
}

.loyalty-section .section-title h2 {
    color: var(--color-white);
}

.loyalty-section .section-subtitle {
    color: rgba(255,255,255,0.7);
}

.loyalty-section .title-underline {
    background: linear-gradient(90deg, var(--color-secondary), #ffab40);
}

.loyalty-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ---- Card Visual ---- */
.loyalty-card-visual {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: start;
}

.lc-card {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1.586;
    background: linear-gradient(135deg, #c6a84b 0%, #f5d27e 35%, #c6a84b 60%, #a07a28 100%);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.15);
    cursor: default;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
}

.lc-card:hover {
    transform: perspective(800px) rotateY(-5deg) rotateX(3deg) scale(1.03);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.2);
}

.lc-card-bg {
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ccircle cx='260' cy='30' r='100' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='50' cy='270' r='130' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") no-repeat center / cover;
    pointer-events: none;
}

.lc-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    pointer-events: none;
    animation: cardShine 4s ease-in-out infinite;
}

@keyframes cardShine {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 1; transform: translateX(100%); }
}

.lc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.lc-card-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 700;
}

.lc-card-logo i {
    font-size: 1.4rem;
    color: #fff8dc;
}

.lc-card-tier {
    background: rgba(0,0,0,0.25);
    color: #fff8dc;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid rgba(255,248,220,0.4);
}

html[lang="en"] .lc-card-tier {
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lc-card-chip {
    width: 44px;
    height: 34px;
    background: linear-gradient(135deg, #e8c96a, #c8a840);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.lc-chip-inner {
    width: 30px;
    height: 22px;
    border: 1.5px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    background: linear-gradient(135deg, #f5d27e, #c8a840);
}

.lc-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-card-number {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    letter-spacing: 3px;
}

.lc-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-white);
}

html[lang="en"] .lc-card-name {
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lc-card-footer > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-card-footer small {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
}

html[lang="en"] .lc-card-footer small {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-card-footer strong {
    font-size: 0.9rem;
    color: var(--color-white);
}

.lc-card-company {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-white);
}

.lc-card-company span {
    font-family: 'Cairo', sans-serif;
}

.lc-card-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    opacity: 0.3;
}

.lc-card-dots span {
    width: 6px;
    height: 6px;
    background: var(--color-white);
    border-radius: 50%;
}

/* Points Display */
.lc-points-display {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--border-radius-md);
    padding: 20px 22px;
    backdrop-filter: blur(10px);
}

.lc-points-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-white);
}

.lc-points-item i {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.lc-points-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-white);
}

.lc-points-item span {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

/* ---- Benefits ---- */
.loyalty-benefits-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.loyalty-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 30px;
}

.lb-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--border-radius-md);
    padding: 16px;
    transition: var(--transition);
}

.lb-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(243,130,26,0.4);
    transform: translateY(-3px);
}

.lb-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(243,130,26,0.25), rgba(255,171,64,0.15));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffab40;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid rgba(243,130,26,0.25);
}

.lb-text strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 3px;
}

.lb-text span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
}

/* CTA */
.loyalty-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(243,130,26,0.1);
    border: 1px solid rgba(243,130,26,0.3);
    border-radius: var(--border-radius-md);
    padding: 20px 24px;
    margin-top: 8px;
}

.loyalty-cta p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
}

.loyalty-cta .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .loyalty-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .loyalty-card-visual {
        position: static;
    }
    .lc-card {
        max-width: 380px;
    }
}

@media (max-width: 600px) {
    .loyalty-benefits-grid {
        grid-template-columns: 1fr;
    }
    .loyalty-cta {
        flex-direction: column;
        text-align: center;
    }
}


/* ==========================================================================
   REFERRAL MODAL (IMPROVED)
   ========================================================================== */
.ref-modal {
    max-width: 600px;
    padding: 0;
    overflow: hidden;
}
.ref-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 0 10px 0;
    padding: 0 30px;
}
.ref-progress-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0f7e9;
    color: #27ae60;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    border: 2px solid #27ae60;
    transition: background 0.3s, color 0.3s;
    z-index: 1;
}
.ref-progress-step.ref-progress-active {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
}
.ref-progress-line {
    flex: 1;
    height: 4px;
    background: #e0f7e9;
    margin: 0 -4px;
    border-radius: 2px;
}
.ref-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 30px 20px;
    background: linear-gradient(135deg, #0d3b1e, #1a7a3c);
    color: #fff;
}
.ref-header-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(46,204,113,0.4);
    animation: refIconPulse 2s infinite alternate;
}
.ref-header-icon.animated {
    animation: refIconPulse 1.5s infinite alternate;
}
@keyframes refIconPulse {
    0% { box-shadow: 0 4px 14px rgba(46,204,113,0.4); }
    100% { box-shadow: 0 0 32px 8px #2ecc7144; }
}
.ref-header h2 {
    margin: 0;
    font-size: 1.35rem;
    color: #fff;
}
.ref-header p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}
.ref-reward-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, #f0fff4, #dcfce7);
    border-bottom: 1px solid #bbf7d0;
    padding: 18px 30px;
    flex-wrap: wrap;
}
.ref-shadow {
    box-shadow: 0 6px 24px rgba(39,174,96,0.08);
}
.ref-reward-item {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: refRewardBounce 1.8s infinite alternate;
}
.ref-reward-item.animated {
    animation: refRewardBounce 1.8s infinite alternate;
}
@keyframes refRewardBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}
.ref-reward-item i {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ref-reward-item strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #155724;
}
.ref-reward-item span {
    font-size: 0.8rem;
    color: #276749;
}
.ref-reward-plus {
    font-size: 2rem;
    font-weight: 900;
    color: #27ae60;
    line-height: 1;
}
.ref-link-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fff4;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 8px 18px;
    margin: 12px 30px 0 30px;
    position: relative;
}
.ref-link-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    color: #155724;
    font-weight: 600;
    outline: none;
}
.btn-copy {
    font-size: 0.92rem;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-copy:hover {
    background: linear-gradient(135deg, #128c7e, #25d366);
}
.ref-copy-success {
    color: #27ae60;
    font-size: 0.9rem;
    font-weight: 700;
    margin-right: 10px;
}
.ref-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 20px 30px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ref-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 30px;
}
.ref-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ref-step-num {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.ref-step strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 2px;
}
.ref-step span {
    font-size: 0.8rem;
    color: #666;
}
.ref-terms-box {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--border-radius-md);
    padding: 16px 20px;
    margin: 16px 30px 0;
}
.ref-terms-box h4 {
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ref-terms-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ref-terms-box ul li {
    font-size: 0.82rem;
    color: #555;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.5;
    position: relative;
    padding-right: 16px;
}
.ref-terms-box ul li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: #27ae60;
    font-weight: 700;
}
html[dir="ltr"] .ref-terms-box ul li {
    padding-right: 0;
    padding-left: 16px;
}
html[dir="ltr"] .ref-terms-box ul li::before {
    right: auto;
    left: 0;
}
.ref-terms-box ul li:last-child {
    border-bottom: none;
}
.ref-form {
    padding: 0 30px 30px;
}
.ref-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.ref-form .bm-form-group {
    margin-bottom: 12px;
}
.ref-form .bm-form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-dark);
}
.ref-form .bm-form-group input,
.ref-form .bm-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
    background: #fff;
    box-sizing: border-box;
}
.ref-form .bm-form-group input:focus,
.ref-form .bm-form-group textarea:focus {
    outline: none;
    border-color: #27ae60;
    box-shadow: 0 0 0 3px rgba(39,174,96,0.1);
}
.ref-divider {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #27ae60;
    background: #f0fff4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 5px 16px;
    margin: 6px auto 12px;
    width: fit-content;
}
.ref-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border: none;
    margin-top: 6px;
}
.ref-submit-btn:hover {
    background: linear-gradient(135deg, #128c7e, #075e54);
    transform: translateY(-2px);
}
.ref-success-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 30px;
    text-align: center;
}
.ref-success-icon {
    font-size: 3.2rem;
    color: #27ae60;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .ref-form-row {
        grid-template-columns: 1fr;
    }
    .ref-steps,
    .ref-form {
        padding-left: 12px;
        padding-right: 12px;
    }
    .ref-section-title {
        margin-left: 12px;
        margin-right: 12px;
    }
    .ref-terms-box {
        margin-left: 8px;
        margin-right: 8px;
    }
    .ref-header {
        padding: 16px 8px 12px;
    }
    .ref-reward-banner {
        padding: 10px 8px;
    }
    .ref-link-box {
        margin-left: 8px;
        margin-right: 8px;
        padding: 6px 8px;
    }
}

/* ==========================================================================
   LOYALTY MODAL
   ========================================================================== */
.lm-modal {
    max-width: 780px;
    padding: 0;
    overflow: hidden;
}

.lm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px 20px;
    background: linear-gradient(135deg, #003366, #004282);
    color: #fff;
}

.lm-header-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #c6a84b, #f5d27e);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #003366;
    flex-shrink: 0;
}

.lm-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
}

.lm-header p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

/* Tabs */
.lm-tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f5;
    background: #fafafa;
    padding: 0 32px;
    gap: 4px;
}

.lm-tab {
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.25s ease;
    font-family: inherit;
}

.lm-tab:hover {
    color: var(--color-primary);
}

.lm-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Tab Content */
.lm-tab-content {
    display: none;
    padding: 28px 32px 32px;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

.lm-tab-content.active {
    display: block;
}

.lm-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lm-section-title:first-child {
    margin-top: 0;
}

/* Info Box */
.lm-info-box {
    background: linear-gradient(135deg, #f0f6ff, #e8f0ff);
    border: 1px solid #c5d8ff;
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin-bottom: 24px;
}

.lm-info-box h4 {
    margin: 0 0 14px;
    color: var(--color-primary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lm-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lm-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.lm-step-num {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.lm-step strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.lm-step span {
    font-size: 0.8rem;
    color: #666;
}

/* Tiers */
.lm-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.lm-tier {
    border-radius: var(--border-radius-md);
    padding: 18px 16px;
    border: 2px solid transparent;
}

.lm-tier ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lm-tier ul li {
    font-size: 0.8rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    color: #444;
    position: relative;
    padding-right: 16px;
}

.lm-tier ul li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: #27ae60;
    font-weight: 700;
}

html[dir="ltr"] .lm-tier ul li {
    padding-right: 0;
    padding-left: 16px;
}

html[dir="ltr"] .lm-tier ul li::before {
    right: auto;
    left: 0;
}

.lm-tier-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.lm-tier-silver {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-color: #adb5bd;
}

.lm-tier-silver .lm-tier-badge {
    color: #6c757d;
}

.lm-tier-gold {
    background: linear-gradient(135deg, #fffbf0, #fff3cd);
    border-color: #c6a84b;
    box-shadow: 0 4px 16px rgba(198,168,75,0.15);
    position: relative;
}

.lm-tier-gold::after {
    content: 'الأكثر شيوعاً';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

html[dir="ltr"] .lm-tier-gold::after {
    content: 'Most Popular';
}

.lm-tier-gold .lm-tier-badge {
    color: #c6a84b;
}

.lm-tier-platinum {
    background: linear-gradient(135deg, #f3f0ff, #e8e3ff);
    border-color: #6f42c1;
}

.lm-tier-platinum .lm-tier-badge {
    color: #6f42c1;
}

/* Points System */
.lm-points-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.lm-point-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius-sm);
    padding: 14px 10px;
    text-align: center;
}

.lm-point-item strong {
    display: block;
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 800;
}

.lm-point-item strong span {
    font-size: 0.75rem;
    font-weight: 600;
}

.lm-point-item > span {
    display: block;
    font-size: 0.75rem;
    color: #666;
    margin-top: 4px;
}

/* Terms */
.lm-terms-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lm-terms-section {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--border-radius-md);
    padding: 18px 20px;
}

.lm-terms-section h4 {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lm-terms-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lm-terms-section ul li {
    padding: 7px 0;
    font-size: 0.85rem;
    color: #444;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
    position: relative;
    padding-right: 20px;
}

.lm-terms-section ul li::before {
    content: '•';
    position: absolute;
    right: 0;
    color: var(--color-secondary);
    font-size: 1.2rem;
    line-height: 1;
}

html[dir="ltr"] .lm-terms-section ul li {
    padding-right: 0;
    padding-left: 20px;
}

html[dir="ltr"] .lm-terms-section ul li::before {
    right: auto;
    left: 0;
}

.lm-terms-section ul li:last-child {
    border-bottom: none;
}

/* Request Form */
.lm-request-intro {
    background: linear-gradient(135deg, #fff8e6, #fff3cd);
    border: 1px solid #ffc857;
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    font-size: 0.88rem;
    color: #856404;
    margin-bottom: 20px;
}

.lm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lm-form .bm-form-group {
    margin-bottom: 14px;
}

.lm-form .bm-form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-dark);
}

.lm-form .bm-form-group input,
.lm-form .bm-form-group select,
.lm-form .bm-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
    background: #fff;
    box-sizing: border-box;
}

.lm-form .bm-form-group input:focus,
.lm-form .bm-form-group select:focus,
.lm-form .bm-form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 66, 130, 0.1);
}

.lm-terms-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 20px;
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
}

.lm-terms-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.lm-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border: none;
}

.lm-submit-btn:hover {
    background: linear-gradient(135deg, #128c7e, #075e54);
    transform: translateY(-2px);
}

/* Dark Mode */
[data-theme="dark"] .lm-tabs {
    background: #1e2a3a;
    border-bottom-color: #2d3d52;
}
[data-theme="dark"] .lm-tab {
    color: #aaa;
}
[data-theme="dark"] .lm-tab.active {
    color: #7eb9ff;
    border-bottom-color: #7eb9ff;
}
[data-theme="dark"] .lm-tab-content {
    background: #162031;
    color: #ddd;
}
[data-theme="dark"] .lm-info-box {
    background: linear-gradient(135deg, #1a2a40, #1d2f47);
    border-color: #2d4a6e;
}
[data-theme="dark"] .lm-tier-bronze {
    background: linear-gradient(135deg, #251a0e, #2e1f0e);
    border-color: #7a4820;
}
[data-theme="dark"] .lm-tier-silver {
    background: #1e2530;
    border-color: #4a5060;
}
[data-theme="dark"] .lm-tier-gold {
    background: linear-gradient(135deg, #2a2010, #352a10);
    border-color: #8a7020;
}
[data-theme="dark"] .lm-tier-platinum {
    background: linear-gradient(135deg, #1e1830, #251d3a);
    border-color: #4a2d8a;
}
[data-theme="dark"] .lm-tier ul li,
[data-theme="dark"] .lm-step span,
[data-theme="dark"] .lm-terms-section ul li {
    color: #bbb;
}
[data-theme="dark"] .lm-point-item {
    background: #1e2a3a;
    border-color: #2d3d52;
}
[data-theme="dark"] .lm-point-item > span {
    color: #888;
}
[data-theme="dark"] .lm-terms-section {
    background: #1a2535;
    border-color: #2d3d52;
}
[data-theme="dark"] .lm-terms-section h4,
[data-theme="dark"] .lm-section-title {
    color: #7eb9ff;
}
[data-theme="dark"] .lm-form .bm-form-group input,
[data-theme="dark"] .lm-form .bm-form-group select,
[data-theme="dark"] .lm-form .bm-form-group textarea {
    background: #1a2535;
    border-color: #2d3d52;
    color: #ddd;
}
[data-theme="dark"] .lm-request-intro {
    background: #2a2010;
    border-color: #6a4800;
    color: #ffd080;
}
[data-theme="dark"] .lm-terms-check {
    color: #bbb;
}

/* Responsive */
@media (max-width: 768px) {
    .lm-modal {
        max-height: 95vh;
    }
    .lm-header {
        padding: 20px 20px 16px;
    }
    .lm-tabs {
        padding: 0 16px;
    }
    .lm-tab {
        padding: 12px 12px;
        font-size: 0.82rem;
    }
    .lm-tab-content {
        padding: 20px 16px 24px;
    }
    .lm-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
    .lm-points-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .lm-form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BOOKING MODAL
   ========================================================================== */
.booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.booking-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.booking-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 32px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    animation: bmSlideUp 0.4s ease;
}

@keyframes bmSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.booking-modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #f0f0f5;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    color: #333;
    transition: all 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
[dir="rtl"] .booking-modal-close {
    left: auto;
    right: 16px;
}
.booking-modal-close:hover {
    background: #e74c3c;
    color: #fff;
}

/* Steps Bar */
.booking-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.booking-step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.4;
    transition: all 0.3s ease;
}
.booking-step-indicator.active {
    opacity: 1;
}
.booking-step-indicator.completed {
    opacity: 0.8;
}
.booking-step-indicator.completed .step-circle {
    background: #27ae60;
    color: #fff;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.booking-step-indicator.active .step-circle {
    background: var(--color-primary, #004282);
    color: #fff;
}

.step-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}
.booking-step-indicator.active .step-label {
    color: var(--color-primary, #004282);
}

.booking-step-line {
    width: 40px;
    height: 2px;
    background: #ddd;
    border-radius: 2px;
}

/* Step Content */
.booking-step-content {
    display: none;
}
.booking-step-content.active {
    display: block;
    animation: bmFadeIn 0.35s ease;
}
@keyframes bmFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Car Preview */
.bm-car-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #f8f9ff, #eef3ff);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
}
.bm-car-preview img {
    width: 140px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
}
.bm-car-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.bm-car-price-tag {
    font-size: 1.05rem;
    color: var(--color-primary, #004282);
    font-weight: 700;
}

/* Form Grid */
.bm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.bm-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bm-form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}
.bm-form-group label i {
    color: var(--color-primary, #004282);
    margin-left: 4px;
}
[dir="ltr"] .bm-form-group label i {
    margin-left: 0;
    margin-right: 4px;
}
.bm-form-group input,
.bm-form-group select {
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    color: #333;
}
.bm-form-group input:focus,
.bm-form-group select:focus {
    border-color: var(--color-primary, #004282);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 66, 130, 0.1);
}
.bm-form-group input.bm-error,
.bm-form-group select.bm-error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.bm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Duration Display */
.bm-duration-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #eef7ee, #e8f5e9);
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: #2e7d32;
}
.bm-duration-display i {
    font-size: 1.1rem;
}
.bm-duration-display strong {
    font-size: 1.2rem;
}

/* Extras */
.bm-extras {
    margin-bottom: 20px;
}
.bm-extras h4 {
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #333;
}
.bm-extras h4 i {
    color: var(--color-secondary, #f3821a);
}
.bm-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.9rem;
}
.bm-checkbox:hover {
    background: #eef3ff;
}
.bm-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #004282);
    cursor: pointer;
}

/* Next/Back Buttons */
.bm-next-btn, .bm-confirm-btn {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    border-radius: 12px;
    margin-top: 8px;
}
.bm-back-btn {
    background: transparent;
    border: 2px solid #ccc;
    color: #555;
}
.bm-back-btn:hover {
    background: #f0f0f5;
    border-color: #999;
    color: #333;
}
[data-theme="dark"] .bm-back-btn {
    border-color: #555;
    color: #bbb;
}
[data-theme="dark"] .bm-back-btn:hover {
    background: #2a2a3e;
    border-color: #777;
    color: #f0f0f5;
}
.bm-nav-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.bm-nav-buttons .bm-back-btn {
    flex: 0 0 auto;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
}
.bm-nav-buttons .bm-next-btn,
.bm-nav-buttons .bm-confirm-btn {
    flex: 1;
}

/* Summary Card */
.bm-summary-title {
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: #1a1a2e;
}
.bm-summary-title i {
    color: var(--color-primary, #004282);
    margin-left: 6px;
}
[dir="ltr"] .bm-summary-title i {
    margin-left: 0;
    margin-right: 6px;
}

.bm-summary-card {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.bm-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
}
.bm-summary-row span {
    color: #777;
}
.bm-summary-row strong {
    color: #1a1a2e;
}
.bm-summary-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0;
}
.bm-total-row {
    padding-top: 12px;
}
.bm-total-value {
    font-size: 1.25rem;
    color: var(--color-primary, #004282) !important;
}
.bm-discount-value {
    color: #27ae60 !important;
}

.bm-discount-badge {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border: 1px solid #ffcc80;
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #e65100;
    font-weight: 600;
}
.bm-discount-badge i {
    font-size: 1.1rem;
}

/* Payment Methods */
.bm-payment-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.bm-payment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.bm-payment-option:hover {
    border-color: var(--color-primary, #004282);
    background: #f0f5ff;
}
.bm-payment-option.active {
    border-color: var(--color-primary, #004282);
    background: linear-gradient(135deg, #eef3ff, #e3ecff);
}
.bm-payment-option input[type="radio"] {
    display: none;
}
.bm-payment-icon {
    font-size: 1.6rem;
    color: var(--color-primary, #004282);
}

/* Card Form */
.bm-card-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* Cash Info */
.bm-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.9rem;
    color: #1565c0;
    margin-bottom: 16px;
}
.bm-info-box i {
    font-size: 1.2rem;
    margin-top: 2px;
}

/* Total Confirm */
.bm-total-confirm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f0f5ff, #e8efff);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    font-weight: 600;
}

/* Success */
.bm-success {
    text-align: center;
    padding: 20px 0;
}
.bm-success-icon {
    font-size: 4rem;
    color: #27ae60;
    margin-bottom: 16px;
    animation: bmPulse 0.6s ease;
}
@keyframes bmPulse {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.bm-success h3 {
    font-size: 1.4rem;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.bm-success p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.7;
}
.bm-booking-ref {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 1rem;
}
.bm-booking-ref strong {
    color: var(--color-primary, #004282);
    font-size: 1.15rem;
    letter-spacing: 1px;
}
.bm-done-btn {
    padding: 12px 40px;
    border-radius: 12px;
}

/* Custom scrollbar for modal */
.booking-modal::-webkit-scrollbar {
    width: 6px;
}
.booking-modal::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
}

/* ==========================================================================
   BOOKING MODAL - DARK MODE
   ========================================================================== */
[data-theme="dark"] .booking-modal {
    background: #1e1e2e;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .booking-modal-close {
    background: #2a2a3e;
    color: #ccc;
}
[data-theme="dark"] .booking-steps-bar {
    border-bottom-color: #333;
}
[data-theme="dark"] .step-circle {
    background: #333;
    color: #aaa;
}
[data-theme="dark"] .step-label {
    color: #aaa;
}
[data-theme="dark"] .booking-step-line {
    background: #444;
}
[data-theme="dark"] .bm-car-preview {
    background: linear-gradient(135deg, #252538, #2a2a40);
}
[data-theme="dark"] .bm-car-info h3 {
    color: #f0f0f5;
}
[data-theme="dark"] .bm-form-group label {
    color: #bbb;
}
[data-theme="dark"] .bm-form-group input,
[data-theme="dark"] .bm-form-group select {
    background: #2a2a3e;
    border-color: #444;
    color: #f0f0f5;
}
[data-theme="dark"] .bm-form-group input:focus,
[data-theme="dark"] .bm-form-group select:focus {
    border-color: #6aadee;
    box-shadow: 0 0 0 3px rgba(106, 173, 238, 0.15);
}
[data-theme="dark"] .bm-duration-display {
    background: linear-gradient(135deg, #1a3a2a, #1e3d2e);
    border-color: #2e7d32;
    color: #66bb6a;
}
[data-theme="dark"] .bm-checkbox {
    background: #252538;
}
[data-theme="dark"] .bm-checkbox:hover {
    background: #2a2a44;
}
[data-theme="dark"] .bm-extras h4 {
    color: #ddd;
}
[data-theme="dark"] .bm-summary-card {
    background: #252538;
}
[data-theme="dark"] .bm-summary-row span {
    color: #999;
}
[data-theme="dark"] .bm-summary-row strong {
    color: #f0f0f5;
}
[data-theme="dark"] .bm-summary-divider {
    background: #444;
}
[data-theme="dark"] .bm-summary-title {
    color: #f0f0f5;
}
[data-theme="dark"] .bm-total-value {
    color: #6aadee !important;
}
[data-theme="dark"] .bm-discount-badge {
    background: linear-gradient(135deg, #3e2800, #4a3000);
    border-color: #6d4c00;
    color: #ffb74d;
}
[data-theme="dark"] .bm-payment-option {
    border-color: #444;
    color: #ddd;
}
[data-theme="dark"] .bm-payment-option:hover {
    border-color: #6aadee;
    background: #252540;
}
[data-theme="dark"] .bm-payment-option.active {
    border-color: #6aadee;
    background: linear-gradient(135deg, #1e2844, #252850);
}
[data-theme="dark"] .bm-payment-icon {
    color: #6aadee;
}
[data-theme="dark"] .bm-info-box {
    background: #1e2844;
    border-color: #3a5080;
    color: #82b1ff;
}
[data-theme="dark"] .bm-total-confirm {
    background: linear-gradient(135deg, #1e2844, #252850);
}
[data-theme="dark"] .bm-success h3 {
    color: #f0f0f5;
}
[data-theme="dark"] .bm-success p {
    color: #aaa;
}
[data-theme="dark"] .bm-booking-ref {
    background: #252538;
}
[data-theme="dark"] .booking-modal::-webkit-scrollbar-thumb {
    background: #555;
}

/* ==========================================================================
   BOOKING MODAL - RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .booking-modal {
        padding: 20px;
        max-height: 95vh;
        border-radius: 16px;
    }
    .booking-modal-overlay {
        padding: 10px;
    }
    .bm-form-grid {
        grid-template-columns: 1fr;
    }
    .bm-form-row {
        grid-template-columns: 1fr 1fr;
    }
    .bm-car-preview {
        flex-direction: column;
        text-align: center;
    }
    .bm-car-preview img {
        width: 100%;
        height: 120px;
    }
    .bm-payment-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .bm-payment-option {
        padding: 12px 6px;
        font-size: 0.75rem;
    }
    .bm-payment-icon {
        font-size: 1.3rem;
    }
    .step-label {
        font-size: 0.75rem;
    }
    .step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    .booking-step-line {
        width: 24px;
    }
}

@media (max-width: 480px) {
    .booking-modal {
        padding: 16px;
        border-radius: 14px;
    }
    .bm-form-row {
        grid-template-columns: 1fr;
    }
    .bm-nav-buttons {
        flex-direction: column-reverse;
    }
    .bm-nav-buttons .bm-back-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.announcement-bar {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 50%, var(--color-secondary));
    background-size: 200% 100%;
    animation: annBar-grad 6s linear infinite;
    color: #fff;
    padding: 11px 0;
    position: relative;
    z-index: 1001;
    text-align: center;
    overflow: hidden;
}

@keyframes annBar-grad {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.announcement-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.announcement-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 50px;
    flex-wrap: wrap;
}

.announcement-icon {
    font-size: 1rem;
    animation: flash-anim 1.5s ease-in-out infinite;
}

@keyframes flash-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.announcement-text {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

html[lang="en"] .announcement-text {
    letter-spacing: 0.3px;
}

.announcement-cta {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 5px 16px;
    border-radius: var(--border-radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.35);
    white-space: nowrap;
}

.announcement-cta:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}

.announcement-close {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

html[dir="rtl"] .announcement-close { left: auto; right: 12px; }
.announcement-close:hover { color: #fff; background: rgba(255,255,255,0.15); }
.announcement-bar.hidden { display: none; }

body.has-announcement .navbar { top: 44px; }

html[data-theme="dark"] .announcement-bar {
    background: linear-gradient(135deg, #0d0d1f, #002d5a 50%, #f3821a);
}

@media (max-width: 768px) {
    .announcement-content { padding: 0 40px; gap: 8px; }
    .announcement-text { font-size: 0.78rem; }
    .announcement-cta { font-size: 0.75rem; padding: 4px 12px; }
    body.has-announcement .navbar { top: 55px; }
}

/* ==========================================================================
   HERO SCROLL INDICATOR
   ========================================================================== */
.hero-scroll-indicator {
    position: absolute;
    bottom: 215px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fadeUp 1.5s 1.5s both;
}

.hero-scroll-indicator .scroll-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.hero-scroll-indicator .scroll-mouse::after {
    content: '';
    width: 4px;
    height: 8px;
    background: rgba(255,255,255,0.8);
    border-radius: 4px;
    animation: wheel-scroll 1.6s ease-in-out infinite;
}

.hero-scroll-indicator .scroll-arrow {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-scroll-indicator .scroll-arrow span {
    display: block;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid rgba(255,255,255,0.6);
    border-right: 2px solid rgba(255,255,255,0.6);
    transform: rotate(45deg);
    animation: arr-fade 1.6s ease-in-out infinite;
}

.hero-scroll-indicator .scroll-arrow span:nth-child(2) { animation-delay: 0.2s; }
.hero-scroll-indicator .scroll-arrow span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wheel-scroll {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}

@keyframes arr-fade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@media (max-width: 768px) {
    .hero-scroll-indicator { display: none; }
}

/* ==========================================================================
   CAR RATING STARS
   ========================================================================== */
.car-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.car-rating .stars {
    color: #ffc107;
    font-size: 0.85rem;
    display: flex;
    gap: 2px;
}

.car-rating .rating-count {
    color: var(--color-gray);
    font-size: 0.78rem;
}

/* ==========================================================================
   WHATSAPP FLOAT — RING PULSE
   ========================================================================== */
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-pill);
    background: rgba(37, 211, 102, 0.4);
    animation: wa-ring 2.5s ease-out infinite;
    pointer-events: none;
}

@keyframes wa-ring {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.whatsapp-float:hover::before { animation: none; }

/* ==========================================================================
   BACK TO TOP — ORANGE GRADIENT
   ========================================================================== */
.back-to-top {
    background: linear-gradient(135deg, var(--color-secondary), #ffab40) !important;
    box-shadow: 0 5px 20px rgba(243, 130, 26, 0.4) !important;
}

.back-to-top:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.4) !important;
}

/* ==========================================================================
   RAFFLE / COMPETITION SECTION
   ========================================================================== */
.raffle-section {
    background: linear-gradient(160deg, #06111f 0%, #002952 55%, #003d7a 100%);
    position: relative;
    overflow: hidden;
    color: var(--color-white);
}

.raffle-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(243,130,26,0.08) 0%, transparent 65%);
    pointer-events: none;
}

.raffle-section .section-title h2 { color: var(--color-white); }
.raffle-section .section-subtitle { color: rgba(255,255,255,0.65); }
.raffle-section .title-underline {
    background: linear-gradient(90deg, var(--color-secondary), #ffab40);
}

/* ---- Layout ---- */
.raffle-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 28px;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ---- Panels (Participants & History) ---- */
.raffle-participants,
.raffle-history {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(8px);
}

.raffle-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.raffle-panel-header i {
    font-size: 1.2rem;
    color: var(--color-secondary);
}

.raffle-panel-header h3 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1;
    margin: 0;
}

.raffle-count-badge {
    background: var(--color-secondary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* ---- Add Row ---- */
.raffle-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.raffle-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.raffle-input:focus { border-color: var(--color-secondary); }
.raffle-input::placeholder { color: rgba(255,255,255,0.38); }

.raffle-add-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--color-secondary);
    color: #fff;
    border: none;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.raffle-add-btn:hover { transform: scale(1.1); opacity: 0.9; }

/* ---- Quick Add ---- */
.raffle-quick-add {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
}

.raffle-quick-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
}

.raffle-quick-btn:hover {
    background: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

/* ---- Balls Wrap ---- */
.raffle-balls-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 72px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 14px;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.raffle-ball-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #004282, #0066cc);
    color: #fff;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.83rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.18);
    animation: rBallPop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.raffle-ball-tag .remove-ball {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}

.raffle-ball-tag .remove-ball:hover { color: #ff6666; }

.raffle-ball-tag.won {
    background: linear-gradient(135deg, #c6a84b, #f5d27e);
    color: #1a0800;
    border-color: rgba(255,248,220,0.4);
    animation: wonBallPulse 1s ease-in-out 4;
}

@keyframes rBallPop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes wonBallPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(245,210,126,0.7); }
    50%     { box-shadow: 0 0 0 8px rgba(245,210,126,0); }
}

/* ---- Clear Btn ---- */
.raffle-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.22);
    border-radius: 10px;
    color: rgba(255,140,140,0.85);
    font-size: 0.83rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.raffle-clear-btn:hover { background: rgba(255,60,60,0.22); }

/* ---- Draw Machine (center) ---- */
.raffle-machine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    position: relative;
}

/* ---- Drum ---- */
.raffle-drum {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,0.12) 0%, transparent 55%),
        linear-gradient(135deg, rgba(0,30,70,0.92) 0%, rgba(0,10,40,0.98) 100%);
    border: 3px solid rgba(255,255,255,0.13);
    box-shadow:
        0 0 0 6px rgba(0,30,70,0.5),
        0 0 0 9px rgba(255,255,255,0.07),
        0 24px 60px rgba(0,0,0,0.6),
        inset 0 0 50px rgba(0,0,0,0.35);
    flex-shrink: 0;
}

.drum-glass {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.13) 0%, transparent 52%);
    pointer-events: none;
    z-index: 5;
}

.drum-balls {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.drum-ring {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 115%;
    height: 22px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.09);
    z-index: 4;
    pointer-events: none;
}

.drum-ring-top    { top: -5px; }
.drum-ring-bottom { bottom: -5px; }

.drum-shine {
    position: absolute;
    top: 9%;
    left: 14%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 6;
}

/* drum balls */
.drum-ball {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), inset 0 3px 5px rgba(255,255,255,0.22);
    z-index: 2;
    user-select: none;
    overflow: hidden;
    padding: 0 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: left 0.6s ease, top 0.6s ease;
}

.raffle-drum.spinning .drum-ball {
    animation: drumOrbit var(--spd, 0.5s) linear infinite;
}

@keyframes drumOrbit {
    0%   { transform: rotate(0deg)   translateX(var(--r, 65px)) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(var(--r, 65px)) rotate(-360deg); }
}

/* ---- Winner display ---- */
.raffle-winner-display {
    text-align: center;
}

.winner-trophy {
    font-size: 2.4rem;
    color: #f5d27e;
    margin-bottom: 2px;
    filter: drop-shadow(0 0 14px rgba(245,210,126,0.55));
}

.winner-title {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    margin-bottom: 6px;
}

html[lang="en"] .winner-title {
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.winner-number-big {
    font-size: 3.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #c6a84b 0%, #f5d27e 50%, #c6a84b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 160px;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    filter: drop-shadow(0 0 16px rgba(198,168,75,0.35));
}

.winner-number-big.rolling {
    animation: wRoll 0.09s steps(1) infinite;
    -webkit-text-fill-color: rgba(245,210,126,0.8);
}

@keyframes wRoll {
    0%   { transform: scaleY(0.85); }
    50%  { transform: scaleY(1.1); }
    100% { transform: scaleY(0.85); }
}

.winner-number-big.revealed {
    animation: wReveal 0.65s cubic-bezier(0.34,1.56,0.64,1) forwards;
    filter: drop-shadow(0 0 30px rgba(245,210,126,0.75));
}

@keyframes wReveal {
    0%   { transform: scale(0.2) rotate(-15deg); opacity: 0; }
    65%  { transform: scale(1.18) rotate(4deg);  opacity: 1; }
    100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}

/* ---- Draw Button ---- */
.raffle-draw-btn {
    padding: 14px 44px;
    font-size: 1.08rem;
    font-weight: 700;
    border-radius: 50px;
    background: linear-gradient(135deg, #f3821a, #ffab40);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(243,130,26,0.45);
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.raffle-draw-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 35px rgba(243,130,26,0.55);
}

.raffle-draw-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ---- Winners List ---- */
.winners-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.winners-empty {
    color: rgba(255,255,255,0.38);
    font-size: 0.88rem;
    text-align: center;
    padding: 28px 0;
    font-style: italic;
}

.winner-entry {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: weSlide 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.winner-entry .we-rank {
    background: linear-gradient(135deg, #c6a84b, #f5d27e);
    color: #1a0800;
    font-weight: 800;
    font-size: 0.78rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.winner-entry .we-num {
    flex: 1;
    font-weight: 700;
    color: #fff;
    font-size: 0.98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winner-entry .we-time {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
}

@keyframes weSlide {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Confetti ---- */
.raffle-confetti-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.confetti-piece {
    position: absolute;
    top: -12px;
    border-radius: 2px;
    animation: cFall linear forwards;
}

@keyframes cFall {
    0%   { transform: translateY(0) rotate(0deg);    opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .raffle-layout {
        grid-template-columns: 1fr 1fr;
    }
    .raffle-machine {
        order: -1;
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .raffle-layout { grid-template-columns: 1fr; }
    .raffle-machine { order: 0; }
    .raffle-drum { width: 175px; height: 175px; }
    .winner-number-big { font-size: 2.6rem; }
    .raffle-draw-btn { padding: 13px 32px; font-size: 1rem; }
}

/* ==========================================================
   Monthly Prize Announcement Section
   ========================================================== */
.prize-section {
    background: linear-gradient(160deg, #fff8f0 0%, #ffffff 55%, #fff3e0 100%);
    position: relative;
    overflow: hidden;
}
.prize-section::before {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(243,130,26,0.07) 0%, transparent 65%);
    pointer-events: none;
}

/* Badge */
.prize-announce-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 7px 22px;
    border-radius: 30px;
    margin-bottom: 14px;
    box-shadow: 0 4px 18px rgba(243,130,26,0.38);
    animation: prizePulse 2.2s ease-in-out infinite;
}

html[lang="en"] .prize-announce-badge {
    letter-spacing: 0.5px;
}
@keyframes prizePulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(243,130,26,0.38); }
    50%       { box-shadow: 0 4px 32px rgba(243,130,26,0.7); }
}

/* Grid layout */
.prize-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

/* --- Prize card (left) --- */
.prize-card {
    background: linear-gradient(150deg, #004282 0%, #0062c3 100%);
    border-radius: 24px;
    padding: 42px 28px 36px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,66,130,0.28);
}
.prize-card-glow {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(243,130,26,0.22) 0%, transparent 70%);
    pointer-events: none;
}
.prize-icon-wrap {
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    color: #fff;
    margin: 0 auto 24px;
    box-shadow: 0 8px 28px rgba(243,130,26,0.5);
    animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0);   }
    50%       { transform: translateY(-9px); }
}
.prize-value-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 26px;
}
.prize-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
}

html[lang="en"] .prize-label {
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.prize-value {
    font-size: 2.1rem;
    font-weight: 900;
    color: #ffce55;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.prize-or {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.6);
}
.prize-draw-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.88);
}

/* --- Shared panel styles --- */
.prize-how,
.prize-terms {
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,66,130,0.07);
    height: 100%;
}
.prize-sub-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.prize-sub-title i { color: var(--color-secondary); }

/* How-to steps */
.prize-steps {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.prize-steps li {
    counter-increment: step-counter;
    position: relative;
    padding-inline-start: 48px;
    font-size: 0.93rem;
    color: var(--color-text);
    line-height: 1.55;
}
.prize-steps li::before {
    content: counter(step-counter);
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 3px 10px rgba(243,130,26,0.38);
}

/* Terms list */
.prize-terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prize-terms-list li {
    position: relative;
    padding-inline-start: 18px;
    font-size: 0.87rem;
    color: #555;
    line-height: 1.55;
}
.prize-terms-list li::before {
    content: '�';
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-secondary);
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1.3;
}

/* CTA block */
.prize-cta {
    text-align: center;
    margin-top: 50px;
}
.prize-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    padding: 15px 46px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-secondary), #ffab40);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(243,130,26,0.42);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}
.prize-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(243,130,26,0.58);
}
.prize-disclaimer {
    margin-top: 14px;
    font-size: 0.78rem;
    color: #aaa;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .prize-layout {
        grid-template-columns: 1fr 1fr;
    }
    .prize-card {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .prize-layout {
        grid-template-columns: 1fr;
    }
    .prize-value  { font-size: 1.7rem; }
    .prize-cta-btn { padding: 13px 30px; font-size: 0.95rem; }
}

/* ==========================================================
   Surprise / Blind-Box Gift Section
   ========================================================== */
.surprise-section {
    background: linear-gradient(145deg, #0d0221 0%, #1a0533 45%, #0d1b4b 100%);
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* floating stars background */
.surprise-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px   1px   at 28% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(2px   2px   at 45% 9%,  rgba(255,200,80,0.8)  0%, transparent 100%),
        radial-gradient(1px   1px   at 62% 72%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 33%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(2px   2px   at 90% 60%, rgba(243,130,26,0.7)  0%, transparent 100%),
        radial-gradient(1px   1px   at 5%  80%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 42%, rgba(200,160,255,0.6) 0%, transparent 100%);
    animation: starsTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starsTwinkle {
    0%   { opacity: 0.6; }
    100% { opacity: 1; }
}

.surprise-section .section-title h2  { color: #fff; }
.surprise-section .section-subtitle  { color: rgba(255,255,255,0.65); }
.surprise-section .title-underline   { background: linear-gradient(90deg, #f3821a, #ffce55); }

/* Badge */
.surprise-badge {
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 7px 22px;
    border-radius: 30px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(168,85,247,0.5);
}

html[lang="en"] .surprise-badge {
    letter-spacing: 0.5px;
}

/* Layout */
.surprise-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
    align-items: start;
    margin-top: 44px;
    position: relative;
    z-index: 1;
}

/* ===== Gift Box Visual ===== */
.surprise-box-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
}

/* sparkles around box */
.surp-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.surp-sparkles span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffce55;
    animation: sparkleFloat 2.4s ease-in-out infinite;
}
.surp-sparkles span:nth-child(1) { top: 10%; left: 15%;  animation-delay: 0s;    background: #f3821a; }
.surp-sparkles span:nth-child(2) { top: 5%;  right: 18%; animation-delay: 0.4s;  background: #a855f7; width: 8px; height: 8px; }
.surp-sparkles span:nth-child(3) { bottom: 20%; left: 8%;  animation-delay: 0.8s;  background: #ffce55; }
.surp-sparkles span:nth-child(4) { bottom: 15%; right: 10%; animation-delay: 1.2s; background: #34d399; width: 5px; height: 5px; }
.surp-sparkles span:nth-child(5) { top: 35%; left: 5%;  animation-delay: 1.6s;  background: #f9a8d4; }
.surp-sparkles span:nth-child(6) { top: 30%; right: 5%; animation-delay: 2s;    background: #60a5fa; width: 7px; height: 7px; }

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0)   scale(1);   opacity: 0.9; }
    50%       { transform: translateY(-14px) scale(1.3); opacity: 0.4; }
}

/* The Box */
.surp-box {
    width: 160px;
    height: 160px;
    position: relative;
    cursor: pointer;
    animation: boxWiggle 3s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(243,130,26,0.4));
}
@keyframes boxWiggle {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    25%       { transform: rotate(2deg)  translateY(-6px); }
    50%       { transform: rotate(-1deg) translateY(-2px); }
    75%       { transform: rotate(1.5deg) translateY(-8px); }
}

.surp-box-lid {
    position: absolute;
    top: -18px;
    left: -6px;
    right: -6px;
    height: 46px;
    background: linear-gradient(135deg, #e8380d, #f3821a);
    border-radius: 8px 8px 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    animation: lidBounce 3s ease-in-out infinite;
}
@keyframes lidBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%       { transform: translateY(-10px) rotate(-4deg); }
    50%       { transform: translateY(-6px) rotate(3deg); }
    75%       { transform: translateY(-12px) rotate(-2deg); }
}
.surp-lid-ribbon {
    width: 18px;
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}

.surp-box-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #c0250a, #e8380d);
    border-radius: 12px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.15),
        0 10px 30px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.surp-box-ribbon-v {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 20px;
    transform: translateX(-50%);
    background: rgba(255,200,80,0.35);
    border-radius: 3px;
}
.surp-box-ribbon-h {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 20px;
    transform: translateY(-50%);
    background: rgba(255,200,80,0.35);
    border-radius: 3px;
}
.surp-question {
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    z-index: 1;
    animation: questionPulse 2s ease-in-out infinite;
}
@keyframes questionPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.18); opacity: 0.7; }
}

.surp-box-hint {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    text-align: center;
    margin: 0;
}

/* ===== Steps Panel ===== */
.surprise-steps-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffce55;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.surprise-steps-title i { color: #f3821a; }

.surprise-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.surp-step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px 16px;
    transition: background 0.2s;
}
.surp-step:hover { background: rgba(255,255,255,0.1); }
.surp-step--highlight {
    background: linear-gradient(135deg, rgba(243,130,26,0.18), rgba(255,206,85,0.12));
    border-color: rgba(243,130,26,0.4);
}
.surp-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3821a, #ffab40);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(243,130,26,0.4);
}
.surp-step--highlight .surp-step-icon {
    background: linear-gradient(135deg, #ffce55, #f3821a);
    animation: iconGlow 2s ease-in-out infinite;
}
@keyframes iconGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(243,130,26,0.4); }
    50%       { box-shadow: 0 4px 28px rgba(255,206,85,0.8); }
}
.surp-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.surp-step-text strong {
    font-size: 0.93rem;
    color: #fff;
}
.surp-step-text span {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.surp-step-arrow {
    text-align: center;
    color: rgba(243,130,26,0.6);
    font-size: 0.9rem;
    padding: 4px 0;
}

/* ===== Gifts Grid ===== */
.surp-gifts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.surp-gift-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, background 0.2s;
    cursor: default;
}
.surp-gift-item:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.11);
}
.surp-gift-item--mystery {
    background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(243,130,26,0.12));
    border-color: rgba(168,85,247,0.4);
    animation: mysteryPulse 2.5s ease-in-out infinite;
}
@keyframes mysteryPulse {
    0%, 100% { border-color: rgba(168,85,247,0.4); }
    50%       { border-color: rgba(255,206,85,0.7); }
}
.surp-gift-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.surp-gift-item span {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
}
.surp-gifts-note {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.38);
    margin: 0;
    text-align: center;
}

/* ===== CTA ===== */
.surprise-cta {
    text-align: center;
    margin-top: 52px;
    position: relative;
    z-index: 1;
}
.surprise-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.08rem;
    font-weight: 700;
    padding: 16px 52px;
    border-radius: 50px;
    background: linear-gradient(135deg, #f3821a, #ffce55);
    color: #1a0533 !important;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(243,130,26,0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}
.surprise-cta-btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 44px rgba(243,130,26,0.7);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .surprise-layout {
        grid-template-columns: 1fr 1fr;
    }
    .surprise-box-wrap {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 32px;
        align-items: center;
    }
    .surp-box { width: 130px; height: 130px; }
}
@media (max-width: 640px) {
    .surprise-layout { grid-template-columns: 1fr; }
    .surprise-box-wrap { flex-direction: column; }
    .surp-box { width: 140px; height: 140px; }
    .surprise-cta-btn { padding: 14px 32px; font-size: 0.95rem; }
}

/* ==========================================================================
   Blog Section
   ========================================================================== */

/* ==========================================================================
   Certificates Section
   ========================================================================== */
.certificates-section {
    padding: 80px 0;
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 50px;
    justify-items: center;
}

.certificate-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 380px;
    width: 100%;
}

.certificate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 45px rgba(0,66,130,0.15);
}

.certificate-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #f5f5f5;
}

.certificate-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.certificate-card:hover .certificate-img-wrap img {
    transform: scale(1.05);
}

.certificate-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,66,130,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certificate-card:hover .certificate-overlay {
    opacity: 1;
}

.cert-zoom-btn {
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cert-zoom-btn:hover {
    transform: scale(1.15);
}

.certificate-info {
    padding: 20px 24px;
    text-align: center;
}

.cert-icon {
    font-size: 2rem;
    color: var(--color-secondary);
    margin-bottom: 10px;
    display: block;
}

.certificate-info h3 {
    font-family: 'Cairo', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.certificate-info p {
    font-size: 0.85rem;
    color: var(--color-gray);
    margin-bottom: 12px;
}

.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
}

.cert-badge i {
    color: #43a047;
}

/* Lightbox */
.cert-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.25s ease;
}

.cert-lightbox-overlay[hidden] {
    display: none;
}

.cert-lightbox-box {
    max-width: 700px;
    width: 100%;
    text-align: center;
}

.cert-lightbox-box img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.cert-lightbox-box p {
    color: #fff;
    margin-top: 14px;
    font-size: 1rem;
    font-family: 'Cairo', sans-serif;
}

.cert-lightbox-close {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10000;
}

.cert-lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Dark mode */
html[data-theme="dark"] .certificate-card {
    background: var(--color-dark-card);
}

html[data-theme="dark"] .certificate-info h3 {
    color: #7eb8f7;
}

html[data-theme="dark"] .cert-badge {
    background: #1b3a1e;
    color: #81c784;
}

/* ==========================================================================
   Blog Section
   ========================================================================== */

.blog-section {
    background: var(--color-light);
    padding: 80px 0;
}

/* Filter Bar */
.blog-filter-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.blog-filter-btn {
    padding: 8px 22px;
    border-radius: var(--border-radius-pill);
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-family: 'Cairo', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.blog-card {
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow-hover);
}

/* Card Image */
.blog-card-img {
    position: relative;
    overflow: hidden;
    height: 210px;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.06);
}

/* Category Badge */
.blog-cat-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--color-secondary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--border-radius-pill);
    font-family: 'Cairo', sans-serif;
}

.blog-cat-guide { background: var(--color-primary); }
.blog-cat-qatar { background: #27ae60; }

/* Card Body */
.blog-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.blog-meta {
    display: flex;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--color-gray);
}

.blog-meta i {
    color: var(--color-secondary);
    margin-left: 4px;
}

.blog-card-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.5;
    margin: 0;
}

.blog-card-body p {
    font-size: 0.88rem;
    color: var(--color-gray);
    line-height: 1.7;
    flex: 1;
}

/* Card Footer */
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.blog-read-more {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    font-family: 'Cairo', sans-serif;
}

.blog-read-more:hover {
    color: var(--color-secondary);
    gap: 10px;
}

.blog-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.blog-tag {
    font-size: 0.72rem;
    color: var(--color-primary);
    background: var(--color-secondary-light);
    padding: 3px 9px;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
}

/* Hidden cards (filtered) */
.blog-card.hidden {
    display: none;
}

/* ==========================================================================
   Blog Modal
   ========================================================================== */

.blog-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: blogModalFadeIn 0.25s ease;
}

.blog-modal-overlay[hidden] {
    display: none;
}

@keyframes blogModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.blog-modal-box {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: blogModalSlideUp 0.28s ease;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}

@keyframes blogModalSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.blog-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.blog-modal-close:hover {
    background: var(--color-secondary);
}

.blog-modal-hero {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.blog-modal-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-modal-hero .blog-cat-badge {
    position: absolute;
    top: 16px;
    right: 16px;
}

.blog-modal-content {
    padding: 28px 32px 32px;
}

.blog-modal-meta {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--color-gray);
    margin-bottom: 12px;
}

.blog-modal-meta i {
    color: var(--color-secondary);
    margin-left: 4px;
}

.blog-modal-content h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.45;
    margin-bottom: 18px;
}

.blog-modal-body {
    font-size: 0.95rem;
    color: var(--color-gray);
    line-height: 1.9;
}

.blog-modal-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 18px 0 6px;
}

.blog-modal-body ul {
    padding-right: 20px;
    margin: 8px 0 14px;
}

.blog-modal-body ul li {
    margin-bottom: 6px;
    position: relative;
}

.blog-modal-body ul li::marker {
    color: var(--color-secondary);
}

.blog-modal-body p { margin-bottom: 12px; }

.blog-modal-cta {
    margin-top: 28px;
    text-align: center;
}

/* Dark mode */
html[data-theme="dark"] .blog-modal-box {
    background: #1e2545;
}

html[data-theme="dark"] .blog-modal-content h2 {
    color: #f0f4ff;
}

html[data-theme="dark"] .blog-modal-body {
    color: #c0c8dc;
}

html[data-theme="dark"] .blog-modal-body h4 {
    color: var(--color-primary);
}

@media (max-width: 600px) {
    .blog-modal-content { padding: 20px 18px 24px; }
    .blog-modal-hero { height: 190px; }
    .blog-modal-content h2 { font-size: 1.15rem; }
}

/* Dark mode */
html[data-theme="dark"] .blog-section {
    background: #16213e;
}

html[data-theme="dark"] .blog-card {
    background: #1e2545;
    border: 1px solid rgba(255,255,255,0.07);
}

html[data-theme="dark"] .blog-card-body h3 {
    color: #f0f4ff;
}

html[data-theme="dark"] .blog-card-body p {
    color: #c0c8dc;
}

html[data-theme="dark"] .blog-card-footer {
    border-top-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .blog-filter-btn {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

html[data-theme="dark"] .blog-filter-btn.active,
html[data-theme="dark"] .blog-filter-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card-img { height: 180px; }
}

/* ==========================================================================
   LOGIN MODAL — Split-panel professional design
   ========================================================================== */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.login-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ─── Modal container ─── */
.login-modal {
    background: var(--color-white, #fff);
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.38);
    animation: loginSlideUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    margin: auto 0;
}
@keyframes loginSlideUp {
    from { transform: translateY(40px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* ─── FORM PANEL ─── */
.lm-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    background: var(--color-white, #fff);
}
html[data-theme="dark"] .lm-form-panel { background: #1e1e2e; }

/* ─── Form header (gradient strip at top of right panel) ─── */
.lm-form-header {
    background: linear-gradient(135deg, #003366 0%, #004282 100%);
    padding: 26px 32px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    flex-shrink: 0;
}
.lm-form-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 22px;
    background: var(--color-white, #fff);
    clip-path: ellipse(58% 100% at 50% 100%);
}
html[data-theme="dark"] .lm-form-header::after { background: #1e1e2e; }

.login-modal-icon {
    width: 62px;
    height: 62px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.6rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.lm-form-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 5px;
}
.lm-form-header p {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    padding-bottom: 10px;
}

/* Close button inside right panel */
.lm-form-panel .login-modal-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10;
    line-height: 1;
}
html[dir="ltr"] .lm-form-panel .login-modal-close { right: auto; left: 13px; }
.lm-form-panel .login-modal-close:hover { background: rgba(255, 255, 255, 0.32); }

/* keep old close alias working silently */
.login-modal-close { z-index: 10; }

.login-modal-body {
    padding: 20px 28px 28px;
    flex: 1;
}

/* ─── Responsive: modal on mobile ─── */
@media (max-width: 540px) {
    .login-modal {
        max-width: 100%;
        border-radius: 16px;
    }
}
html[data-theme="dark"] .login-modal { background: #1e1e2e; }
.login-form-group {
    margin-bottom: 18px;
}
.login-form-group label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}
.login-form-group label i {
    color: var(--color-primary, #004282);
    font-size: 0.85rem;
}
.login-form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e8;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}
.login-form-group input:focus {
    border-color: var(--color-primary, #004282);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 66, 130, 0.1);
}
.login-form-group input.login-input-error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}
.login-error-msg {
    display: none;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.87rem;
    color: #dc2626;
    font-weight: 600;
}
.login-error-msg.visible { display: flex; }
.login-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary, #004282), #005cb2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    margin-top: 8px;
}
.login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 66, 130, 0.35);
}
.login-submit-btn:active { transform: translateY(0); }
html[data-theme="dark"] .login-modal { background: #1e1e2e; }
html[data-theme="dark"] .login-form-group label { color: #bbb; }
html[data-theme="dark"] .login-form-group input {
    background: #2a2a3e;
    border-color: #444;
    color: #f0f0f5;
}
html[data-theme="dark"] .login-form-group input:focus {
    border-color: #6aadee;
    box-shadow: 0 0 0 3px rgba(106, 173, 238, 0.15);
}
html[data-theme="dark"] .login-error-msg {
    background: #2d1515;
    border-color: #7f2626;
    color: #ff8080;
}

/* ==========================================================================
   NAV LOGIN BUTTON & USER MENU
   ========================================================================== */
/* Auth state — default hidden; JS setProperty is sole visibility controller */
#navLoginBtn    { display: inline-flex; }
#navRegisterBtn { display: inline-flex; }
#navUserBtn     { display: none !important; }

.nav-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--border-radius-pill, 50px);
    background: linear-gradient(135deg, var(--color-primary, #004282), #005cb2);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}
.nav-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 66, 130, 0.35);
}
.nav-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: var(--border-radius-pill, 50px);
    background: transparent;
    color: var(--color-primary, #004282);
    border: 2px solid var(--color-primary, #004282);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    white-space: nowrap;
}
.nav-register-btn:hover {
    background: var(--color-primary, #004282);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 66, 130, 0.25);
}
html[data-theme="dark"] .nav-register-btn {
    color: #7ab3ef;
    border-color: #7ab3ef;
}
html[data-theme="dark"] .nav-register-btn:hover {
    background: #7ab3ef;
    color: #111;
}
.nav-user-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border-radius: var(--border-radius-pill, 50px);
    background: rgba(0, 66, 130, 0.07);
    border: 1.5px solid rgba(0, 66, 130, 0.15);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
    position: relative;
}
html[dir="ltr"] .nav-user-btn { padding: 5px 5px 5px 12px; }
html[data-theme="dark"] .nav-user-btn {
    background: rgba(106, 173, 238, 0.1);
    border-color: rgba(106, 173, 238, 0.22);
}
.nav-user-btn:hover { background: rgba(0, 66, 130, 0.13); }
html[data-theme="dark"] .nav-user-btn:hover { background: rgba(106, 173, 238, 0.17); }
.nav-user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-primary, #004282), #005cb2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
    overflow: hidden;
}
/* Profile photo in nav */
.nav-user-avatar img#navAvatarImg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: none;
}
.nav-user-avatar img#navAvatarImg.visible { display: block; }
.nav-user-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--color-primary, #004282);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme="dark"] .nav-user-name { color: #7eb9ff; }
.nav-user-caret {
    font-size: 0.72rem;
    color: var(--color-gray, #888);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.nav-user-btn.open .nav-user-caret { transform: rotate(180deg); }
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8f0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
html[dir="ltr"] .user-dropdown { right: auto; left: 0; }
.nav-user-btn.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
html[data-theme="dark"] .user-dropdown {
    background: #252535;
    border-color: #3d3d55;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.user-dropdown-name {
    padding: 8px 12px 10px;
    border-bottom: 1px solid #f0f0f8;
    margin-bottom: 6px;
}
html[data-theme="dark"] .user-dropdown-name { border-bottom-color: #3d3d55; }
.user-dropdown-name strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 2px;
}
html[data-theme="dark"] .user-dropdown-name strong { color: #f0f0f5; }
.user-dropdown-name span {
    font-size: 0.78rem;
    color: #888;
}
html[data-theme="dark"] .user-dropdown-name span { color: #999; }
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: start;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #444;
}
html[data-theme="dark"] .user-dropdown-item { color: #ccc; }
.user-dropdown-item:hover { background: #f5f5fa; }
html[data-theme="dark"] .user-dropdown-item:hover { background: #2d2d45; }
.user-dropdown-item.logout { color: #e53e3e; font-weight: 600; }
.user-dropdown-item.logout:hover { background: #fef2f2; }
html[data-theme="dark"] .user-dropdown-item.logout:hover { background: #2d1515; }

@media (max-width: 768px) {
    .nav-login-btn { padding: 8px 12px; }
    .nav-register-btn { padding: 6px 10px; font-size: 0.78rem; }
    .nav-user-name { display: none; }
    .nav-user-btn { padding: 5px; gap: 4px; }
    .user-dropdown { right: 0 !important; left: auto !important; min-width: 170px; }
}

/* ==========================================================================
   AUTH TABS (login / register switcher)
   ========================================================================== */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid #eaeaef;
    margin: 0 -28px 0 -28px;
    padding: 0 28px;
}
html[data-theme="dark"] .auth-tabs { border-bottom-color: #3d3d55; }

.auth-tab {
    flex: 1;
    padding: 12px 10px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.2s, border-color 0.2s;
}
.auth-tab.active { color: var(--color-primary, #004282); border-bottom-color: var(--color-primary, #004282); }
.auth-tab:hover  { color: var(--color-primary, #004282); }
html[data-theme="dark"] .auth-tab.active { color: #7eb9ff; border-bottom-color: #7eb9ff; }
html[data-theme="dark"] .auth-tab:hover  { color: #7eb9ff; }

/* ==========================================================================
   AUTH FORMS (show/hide per active tab)
   ========================================================================== */
.auth-form { display: none; padding-top: 20px; }
.auth-form.active { display: block; }

/* ==========================================================================
   AUTH ALERTS
   ========================================================================== */
.auth-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 16px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
}
.auth-alert.visible { display: flex; }
.auth-alert i { margin-top: 2px; flex-shrink: 0; font-size: 0.95rem; }

.auth-alert-error  { background: #fef2f2; border: 1px solid #fca5a5; color: #c0392b; }
.auth-alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #16a34a; }

html[data-theme="dark"] .auth-alert-error   { background: #2d1515; border-color: #7f2626; color: #ff8888; }
html[data-theme="dark"] .auth-alert-success { background: #0f2d1a; border-color: #276645; color: #4ade80; }

/* ==========================================================================
   PROFILE EDIT MODAL
   ========================================================================== */
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.profile-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.profile-modal {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}
.profile-modal-header {
    background: linear-gradient(135deg, #003366 0%, #004282 100%);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profile-modal-header h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
}
.profile-modal-close {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}
.profile-modal-body {
    padding: 18px;
    overflow-y: auto;
}
.profile-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.profile-avatar-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid rgba(0, 66, 130, 0.16);
    background: #f3f7fc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.profile-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.profile-avatar-circle.has-image img { display: block; }
.profile-avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    text-align: center;
    padding: 4px;
    font-size: 0.78rem;
}
.profile-separator {
    border: 0;
    border-top: 1px solid #ececf4;
    margin: 10px 0 14px;
}
.profile-modal-actions {
    padding: 14px 18px;
    border-top: 1px solid #ececf4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.btn-profile-cancel,
.btn-profile-save {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
.btn-profile-cancel {
    background: #eef1f6;
    color: #334155;
}
.btn-profile-save {
    background: linear-gradient(135deg, #003366 0%, #004282 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
html[data-theme="dark"] .profile-modal { background: #1f2436; }
html[data-theme="dark"] .profile-separator,
html[data-theme="dark"] .profile-modal-actions { border-color: #343b56; }
html[data-theme="dark"] .btn-profile-cancel { background: #323a54; color: #d8e1ff; }
html[data-theme="dark"] .profile-avatar-circle {
    background: #28304a;
    border-color: rgba(106, 173, 238, 0.28);
}

/* ==========================================================================
   INPUT WITH VISIBILITY TOGGLE (password fields)
   ========================================================================== */
.input-with-toggle { position: relative; display: flex; }
.input-with-toggle input { flex: 1; padding-left: 42px; padding-right: 14px; }
html[dir="ltr"] .input-with-toggle input { padding-left: 14px; padding-right: 42px; }

.pw-toggle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    border: none;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 10px 0 0 10px;
    transition: color 0.2s;
    z-index: 1;
}
html[dir="ltr"] .pw-toggle { left: auto; right: 0; border-radius: 0 10px 10px 0; }
.pw-toggle:hover { color: var(--color-primary, #004282); }
html[data-theme="dark"] .pw-toggle { color: #888; }
html[data-theme="dark"] .pw-toggle:hover { color: #7eb9ff; }

/* ==========================================================================
   PASSWORD STRENGTH INDICATOR
   ========================================================================== */
.pw-strength {
    height: 4px;
    background: #e8e8ee;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}
.pw-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 0.35s ease, background-color 0.35s ease;
    background: #ddd;
}
.pw-strength-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    margin-top: 4px;
    height: 1.1em;
    transition: color 0.3s;
}
html[data-theme="dark"] .pw-strength { background: #3d3d55; }

/* ==========================================================================
   INPUT OK STATE
   ========================================================================== */
.login-form-group input.login-input-ok {
    border-color: #22c55e;
    background: #f0fdf4;
}
html[data-theme="dark"] .login-form-group input.login-input-ok {
    border-color: #16a34a;
    background: #0f2d1a;
}

/* ==========================================================================
   AUTH SWITCH TEXT  (link to the other tab at bottom of form)
   ========================================================================== */
.auth-switch-text {
    text-align: center;
    margin-top: 18px;
    font-size: 0.84rem;
    color: #888;
}
.auth-switch-link {
    border: none;
    background: transparent;
    color: var(--color-primary, #004282);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0 4px;
    text-decoration: underline;
    transition: opacity 0.2s;
}
.auth-switch-link:hover { opacity: 0.75; }
html[data-theme="dark"] .auth-switch-link { color: #7eb9ff; }

/* ==========================================================================
   REGISTER BUTTON (green gradient variant)
   ========================================================================== */
.login-submit-btn.register-btn {
    background: linear-gradient(135deg, #0d9f6e 0%, #059669 100%);
}
.login-submit-btn.register-btn:hover {
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.35);
    transform: translateY(-2px);
}

/* ==========================================================================
   REGISTER AVATAR UPLOAD
   ========================================================================== */
.reg-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.reg-avatar-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2.5px dashed rgba(0, 66, 130, 0.4);
    background: rgba(0, 66, 130, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.reg-avatar-circle:hover {
    border-color: var(--color-primary, #004282);
    background: rgba(0, 66, 130, 0.1);
    transform: scale(1.04);
}
.reg-avatar-circle img#regAvatarPreview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none;
}
.reg-avatar-circle.has-image img#regAvatarPreview { display: block; }
.reg-avatar-circle.has-image .reg-avatar-overlay { opacity: 0; }
.reg-avatar-circle.has-image:hover .reg-avatar-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.45);
}
.reg-avatar-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-primary, #004282);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    transition: opacity 0.2s;
    pointer-events: none;
    position: relative;
    z-index: 1;
}
.reg-avatar-overlay i { font-size: 1.3rem; }
html[data-theme="dark"] .reg-avatar-circle {
    border-color: rgba(106, 173, 238, 0.4);
    background: rgba(106, 173, 238, 0.07);
}
html[data-theme="dark"] .reg-avatar-overlay { color: #7eb9ff; }

/* ==========================================================================
   PERFORMANCE: GPU layer promotion for animated elements
   ========================================================================== */
.slide { will-change: opacity; }
.loader-spinner { will-change: transform; }
.hero-content { will-change: transform, opacity; }
.animate-on-scroll { will-change: opacity, transform; }
.car-card { will-change: transform; }
.whatsapp-float { will-change: transform; }
.back-to-top { will-change: opacity, transform; }

/* Content-visibility for below-fold sections (auto-skip rendering until in viewport) */
.fleet.section,
.offers-section,
.booking-process,
.services-section,
.testimonials-section,
.loyalty-section,
.certificates-section,
.gallery-section,
.about-section,
.vision-section,
.faq-section,
.blog-section,
.surprise-section,
.prize-section,
.raffle-section,
.contact-section { content-visibility: auto; contain-intrinsic-size: auto 800px; }

/* Smooth scroll for reduced-motion users */
@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;
    }
    .slide { will-change: auto; }
    .animate-on-scroll { will-change: auto; }
}

/* Print styles */
@media print {
    .navbar, .whatsapp-float, .back-to-top, .announcement-bar,
    .cookie-banner, .loader, .reading-progress, .hero-scroll-indicator,
    .slider-controls, .quick-booking-container { display: none !important; }
    body { color: #000; background: #fff; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

/* ==========================================================================
   Logistics Solutions Section
   ========================================================================== */

.logistics-section {
    background: var(--color-white);
    padding: 80px 0;
}

.logistics-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.logistics-category-card {
    background: var(--color-light);
    border-radius: var(--border-radius-lg);
    padding: 32px 24px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-top: 4px solid var(--color-primary);
    transition: var(--transition);
}

.logistics-category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow-hover);
    border-top-color: var(--color-secondary);
}

.logistics-category-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logistics-category-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logistics-category-icon i {
    font-size: 1.6rem;
    color: var(--color-white);
}

.logistics-category-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.logistics-category-tagline {
    font-size: 0.85rem;
    color: var(--color-gray);
    margin: 2px 0 0;
}

.logistics-vehicles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    flex: 1;
}

.logistics-vehicle-item {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 66, 130, 0.1);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.logistics-vehicle-item:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 6px 20px rgba(0, 66, 130, 0.14);
    transform: translateY(-3px);
}

.logistics-vehicle-icon {
    width: 100%;
    height: 180px;
    background: var(--color-secondary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logistics-vehicle-icon i {
    font-size: 3rem;
    color: var(--color-secondary);
}

.logistics-vehicle-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.logistics-no-vehicles {
    color: var(--color-gray);
    font-size: 0.88rem;
    text-align: center;
    padding: 16px 0;
    opacity: 0.8;
}

.logistics-vehicle-info {
    flex: 1;
    padding: 14px;
}

.logistics-vehicle-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 4px;
}

.logistics-vehicle-info h4 .vehicle-en {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--color-gray);
    margin-right: 4px;
}

.logistics-vehicle-info p {
    font-size: 0.85rem;
    color: var(--color-gray);
    margin: 0 0 10px;
    line-height: 1.55;
}

.logistics-vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.logistics-vehicle-specs span {
    font-size: 0.75rem;
    background: rgba(0, 66, 130, 0.08);
    color: var(--color-primary);
    padding: 3px 9px;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.logistics-cta-btn {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/* Logistics Bottom CTA */
.logistics-bottom-cta {
    margin-top: 52px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-radius: var(--border-radius-lg);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--color-white);
}

.logistics-bottom-cta-icon {
    font-size: 2.4rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.logistics-bottom-cta-text {
    flex: 1;
}

.logistics-bottom-cta-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.logistics-bottom-cta-text p {
    font-size: 0.92rem;
    opacity: 0.88;
    margin: 0;
}

/* Dark mode overrides */
html[data-theme="dark"] .logistics-category-card {
    background: #16213e;
}

html[data-theme="dark"] .logistics-vehicle-item {
    background: #1a1a2e;
    border-color: rgba(106, 173, 238, 0.15);
}

html[data-theme="dark"] .logistics-vehicle-specs span {
    background: rgba(106, 173, 238, 0.12);
    color: var(--color-primary);
}

/* Responsive: tablets */
@media (max-width: 992px) {
    .logistics-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .logistics-bottom-cta {
        flex-direction: column;
        text-align: center;
    }
}

/* Responsive: mobile */
@media (max-width: 600px) {
    .logistics-categories {
        grid-template-columns: 1fr;
    }

    .logistics-bottom-cta {
        padding: 28px 20px;
    }
}