/* =========================================================
   Rehlat Altaer Alsagheer - FAST UI/UX Layer
   الهدف: نفس الهوية الفاخرة لكن أخف وأسرع.
   ملاحظة: لا يحتوي أي تعديل على Firebase أو قواعد البيانات.
   ========================================================= */
:root {
    --primary: #0b1f3a;
    --primary-dark: #071629;
    --primary-light: #173b63;
    --secondary: #cda881;
    --secondary-dark: #a67c52;
    --accent: #e7c79b;
    --dark: #111827;
    --muted: #667085;
    --light: #f8f5ef;
    --border: rgba(205,168,129,.22);
    --soft-border: rgba(11,31,58,.08);
    --surface: #ffffff;
    --soft-surface: #fbfaf7;
    --shadow: 0 10px 26px rgba(7,22,41,.09);
    --shadow-strong: 0 16px 38px rgba(7,22,41,.14);
    --radius: 20px;
    --radius-sm: 14px;
}

html {
    scroll-padding-top: 86px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    background: linear-gradient(180deg, #f8f5ef 0%, #eef4f7 55%, #fafafa 100%) !important;
    color: var(--dark) !important;
}

::selection { background: rgba(205,168,129,.34); color: var(--primary-dark); }
img { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid rgba(205,168,129,.7) !important;
    outline-offset: 3px !important;
}
.container {
    width: min(1180px, calc(100% - 32px)) !important;
    margin-inline: auto !important;
}

/* تحميل أخف */
.preloader {
    background: linear-gradient(135deg, #071629, #0b1f3a) !important;
    color: #fff !important;
}
.preloader-spinner {
    width: 46px !important;
    height: 46px !important;
    border-color: rgba(255,255,255,.18) !important;
    border-top-color: var(--secondary) !important;
}
.preloader-text { color: rgba(255,255,255,.82) !important; }

/* Navigation */
.navbar {
    height: 74px !important;
    padding: 0 clamp(16px, 4vw, 52px) !important;
    background: rgba(7,22,41,.95) !important;
    border-bottom: 1px solid rgba(205,168,129,.22) !important;
    box-shadow: 0 8px 22px rgba(7,22,41,.16) !important;
}
.navbar.scrolled { height: 66px !important; background: #071629 !important; }
.logo { gap: .75rem !important; }
.logo-img, .footer-logo img { object-fit: contain; }
.logo-text h1, .logo-text h2, .logo h2 {
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: -.02em;
}
.logo-text p { color: rgba(231,199,155,.92) !important; }
.nav-links a {
    color: rgba(255,255,255,.82) !important;
    font-weight: 800 !important;
    padding: .55rem .25rem !important;
}
.nav-links a:hover, .nav-links a.active { color: #fff !important; }
.nav-links a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: .25rem;
    border-radius: 999px;
    background: var(--secondary);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.mobile-menu-btn, .menu-toggle {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
}
.search-input, #searchInput {
    border: 1px solid rgba(205,168,129,.24) !important;
    background: #fff !important;
    color: var(--primary-dark) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(7,22,41,.06) !important;
}
.search-container i { color: var(--secondary-dark) !important; }
.admin-btn {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)) !important;
    color: #071629 !important;
    box-shadow: 0 10px 22px rgba(205,168,129,.22) !important;
}

/* Hero بدون صور خارجية حتى يكون أسرع */
.hero, .hero-programs, .visa-hero {
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 22%, rgba(205,168,129,.24), transparent 27%),
        linear-gradient(180deg, #071629 0%, #0b1f3a 58%, #b08a61 160%) !important;
}
.hero { min-height: 74vh !important; padding: 10rem 1rem 5.5rem !important; }
.hero-programs, .visa-hero { padding: 8.6rem 1rem 4.8rem !important; margin-top: 0 !important; }
.hero::after, .hero-programs::after, .visa-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, #f8f5ef);
}
.hero h2, .hero-content h2, .visa-hero h2 {
    font-size: clamp(2rem, 5vw, 4.6rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.045em;
    margin-bottom: 1rem !important;
    font-weight: 900 !important;
    text-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}
.hero p, .hero-content p, .visa-hero p {
    font-size: clamp(1rem, 2vw, 1.24rem) !important;
    color: rgba(255,255,255,.86) !important;
    max-width: 760px !important;
    line-height: 1.85 !important;
}

/* Buttons */
.cta-button, .program-button, .visa-button, .submit-btn, .btn-primary,
.reset-filters, .share-program, .back-btn, .back-home, .logout-btn, .add-data-btn,
.login-btn {
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
}
.cta-button, .program-button, .visa-button, .submit-btn, .btn-primary,
.share-program, .add-data-btn, .login-btn {
    background: linear-gradient(135deg, #e8c9a0, #cda881 52%, #a67c52) !important;
    color: #071629 !important;
    box-shadow: 0 10px 24px rgba(205,168,129,.22) !important;
}
.cta-button.secondary, .btn-secondary, .back-btn, .back-home {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.24) !important;
}
.cta-button:hover, .program-button:hover, .visa-button:hover, .submit-btn:hover,
.btn-primary:hover, .share-program:hover, .add-data-btn:hover, .login-btn:hover {
    box-shadow: 0 13px 28px rgba(205,168,129,.28) !important;
}

/* Sections */
.section-title { margin-bottom: clamp(1.7rem, 4vw, 3rem) !important; }
.section-title h2 {
    color: var(--primary-dark) !important;
    font-weight: 900 !important;
    letter-spacing: -.04em;
    font-size: clamp(1.75rem, 3.8vw, 3rem) !important;
}
.section-title h2::after {
    background: var(--secondary) !important;
    height: 4px !important;
    border-radius: 999px !important;
}
.section-title p { color: var(--muted) !important; }
.about, .airlines-section, .notifications-section, .programs-section,
.visa-services, .visa-process, .faq-section, .contact-section {
    padding-block: clamp(3.2rem, 6vw, 5.6rem) !important;
}

/* Cards */
.program-card, .visa-card, .notification-card, .airline-slide, .stat,
.detail-item, .process-step, .faq-item, .contact-form, .contact-info,
.form-container, .table-container, .login-container, .coming-soon, .program-details,
.stat-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}
.program-card, .visa-card, .airline-slide, .notification-card,
.process-step, .faq-item, .detail-item, .stat, .stat-card {
    border-radius: var(--radius) !important;
}
.program-card, .visa-card { overflow: hidden !important; }
.program-card:hover, .visa-card:hover, .notification-card:hover, .airline-slide:hover,
.process-step:hover, .detail-item:hover, .stat:hover, .stat-card:hover {
    box-shadow: var(--shadow-strong) !important;
    border-color: rgba(205,168,129,.4) !important;
}
.program-image, .visa-image, .modal-image, .program-hero .program-image {
    position: relative;
    overflow: hidden;
    background: #dbe3ea;
}
.program-image::after, .visa-image::after, .modal-image::after, .program-hero .program-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(7,22,41,.45), transparent 58%);
}
.program-image img, .visa-image img, .modal-image img, .program-hero .program-image img {
    transform: none !important;
    filter: none !important;
}
.program-badge, .visa-badge, .program-title .badge {
    background: rgba(7,22,41,.86) !important;
    color: #fff !important;
    border: 1px solid rgba(231,199,155,.36) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
}
.share-icon {
    background: #fff !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 8px 18px rgba(7,22,41,.14) !important;
}
.program-content h3, .visa-content h3, .notification-title, .detail-item h4,
.process-step h3, .faq-question h3 {
    color: var(--primary-dark) !important;
    font-weight: 900 !important;
    letter-spacing: -.02em;
}
.program-meta, .visa-meta, .program-details .program-meta { gap: .55rem !important; }
.program-meta span, .visa-meta span, .program-details .program-meta span, .visa-price {
    background: rgba(11,31,58,.045) !important;
    border: 1px solid rgba(11,31,58,.07) !important;
    color: #344054 !important;
    border-radius: 999px !important;
    padding: .48rem .72rem !important;
}
.program-meta i, .visa-meta i, .visa-price i, .detail-item i, .notification-title i {
    color: var(--secondary-dark) !important;
}
.program-content p, .visa-content p, .notification-message,
.program-description, .faq-answer p, .contact-info p {
    color: #5f6c7b !important;
    line-height: 1.78 !important;
}

/* Filters and Forms */
.filters {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow) !important;
    padding: clamp(1rem, 3vw, 1.45rem) !important;
    position: sticky;
    top: 82px;
    z-index: 50;
}
.filter-group label, .form-group label {
    color: var(--primary-dark) !important;
    font-weight: 900 !important;
}
.filter-select, .form-control, input, select, textarea {
    border: 1px solid rgba(11,31,58,.13) !important;
    background: #fff !important;
    border-radius: 15px !important;
    color: var(--primary-dark) !important;
}
.filter-select:focus, .form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: rgba(205,168,129,.72) !important;
}
.reset-filters {
    background: rgba(11,31,58,.08) !important;
    color: var(--primary-dark) !important;
}
.reset-filters:hover { background: var(--primary-dark) !important; color: #fff !important; }

/* Modals */
.modal, .share-modal { background: rgba(7,22,41,.72) !important; }
.modal-content, .share-modal-content {
    border-radius: 24px !important;
    border: 1px solid rgba(205,168,129,.25) !important;
    box-shadow: 0 20px 48px rgba(7,22,41,.28) !important;
    overflow: hidden !important;
}
.modal-header, .share-modal-header {
    background: linear-gradient(135deg, #071629, #0b1f3a) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(205,168,129,.22) !important;
}
.modal-header h3, .share-modal-header h3 { color: #fff !important; }
.close-modal, .close-share-modal {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #071629 0%, #0b1f3a 100%) !important;
    color: rgba(255,255,255,.82) !important;
    border-top: 1px solid rgba(205,168,129,.22) !important;
}
.footer h3, .footer-logo h2, .footer-links a:hover { color: #fff !important; }
.footer p, .copyright, .footer-links a { color: rgba(255,255,255,.72) !important; }
.social-link {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}
.social-link:hover {
    background: var(--secondary) !important;
    color: #071629 !important;
}
.whatsapp-float {
    background: linear-gradient(135deg, #25d366, #128c7e) !important;
    box-shadow: 0 12px 26px rgba(18,140,126,.24) !important;
    border: 3px solid rgba(255,255,255,.7) !important;
}
#scrollToTop {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)) !important;
    color: #071629 !important;
    box-shadow: 0 10px 24px rgba(205,168,129,.28) !important;
}

/* Login */
body.login-page {
    min-height: 100vh;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    background: linear-gradient(135deg, #071629 0%, #0b1f3a 70%, #183b5d 100%) !important;
}
.login-container {
    max-width: 480px !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 28px !important;
}
.login-header {
    background: linear-gradient(135deg, #071629, #0b1f3a) !important;
    color: #fff !important;
}
.company-icon {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)) !important;
    color: #071629 !important;
    box-shadow: 0 12px 28px rgba(205,168,129,.24) !important;
}
.login-header h1, .login-header p { color: #fff !important; }
.input-with-icon i { color: var(--secondary-dark) !important; }

/* Dashboard/Admin */
body.dashboard-page { background: #f4f6f8 !important; }
.sidebar {
    background: linear-gradient(180deg, #071629 0%, #0b1f3a 100%) !important;
    border-left: 1px solid rgba(205,168,129,.22) !important;
    box-shadow: -12px 0 32px rgba(7,22,41,.13) !important;
}
.sidebar-header, .sidebar-footer { border-color: rgba(255,255,255,.11) !important; }
.sidebar .logo h2, .user-info h4 { color: #fff !important; }
.user-info p { color: rgba(255,255,255,.64) !important; }
.user-avatar, .sidebar .nav-item.active {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark)) !important;
    color: #071629 !important;
    font-weight: 900 !important;
}
.sidebar .nav-item {
    color: rgba(255,255,255,.74) !important;
    border-radius: 15px !important;
}
.sidebar .nav-item:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}
.main-content { background: transparent !important; }
.main-header {
    background: #fff !important;
    border: 1px solid rgba(205,168,129,.2) !important;
    border-radius: 22px !important;
    margin: 1rem !important;
    box-shadow: var(--shadow) !important;
}
.main-header h1 { color: var(--primary-dark) !important; font-weight: 900 !important; }
.stat-card {
    overflow: hidden;
    position: relative;
    border-radius: 22px !important;
}
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--secondary);
}
.stat-card .value { color: var(--primary-dark) !important; font-weight: 900 !important; }
.stat-card h3 { color: var(--muted) !important; font-weight: 800 !important; }
.table-container, .form-container { border-radius: 22px !important; overflow: hidden !important; }
th { background: #0b1f3a !important; color: #fff !important; font-weight: 900 !important; }
td { border-bottom-color: rgba(11,31,58,.08) !important; }
tr:hover td { background: rgba(205,168,129,.06) !important; }
.action-btn { border-radius: 12px !important; border: 1px solid rgba(11,31,58,.08) !important; }

/* Details / states */
.program-details { border-radius: 28px !important; overflow: hidden !important; }
.program-title h1, .program-title { color: var(--primary-dark) !important; }
.program-hero { border-radius: 24px !important; overflow: hidden !important; }
.program-days, .program-notes {
    background: rgba(11,31,58,.04) !important;
    border: 1px solid rgba(205,168,129,.18) !important;
    border-radius: 20px !important;
}
.no-content, .error-message {
    background: #fff !important;
    border: 1px solid rgba(205,168,129,.2) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 24px !important;
    color: var(--primary-dark) !important;
}
.no-content i, .error-message i, .coming-soon i { color: var(--secondary-dark) !important; }

/* Add data */
.add-data-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    direction: rtl;
    font-family: 'Cairo', system-ui, sans-serif;
}
.add-data-card {
    width: min(640px, 100%);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(205,168,129,.24);
    box-shadow: var(--shadow);
    text-align: center;
}
.add-data-card h2, .coming-soon h1 { color: var(--primary-dark); font-weight: 900; }
.add-data-card p { color: var(--muted); margin-bottom: 1.4rem; }
#status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(11,31,58,.05);
    color: var(--primary-dark);
    min-height: 54px;
}
.coming-soon {
    width: min(560px, calc(100% - 32px)) !important;
    padding: clamp(2rem, 5vw, 3rem) !important;
    text-align: center;
}

/* إيقاف المؤثرات المكلفة */
.uiux-reveal, .uiux-reveal.is-visible { opacity: 1 !important; transform: none !important; }
.airlines-track, .airlines-slider, .airlines-carousel { animation-play-state: paused !important; }
* { scroll-behavior: auto !important; }

@media (max-width: 992px) {
    .navbar { height: 66px !important; }
    .nav-links {
        background: #071629 !important;
        border: 1px solid rgba(205,168,129,.2) !important;
        box-shadow: 0 16px 42px rgba(7,22,41,.22) !important;
        border-radius: 0 0 22px 22px !important;
        padding: 1rem !important;
    }
    .nav-links a { padding: .85rem 1rem !important; border-radius: 13px !important; }
    .hero, .hero-programs, .visa-hero { padding-top: 7.6rem !important; min-height: auto !important; }
    .filters { position: static; }
    .main-header { margin: .75rem !important; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 24px, 1180px) !important; }
    .hero-buttons { flex-direction: column !important; align-items: stretch !important; }
    .cta-button { width: 100% !important; justify-content: center !important; }
    .program-meta span, .visa-meta span { width: 100%; justify-content: center; }
    .modal-content, .share-modal-content { border-radius: 20px !important; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

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