/* ============================================================================
   Moroccan Red Crescent — Arabic presentation layer
   --------------------------------------------------------------------------
   PRINCIPLE
   - static/akcel/css/style.css remains the design source of truth.
   - This file is loaded only when <html lang="ar" dir="rtl">.
   - It fixes RTL geometry, Arabic typography and responsive edge cases only.
   - Do not duplicate component styling from style.css here.
============================================================================ */

@font-face {
    font-family: "MRC Cairo";
    src: url("../../fonts/cairo/Cairo-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
}

html[lang^="ar"] {
    direction: rtl;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html[lang^="ar"] body {
    direction: rtl;
    text-align: right;
    --font-family-base: "MRC Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-family-title: "MRC Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-sub-title: "MRC Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    font-family: var(--font-family-base);
    line-height: 1.75;
    overflow-wrap: break-word;
}

html[lang^="ar"] :is(
    button,
    input,
    select,
    textarea,
    .btn,
    .form-control,
    .form-select,
    .dropdown-menu,
    .tooltip,
    .popover
) {
    font-family: var(--font-family-base);
}

html[lang^="ar"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--font-family-title);
    line-height: 1.4;
    letter-spacing: 0;
}

html[lang^="ar"] :is(.sub-title, .section-head .sub-title, .btn, .nav-link, .header-nav a) {
    letter-spacing: 0;
}

html[lang^="ar"] :is(p, li, label, small, .form-text, .card-text) {
    line-height: 1.75;
}

/* Keep intentionally centred content centred. */
html[lang^="ar"] .text-start { text-align: right !important; }
html[lang^="ar"] .text-end { text-align: left !important; }
html[lang^="ar"] .float-start { float: right !important; }
html[lang^="ar"] .float-end { float: left !important; }

/* Bootstrap spacing utilities are generated for LTR in the supplied theme. */
html[lang^="ar"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[lang^="ar"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[lang^="ar"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[lang^="ar"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[lang^="ar"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[lang^="ar"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[lang^="ar"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[lang^="ar"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
html[lang^="ar"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[lang^="ar"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[lang^="ar"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[lang^="ar"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[lang^="ar"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[lang^="ar"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
html[lang^="ar"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
html[lang^="ar"] .ps-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[lang^="ar"] .ps-2 { padding-left: 0 !important; padding-right: .5rem !important; }
html[lang^="ar"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[lang^="ar"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[lang^="ar"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }
html[lang^="ar"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; }
html[lang^="ar"] .pe-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[lang^="ar"] .pe-2 { padding-right: 0 !important; padding-left: .5rem !important; }
html[lang^="ar"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[lang^="ar"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[lang^="ar"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

/* Prevent RTL off-canvas elements/decorations from creating horizontal canvas. */
html[lang^="ar"],
html[lang^="ar"] body,
html[lang^="ar"] .page-wraper,
html[lang^="ar"] .page-wraper-sidebar,
html[lang^="ar"] .page-content {
    max-width: 100%;
}

html[lang^="ar"] body {
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html[lang^="ar"] body { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   Header / navigation — mirror style.css without redesigning it
-------------------------------------------------------------------------- */
html[lang^="ar"] .logo-header {
    float: right;
}

html[lang^="ar"] .site-header .extra-nav {
    float: left;
}

html[lang^="ar"] .site-header .extra-nav .extra-cell {
    direction: rtl;
}

html[lang^="ar"] .site-header .extra-nav .extra-cell > * {
    margin-left: 0;
    margin-right: 30px;
}

html[lang^="ar"] .site-header .nav-link-list {
    padding-right: 0;
    margin-bottom: 0;
}

html[lang^="ar"] .site-header .nav-link-list li {
    padding-right: 0;
    padding-left: 10px;
}

html[lang^="ar"] .site-header .nav-link-list li::after {
    margin-left: 0;
    margin-right: 12px;
}

html[lang^="ar"] .header-nav,
html[lang^="ar"] .header-nav .nav,
html[lang^="ar"] .header-nav .nav > li,
html[lang^="ar"] .header-nav .nav > li > a {
    text-align: right;
}

html[lang^="ar"] .header-nav .nav {
    float: left;
}

html[lang^="ar"] .header-nav .nav > li.sub-menu-down > a::after {
    margin-left: 0;
    margin-right: 5px;
}

html[lang^="ar"] .header-nav .nav > li .mega-menu,
html[lang^="ar"] .header-nav .nav > li .sub-menu {
    left: auto;
    right: 0;
    text-align: right;
}

html[lang^="ar"] .header-nav .nav > li .mega-menu li a,
html[lang^="ar"] .header-nav .nav > li .sub-menu li a {
    text-align: right;
}

html[lang^="ar"] .header-nav .nav > li .mega-menu li a::after,
html[lang^="ar"] .header-nav .nav > li .sub-menu li a::after {
    left: auto;
    right: 20px;
}

html[lang^="ar"] .header-nav .nav > li .mega-menu li:hover > a,
html[lang^="ar"] .header-nav .nav > li .sub-menu li:hover > a {
    padding: 8px 37px 8px 20px;
}

html[lang^="ar"] .header-nav .nav > li .mega-menu li > .sub-menu,
html[lang^="ar"] .header-nav .nav > li .sub-menu li > .sub-menu {
    left: auto;
    right: 220px;
}

html[lang^="ar"] .header-nav .nav > li .sub-menu li > a > i {
    float: left;
}

html[lang^="ar"] .header-nav .nav > li .mega-menu > li::after {
    right: auto;
    left: 0;
}

html[lang^="ar"] .site-header.style-2 .header-nav .nav {
    margin-left: 0;
    margin-right: 60px;
}

html[lang^="ar"] .navbar-toggler {
    float: left;
    margin-right: 15px;
    margin-left: 0;
}

/* Search overlay input icon/close position. */
html[lang^="ar"] .dz-quik-search :is(.form-control, input, textarea) {
    padding-right: 15px;
    padding-left: 60px;
    text-align: right;
}

html[lang^="ar"] .dz-quik-search > span,
html[lang^="ar"] .dz-quik-search form > span {
    right: auto;
    left: 15px;
}

/* Main left sidebar from style.css becomes a right sidebar in Arabic. */
html[lang^="ar"] .page-sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid rgba(0, 0, 0, .1);
}

html[lang^="ar"] .page-wraper-sidebar {
    padding-left: 0;
    padding-right: var(--sidebar-space);
}

html[lang^="ar"] .page-wraper-sidebar .site-header .main-bar {
    padding-left: 0;
    padding-right: var(--sidebar-space);
}

/* Contact/offcanvas panel: transform prevents horizontal overflow. */
html[lang^="ar"] .contact-sidebar {
    left: auto !important;
    right: 0 !important;
    width: min(350px, 100vw);
    max-width: 100vw;
    text-align: right;
    transform: translateX(100%);
    will-change: transform;
}

html[lang^="ar"] .contact-sidebar.active {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0);
}

html[lang^="ar"] .contact-sidebar .icon-bx-wraper.left .icon-md,
html[lang^="ar"] .icon-bx-wraper.left .icon-md,
html[lang^="ar"] .icon-bx-wraper.left .icon-lg,
html[lang^="ar"] .icon-bx-wraper.left .icon-xl {
    margin-right: 0;
    margin-left: 15px;
}

html[lang^="ar"] .icon-bx-wraper.left {
    text-align: right;
}

/* --------------------------------------------------------------------------
   Dropdowns / language switcher / breadcrumbs
-------------------------------------------------------------------------- */
html[lang^="ar"] :is(.dropdown-menu, .language-dropdown) {
    direction: rtl;
    text-align: right;
}

html[lang^="ar"] .dropdown-toggle::after {
    margin-left: 0;
    margin-right: .255em;
}

html[lang^="ar"] .language-switcher-btn,
html[lang^="ar"] .language-dropdown .dropdown-item,
html[lang^="ar"] .mobile-language-switcher {
    direction: rtl;
    text-align: right;
}

html[lang^="ar"] .breadcrumb,
html[lang^="ar"] .breadcrumb-row ul {
    direction: rtl;
    padding-right: 0;
}

html[lang^="ar"] .breadcrumb-row ul li {
    margin-right: 0;
    margin-left: 3px;
}

html[lang^="ar"] .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: var(--bs-breadcrumb-item-padding-x, .5rem);
}

html[lang^="ar"] .breadcrumb-row ul .breadcrumb-item + .breadcrumb-item::before,
html[lang^="ar"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 10px;
}

/* Banner stays centred when the base theme says text-center. */
html[lang^="ar"] .dz-bnr-inr .dz-bnr-inr-entry,
html[lang^="ar"] .dz-bnr-inr h1,
html[lang^="ar"] .dz-bnr-inr .h1 {
    font-family: var(--font-family-title);
}

/* --------------------------------------------------------------------------
   Forms
-------------------------------------------------------------------------- */
html[lang^="ar"] :is(
    .form-control,
    .form-select,
    textarea,
    select,
    input:not([type="checkbox"]):not([type="radio"])
) {
    text-align: right;
}

html[lang^="ar"] .form-select {
    padding-right: .75rem;
    padding-left: 2.25rem;
    background-position: left .75rem center;
}

html[lang^="ar"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
    text-align: right;
}

html[lang^="ar"] .form-check .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em;
}

html[lang^="ar"] .form-check-inline {
    margin-right: 0;
    margin-left: 1rem;
}

html[lang^="ar"] .form-floating > label {
    left: auto;
    right: 0;
    transform-origin: 100% 0;
}

html[lang^="ar"] .input-group {
    direction: rtl;
}

html[lang^="ar"] .input-group > :not(:first-child):not(.dropdown-menu) {
    margin-left: 0;
    margin-right: calc(var(--bs-border-width, 1px) * -1);
}

html[lang^="ar"] .bootstrap-select > .dropdown-toggle,
html[lang^="ar"] .bootstrap-select .filter-option,
html[lang^="ar"] .bootstrap-select .dropdown-menu li a {
    text-align: right;
}

html[lang^="ar"] :is(
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    .ltr-content,
    [dir="ltr"]
) {
    direction: ltr;
}

html[lang^="ar"] :is(input[type="email"], input[type="url"], input[type="tel"]) {
    text-align: left;
}

html[lang^="ar"] ::placeholder {
    text-align: inherit;
}

/* --------------------------------------------------------------------------
   Tables, pagination, modals, accordions
-------------------------------------------------------------------------- */
html[lang^="ar"] :is(table, .table) {
    direction: rtl;
}

html[lang^="ar"] :is(th, td) {
    text-align: right;
}

html[lang^="ar"] .table-responsive {
    direction: rtl;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html[lang^="ar"] .pagination {
    direction: rtl;
    padding-right: 0;
}

html[lang^="ar"] .modal-content,
html[lang^="ar"] .modal-header,
html[lang^="ar"] .modal-body,
html[lang^="ar"] .modal-footer,
html[lang^="ar"] .offcanvas,
html[lang^="ar"] .card,
html[lang^="ar"] .list-group {
    direction: rtl;
    text-align: right;
}

html[lang^="ar"] .modal-header .btn-close {
    margin-right: auto;
    margin-left: -.5rem;
}

html[lang^="ar"] .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
}

/* Directional arrows only; do not mirror generic decorative SVGs/images. */
html[lang^="ar"] :is(
    .fa-arrow-right,
    .fa-chevron-right,
    .fa-long-arrow-alt-right,
    .fa-arrow-left,
    .fa-chevron-left,
    .fa-long-arrow-alt-left,
    .flaticon-right-arrow
) {
    transform: scaleX(-1);
}

html[lang^="ar"] .swiper-button-next::after,
html[lang^="ar"] .swiper-button-prev::after {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Components that must internally remain LTR
-------------------------------------------------------------------------- */
html[lang^="ar"] :is(
    .leaflet-container,
    .maplibregl-map,
    .mapboxgl-map,
    .crisis-map-standalone,
    pre,
    code,
    kbd,
    samp
) {
    direction: ltr !important;
}

html[lang^="ar"] :is(.leaflet-container, .maplibregl-map, .mapboxgl-map) {
    text-align: left !important;
}

html[lang^="ar"] :is(
    .leaflet-map-pane,
    .leaflet-tile-pane,
    .leaflet-overlay-pane,
    .leaflet-shadow-pane,
    .leaflet-marker-pane,
    .leaflet-tooltip-pane,
    .leaflet-popup-pane,
    .leaflet-control-container,
    .leaflet-control
) {
    direction: ltr !important;
}

/* --------------------------------------------------------------------------
   Registration wizard: keep its base component design, fix Arabic flow only
-------------------------------------------------------------------------- */
html[lang^="ar"] :is(
    .registration-card,
    .registration-sidebar,
    .registration-heading,
    .registration-review,
    .registration-success-card
) {
    text-align: right;
}

html[lang^="ar"] .wizard-step-indicator {
    text-align: right;
}

html[lang^="ar"] .otp-input,
html[lang^="ar"] .application-number-box strong {
    direction: ltr;
    text-align: center;
}

html[lang^="ar"] .success-notice {
    text-align: right;
}

/* --------------------------------------------------------------------------
   Desktop / large screen
-------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
    html[lang^="ar"] .site-header.style-2 .header-nav .nav {
        margin-left: 0;
        margin-right: 60px;
    }

    html[lang^="ar"] .header-nav .nav > li .mega-menu,
    html[lang^="ar"] .header-nav .nav > li .sub-menu {
        transform-origin: top right;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1280px) {
    html[lang^="ar"] .site-header.style-2 .header-nav .nav {
        margin-left: 0;
        margin-right: 50px;
    }

    html[lang^="ar"] .site-header .extra-nav .extra-cell > * {
        margin-right: 18px;
    }
}

/* The base theme hides page-sidebar <=1480px; remove its reserved space too. */
@media only screen and (max-width: 1480px) {
    html[lang^="ar"] .page-wraper-sidebar,
    html[lang^="ar"] .page-wraper-sidebar .site-header .main-bar {
        padding-right: 0;
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Tablet / mobile navigation
-------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    html[lang^="ar"] .logo-header {
        float: right;
    }

    html[lang^="ar"] .navbar-toggler {
        float: left;
        margin: 15px 15px 15px 0;
    }

    /* Slide the menu from the right without enlarging the page canvas. */
    html[lang^="ar"] .header-nav,
    html[lang^="ar"] .mo-left .header-nav {
        left: auto !important;
        right: 0 !important;
        width: min(280px, 88vw);
        max-width: 88vw;
        transform: translateX(100%);
        transition: transform .45s ease;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html[lang^="ar"] .header-nav.show,
    html[lang^="ar"] .mo-left .header-nav.show {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0);
    }

    html[lang^="ar"] .header-nav .nav {
        float: none;
        width: 100%;
        padding-right: 0;
    }

    html[lang^="ar"] .header-nav .logo-header,
    html[lang^="ar"] .mo-left .header-nav .logo-header {
        text-align: right;
    }

    /* Top-level mobile submenu control belongs on the left in RTL. */
    html[lang^="ar"] .header-nav .nav > li.sub-menu-down > a::after {
        right: auto;
        left: 0;
        margin-right: 0;
    }

    /* Nested mobile arrow belongs on the right of the Arabic text flow. */
    html[lang^="ar"] .header-nav .nav > li .mega-menu li a,
    html[lang^="ar"] .header-nav .nav > li .sub-menu li a,
    html[lang^="ar"] .header-nav .nav > li .mega-menu li:hover > a,
    html[lang^="ar"] .header-nav .nav > li .sub-menu li:hover > a {
        padding: 2px 16px 1px 0;
    }

    html[lang^="ar"] .header-nav .nav > li .mega-menu li a::after,
    html[lang^="ar"] .header-nav .nav > li .sub-menu li a::after {
        left: auto;
        right: 0;
    }

    html[lang^="ar"] .header-nav .nav > li .mega-menu .mega-menu,
    html[lang^="ar"] .header-nav .nav > li .mega-menu .sub-menu,
    html[lang^="ar"] .header-nav .nav > li .sub-menu .mega-menu,
    html[lang^="ar"] .header-nav .nav > li .sub-menu .sub-menu {
        padding-left: 0;
        padding-right: 20px;
    }

    html[lang^="ar"] .header-nav .nav > li .mega-menu li > .sub-menu,
    html[lang^="ar"] .header-nav .nav > li .sub-menu li > .sub-menu {
        left: auto;
        right: auto;
    }

    html[lang^="ar"] .mo-left .navbar-toggler.open::after {
        transform-origin: top left;
        margin-right: 20px;
        margin-left: 0;
    }

    /* Registration sidebar remains horizontally scrollable and starts from RTL. */
    html[lang^="ar"] .registration-sidebar {
        direction: rtl;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    html[lang^="ar"] .wizard-step-indicator {
        scroll-snap-align: start;
    }

    html[lang^="ar"] .table-responsive :is(th, td) {
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Phones
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    html[lang^="ar"] body {
        line-height: 1.7;
    }

    html[lang^="ar"] .dz-bnr-inr .dz-bnr-inr-entry {
        text-align: center;
    }

    html[lang^="ar"] .breadcrumb-row ul {
        max-width: calc(100vw - 30px);
        white-space: normal;
    }

    html[lang^="ar"] .wizard-panel-header {
        align-items: flex-start;
    }

    html[lang^="ar"] .wizard-actions {
        width: 100%;
    }

    html[lang^="ar"] :is(.modal-dialog, .offcanvas) {
        max-width: 100vw;
    }
}

@media only screen and (max-width: 575px) {
    html[lang^="ar"] .site-header .main-bar .container-fluid,
    html[lang^="ar"] .site-header .main-bar .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    html[lang^="ar"] .logo-header {
        width: min(150px, 48vw);
    }

    html[lang^="ar"] .logo-header img {
        max-width: 100%;
    }

    html[lang^="ar"] .contact-sidebar {
        width: 100vw;
        max-width: 100vw;
    }

    html[lang^="ar"] .dz-bnr-inr h1,
    html[lang^="ar"] .dz-bnr-inr .h1 {
        line-height: 1.35;
    }

    html[lang^="ar"] .registration-card {
        padding-right: 16px;
        padding-left: 16px;
    }

    html[lang^="ar"] .registration-progress {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* Respect users who request less animation on mobile/desktop. */
@media (prefers-reduced-motion: reduce) {
    html[lang^="ar"] .header-nav,
    html[lang^="ar"] .contact-sidebar,
    html[lang^="ar"] .registration-progress .progress-bar {
        transition: none !important;
    }
}