/* ═══════════════════════════════════════════════════════════════
   Gulf Yachts — arabic.css  (self-hosted font, full RTL layout)
═══════════════════════════════════════════════════════════════ */

/* ── Local @font-face ── */
@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('fonts/DroidArabicKufi-Regular.eot');
    src: url('fonts/DroidArabicKufi-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidArabicKufi-Regular.woff2') format('woff2'),
         url('fonts/DroidArabicKufi-Regular.woff') format('woff'),
         url('fonts/DroidArabicKufi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Apply Arabic font — text elements only ── */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] li,
html[lang="ar"] td, html[lang="ar"] th, html[lang="ar"] label,
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select,
html[lang="ar"] button, html[lang="ar"] div {
    font-family: 'Droid Arabic Kufi', 'Cairo', sans-serif !important;
    font-weight: normal !important;
}

/* ── Protect icon fonts ── */
i.fa, .fa::before                        { font-family: 'FontAwesome' !important; direction: ltr !important; font-weight: normal !important; }
[class*="flaticon"]::before              { font-family: 'Flaticon' !important;    direction: ltr !important; }
[class*="lnr"]::before, .lnr::before    { font-family: 'Linearicons-Free' !important; direction: ltr !important; }

/* ── RTL base ── */
html[lang="ar"] body { direction: rtl; text-align: right; line-height: 1.9; }

/* ══════════════════════════════════════════════════════════════
   HEADER — EN left | LOGO center-right | ≡ far-right
══════════════════════════════════════════════════════════════ */
header.main-header.sticky-header.sh-2 {
    background: #fff !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.07) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
}
header.main-header .navbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 8px 20px !important;
    background: transparent !important;
}
/* EN link: far LEFT */
header.main-header a.lang-switch {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
}
/* Spacer pushes logo+hamburger to right */
header.main-header .navbar-brand.company-logo-2 {
    order: 9 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}
/* Hamburger: far RIGHT */
header.main-header button#drawer,
header.main-header .navbar-toggler {
    order: 10 !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
}
header.main-header button#drawer .fa-bars,
header.main-header .navbar-toggler .fa-bars {
    font-size: 17px !important;
    font-weight: 300 !important;
    color: #555 !important;
    opacity: 0.65 !important;
}
header.main-header .navbar-expand-lg .navbar-toggler,
header.main-header button#drawer { display: flex !important; }
header.main-header .navbar-collapse { display: none !important; flex: none !important; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — always slides from RIGHT
══════════════════════════════════════════════════════════════ */
.nav-sidebar {
    right: -300px !important;
    left: auto !important;
    transition: right 0.3s ease !important;
    text-align: right !important;
}
.nav-sidebar.active { right: 0 !important; left: auto !important; }
#dismiss { right: 10px !important; left: auto !important; }
.nav-sidebar .sidebar-navigation { text-align: right !important; }
.nav-sidebar .sidebar-navigation ul li a { padding-right: 15px !important; padding-left: 0 !important; }
.nav-sidebar .get-in-touch, .nav-sidebar .get-social { text-align: right !important; }

/* ══════════════════════════════════════════════════════════════
   TABS — first tab RIGHTMOST (row-reverse)
══════════════════════════════════════════════════════════════ */
html[lang="ar"] .nav-tabs {
    flex-direction: row-reverse !important;
    direction: rtl !important;
}
html[lang="ar"] .tab-pane, html[lang="ar"] .tab-content { text-align: right !important; direction: rtl !important; }
html[lang="ar"] .tab-pane ul li { direction: rtl !important; }
html[lang="ar"] .tab-pane .advanced-search ul li { flex-direction: row-reverse !important; }

/* ══════════════════════════════════════════════════════════════
   CAR DETAILS — headings, price, alignment
══════════════════════════════════════════════════════════════ */
html[lang="ar"] .heading-car { direction: rtl !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; }
html[lang="ar"] .heading-car h3, html[lang="ar"] .heading-car p { text-align: right !important; }
html[lang="ar"] .sidebar-title { text-align: right !important; }
html[lang="ar"] .heading-2 { text-align: right !important; direction: rtl !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 { text-align: right !important; direction: rtl !important; }
html[lang="ar"] p { text-align: right !important; direction: rtl !important; }

/* Banner */
.banner { margin-top: 0 !important; padding-top: 0 !important; }
.banner .carousel-item, .banner .item-bg { margin-top: 0 !important; }
html[lang="ar"] .car-details-page.content-area-4,
html[lang="ar"] .content-area-4 { padding-top: 30px !important; }

/* Footer */
html[lang="ar"] .footer-item { text-align: right !important; }
html[lang="ar"] .footer-menu li a { text-align: right !important; }




/* ══════════════════════════════════════════════════════════════
   PRICE: far LEFT in Arabic (pull-left = price, pull-right = name)
   HTML: .pull-left contains price, .pull-right contains title
   In RTL, pull-left floats right — we need to reverse
══════════════════════════════════════════════════════════════ */
html[lang="ar"] .heading-car.clearfix {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    direction: rtl !important;
    width: 100% !important;
}
/* pull-right = boat name → RIGHT side in Arabic */
html[lang="ar"] .heading-car .pull-right {
    float: none !important;
    order: 1 !important;
    text-align: right !important;
}
/* pull-left = price → LEFT side in Arabic */
html[lang="ar"] .heading-car .pull-left {
    float: none !important;
    order: 2 !important;
    text-align: left !important;
    margin-left: 0 !important;
}
html[lang="ar"] .price-box-3 {
    text-align: left !important;
    direction: ltr !important;
    color: #dc651e !important;
    font-size: 28px !important;
    font-weight: bold !important;
}

/* ══════════════════════════════════════════════════════════════
   TABS: first tab = RIGHTMOST (row-reverse on nav-tabs)
══════════════════════════════════════════════════════════════ */
html[lang="ar"] .nav-tabs {
    flex-direction: row-reverse !important;
    display: flex !important;
    flex-wrap: wrap !important;
    direction: rtl !important;
    border-bottom: 1px solid #dee2e6 !important;
}
html[lang="ar"] .nav-tabs .nav-item {
    flex: none !important;
}
html[lang="ar"] .nav-tabs .nav-link {
    text-align: center !important;
    direction: rtl !important;
}
html[lang="ar"] .nav-tabs .nav-link.active {
    background-color: #dc651e !important;
    color: #fff !important;
    border-color: #dc651e !important;
}

/* ══════════════════════════════════════════════════════════════
   THUMBNAIL COLUMN: strictly 4 images, rest on scroll
══════════════════════════════════════════════════════════════ */
html[lang="ar"] .product-slider-box .slider-nav {
    height: 366px !important;
    max-height: 366px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
html[lang="ar"] .product-slider-box .thumb-slide {
    flex-shrink: 0 !important;
    height: 87px !important;
    min-height: 87px !important;
    max-height: 87px !important;
}
html[lang="ar"] .product-slider-box .thumb-slide img {
    height: 87px !important;
    min-height: 87px !important;
    max-height: 87px !important;
    width: 100% !important;
    object-fit: cover !important;
}
/* Sync nav height to main image height via JS — CSS base */
html[lang="ar"] .product-slider-box .slider-for img {
    display: none !important;
    width: 100% !important;
    height: auto !important;
}
html[lang="ar"] .product-slider-box .slider-for img.active-slide,
html[lang="ar"] .product-slider-box .slider-for img:first-child {
    display: block !important;
}
html[lang="ar"] .product-slider-box .slider-for { order: 1 !important; }
html[lang="ar"] .product-slider-box .slider-nav  { order: 2 !important; }

/* ══════════════════════════════════════════════════════════════
   SPEC LIST — value LEFT, label (span) RIGHT
   HTML: <li dir="rtl">value<span>label</span></li>
══════════════════════════════════════════════════════════════ */
html[lang="ar"] .widget-2 ul li,
html[lang="ar"] .advanced-search ul li,
html[lang="ar"] .detail ul li {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    direction: rtl !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-weight: normal !important;
    font-size: 14px !important;
}
html[lang="ar"] .widget-2 ul li span,
html[lang="ar"] .advanced-search ul li span,
html[lang="ar"] .detail ul li span {
    text-align: right !important;
    font-weight: normal !important;
    flex-shrink: 0 !important;
    color: #333 !important;
}