/**
 * DZD Sooq — public RTL overlay (Arabic only)
 *
 * Loaded only when the UI language is Arabic. English LTR CSS remains the layout
 * baseline. Do not re-declare direction on wrappers, do not add logical padding
 * on top of existing physical padding, and do not mirror both gallery arrows.
 */

/* Arabic reading comfort: same font-size tokens as LTR for shared hierarchy.
 * Visual parity comes from relaxed line-height, zero tracking, and heading weight —
 * not a second larger scale (which made Arabic feel oversized).
 */
html[dir="rtl"],
html[dir="rtl"] .dzd-ui {
    --dzd-font-sans: "Inter", var(--dzd-font-arabic, "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif);
    --dzd-lh-body: var(--dzd-lh-relaxed, 1.65);
    --dzd-tracking-tight: var(--dzd-tracking-arabic, 0);
    --dzd-tracking-display: var(--dzd-tracking-arabic, 0);
}

html[dir="rtl"] body.dzd-sooq-has-global-header,
html[dir="rtl"] body.dzd-panel-polish,
html[dir="rtl"] body.home,
html[dir="rtl"] body.front-page,
html[dir="rtl"] .dzd-header,
html[dir="rtl"] .dzd-homepage-engine,
html[dir="rtl"] .dzd-sr,
html[dir="rtl"] .dzd-pl,
html[dir="rtl"] .dzd-auth,
html[dir="rtl"] .dzd-auth-m,
html[dir="rtl"] .dzd-panel-page,
html[dir="rtl"] .dzd-public-profile,
html[dir="rtl"] .dzd-message-view,
html[dir="rtl"] .dzd-footer {
    font-family: var(--dzd-font-sans);
    line-height: var(--dzd-lh-body);
    letter-spacing: 0;
}

html[dir="rtl"] .dzd-home-section__title,
html[dir="rtl"] .dzd-sr__title,
html[dir="rtl"] .dzd-pl__title,
html[dir="rtl"] .dzd-home-card__title,
html[dir="rtl"] .dzd-home-card__price,
html[dir="rtl"] .dzd-home-cat__name,
html[dir="rtl"] .dzd-sr-list-card__title,
html[dir="rtl"] .dzd-sr-list-card__price,
html[dir="rtl"] .dzd-ui-empty__title,
html[dir="rtl"] .dzd-auth__tab,
html[dir="rtl"] .dzd-auth-m__heading {
    letter-spacing: 0;
    font-weight: var(--dzd-fw-bold, 700);
}

html[dir="rtl"] .dzd-home-card__title,
html[dir="rtl"] .dzd-sr-list-card__title,
html[dir="rtl"] .dzd-pl__title,
html[dir="rtl"] .dzd-home-section__sub,
html[dir="rtl"] .dzd-profile__copy,
html[dir="rtl"] .dzd-ui-empty__copy {
    line-height: var(--dzd-lh-relaxed, 1.65);
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: start;
}

html[dir="rtl"] .dzd-sooq-header-location__btn,
html[dir="rtl"] .dzd-chat-list__row,
html[dir="rtl"] .dzd-account-settings__link {
    text-align: start;
}

/* Point directional chevrons/back/pagination the reading way. Not brand icons. */
html[dir="rtl"] .dzd-mega__cat-chevron,
html[dir="rtl"] .dzd-sooq-header-location__chevron,
html[dir="rtl"] .dzd-account-settings__link-chevron,
html[dir="rtl"] .dzd-panel-shell__back-icon,
html[dir="rtl"] .dzd-message-view__back-icon,
html[dir="rtl"] .dzd-chip-btn[data-open="province"] > svg:last-of-type,
html[dir="rtl"] .dzd-sr__pagination a svg,
html[dir="rtl"] .dzd-sr__pagination button svg,
html[dir="rtl"] [data-dzd-back] svg,
html[dir="rtl"] .dzd-pl__chrome-btn[data-pl-back] svg,
html[dir="rtl"] .dzd-pl__quick-send svg,
html[dir="rtl"] .dzd-ui-back,
html[dir="rtl"] .dzd-breadcrumb__sep {
    transform: scaleX(-1);
}

/*
 * Listing gallery arrows (RTL):
 *
 * Semantics stay stable in JS:
 *   [data-pl-prev] → index - 1
 *   [data-pl-next] → index + 1
 *
 * Arabic UX places NEXT toward the left (reading direction) and PREVIOUS toward
 * the right. So we swap physical sides only, then flip the chevron glyphs so the
 * icon still points toward the travel direction:
 *   left side  = next  + ‹ (after flip)
 *   right side = prev  + › (after flip)
 *
 * Do NOT also invert the JS prev/next click handlers — that would double-reverse.
 * Swipe/keyboard deltas are RTL-aware in public-listing.js (separate from clicks).
 */
html[dir="rtl"] .dzd-pl__thumbs {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .dzd-pl__gallery-arrow--prev,
html[dir="rtl"] .dzd-pl__fs-arrow--prev {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .dzd-pl__gallery-arrow--next,
html[dir="rtl"] .dzd-pl__fs-arrow--next {
    right: auto;
    left: 12px;
}

html[dir="rtl"] .dzd-pl__fs-arrow--prev {
    right: max(10px, env(safe-area-inset-right, 10px));
    left: auto;
}

html[dir="rtl"] .dzd-pl__fs-arrow--next {
    left: max(10px, env(safe-area-inset-left, 10px));
    right: auto;
}

/* Flip glyphs only — not a second navigation reverse. */
html[dir="rtl"] .dzd-pl__gallery-arrow > span[aria-hidden] {
    display: inline-block;
    transform: scaleX(-1);
}

html[dir="rtl"] .dzd-pl__fs-arrow {
    transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .dzd-pl__fs-arrow:hover,
html[dir="rtl"] .dzd-pl__fs-arrow:focus-visible {
    transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .dzd-pl__breadcrumb li:not(:last-child)::after {
  content: "‹";
  margin-inline-start: 10px;
  margin-inline-end: 0;
  margin-left: 0;
}

html[dir="rtl"] .dzd-pl__actions {
  flex-direction: row;
}

html[dir="rtl"] .dzd-filters-panel,
html[dir="rtl"] .dzd-auth,
html[dir="rtl"] .dzd-auth input,
html[dir="rtl"] .dzd-auth textarea,
html[dir="rtl"] .dzd-ui-modal,
html[dir="rtl"] .dzd-logout-modal,
html[dir="rtl"] .dzd-sooq-header-location-modal,
html[dir="rtl"] .dzd-footer,
html[dir="rtl"] .lc-form,
html[dir="rtl"] .dzd-listing-create {
    text-align: start;
}

html[dir="rtl"] .dzd-account-settings__list,
html[dir="rtl"] .dzd-account-settings__dialog-card ul {
    padding-inline-start: 1.2rem;
    padding-inline-end: 0;
}

html[dir="rtl"] .dzd-pl__facts ul,
html[dir="rtl"] .dzd-public-listing ul {
    padding-inline-start: 1.1rem;
}

html[dir="rtl"] .dzd-sooq-notifications-bell__badge {
    inset-inline-end: -0.15rem;
    inset-inline-start: auto;
}

html[dir="rtl"] .dzd-sooq-notifications-bell__dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

/* Do not mirror brand marks, hearts, phones, cameras, or notification bells. */
html[dir="rtl"] .dzd-logo img,
html[dir="rtl"] .dzd-logo__mark,
html[dir="rtl"] [data-icon="heart"],
html[dir="rtl"] [data-icon="phone"],
html[dir="rtl"] [data-icon="email"],
html[dir="rtl"] [data-icon="camera"],
html[dir="rtl"] .dzd-sooq-notifications-bell svg,
html[dir="rtl"] .dzd-fav-heart {
    transform: none;
}

/* Auth: Login stays at inline-start (right in RTL); Register at inline-end. */
html[dir="rtl"] .dzd-auth__tabs {
    direction: rtl;
}

html[dir="rtl"] .dzd-auth__tab-indicator {
    left: auto;
    right: 4px;
    transform: none;
}

html[dir="rtl"] .dzd-auth[data-tab="register"] .dzd-auth__tab-indicator {
    transform: translateX(-100%);
}

/* Keep carousel transform math physical; restore text direction per pane/slide. */
html[dir="rtl"] .dzd-auth__slider {
    direction: ltr;
}

html[dir="rtl"] .dzd-auth__slide {
    direction: rtl;
}

html[dir="rtl"] .dzd-auth-m,
html[dir="rtl"] .dzd-auth-m input,
html[dir="rtl"] .dzd-auth-m textarea {
    text-align: start;
}

html[dir="rtl"] .dzd-auth-m__pane {
    direction: rtl;
}

html[dir="rtl"] .dzd-auth-m__nav--back {
    text-align: start;
}

/* Direction-aware back chevron: flip icon only, keep button layout. */
html[dir="rtl"] .dzd-auth__icon-back .dzd-auth-back-icon {
    transform: scaleX(-1);
}

html[dir="rtl"] .dzd-auth__otp-boxes,
html[dir="rtl"] .dzd-auth__phone,
html[dir="rtl"] .dzd-auth-m .dial {
    flex-direction: row;
    unicode-bidi: plaintext;
    direction: ltr;
    text-align: left;
}

/* OTP digits stay LTR + centered; do not inherit login identity text-align:left.
 * Boxes themselves must stay LTR so the caret starts in the leftmost physical cell. */
html[dir="rtl"] .dzd-auth__otp-boxes,
html[dir="rtl"] .dzd-auth-m .dzd-auth__otp-boxes,
.rtl .dzd-auth__otp-boxes {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .dzd-auth__otp-digit,
html[dir="rtl"] .dzd-auth-m .dzd-auth__otp-digit,
html[dir="rtl"] .dzd-auth__otp-boxes input,
.rtl .dzd-auth__otp-digit {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: center;
    text-indent: 0;
}

html[dir="rtl"] .dzd-auth input[type="email"],
html[dir="rtl"] .dzd-auth input[type="tel"],
html[dir="rtl"] .dzd-auth input[type="text"][name="identity"],
html[dir="rtl"] .dzd-auth input[inputmode="numeric"]:not(.dzd-auth__otp-digit),
html[dir="rtl"] .dzd-auth input[inputmode="tel"],
html[dir="rtl"] .dzd-auth input[inputmode="email"],
html[dir="rtl"] .dzd-auth-m input[type="email"],
html[dir="rtl"] .dzd-auth-m input[type="tel"],
html[dir="rtl"] .dzd-auth-m input[name="identity"],
html[dir="rtl"] .dzd-auth-m input[inputmode="numeric"]:not(.dzd-auth__otp-digit),
html[dir="rtl"] .dzd-auth-m input[inputmode="tel"],
html[dir="rtl"] .dzd-auth-m input[inputmode="email"] {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: left;
}

/*
 * Password fields: bind LTR credential styling to stable wrappers — never to
 * input[type="password"] alone. Show/hide only flips type; direction,
 * text-align, and padding must stay identical so the value does not jump.
 *
 * Eye chrome: LTR uses inset-inline-end (right). In RTL, inset-inline-end is
 * left — use inset-inline-start so Arabic keeps the eye on the right.
 */
html[dir="rtl"] .dzd-auth__pass .dzd-auth__input,
html[dir="rtl"] .dzd-auth-m .box:has(> .eye) > input {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: left;
}

html[dir="rtl"] .dzd-auth__pass .dzd-auth__input {
    padding-inline-start: 52px;
    padding-inline-end: 14px;
}

html[dir="rtl"] .dzd-auth__toggle-pass {
    inset-inline-end: auto;
    inset-inline-start: 8px;
}

/* Mobile auth `.box` is flex: under dir=rtl the eye (2nd child) lands on the left. */
html[dir="rtl"] .dzd-auth-m .box:has(> .eye) {
    flex-direction: row-reverse;
}

html[dir="rtl"] .dzd-auth-m .box:has(> .eye) .eye {
    margin-inline-start: -4px;
    margin-inline-end: 4px;
}

html[dir="rtl"] .lc-progress__meta,
html[dir="rtl"] .lc-popular,
html[dir="rtl"] .lc-chip-row {
    text-align: start;
}

/* Help / FAQ search: icon uses inset-inline-start; input padding was physical LTR. */
html[dir="rtl"] .dzd-help__search-input,
html[dir="rtl"] .dzd-faq__search-input {
    padding-inline-start: 52px;
    padding-inline-end: 22px;
}

html[dir="rtl"] .dzd-help,
html[dir="rtl"] .dzd-safety,
html[dir="rtl"] .dzd-faq,
html[dir="rtl"] .dzd-contact,
html[dir="rtl"] .dzd-guidelines,
html[dir="rtl"] .dzd-terms,
html[dir="rtl"] .dzd-privacy,
html[dir="rtl"] .dzd-conditions,
html[dir="rtl"] .dzd-cookies {
    text-align: start;
}

html[dir="rtl"] .dzd-guidelines__list,
html[dir="rtl"] .dzd-terms__list,
html[dir="rtl"] .dzd-privacy__list,
html[dir="rtl"] .dzd-conditions__list,
html[dir="rtl"] .dzd-cookies__list,
html[dir="rtl"] .dzd-safety__tips,
html[dir="rtl"] .dzd-help__article-list {
    padding-inline-start: 1.2rem;
    padding-inline-end: 0;
}

html[dir="rtl"] .dzd-contact input[type="email"],
html[dir="rtl"] .dzd-contact input[type="tel"] {
    direction: ltr;
    text-align: left;
}

/*
 * Price *block* alignment (separate from number/currency order):
 * keep the price cluster on the RTL start edge (right).
 */
html[dir="rtl"] .dzd-pl__price,
html[dir="rtl"] .dzd-home-card__price,
html[dir="rtl"] .dzd-sr-list-card__price,
html[dir="rtl"] .dzd-fav__price,
html[dir="rtl"] .dzd-favorites__price,
html[dir="rtl"] .dzd-myads-card__price,
html[dir="rtl"] .dzd-profile__listing-price,
html[dir="rtl"] .lc-similar-card__price,
html[dir="rtl"] .lc-listing-price,
html[dir="rtl"] .dzd-message-view__listing-price,
html[dir="rtl"] .dzd-chat-info__listing-price,
html[dir="rtl"] .dzd-packages-panel__plan-meta {
    text-align: start;
}

html[dir="rtl"] .dzd-chat-info__fact dt {
    text-transform: none;
    letter-spacing: 0;
}

html[dir="rtl"] .dzd-myads-promote,
html[dir="rtl"] .dzd-pl-promote {
    text-align: start;
}

html[dir="rtl"] .dzd-myads-promote__plan-price,
html[dir="rtl"] .dzd-pl-promote__plan-price,
html[dir="rtl"] .dzd-myads-promote__quote-dl .dzd-price {
    unicode-bidi: isolate;
}

html[dir="rtl"] .dzd-myads-promote__plan {
    overflow: hidden;
}

html[dir="rtl"] .dzd-popover[data-popover="province"] {
    text-align: start;
    overflow-x: hidden;
}

html[dir="rtl"] .dzd-popover[data-popover="province"] .dzd-popover__label {
    letter-spacing: 0;
    text-transform: none;
}

html[dir="rtl"] .dzd-popover__search,
html[dir="rtl"] .dzd-sooq-header-location-modal__search {
    text-align: start;
    direction: rtl;
}

html[dir="rtl"] .dzd-popover__search::-webkit-search-cancel-button,
html[dir="rtl"] .dzd-sooq-header-location-modal__search::-webkit-search-cancel-button {
    margin-inline-start: 0.35rem;
    margin-inline-end: 0;
}

html[dir="rtl"] .dzd-popover__item--gps {
    flex-wrap: wrap;
    justify-content: flex-start;
}

html[dir="rtl"] .dzd-chip-btn[data-open="province"] > svg:first-of-type,
html[dir="rtl"] .dzd-sooq-header-location__pin {
    transform: none;
}

/*
 * Header search (Desktop/Tablet Arabic): keep natural RTL flex so the submit
 * control sits on the physical LEFT inside the pill:
 *   [ بحث ] [ ……… search field ……… 🔍 ]
 * Do not force direction:ltr on .dzd-search (that put the button on the right).
 * English LTR layout is unchanged. Mobile hides .dzd-search__go.
 */
@media (min-width: 768px) {
    html[dir="rtl"] .dzd-search__input {
        text-align: start;
    }
}

/*
 * Mobile search sort bar: physical-right fade was hiding الترتيب (first item
 * in RTL). Mirror the veil/mask to the physical left (inline-end in RTL).
 */
@media (max-width: 767px) {
    html[dir="rtl"] .dzd-sr__toolbar::after {
        right: auto;
        left: 1px;
        border-radius: calc(var(--dzd-sr-radius-sm, 16px) - 1px) 0 0 calc(var(--dzd-sr-radius-sm, 16px) - 1px);
        background: linear-gradient(
            to left,
            rgba(255, 255, 255, 0) 0,
            var(--dzd-sr-surface, #fff) 14px,
            var(--dzd-sr-surface, #fff) 100%
        );
    }

    html[dir="rtl"] .dzd-sr__sort {
        -webkit-mask-image: linear-gradient(
            to left,
            #000 0,
            #000 calc(100% - 48px),
            transparent calc(100% - 12px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to left,
            #000 0,
            #000 calc(100% - 48px),
            transparent calc(100% - 12px),
            transparent 100%
        );
    }
}

/*
 * Arabic price reading order: NUMBER then دج.
 * Wrapper is RTL so the amount (first child) sits at inline-start (right)
 * and currency follows to its left — never دج-first.
 * Digits stay LTR-isolated so "300 000" never becomes "000 003".
 */
html[dir="rtl"] .dzd-price,
html[dir="rtl"] .dzd-price[dir="rtl"],
html[dir="rtl"] .dzd-price[dir="ltr"] {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.28em;
    unicode-bidi: isolate;
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] .dzd-price-value {
    display: inline-block;
    unicode-bidi: isolate;
    direction: ltr;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

html[dir="rtl"] .dzd-price-currency {
    display: inline-block;
    unicode-bidi: isolate;
    white-space: nowrap;
    flex: 0 0 auto;
    flex-shrink: 0;
}

html[dir="rtl"] .dzd-pl__id,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"] {
    unicode-bidi: isolate;
    direction: ltr;
}

html[dir="rtl"] .lc-field__counter,
html[dir="rtl"] .lc-photo-counter,
html[dir="rtl"] .lc-progress__count {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}

/*
 * Specification values: keep NUMBER + Latin unit reading order (8 GB, 5 000 km)
 * inside Arabic RTL without reversing digit groups.
 */
html[dir="rtl"] .dzd-spec-value,
html[dir="rtl"] .dzd-pl__spec-value .dzd-spec-value,
html[dir="rtl"] .dzd-sr-list-card__chip .dzd-spec-value {
    display: inline-block;
    unicode-bidi: isolate;
    direction: ltr;
    white-space: nowrap;
}

html[dir="rtl"] .lc-input-suffix__tag {
    unicode-bidi: isolate;
    direction: ltr;
}