/* ================================================================
   MASAHA STORAGE — RTL (Arabic) Overrides
   File: assets/css/rtl.css
   Version: 2.0.0
   
   Comprehensive Arabic RTL overrides. Loaded ONLY when lang=ar.
   Supplements inline html[dir="rtl"] rules in other CSS files.
   
   Covers: font stack, typography, directional flips,
   progress tracker, form layouts, and Arabic-specific spacing.
   ================================================================ */

/* ================================================================
   1. FONT STACK & TYPOGRAPHY
   ================================================================ */
html[dir="rtl"] body {
    font-family: var(--m-font-body-rtl);
    letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: var(--m-font-display-rtl);
    letter-spacing: 0;
}

html[dir="rtl"] .masaha-btn {
    font-family: var(--m-font-display-rtl);
    letter-spacing: 0;
}

/* Arabic text needs slightly increased line-height */
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] label {
    line-height: var(--m-leading-loose);
}

/* Keep numbers LTR */
html[dir="rtl"] .masaha-price-amount,
html[dir="rtl"] .masaha-qty-input,
html[dir="rtl"] .masaha-addon-qty-input,
html[dir="rtl"] .masaha-otp-digit,
html[dir="rtl"] .masaha-success-value,
html[dir="rtl"] .masaha-widget-amount,
html[dir="rtl"] .masaha-result-detail-value,
html[dir="rtl"] .masaha-invoice-totals-row span:last-child,
html[dir="rtl"] .masaha-summary-order-id > strong,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ================================================================
   2. BODY & LAYOUT
   ================================================================ */

/* Skip-to-content: flip to right corner */
html[dir="rtl"] .skip-to-content {
    left: auto;
    right: 0;
    border-radius: 0 0 0 var(--m-radius-md);
}

/* Toast container: flip to left */
html[dir="rtl"] .masaha-toast-container {
    right: auto;
    left: var(--m-sp-6);
}

/* ================================================================
   3. PROGRESS TRACKER
   ================================================================ */

/* Progress fill: starts from right */
html[dir="rtl"] .masaha-progress-fill {
    border-radius: var(--m-radius-full) 0 0 var(--m-radius-full);
}

/* ================================================================
   4. STEP SECTIONS
   ================================================================ */

/* Flex icon+text rows: flip for RTL */
html[dir="rtl"] .masaha-step-header {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-step-nav {
    flex-direction: row-reverse;
}

/* Info banners: flip icon side */
html[dir="rtl"] .masaha-info-banner {
    flex-direction: row-reverse;
    text-align: right;
}

/* Security notice: flip */
html[dir="rtl"] .masaha-security-notice {
    flex-direction: row-reverse;
    text-align: right;
}

/* ================================================================
   5. PHONE VERIFICATION
   ================================================================ */

/* Input group: flip icon and flag positions */
html[dir="rtl"] .masaha-input-group {
    flex-direction: row-reverse;
}

/* Restore phone input LTR within RTL layout */
html[dir="rtl"] .masaha-input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* ================================================================
   6. OTP
   ================================================================ */

/* OTP inputs read left-to-right regardless (numbers) */
html[dir="rtl"] .masaha-otp-inputs {
    direction: ltr;
}

/* Timer and resend text: right-aligned */
html[dir="rtl"] .masaha-otp-timer {
    direction: rtl;
}

html[dir="rtl"] .masaha-otp-error {
    flex-direction: row-reverse;
}

/* ================================================================
   7. STORAGE CARDS
   ================================================================ */

/* Popular ribbon already flipped inline */

/* Storage card footer: keep centered, no flip needed */

/* Specs grid: flip icon alignment */
html[dir="rtl"] .masaha-spec {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-spec div {
    text-align: right;
}

/* What fits: flip */
html[dir="rtl"] .masaha-what-fits {
    text-align: right;
}

html[dir="rtl"] .masaha-fits-item {
    flex-direction: row-reverse;
}

/* Inventory warning: flip */
html[dir="rtl"] .masaha-inventory-warning {
    flex-direction: row-reverse;
    text-align: right;
}

/* ================================================================
   8. AC SECTION
   ================================================================ */
html[dir="rtl"] .masaha-ac-card__header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .masaha-ac-info {
    text-align: right;
}

html[dir="rtl"] .masaha-ac-info h4 {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[dir="rtl"] .masaha-ac-feature {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-ac-units-note {
    flex-direction: row-reverse;
    text-align: right;
}

/* Toggle switch: flip thumb direction */
html[dir="rtl"] .masaha-ac-switch::after {
    left: auto;
    right: 3px;
}

html[dir="rtl"] .masaha-ac-checkbox:checked + .masaha-ac-switch::after {
    transform: translateX(-24px);
}

/* ================================================================
   9. DURATION CARDS
   ================================================================ */

/* Duration card text: right-align */
html[dir="rtl"] .masaha-duration-card__text {
    text-align: right;
}

/* ================================================================
   10. ADDON CARDS
   ================================================================ */

/* Addon header: flip icon + text */
html[dir="rtl"] .masaha-addon-card__header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .masaha-addon-info {
    text-align: right;
}

/* Addon footer: flip price + control */
html[dir="rtl"] .masaha-addon-card__footer {
    flex-direction: row-reverse;
}

/* Selected checkmark: already flipped inline */

/* ================================================================
   11. FORMS
   ================================================================ */

/* Labels: right-align */
html[dir="rtl"] .masaha-form-group label {
    text-align: right;
}

/* Error messages: right-align */
html[dir="rtl"] .masaha-form-error {
    text-align: right;
}

/* Hints: right-align */
html[dir="rtl"] .masaha-form-hint {
    justify-content: flex-end;
}

/* Form section title: flip */
html[dir="rtl"] .masaha-form-section__title {
    flex-direction: row-reverse;
}

/* Checkbox label: flip */
html[dir="rtl"] .masaha-checkbox-label {
    flex-direction: row-reverse;
    text-align: right;
}

/* ================================================================
   12. REVIEW PANEL
   ================================================================ */

/* Review header: flip */
html[dir="rtl"] .masaha-review-header {
    flex-direction: row-reverse;
    text-align: right;
}

/* Section titles: flip */
html[dir="rtl"] .masaha-review-section__title {
    flex-direction: row-reverse;
}

/* Review rows: flip */
html[dir="rtl"] .masaha-review-row {
    flex-direction: row-reverse;
    text-align: right;
}

/* Edit link: swap margin */
html[dir="rtl"] .masaha-review-edit {
    flex-direction: row-reverse;
}

/* Totals: flip */
html[dir="rtl"] .masaha-review-total-row {
    flex-direction: row-reverse;
}

/* ================================================================
   13. SUMMARY SIDEBAR
   ================================================================ */

/* Summary header: flip */
html[dir="rtl"] .masaha-summary-header {
    flex-direction: row-reverse;
}

/* Summary items: flip */
html[dir="rtl"] .masaha-summary-item {
    flex-direction: row-reverse;
}

/* Summary totals: flip */
html[dir="rtl"] .masaha-summary-total-row {
    flex-direction: row-reverse;
}

/* Order ID: flip */
html[dir="rtl"] .masaha-summary-order-id {
    flex-direction: row-reverse;
}

/* Help section: right-align */
html[dir="rtl"] .masaha-summary-help {
    text-align: right;
}

html[dir="rtl"] .masaha-summary-help__title {
    flex-direction: row-reverse;
}

html[dir="rtl"] .masaha-summary-help a {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ================================================================
   14. COUPON SECTION
   ================================================================ */

/* Coupon header: flip */
html[dir="rtl"] .masaha-coupon-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .masaha-coupon-section > p {
    text-align: right;
}

/* Applied coupon: flip */
html[dir="rtl"] .masaha-coupon-applied {
    flex-direction: row-reverse;
}

html[dir="rtl"] .masaha-coupon-applied__info {
    text-align: right;
}

/* Coupon message: flip */
html[dir="rtl"] .masaha-coupon-message {
    flex-direction: row-reverse;
    text-align: right;
}

/* ================================================================
   15. PAYMENT METHODS
   ================================================================ */

/* Payment form title: flip */
html[dir="rtl"] .masaha-payment-form > h5 {
    flex-direction: row-reverse;
}

/* Active check: already flipped inline */

/* ================================================================
   16. TRUST & GUARANTEE
   ================================================================ */

/* Trust items: flip */
html[dir="rtl"] .masaha-trust-item {
    flex-direction: row-reverse;
}

/* Guarantee: flip */
html[dir="rtl"] .masaha-guarantee {
    flex-direction: row-reverse;
    text-align: right;
}

/* ================================================================
   17. OVERLAYS
   ================================================================ */

/* Processing steps: flip */
html[dir="rtl"] .masaha-processing-step {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-processing-steps {
    text-align: right;
}

/* ================================================================
   18. CONFIRMED PAGE
   ================================================================ */

/* Detail rows: flip */
html[dir="rtl"] .masaha-confirmed-row {
    flex-direction: row-reverse;
}

/* Details header: flip */
html[dir="rtl"] .masaha-confirmed-details__header {
    flex-direction: row-reverse;
}

/* Delivery form header: flip */
html[dir="rtl"] .masaha-delivery-form__header {
    flex-direction: row-reverse;
}

/* ================================================================
   19. FAILED PAGE
   ================================================================ */

html[dir="rtl"] .masaha-failed-details {
    text-align: right;
}

/* ================================================================
   20. WIDGET PAGE
   ================================================================ */

/* Widget footer: flip */
html[dir="rtl"] .masaha-widget-footer {
    flex-direction: row-reverse;
}

/* ================================================================
   21. INVOICE
   ================================================================ */

/* Invoice header: flip */
html[dir="rtl"] .masaha-invoice-header {
    flex-direction: row-reverse;
}

/* Invoice table alignment: already handled inline */

/* Invoice totals: align to start */
html[dir="rtl"] .masaha-invoice-totals {
    justify-content: flex-start;
}

html[dir="rtl"] .masaha-invoice-totals-row {
    flex-direction: row-reverse;
}

/* ================================================================
   ADDITIONAL RTL OVERRIDES — Comprehensive Pass
   Every icon+text row, status badge, price display, positioned
   element, and inline flex component that was missing an RTL flip.
   ================================================================ */

/* ── Storage Card Status Row (popular pill + avail badge) ── */
html[dir="rtl"] .masaha-storage-card__status-row {
    flex-direction: row-reverse;
}

/* ── Storage Card Header text ── */
html[dir="rtl"] .masaha-storage-card__header {
    text-align: right;
}

html[dir="rtl"] .masaha-storage-card__header h3,
html[dir="rtl"] .masaha-storage-card__header p {
    text-align: right;
}

/* ── Storage Card Footer (price left, qty right → flip) ── */
html[dir="rtl"] .masaha-storage-card__footer {
    flex-direction: row-reverse;
}

/* ── Price Display ── */
html[dir="rtl"] .masaha-price-display {
    text-align: right;
}

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

html[dir="rtl"] .masaha-price-vat-note {
    text-align: right;
}

/* ── Step 1 Feature Chips ── */
html[dir="rtl"] .masaha-step1-features {
    direction: rtl;
}

html[dir="rtl"] .masaha-feature-chip {
    flex-direction: row-reverse;
}

/* ── AC Section Header ── */
html[dir="rtl"] .masaha-ac-section-header {
    flex-direction: row-reverse;
    text-align: right;
}

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

/* ── AC Price ── */
html[dir="rtl"] .masaha-ac-price {
    text-align: left;
}

/* ── AC Body & Description ── */
html[dir="rtl"] .masaha-ac-card__body {
    text-align: right;
}

html[dir="rtl"] .masaha-ac-desc {
    text-align: right;
}

/* ── Duration Quick Stats ── */
html[dir="rtl"] .masaha-duration-stats {
    direction: rtl;
}

html[dir="rtl"] .masaha-duration-stat {
    flex-direction: row-reverse;
}

/* ── Duration Value Badge (top-right → top-left) ── */
html[dir="rtl"] .masaha-duration-value-badge {
    right: auto;
    left: var(--m-sp-3, 12px);
}

/* ── Duration Preview Note ── */
html[dir="rtl"] .masaha-duration-preview {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Duration Check position ── */
html[dir="rtl"] .masaha-duration-check {
    right: auto;
    left: var(--m-sp-3, 12px);
}

/* ── Addons Notice ── */
html[dir="rtl"] .masaha-addons-notice {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Addons Counter ── */
html[dir="rtl"] .masaha-addons-counter {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Addon Price ── */
html[dir="rtl"] .masaha-addon-price {
    flex-direction: row-reverse;
}

/* ── Addon Toggle Button ── */
html[dir="rtl"] .masaha-addon-toggle-btn {
    flex-direction: row-reverse;
}

/* ── Step Nav Actions ── */
html[dir="rtl"] .masaha-step-nav__actions {
    align-items: flex-start;
}

/* ── Data Usage Pills (Step 4) ── */
html[dir="rtl"] .masaha-data-usage-row {
    direction: rtl;
}

html[dir="rtl"] .masaha-data-usage-pill {
    flex-direction: row-reverse;
}

/* ── Verified Badge position ── */
html[dir="rtl"] .masaha-input-verified-badge {
    right: auto;
    left: var(--m-sp-3, 12px);
}

/* ── Form Hint ── */
html[dir="rtl"] .masaha-form-hint {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-form-hint--success {
    flex-direction: row-reverse;
}

/* ── Terms Scroll ── */
html[dir="rtl"] .masaha-terms-scroll {
    text-align: right;
}

html[dir="rtl"] .masaha-terms-scroll ol {
    padding-right: var(--m-sp-5, 20px);
    padding-left: 0;
}

/* ── Review Encouragement ── */
html[dir="rtl"] .masaha-review-encouragement {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-review-encouragement__text {
    text-align: right;
}

/* ── Review Order ID in header ── */
html[dir="rtl"] .masaha-review-order-id {
    margin-left: 0;
    margin-right: auto;
}

/* ── Review VAT Notice ── */
html[dir="rtl"] .masaha-review-vat-notice {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── PCI Badge position ── */
html[dir="rtl"] .masaha-pci-badge {
    right: auto;
    left: var(--m-sp-4, 16px);
}

/* ── Payment Total Card ── */
html[dir="rtl"] .masaha-payment-total-card {
    text-align: right;
}

/* ── Payment Methods & Trusted Partners Title ── */
html[dir="rtl"] .masaha-payment-methods h5 {
    text-align: right;
}

html[dir="rtl"] .masaha-trusted-partners p {
    text-align: right;
}

/* ── Guarantee text ── */
html[dir="rtl"] .masaha-guarantee div {
    text-align: right;
}

/* ── Summary Seal ── */
html[dir="rtl"] .masaha-summary-seal {
    flex-direction: row-reverse;
}

/* ── Summary Empty State ── */
html[dir="rtl"] .masaha-summary-empty {
    text-align: right;
}

/* ── Verify Footer ── */
html[dir="rtl"] .masaha-verify-footer {
    direction: rtl;
}

/* ── OTP Timer Container ── */
html[dir="rtl"] .masaha-otp-timer-container {
    flex-direction: row-reverse;
}

/* ── OTP Resend ── */
html[dir="rtl"] .masaha-otp-resend {
    text-align: right;
}

/* ── OTP Change Phone ── */
html[dir="rtl"] .masaha-otp-change-phone {
    flex-direction: row-reverse;
}

/* ── OTP Success ── */
html[dir="rtl"] .masaha-otp-success {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Verify Benefits Pills ── */
html[dir="rtl"] .masaha-verify-benefits {
    direction: rtl;
}

html[dir="rtl"] .masaha-benefit-pill {
    flex-direction: row-reverse;
}

/* ── Verify Title & Subtitle ── */
html[dir="rtl"] .masaha-verify-title,
html[dir="rtl"] .masaha-verify-subtitle {
    text-align: right;
}

/* ── Verify Input Label ── */
html[dir="rtl"] .masaha-verify-input-label {
    text-align: right;
    display: block;
}

/* ── Input Hint & Error ── */
html[dir="rtl"] .masaha-input-hint {
    text-align: right;
}

html[dir="rtl"] .masaha-input-error {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Step Badge ── */
html[dir="rtl"] .masaha-step-badge {
    margin-right: auto;
    margin-left: 0;
}

/* ── Step Header Text ── */
html[dir="rtl"] .masaha-step-header-text {
    text-align: right;
}

html[dir="rtl"] .masaha-step-subtitle {
    text-align: right;
}

/* ── Coupon Input Row ── */
html[dir="rtl"] .masaha-coupon-input-row {
    flex-direction: row-reverse;
}

/* ── Coupon Applied Card ── */
html[dir="rtl"] .masaha-coupon-applied-card {
    flex-direction: row-reverse;
}

html[dir="rtl"] .masaha-coupon-applied-card__info {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Coupon Highlight Desc ── */
html[dir="rtl"] .masaha-coupon-highlight__desc {
    text-align: right;
}

/* ── Time Slots (Step 4 delivery) ── */
html[dir="rtl"] .masaha-time-slot-label {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-time-slot-label .slot-text {
    text-align: right;
}

html[dir="rtl"] .masaha-time-slot-placeholder {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .masaha-time-slot-unavailable {
    flex-direction: row-reverse;
    text-align: right;
}

/* ── Lightbox Caption ── */
html[dir="rtl"] .masaha-lightbox__caption {
    text-align: right;
}

/* ── Empty State ── */
html[dir="rtl"] .masaha-empty-state {
    text-align: right;
}

/* ── Optional Badge ── */
html[dir="rtl"] .masaha-optional-badge {
    margin-right: var(--m-sp-2, 8px);
    margin-left: 0;
}

/* ── Info Banner Content ── */
html[dir="rtl"] .masaha-info-banner__content {
    text-align: right;
}

/* ── Button Icon/Text order for RTL ── */
html[dir="rtl"] .masaha-btn .masaha-btn__icon {
    order: -1;
}

html[dir="rtl"] .masaha-btn--outline > i {
    order: 1;
}

/* ================================================================
   22. RESPONSIVE RTL FIXES
   ================================================================ */
@media (max-width: 768px) {
    /* Step nav: don't reverse when stacked */
    html[dir="rtl"] .masaha-step-nav {
        flex-direction: column-reverse;
    }

    /* Step header: stays horizontal on mobile */
    html[dir="rtl"] .masaha-step-header {
        flex-direction: row-reverse;
    }

    /* Security/guarantee: stack normally when mobile-stacked */
    html[dir="rtl"] .masaha-security-notice,
    html[dir="rtl"] .masaha-guarantee {
        flex-direction: column;
        text-align: center;
    }

    /* Toast: flip to right */
    html[dir="rtl"] .masaha-toast-container {
        left: var(--m-sp-3);
        right: var(--m-sp-3);
    }
}

@media (max-width: 576px) {
    /* Step header stacks vertically */
    html[dir="rtl"] .masaha-step-header {
        flex-direction: column;
        align-items: flex-end;
    }

    /* Verify trust stacks */
    html[dir="rtl"] .masaha-verify-trust {
        flex-direction: column;
        align-items: center;
    }
}