/* ==============================
   RTL Overrides (scoped)
   ============================== */

/* Scope everything to RTL pages only */
body[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

    /* ---------- Navbar ---------- */
    body[dir="rtl"] .nav-container {
        flex-direction: row-reverse;
    }

    body[dir="rtl"] .nav-menu {
        text-align: right;
    }

    body[dir="rtl"] .nav-link::after {
        left: auto;
        right: 0;
    }

    /* ---------- Hero (kept centered) ---------- */
    body[dir="rtl"] .hero {
        background: url('/images/Hero.png') center/cover no-repeat;
        height: 60vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--light);
    }

        body[dir="rtl"] .hero .overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.55);
        }

        body[dir="rtl"] .hero .container {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        body[dir="rtl"] .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: .5rem;
        }

        body[dir="rtl"] .hero p {
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        body[dir="rtl"] .hero::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 600px;
            z-index: 1;
        }

    body[dir="rtl"] .btn-gold {
        display: inline-block;
        border-radius: 25px;
        padding: .75rem 1.5rem;
        font-weight: 600;
        text-align: center;
    }

        body[dir="rtl"] .btn-gold:hover {
            background-color: #b9952b;
        }

    /* ---------- Grids & cards ---------- */
    body[dir="rtl"] .packages-grid,
    body[dir="rtl"] .services-grid,
    body[dir="rtl"] .process-steps,
    body[dir="rtl"] .contact-cards,
    body[dir="rtl"] .checkbox-group {
        direction: rtl;
    }

    /* ---------- Contact form (generic) ---------- */
    body[dir="rtl"] .contact-form {
        text-align: right;
    }

    body[dir="rtl"] .form-group input,
    body[dir="rtl"] .form-group select,
    body[dir="rtl"] .form-group textarea {
        text-align: right;
    }

    /* ---------- Footer ---------- */
    body[dir="rtl"] .footer-container {
        direction: rtl;
    }

    body[dir="rtl"] .footer-section ul li i {
        margin-right: 0;
        margin-left: .5rem;
    }

    /* ---------- Social links ---------- */
    body[dir="rtl"] .social-links {
        justify-content: center;
    }

    /* ---------- Checkbox group ---------- */
    body[dir="rtl"] .checkbox-group label {
        justify-content: flex-start;
    }

    /* ---------- Process steps ---------- */
    body[dir="rtl"] .step-number {
        margin: 0 auto 1rem;
    }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
    body[dir="rtl"] .nav-container {
        flex-direction: row-reverse;
    }

    body[dir="rtl"] .phone-group {
        flex-direction: row-reverse;
    }
}

/* ==============================
   intl-tel-input (single, correct set)
   ============================== */

/* Numbers should type LTR for readability; overall layout stays RTL */
body[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left; /* cursor/typing starts on left */
}

/* Plugin root remains LTR internally to avoid weird mirroring */
body[dir="rtl"] .iti {
    direction: ltr;
    text-align: left;
    position: relative;
}

/* Move flag to the RIGHT */
body[dir="rtl"] .iti__flag-container {
    position: absolute;
    right: 8px !important;
    left: auto !important;
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
}

/* Reserve space on the right for the flag/caret */
body[dir="rtl"] .iti--allow-dropdown input,
body[dir="rtl"] .iti--separate-dial-code input {
    padding-right: 64px !important; /* ~52px flag + spacing */
    padding-left: 16px !important;
}

/* Dropdown aligns from the right, text stays readable */
body[dir="rtl"] .iti__country-list {
    right: 0 !important;
    left: auto !important;
    z-index: 100000 !important;
    /* If your country names are Arabic, use RTL; if English, switch to LTR. */
    direction: rtl;
    text-align: right;
}

/* Optional arrow flip */
body[dir="rtl"] .iti__arrow {
    left: 10px;
    right: auto;
}

/* Keep dropdown above everything */
.iti--container,
.iti--container .iti__country-list {
    z-index: 100000 !important;
}

/* ==============================
   Newsletter (RTL)
   ============================== */
body[dir="rtl"] .newsletter {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 1rem;
    max-width: 400px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0 0 0 1px #ccc;
}

    body[dir="rtl"] .newsletter input {
        flex: 2;
        padding: .6rem 1rem;
        border: none;
        outline: none;
        border-radius: 0;
        text-align: right;
        font-size: 1rem;
    }

    body[dir="rtl"] .newsletter button {
        flex: 2;
        padding: .6rem 1.2rem;
        background: var(--gold);
        color: var(--dark);
        border: none;
        border-radius: 0;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--transition);
    }

        body[dir="rtl"] .newsletter button:hover {
            background: #e0c25c;
        }

/* Useful helper when you need LTR text inside RTL area (like codes) */
body[dir="rtl"] .ltr-text {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    text-align: left !important;
}

/* ==============================
   Contact card (your “contact-card.rtl” version)
   ============================== */
body[dir="rtl"] .contact-card {
    overflow: visible !important;
}
    /* ensure dropdown isn't clipped */

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

        body[dir="rtl"] .contact-card.rtl .fg label,
        body[dir="rtl"] .contact-card.rtl .val-summary,
        body[dir="rtl"] .contact-card.rtl .val-msg {
            text-align: right;
        }

        /* Button to the left in RTL (common convention) */
        body[dir="rtl"] .contact-card.rtl .actions {
            justify-content: flex-start;
        }

        /* File input reversed: button left, name right */
        body[dir="rtl"] .contact-card.rtl .file {
            flex-direction: row-reverse;
        }

        body[dir="rtl"] .contact-card.rtl .file__label {
            text-align: right;
        }

        /* Phone input inside contact card */
        body[dir="rtl"] .contact-card.rtl .phone-input {
            direction: ltr;
            text-align: left;
        }

        body[dir="rtl"] .contact-card.rtl .iti--allow-dropdown .iti__flag-container {
            left: auto !important;
            right: 8px !important;
        }

        body[dir="rtl"] .contact-card.rtl .iti input[type="tel"],
        body[dir="rtl"] .contact-card.rtl #phone {
            padding-right: 64px !important;
            padding-left: 16px !important;
        }

        body[dir="rtl"] .contact-card.rtl .iti__selected-flag {
            background: #fff !important;
            padding: 0 6px !important;
            height: 100%;
        }

/* Language switcher */
body[dir="rtl"] .language-switcher {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

[dir="rtl"] .why-grid {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .why-item {
    text-align: center; /* keep centered icons/text */
}