/*
 * Right-to-left mirror for the public donation form and the custom danke page.
 *
 * Linked only when the page's <html dir> is "rtl" (Arabic), after every other
 * stylesheet. LTR pages never load it, and every rule is scoped under
 * [dir="rtl"] as a second guard. Each block mirrors a physical left/right rule
 * from bootstrap.css (BS4 is LTR-only), formstyle.css, donor-messages.css or
 * the iziToast plugin; the source rule is named above it. A mirror keeps the
 * source rule's media range, because [dir="rtl"] raises specificity and would
 * otherwise also beat that rule's own breakpoint overrides.
 */

/* ---------- Script: system Arabic fonts, no letter-spacing ---------- */

/* Montserrat/Roboto carry no Arabic glyphs. System fonts only, nothing is
   downloaded. Icon fonts are untouched: only text containers are listed. */
[dir="rtl"] {
    --ms-rtl-font: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .h4, [dir="rtl"] .h5, [dir="rtl"] .h6,
[dir="rtl"] .custom-toast .iziToast-body .iziToast-texts .iziToast-title,
[dir="rtl"] .custom-toast .iziToast-body .iziToast-texts .iziToast-message {
    font-family: var(--ms-rtl-font);
}

/* Arabic letters join; tracking breaks the joins. */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after {
    letter-spacing: normal !important;
}

/* bootstrap.css + style.css: body { text-align: left } */
[dir="rtl"] body {
    text-align: right;
}

/* ---------- Bootstrap 4 utilities used in the form markup ---------- */

[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

[dir="rtl"] .ml-0 {
    margin-right: 0 !important;
}

[dir="rtl"] .ml-1 {
    margin-left: 0 !important;
    margin-right: .25rem !important;
}

[dir="rtl"] .mr-1 {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}

[dir="rtl"] .pl-0 {
    padding-right: 0 !important;
}

[dir="rtl"] .pl-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

/* ---------- Bootstrap custom-control (radios: amounts, payment methods) ---------- */

[dir="rtl"] .custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}

[dir="rtl"] .custom-control-input {
    left: auto;
    right: 0;
}

[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

/* ---------- Bootstrap progress bar: stripes run with the fill ---------- */

[dir="rtl"] .progress-bar-striped {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

[dir="rtl"] .progress-bar-animated {
    animation-direction: reverse;
}

/* ---------- Bootstrap carousel (image column) ---------- */

[dir="rtl"] .carousel-control-prev {
    left: auto;
    right: 0;
}

[dir="rtl"] .carousel-control-next {
    right: auto;
    left: 0;
}

[dir="rtl"] .carousel-control-prev-icon,
[dir="rtl"] .carousel-control-next-icon {
    transform: scaleX(-1);
}

[dir="rtl"] .carousel-item-next:not(.carousel-item-left),
[dir="rtl"] .active.carousel-item-right {
    transform: translateX(-100%);
}

[dir="rtl"] .carousel-item-prev:not(.carousel-item-right),
[dir="rtl"] .active.carousel-item-left {
    transform: translateX(100%);
}

/* ---------- formstyle.css: layout ---------- */

/* .main-section-donation { padding: 40px 30px 40px 0 } (767px resets it) */
@media (min-width: 768px) {
    [dir="rtl"] .main-section-donation {
        padding: 40px 0 40px 30px;
    }
}

/* .data-amount-section { padding-left: 45px } (991px resets it) */
@media (min-width: 992px) {
    [dir="rtl"] .main-section-donation .data-amount-section {
        padding-left: 0;
        padding-right: 45px;
    }
}

/* 500px: .data-amount-section { text-align: left !important } */
@media (max-width: 500px) {
    [dir="rtl"] .main-section-donation .data-amount-section {
        text-align: right !important;
    }
}

/* Project title and organizer block */
[dir="rtl"] .main-section-donation .data-amount-section h3 {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .main-section-donation .data-amount-section .socil-icons-d span {
    padding-left: 0;
    padding-right: 10px;
}

/* Latin organizer names ("Nour e.V.") keep their own order inside Arabic. */
[dir="rtl"] .main-section-donation .logo-content-box h3 {
    unicode-bidi: plaintext;
}

/* Goal progress: percentage label, supporter avatars, supporter count */
[dir="rtl"] .main-section-donation .pro-label label {
    margin: 0 15px 0 0 !important;
}

[dir="rtl"] .main-section-donation .m-user-id img:not(:first-child) {
    margin-left: 0;
    margin-right: -10px;
}

[dir="rtl"] .main-section-donation .user-block-s p {
    margin-left: 0;
    margin-right: 7px;
}

/* Two-button rows (e.g. back / next) */
[dir="rtl"] .main-section-donation .bottom-d-button-s .w-50:nth-last-child(1) {
    padding-left: 0;
    padding-right: 16px;
}

@media (max-width: 500px) {
    [dir="rtl"] .main-section-donation .bottom-d-button-s .w-50:nth-last-child(1) {
        padding-right: 0 !important;
    }
}

[dir="rtl"] .main-section-donation .geben-input-text .w-50:last-child {
    padding-left: 0;
    padding-right: 15px;
}

/* ---------- formstyle.css: amount step ---------- */

/* One-time / monthly tab icon */
[dir="rtl"] .main-section-donation .nav-pills .nav-link img {
    margin-left: 0;
    margin-right: 5px;
}

/* Corner marks on the amount tiles */
[dir="rtl"] .main-section-donation .main-select-box .inner-se-box .check,
[dir="rtl"] .main-section-donation .main-select-box .inner-se-box .star {
    right: auto;
    left: 4px;
}

[dir="rtl"] .inner-se-box .flame {
    right: auto;
    left: 8px;
}

[dir="rtl"] .custom-amt-tick {
    right: auto;
    left: 5px;
}

/* Custom amount: floating label and the € sign */
[dir="rtl"] .main-section-donation .anderer-box label {
    left: auto;
    right: 9px;
}

[dir="rtl"] .main-section-donation .anderer-box span {
    right: auto;
    left: 1px;
    padding-right: 0;
    padding-left: 16px;
}

/* Latin data inputs carry dir="ltr" in the markup (typed and shown LTR) but
   sit at the start, i.e. the right, of an RTL form. While empty, the Arabic
   placeholder is laid out RTL so its punctuation stays in place. */
[dir="rtl"] input[dir="ltr"] {
    text-align: right;
}

[dir="rtl"] input[dir="ltr"]:placeholder-shown {
    direction: rtl;
}

/* ---------- formstyle.css: checkboxes ---------- */

[dir="rtl"] .main-section-donation .check-einmalig input[type="checkbox"] {
    margin: 0 0 0 8px;
}

/* ---------- formstyle.css: payment methods ---------- */

[dir="rtl"] .payment-icon-step-flex .payment-icon-step-1:not(:last-child) {
    margin-right: 0;
    margin-left: 20px;
}

@media (max-width: 500px) {
    [dir="rtl"] .payment-icon-step-1 {
        margin-right: 0;
        margin-left: 15px;
    }
}

[dir="rtl"] .other-payments-icon {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .payment-element {
    padding: 0 0 0 2px;
}

[dir="rtl"] .main-section-donation .select-payment-b .payment-method {
    margin-right: 0;
}

[dir="rtl"] .main-section-donation .select-payment-b .custom-control-label::before {
    left: auto;
    right: -27px;
}

[dir="rtl"] .main-section-donation .select-payment-b .custom-control-label::after {
    left: auto;
    right: -26px;
}

[dir="rtl"] .additional-payment-method .custom-control {
    padding: 16px 45px 16px 16px;
}

[dir="rtl"] .ct-paypal-box .u-align-center svg {
    margin-right: 0;
    margin-left: 12px;
}

/* ---------- formstyle.css: image column bar (back / close) ---------- */

/* The back arrow points to the start of the reading direction. */
[dir="rtl"] .main-section-donation .top-d-close-box .back-arrow {
    margin-right: 0;
    margin-left: 8px;
    transform: scaleX(-1);
}

/* ---------- formstyle.css: receipt / thank-you step ---------- */

[dir="rtl"] .main-section-donation .thamk-u-section .main-title img {
    margin-left: 0;
    margin-right: 7px;
}

/* ---------- formstyle.css: supporters list ---------- */

[dir="rtl"] .supporters-donation-main-inner ul li .supporters-donation-right {
    padding-left: 0;
    padding-right: 15px;
}

/* ---------- formstyle.css + iziToast.css: live donation toast ---------- */

[dir="rtl"] .iziToast-wrapper-bottomLeft,
[dir="rtl"] .iziToast-wrapper-topLeft {
    left: auto;
    right: 0;
    text-align: right;
}

[dir="rtl"] .custom-toast .iziToast-cover {
    left: auto !important;
    right: -3px !important;
}

[dir="rtl"] .custom-toast .iziToast-body {
    margin-left: 0 !important;
    margin-right: 76px !important;
    padding: 0 10px 0 40px !important;
    text-align: right;
}

[dir="rtl"] .custom-toast .iziToast-body .iziToast-texts,
[dir="rtl"] .custom-toast .iziToast-body .iziToast-title,
[dir="rtl"] .custom-toast .iziToast-body .iziToast-message {
    float: right;
    text-align: right;
}

[dir="rtl"] .custom-toast .iziToast-close {
    right: auto !important;
    left: 12px !important;
}

/* ---------- donor-messages.css: in-form donor list ---------- */

[dir="rtl"] .sb {
    text-align: right;
}

[dir="rtl"] .sb-live {
    padding: 4px 10px 4px 11px;
}

[dir="rtl"] .sb-card {
    padding: 14px 10px 14px 16px;
}

[dir="rtl"] .sb-badge {
    right: auto;
    left: -8px;
}

/* Masked Latin names ("A* K***") and German comments keep their own order. */
[dir="rtl"] .sb-name,
[dir="rtl"] .sb .sb-msg,
[dir="rtl"] .sb .sb-desc {
    unicode-bidi: plaintext;
}

/* Danke page: organizer prose falls back to German/English when there is no
   Arabic row. unicode-bidi: plaintext lets each block take the direction of its
   own first strong character, so Latin paragraphs align and punctuate as LTR
   while Arabic text still renders RTL. */
[dir="rtl"] .hero-text h2,
[dir="rtl"] .hero-text > p,
[dir="rtl"] .middle-content-box h2,
[dir="rtl"] .footer-box h2 {
    unicode-bidi: plaintext;
}

@media (max-width: 480px) {
    [dir="rtl"] .sb-card {
        padding: 12px 8px 12px 12px;
    }
}