/* ==========================================================
   PREMIUM BOOKING UI V3
   Dark / Gold / RTL / High Contrast
   ضع هذا الكود في نهاية Custom CSS
========================================================== */

:root {
    --bk-bg: #101010;
    --bk-card: #161616;
    --bk-card-2: #1b1b1b;
    --bk-input: #0d0d0d;

    --bk-gold: #D9A51E;
    --bk-gold-hover: #E9B62D;
    --bk-gold-soft: rgba(217,165,30,.12);

    --bk-text: #FFFFFF;
    --bk-text-soft: #E1E1E1;
    --bk-muted: #A7A7A7;

    --bk-border: #333333;
    --bk-border-soft: rgba(255,255,255,.10);

    --bk-danger: #FF6B6B;
    --bk-success: #45D483;

    --bk-radius: 12px;
    --bk-radius-lg: 16px;
}


/* ==========================================================
   1. المنطقة الأساسية
========================================================== */

.booking-form,
.form-box,
.car-extra-services,
.additional-services,
.price-summary,
.total-summary {
    color: var(--bk-text) !important;
    font-family: inherit;
}


/* لا تجعل كل Widgets الموقع شفافة */
.booking-form,
.form-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   2. تقسيم الحقول بشكل أوضح
========================================================== */

.booking-form .form-group,
.booking-form .mb-3,
.booking-form .mb-4,
.booking-form .field-group {
    margin-bottom: 22px !important;
}


/* ==========================================================
   3. Labels
========================================================== */

.booking-form label,
.booking-form .form-label,
.form-check-label {
    display: block;

    color: #F5F5F5 !important;
    -webkit-text-fill-color: #F5F5F5 !important;

    font-size: 15px !important;
    font-weight: 650 !important;

    line-height: 1.6;

    margin-bottom: 8px !important;
}


/* النجمة المطلوبة */
.booking-form label .required,
.booking-form label sup,
.booking-form .required {
    color: var(--bk-gold) !important;
    -webkit-text-fill-color: var(--bk-gold) !important;
}


/* ==========================================================
   4. INPUT / SELECT / TEXTAREA
========================================================== */

.booking-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.booking-form select,
.booking-form textarea,
.booking-form .form-control,
.booking-form .form-select {

    width: 100% !important;

    background: var(--bk-input) !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    border: 1px solid var(--bk-border) !important;

    border-radius: 11px !important;

    min-height: 54px;

    padding: 12px 16px !important;

    font-size: 15px !important;
    font-weight: 500;

    line-height: 1.5;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}


/* Hover */
.booking-form input:not([type="radio"]):not([type="checkbox"]):hover,
.booking-form select:hover,
.booking-form textarea:hover,
.booking-form .form-control:hover {

    border-color: #555 !important;

    background: #111111 !important;
}


/* Focus */
.booking-form input:not([type="radio"]):not([type="checkbox"]):focus,
.booking-form select:focus,
.booking-form textarea:focus,
.booking-form .form-control:focus,
.booking-form .form-select:focus {

    background: #111111 !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    border-color: var(--bk-gold) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(217,165,30,.14) !important;
}


/* ==========================================================
   5. Placeholder
========================================================== */

.booking-form input::placeholder,
.booking-form textarea::placeholder {

    color: #737373 !important;
    -webkit-text-fill-color: #737373 !important;

    opacity: 1 !important;

    font-weight: 400;
}


/* ==========================================================
   6. SELECT
========================================================== */

.booking-form select,
.booking-form .form-select {

    cursor: pointer;

    color: #FFFFFF !important;

    background-color: var(--bk-input) !important;
}


.booking-form select option {

    background: #111111 !important;

    color: #FFFFFF !important;

    padding: 10px;
}


/* ==========================================================
   7. إصلاح Chrome Autofill
========================================================== */

.booking-form input:-webkit-autofill,
.booking-form input:-webkit-autofill:hover,
.booking-form input:-webkit-autofill:focus {

    -webkit-text-fill-color: #FFFFFF !important;

    -webkit-box-shadow:
        0 0 0 1000px #0D0D0D inset !important;

    caret-color: #FFFFFF !important;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* ==========================================================
   8. النصوص التوضيحية أسفل الحقول
========================================================== */

.booking-form small,
.booking-form .form-text,
.booking-form .help-text,
.booking-form .description,
.booking-form .text-muted {

    color: var(--bk-muted) !important;
    -webkit-text-fill-color: var(--bk-muted) !important;

    font-size: 13px !important;

    line-height: 1.7;

    opacity: 1 !important;
}


/* ==========================================================
   9. Radio Cards - الاستلام / التوصيل
========================================================== */

.booking-form .form-check,
.car-extra-services .form-check,
.additional-services .form-check {

    position: relative;

    color: var(--bk-text);

    transition: all .2s ease;
}


/* Checkbox / Radio */
.booking-form input[type="checkbox"],
.booking-form input[type="radio"],
.car-extra-services input[type="checkbox"],
.car-extra-services input[type="radio"],
.additional-services input[type="checkbox"],
.additional-services input[type="radio"] {

    width: 20px !important;
    height: 20px !important;

    min-width: 20px;

    accent-color: var(--bk-gold) !important;

    cursor: pointer;
}


/* عناصر اختيار كبيرة */
.booking-form .delivery-option,
.booking-form .pickup-option,
.booking-form .radio-card,
.booking-form .option-card {

    background: #161616 !important;

    border: 1px solid #3A3A3A !important;

    border-radius: 12px !important;

    padding: 16px 18px !important;

    cursor: pointer;

    transition:
        border .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.booking-form .delivery-option:hover,
.booking-form .pickup-option:hover,
.booking-form .radio-card:hover,
.booking-form .option-card:hover {

    border-color: rgba(217,165,30,.7) !important;

    background: #1A1915 !important;
}


/* selected إذا كان القالب يستخدم هذه الكلاسات */
.booking-form .active,
.booking-form .selected,
.booking-form .radio-card.selected,
.booking-form .option-card.selected {

    border-color: var(--bk-gold) !important;

    background:
        rgba(217,165,30,.10) !important;

    box-shadow:
        inset 0 0 0 1px rgba(217,165,30,.15) !important;
}


/* ==========================================================
   10. RADIO نفسه
========================================================== */

.booking-form input[type="radio"] {

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 22px !important;
    height: 22px !important;

    border-radius: 50%;

    border: 2px solid #777 !important;

    background: #242424 !important;

    display: inline-grid;

    place-content: center;

    transition: .2s ease;
}


.booking-form input[type="radio"]::before {

    content: "";

    width: 10px;
    height: 10px;

    border-radius: 50%;

    transform: scale(0);

    transition: transform .15s ease;

    background: var(--bk-gold);
}


.booking-form input[type="radio"]:checked {

    border-color: var(--bk-gold) !important;

    background: rgba(217,165,30,.08) !important;
}


.booking-form input[type="radio"]:checked::before {

    transform: scale(1);
}


/* ==========================================================
   11. CHECKBOX
========================================================== */

.booking-form input[type="checkbox"] {

    appearance: none !important;
    -webkit-appearance: none !important;

    width: 20px !important;
    height: 20px !important;

    border: 1px solid #666 !important;

    background: #121212 !important;

    border-radius: 5px !important;

    cursor: pointer;

    position: relative;
}


.booking-form input[type="checkbox"]:checked {

    background: var(--bk-gold) !important;

    border-color: var(--bk-gold) !important;
}


.booking-form input[type="checkbox"]:checked::after {

    content: "✓";

    position: absolute;

    inset: 0;

    color: #111 !important;

    font-size: 14px;

    font-weight: 900;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ==========================================================
   12. SERVICES
========================================================== */

.car-extra-services,
.additional-services {

    background: transparent !important;
}


.car-extra-services .form-check,
.additional-services .form-check {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 10px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.car-extra-services label,
.additional-services label {

    color: #EEEEEE !important;

    font-size: 14px !important;

    margin: 0 !important;

    cursor: pointer;
}


.car-extra-services .form-check:hover label,
.additional-services .form-check:hover label {

    color: #FFFFFF !important;
}


/* ==========================================================
   13. RIGHT SIDE CARDS
========================================================== */

#collapseAdditionalInfo,
.price-summary,
.total-summary,
.review-summary,
.reviews-summary {

    background: #171717 !important;

    border:
        1px solid rgba(255,255,255,.07) !important;

    border-radius: 14px !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.16) !important;
}


/* ==========================================================
   14. Gold Section Headers
========================================================== */

/* عنوان القسم الذهبي: يُطبَّق على زر العنوان فقط.
   كان مطبقًا على .group-collapse-expand كاملًا (العنوان + المحتوى)، فكان
   محتوى القسم يرث لون النص الداكن #111 فوق خلفية داكنة ويختفي. */
.group-collapse-expand > .btn-collapse,
.booking-form .section-title,
.widget-title,
.sidebar-title {

    background:
        linear-gradient(
            135deg,
            #E2AC20 0%,
            #D39C12 100%
        ) !important;

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    border-radius: 10px !important;

    min-height: 58px;

    padding: 12px 20px !important;

    font-weight: 800 !important;

    letter-spacing: -.2px;

    box-shadow:
        0 5px 14px rgba(217,165,30,.09) !important;
}


/* النصوص داخل الهيدر الذهبي */
.group-collapse-expand > .btn-collapse *,
.booking-form .section-title * {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;
}


/* الأيقونة والسهم */
.group-collapse-expand > .btn-collapse svg,
.group-collapse-expand > .btn-collapse svg path {

    stroke: #111111 !important;

    color: #111111 !important;
}


/* ==========================================================
   15. معلومات إضافية
========================================================== */

#collapseAdditionalInfo {

    color: #FFFFFF !important;

    padding: 18px !important;
}


#collapseAdditionalInfo p,
#collapseAdditionalInfo span,
#collapseAdditionalInfo label,
#collapseAdditionalInfo strong,
#collapseAdditionalInfo li {

    color: #E9E9E9 !important;

    -webkit-text-fill-color: #E9E9E9 !important;

    opacity: 1 !important;
}


/* ==========================================================
   16. Badges
========================================================== */

#collapseAdditionalInfo .badge {

    background: rgba(217,165,30,.09) !important;

    color: #F3CA5E !important;

    -webkit-text-fill-color: #F3CA5E !important;

    border:
        1px solid rgba(217,165,30,.35) !important;

    border-radius: 100px !important;

    padding: 5px 10px !important;

    font-weight: 600;
}


/* ==========================================================
   17. Summary / Price
========================================================== */

.price-summary,
.total-summary {

    padding: 20px !important;
}


.price-summary p,
.price-summary span,
.total-summary p,
.total-summary span {

    color: #D8D8D8 !important;

    -webkit-text-fill-color: #D8D8D8 !important;
}


.total-summary .total,
.total-summary strong,
.price-summary .total-price {

    color: #F0BD38 !important;

    -webkit-text-fill-color: #F0BD38 !important;

    font-size: 20px !important;

    font-weight: 800 !important;
}


/* ==========================================================
   18. الفواصل
========================================================== */

.booking-form hr,
.price-summary hr,
.total-summary hr {

    border: 0 !important;

    border-top:
        1px solid rgba(255,255,255,.09) !important;

    margin: 18px 0 !important;

    opacity: 1 !important;
}


/* ==========================================================
   19. زر الحجز فقط
   مهم: لا نستهدف جميع أزرار الموقع
========================================================== */

.booking-form button[type="submit"],
.booking-form input[type="submit"],
.booking-form .booking-submit,
.booking-form .btn-book,
.booking-form .btn-primary {

    background:
        linear-gradient(
            135deg,
            #E1AB20,
            #C9910E
        ) !important;

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    border: none !important;

    border-radius: 10px !important;

    min-height: 52px;

    padding: 12px 22px !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    box-shadow:
        0 6px 18px rgba(217,165,30,.18) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
}


.booking-form button[type="submit"]:hover,
.booking-form .booking-submit:hover,
.booking-form .btn-book:hover {

    filter: brightness(1.07);

    transform: translateY(-1px);

    box-shadow:
        0 9px 24px rgba(217,165,30,.25) !important;
}


.booking-form button[type="submit"]:active {

    transform: translateY(0);
}


/* ==========================================================
   20. Coupon button
========================================================== */

.cr-copy-coupon-btn {

    background:
        linear-gradient(
            135deg,
            #E1AB20,
            #C9910E
        ) !important;

    color: #111111 !important;

    border: none !important;

    border-radius: 100px !important;

    padding: 9px 19px !important;

    font-weight: 800 !important;

    cursor: pointer;
}


/* ==========================================================
   21. ERROR
========================================================== */

.booking-form .invalid-feedback,
.booking-form .error,
.booking-form .text-danger {

    color: var(--bk-danger) !important;

    -webkit-text-fill-color: var(--bk-danger) !important;

    font-size: 13px;
}


.booking-form .is-invalid {

    border-color:
        var(--bk-danger) !important;
}


/* ==========================================================
   22. SUCCESS
========================================================== */

.booking-form .is-valid {

    border-color:
        var(--bk-success) !important;
}


/* ==========================================================
   23. إزالة Shadow البحث
========================================================== */

.cr-adv-card,
.shortcode-car-advance-search,
.box-search-advance-home10 {

    box-shadow: none !important;

    filter: none !important;
}


.cr-adv-card::before,
.cr-adv-card::after,
.shortcode-car-advance-search::before,
.shortcode-car-advance-search::after {

    content: none !important;

    display: none !important;
}


/* ==========================================================
   24. Overlay
========================================================== */

.hero::before,
.hero::after,
.banner::before,
.banner::after,
.bg-overlay.rounded-12.overflow-hidden::after {

    background: transparent !important;

    opacity: 0 !important;
}


/* ==========================================================
   25. Map
========================================================== */

a.btn-map,
a[href*="maps.google.com"],
a[href*="google.com/maps"] {

    display: none !important;
}


/* ==========================================================
   26. Keyboard accessibility
========================================================== */

.booking-form input:focus-visible,
.booking-form select:focus-visible,
.booking-form textarea:focus-visible,
.booking-form button:focus-visible {

    outline:
        2px solid var(--bk-gold) !important;

    outline-offset: 2px;
}


/* ==========================================================
   27. RTL
========================================================== */

html[dir="rtl"] .booking-form,
html[dir="rtl"] .price-summary,
html[dir="rtl"] .total-summary {

    text-align: right;
}


html[dir="rtl"] .booking-form input,
html[dir="rtl"] .booking-form select,
html[dir="rtl"] .booking-form textarea {

    text-align: right;
}


/* ==========================================================
   28. MOBILE
========================================================== */

@media (max-width: 767px) {

    .booking-form .form-group,
    .booking-form .mb-3,
    .booking-form .mb-4 {

        margin-bottom: 18px !important;
    }


    .booking-form input:not([type="radio"]):not([type="checkbox"]),
    .booking-form select,
    .booking-form textarea {

        min-height: 52px;

        font-size: 16px !important;
    }


    .group-collapse-expand,
    .booking-form .section-title {

        min-height: 52px;

        padding: 10px 15px !important;

        font-size: 18px !important;
    }


    #collapseAdditionalInfo,
    .price-summary,
    .total-summary {

        border-radius: 11px !important;
    }
}


/* ==========================================================
   29. منع Footer / Sticky Bar من تغطية آخر النموذج
========================================================== */

.booking-form {

    padding-bottom: 70px !important;
}


@media (max-width: 767px) {

    .booking-form {

        padding-bottom: 100px !important;
    }
}

/* ==========================================================
   29. إصلاحات التباين — مراجعة الألوان
   تصحيحات فوق التصميم الأصلي، لا تغيّر شكله.
========================================================== */

/* --- 29.1 الروابط عند مرور الماوس ---------------------------
   خيار القالب primary_color_hover = #333333 (رمادي غامق مناسب
   للخلفية الفاتحة)، والقالب يفرضه على كل رابط بـ
   a:hover { color: ... !important }. فوق الهيدر/الفوتر الداكن
   كان النص يختفي عند مرور الماوس. */
[data-bs-theme="dark"] .header a:not(.btn):hover,
[data-bs-theme="dark"] .footer a:not(.btn):hover,
[data-bs-theme="dark"] footer a:not(.btn):hover,
[data-bs-theme="dark"] .mobile-header-wrapper-style a:not(.btn):hover,
[data-bs-theme="dark"] .sidebar-canvas-wrapper a:not(.btn):hover {
    color: var(--primary-color, #daa727) !important;
    -webkit-text-fill-color: var(--primary-color, #daa727) !important;
}

/* --- 29.2 أيقونات فوق الأزرار الذهبية -----------------------
   نص الزر الذهبي داكن، لكن الأيقونة كانت فاتحة فتكاد تختفي. */
.btn-primary svg,
.btn-primary svg path,
.btn-book svg,
.btn-book svg path {
    fill: currentColor;
    stroke: currentColor;
}

/* --- 29.3 أيقونات "تحتاج مساعدة" الباهتة في الوضع الداكن ---- */
[data-bs-theme="dark"] .box-need-help svg,
[data-bs-theme="dark"] .box-need-help svg path {
    stroke: var(--bs-neutral-1000, #f2f2f2) !important;
    color: var(--bs-neutral-1000, #f2f2f2) !important;
    opacity: .75;
}

/* --- 29.4 أيقونات التاريخ والوقت داخل الحقول ----------------
   حقول date/time ترسم أيقونة التقويم/الساعة بلون يحدده
   color-scheme. بدون تحديده كان المتصفح يرسمها داكنة فوق
   حقل داكن فتختفي. */
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="time"],
[data-bs-theme="dark"] input[type="datetime-local"],
[data-bs-theme="dark"] input[type="month"],
[data-bs-theme="dark"] input[type="week"],
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
    color-scheme: dark !important;
}

[data-bs-theme="light"] input[type="date"],
[data-bs-theme="light"] input[type="time"],
[data-bs-theme="light"] input[type="datetime-local"],
[data-bs-theme="light"] input[type="month"],
[data-bs-theme="light"] input[type="week"],
[data-bs-theme="light"] select,
[data-bs-theme="light"] textarea {
    color-scheme: light !important;
}

/* --- 29.5 تفاصيل بطاقة السيارة في الوضع الداكن -------------- */
[data-bs-theme="dark"] .card-facilities span,
[data-bs-theme="dark"] .card-info .price .mx-1,
[data-bs-theme="dark"] .card-info .mx-1 {
    color: var(--bs-neutral-1000, #f2f2f2) !important;
}

/* --- 29.6 قائمة اختيار الفرع تنزل خلف الأقسام التالية -------
   القائمة عنصر absolute داخل صندوق بحث غير مموضع، فكانت تتنافس
   في الترتيب مع بطاقات القسم التالي (وكلها position: relative).
   جعل صندوق البحث سياق تكديس مستقل يضمن نزول القائمة فوق أي
   قسم بعده. */
.shortcode-car-advance-search {
    position: relative;
    z-index: 30;
}

.shortcode-car-advance-search .cr-adv-menu,
.shortcode-car-advance-search .dropdown-menu {
    z-index: 1000;
}