/* Default theme RTL + locale switcher */

/* EN + AR: one consistent spacing system for header icons */
.top-option {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 14px;
}

.top-option .user-profile-dropdown,
.top-option .notification-dropdown,
.top-option .auth-buttons,
.top-option .to-search,
.top-option .theme-locale-switcher {
    margin: 0 !important;
    padding: 0;
    flex-shrink: 0;
}

.top-option .to-search {
    padding-inline-end: 0 !important;
}

.top-option .to-search:after {
    display: none;
}

.top-option .to-social {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
}

.top-option .to-social a {
    margin: 0 !important;
}

.theme-locale-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.theme-locale-switcher .locale-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.theme-locale-switcher .locale-toggle img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: contain;
}

.theme-locale-switcher .locale-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    min-width: 140px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1050;
}

.theme-locale-switcher .locale-dropdown.align-end {
    inset-inline-end: 0;
}

.theme-locale-switcher .locale-dropdown.align-start {
    inset-inline-start: 0;
}

.theme-locale-switcher .locale-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: #374151;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}

.theme-locale-switcher .locale-option:hover,
.theme-locale-switcher .locale-option.is-active {
    background: #f3f4f6;
}

/* Localized pages render the options as links (crawlable language URLs). */
.theme-locale-switcher a.locale-option,
.theme-locale-switcher a.locale-option:hover,
.theme-locale-switcher a.locale-option:focus {
    color: #374151;
    text-decoration: none;
}

.theme-locale-switcher .locale-option img {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Nav spacing: LTR uses margin-right; flip for Arabic */
html[dir="rtl"] .nav-menu ul li {
    margin-right: 0;
    margin-left: 32px;
    text-align: right;
}

html[dir="rtl"] .nav-menu ul li:last-child {
    margin-left: 0;
}

html[dir="rtl"] .nav-menu ul li .dropdown {
    left: auto;
    right: -30px;
    text-align: right;
}

html[dir="rtl"] .nav-menu ul li .dropdown li a {
    padding: 6px 30px 6px 0;
}

html[dir="rtl"] .canvas-menu ul li {
    text-align: right;
}

html[dir="rtl"] .canvas-menu .dropdown {
    text-align: right;
}

html[dir="rtl"] .hi-text,
html[dir="rtl"] .section-title,
html[dir="rtl"] .bs-text,
html[dir="rtl"] .fs-about,
html[dir="rtl"] .fs-widget,
html[dir="rtl"] .cs-item,
html[dir="rtl"] .bi-text,
html[dir="rtl"] .ci-text {
    text-align: right;
}

html[dir="rtl"] .hero-section .hi-text {
    text-align: right;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
}

html[dir="rtl"] .dropdown-item i {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .user-avatar-small {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .user-profile-dropdown .dropdown-menu {
    text-align: right;
    left: auto !important;
    right: 0 !important;
}

/* Keep notification panel on-screen in RTL */
html[dir="rtl"] .notification-dropdown-menu {
    text-align: right;
    right: auto !important;
    left: 0 !important;
}

/* Contact widget icons on the right in Arabic */
html[dir="rtl"] .contact-widget .cw-text i {
    float: right;
    margin-right: 0;
    margin-left: 20px;
}

html[dir="rtl"] .contact-widget .cw-text ul li {
    margin-right: 0;
    margin-left: 25px;
}

html[dir="rtl"] .contact-widget .cw-text ul li:after {
    right: auto;
    left: -18px;
}

html[dir="rtl"] .contact-widget .cw-text ul li:last-child {
    margin-left: 0;
}

/* Android / download app icon spacing in Arabic */
html[dir="rtl"] .download-btn i,
html[dir="rtl"] .fa-android {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

html[dir="rtl"] .download-btn .btn-text {
    align-items: flex-end;
    text-align: right;
}

html[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .notification-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .notification-badge,
html[dir="rtl"] .notification-badge-mobile {
    right: auto;
    left: 2px;
}

html[dir="rtl"] .top-option {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

html[dir="rtl"] .top-option .theme-locale-switcher,
html[dir="rtl"] .top-option .user-profile-dropdown,
html[dir="rtl"] .top-option .notification-dropdown,
html[dir="rtl"] .top-option .auth-buttons,
html[dir="rtl"] .top-option .to-search,
html[dir="rtl"] .top-option .to-social {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .fa-social,
html[dir="rtl"] .canvas-social {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

html[dir="rtl"] .fs-about .fa-social a,
html[dir="rtl"] .fa-social a,
html[dir="rtl"] .canvas-social a {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .top-option .to-social {
    display: inline-flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    position: static;
    float: none;
}

html[dir="rtl"] .top-option .to-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}

html[dir="rtl"] .top-option .to-search {
    padding-right: 0;
    padding-left: 0;
}

html[dir="rtl"] .top-option .to-search:after {
    display: none;
}

html[dir="rtl"] .auth-buttons {
    margin-right: 0;
    margin-left: 0;
}

/* Team appointment button: LTR floats right; in AR put it on the left */
html[dir="rtl"] .team-title .section-title {
    float: right;
    text-align: right;
}

html[dir="rtl"] .primary-btn.appoinment-btn {
    float: left;
}

html[dir="rtl"] .download-content,
html[dir="rtl"] .copyright-text {
    text-align: center;
}

html[dir="rtl"] .class-item .ci-text a {
    right: auto;
    left: 30px;
}

html[dir="rtl"] .primary-btn i,
html[dir="rtl"] .ci-text a i {
    transform: scaleX(-1);
}

/*
 * Gallery filter (AR):
 * - direction:rtl places the first .filter-input-item on the RIGHT
 *   (so its label is at the start of the strip, not centered in a half-width column)
 * - borders/radii are mirrored to keep the joined strip intact
 */
html[dir="rtl"] .filter-inputs-group,
html[dir="rtl"] .filter-buttons-group {
    direction: rtl;
    flex-direction: row;
}

html[dir="rtl"] .filter-input-item,
html[dir="rtl"] .filter-label,
html[dir="rtl"] .filter-select,
html[dir="rtl"] .btn-filter {
    direction: rtl;
}

html[dir="rtl"] .filter-label {
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: right !important;
    width: 100%;
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

html[dir="rtl"] .filter-label i {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .filter-select {
    text-align: right;
    border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-left: none !important;
    border-radius: 0 !important;
}

/* Rightmost field (first in DOM / first in AR) */
html[dir="rtl"] .filter-input-item:first-child .filter-select {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

html[dir="rtl"] .btn-filter {
    border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-left: none !important;
    border-radius: 0 !important;
}

/* Leftmost button (reset) after RTL button order */
html[dir="rtl"] .btn-outline-secondary.btn-filter {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Mobile stacked bar */
@media (max-width: 992px) {
    html[dir="rtl"] .filter-inputs-group,
    html[dir="rtl"] .filter-buttons-group {
        flex-direction: column;
    }

    html[dir="rtl"] .filter-input-item:first-child .filter-select {
        border-radius: 12px 12px 0 0 !important;
        border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
        border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    }

    html[dir="rtl"] .btn-primary.btn-filter {
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
        border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    }

    html[dir="rtl"] .btn-outline-secondary.btn-filter {
        border-radius: 0 0 12px 12px !important;
        border-right: 2px solid rgba(255, 255, 255, 0.2) !important;
        border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
    }
}

/* Hero images: keep full-bleed background visible in RTL / Owl */
html[dir="rtl"] .hs-slider .hs-item {
    position: relative;
    overflow: hidden;
}

html[dir="rtl"] .hs-slider .hs-item .hero-bg-image {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    z-index: 0 !important;
    transform: none !important;
}

html[dir="rtl"] .hs-slider .hs-item .container {
    position: relative;
    z-index: 1;
}

html[dir="rtl"] .owl-carousel .owl-item img.hero-bg-image {
    width: 100% !important;
    max-width: none !important;
}

/* Classes timetable filters: keep left-aligned; fix slash separators in AR */
html[dir="rtl"] .table-controls {
    text-align: left;
}

html[dir="rtl"] .table-controls ul li {
    margin-right: 0;
    margin-left: 35px;
}

html[dir="rtl"] .table-controls ul li:after {
    right: auto;
    left: -22px;
}

html[dir="rtl"] .table-controls ul li:last-child {
    margin-left: 0;
}

/* Class details: icon spacing + trainer layout in AR */
html[dir="rtl"] .class-detail-item h5 i,
html[dir="rtl"] .booking-form .btn-primary i,
html[dir="rtl"] .service-meta .meta-item i,
html[dir="rtl"] .filter-label i {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .class-details-text .cd-trainer .cd-trainer-text .trainer-social {
    right: auto;
    left: 0;
}

html[dir="rtl"] .class-details-text .cd-trainer .cd-trainer-text .trainer-social a {
    margin-right: 0;
    margin-left: 9px;
}

html[dir="rtl"] .class-details-text .cd-trainer .cd-trainer-text .trainer-social a:last-child {
    margin-left: 0;
}

html[dir="rtl"] .class-details-text .cd-trainer .cd-trainer-text .trainer-info li span {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .breadcrumb-text .bt-option a {
    margin-right: 0;
    margin-left: 20px;
}

html[dir="rtl"] .breadcrumb-text .bt-option a:after {
    right: auto;
    left: -14px;
    content: "\f104";
    transform: none;
}

.mobile-locale-switcher {
    padding-top: 12px;
}

.mobile-locale-switcher .theme-locale-switcher {
    margin-inline: 0;
}

@media (max-width: 991px) {
    .header-section .theme-locale-switcher {
        display: none;
    }
}