/* ==========================================================================
   CARE — LANGUAGE SWITCHER + SCRIPT SUPPORT + RTL
   --------------------------------------------------------------------------
   1. Language switcher (header + mobile drawer)
   2. Per-script typography (Devanagari / Nastaliq)
   3. RTL mirroring for Urdu
   ========================================================================== */


/* ==========================================================================
   1. LANGUAGE SWITCHER
   ========================================================================== */

.lang-switch{
    position:relative;
    flex-shrink:0;
}

.lang-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    min-width:46px;
    padding:0 16px;
    border:1px solid rgba(11,114,133,.16);
    border-radius:50px;
    background:#EEF8FA;
    color:var(--primary,#0B7285);
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.lang-toggle:hover{
    background:#E2F5F4;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(11,114,133,.14);
}

.lang-toggle:focus-visible{
    outline:3px solid #00A7A0;
    outline-offset:4px;
}

.lang-toggle .fa-globe{
    font-size:16px;
}

.lang-toggle .lang-caret{
    font-size:11px;
    opacity:.7;
    transition:transform .3s ease;
}

.lang-switch.open .lang-toggle .lang-caret{
    transform:rotate(180deg);
}

/* ---------- Dropdown ---------- */

.lang-menu{
    position:absolute;
    top:calc(100% + 12px);
    inset-inline-end:0;
    z-index:10001;
    min-width:190px;
    padding:8px;
    border:1px solid rgba(11,114,133,.10);
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 60px rgba(9,40,52,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.lang-switch.open .lang-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.lang-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:12px 14px;
    border:none;
    border-radius:12px;
    background:transparent;
    color:#21404E;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    text-align:start;
    cursor:pointer;
    transition:background .25s ease, color .25s ease;
}

.lang-option:hover,
.lang-option:focus-visible{
    background:#EEF8FA;
    color:var(--primary,#0B7285);
    outline:none;
}

.lang-option .lang-native{
    font-size:16px;
}

.lang-option .lang-latin{
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:.55;
}

.lang-option.is-active{
    background:rgba(0,194,181,.10);
    color:var(--primary,#0B7285);
}

.lang-option.is-active::after{
    content:"\f00c";                 /* Font Awesome check */
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:12px;
    color:var(--secondary,#00C2B5);
}

/* Hindi / Urdu options render in their own script */
.lang-option[data-lang-option="hi"] .lang-native{
    font-family:"Noto Sans Devanagari","Inter",sans-serif;
}

.lang-option[data-lang-option="ur"] .lang-native{
    font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;
    font-size:17px;
    line-height:2;
}


/* ==========================================================================
   2. PER-SCRIPT TYPOGRAPHY
   ========================================================================== */

/* ---------- Hindi ---------- */

html[data-lang="hi"] body{
    font-family:"Noto Sans Devanagari","Inter",sans-serif;
}

html[data-lang="hi"] h1,
html[data-lang="hi"] h2,
html[data-lang="hi"] h3,
html[data-lang="hi"] h4{
    line-height:1.4;
    letter-spacing:0;          /* Devanagari must not be letter-spaced */
}

html[data-lang="hi"] p,
html[data-lang="hi"] li{
    line-height:1.85;
}

/* ---------- Urdu ---------- */

html[data-lang="ur"] body{
    font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Inter",serif;
}

html[data-lang="ur"] h1,
html[data-lang="ur"] h2,
html[data-lang="ur"] h3,
html[data-lang="ur"] h4,
html[data-lang="ur"] h5{
    line-height:2.1;           /* Nastaliq needs vertical room for descenders */
    letter-spacing:0;
    font-weight:700;
}

html[data-lang="ur"] p,
html[data-lang="ur"] li,
html[data-lang="ur"] span,
html[data-lang="ur"] a,
html[data-lang="ur"] label{
    line-height:2.3;
    letter-spacing:0;
}

/* Nastaliq renders large for its point size — pull it back slightly */
html[data-lang="ur"] .hero h1{ font-size:clamp(30px,4.4vw,54px); }
html[data-lang="ur"] .section-heading h2{ font-size:clamp(26px,3.4vw,42px); }
html[data-lang="ur"] .nav a{ font-size:15px; padding:14px; }
html[data-lang="ur"] .btn-book,
html[data-lang="ur"] .btn-emergency{ padding:12px 24px; font-size:14px; }

/* Numerals stay Latin so phone numbers, times and dates remain scannable */
html[data-lang="ur"] .counter,
html[data-lang="ur"] .stat-card h3,
html[data-lang="ur"] .highlight-number,
html[data-lang="ur"] time,
html[data-lang="ur"] [dir="ltr"]{
    font-family:"Inter",sans-serif;
    line-height:1.3;
}

/* Phone numbers / e-mail must not be reordered by the RTL algorithm */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="https://wa.me"]{
    direction:ltr;
    unicode-bidi:embed;
    display:inline-block;
}


/* ==========================================================================
   3. RTL MIRRORING
   ========================================================================== */

html[dir="rtl"] body{
    text-align:start;
}

/* ---------- Header ---------- */

html[dir="rtl"] .logo{
    margin-right:0;
    margin-left:18px;
}

/* ---------- Bulleted service lists ---------- */

html[dir="rtl"] .dept-services li{
    padding-left:0;
    padding-right:26px;
}

html[dir="rtl"] .dept-services li::before{
    left:auto;
    right:0;
}

/* ---------- Footer ---------- */

html[dir="rtl"] .footer h3::after{
    left:auto;
    right:0;
}

html[dir="rtl"] .footer-contact ul li{
    padding-left:0;
    padding-right:34px;
}

html[dir="rtl"] .footer-contact ul li::before{
    left:auto;
    right:0;
}

/* ---------- Floating action buttons + back to top ---------- */

html[dir="rtl"] .floating-buttons,
html[dir="rtl"] .floating-contact{
    right:auto;
    left:15px;
}

html[dir="rtl"] #backToTop{
    right:auto;
    left:25px;
}

@media (max-width:576px){
    html[dir="rtl"] .floating-buttons,
    html[dir="rtl"] .floating-contact{
        right:auto;
        left:12px;
    }
}

/* ---------- Gallery lightbox ---------- */

html[dir="rtl"] .lightbox-prev{ left:auto; right:40px; }
html[dir="rtl"] .lightbox-next{ right:auto; left:40px; }
html[dir="rtl"] .lightbox-close{ right:auto; left:35px; }

@media (max-width:768px){
    html[dir="rtl"] .lightbox-prev{ left:auto; right:15px; }
    html[dir="rtl"] .lightbox-next{ right:auto; left:15px; }
    html[dir="rtl"] .lightbox-close{ right:auto; left:15px; }
}

/* Prev/next chevrons must point the other way in RTL */
html[dir="rtl"] .lightbox-prev i,
html[dir="rtl"] .lightbox-next i{
    transform:scaleX(-1);
}

/* ---------- Modal close buttons ---------- */

html[dir="rtl"] .video-modal-close,
html[dir="rtl"] .appointment-modal-close{
    right:auto;
    left:22px;
}

@media (max-width:576px){
    html[dir="rtl"] .video-modal-close,
    html[dir="rtl"] .appointment-modal-close{
        right:auto;
        left:16px;
    }
}

/* Full-screen button sits beside the close button */
html[dir="rtl"] .video-modal-fullscreen{
    right:auto;
    left:86px;
}

@media (max-width:576px){
    html[dir="rtl"] .video-modal-fullscreen{
        right:auto;
        left:70px;
    }
}

/* ---------- Search ---------- */

html[dir="rtl"] .search-result-tag{
    margin-left:0;
    margin-right:auto;
}

html[dir="rtl"] .search-result-text{
    text-align:start;
}

/* ---------- Forms ---------- */

html[dir="rtl"] .form-group select{
    padding-right:20px;
    padding-left:50px;
    background-position:left 18px center;
}

html[dir="rtl"] .form-group label,
html[dir="rtl"] .error-message{
    text-align:start;
}

/* ---------- Doctor profile timeline ---------- */

html[dir="rtl"] .timeline{
    padding-left:0;
    padding-right:45px;
}

html[dir="rtl"] .timeline::before{
    left:auto;
    right:14px;
}

html[dir="rtl"] .timeline-dot{
    left:auto;
    right:-45px;
}

@media (max-width:768px){
    html[dir="rtl"] .timeline{ padding-left:0; padding-right:28px; }
    html[dir="rtl"] .timeline::before{ left:auto; right:8px; }
    html[dir="rtl"] .timeline-dot{ left:auto; right:-28px; }
}

/* ---------- Breadcrumb ---------- */

html[dir="rtl"] .profile-breadcrumb .container{
    flex-direction:row-reverse;
    justify-content:flex-end;
}

/* ---------- Arrows embedded in button labels ---------- */
/* "Book Appointment →" reads the wrong way round in RTL, so the glyph
   itself is mirrored rather than re-typed in every translation. */

html[dir="rtl"] .arrow-glyph{
    display:inline-block;
    transform:scaleX(-1);
}

html[dir="rtl"] .back-doctors i,
html[dir="rtl"] .doctor-btn i.fa-arrow-right,
html[dir="rtl"] .btn-primary i.fa-arrow-right{
    transform:scaleX(-1);
}

/* ---------- Decorative blobs: keep the composition balanced ---------- */

html[dir="rtl"] .hero::before{ right:auto; left:-280px; }
html[dir="rtl"] .hero::after{ left:auto; right:-200px; }
html[dir="rtl"] .appointment::before{ right:auto; left:-150px; }
html[dir="rtl"] .appointment::after{ left:auto; right:-120px; }
html[dir="rtl"] .why-care::before{ right:auto; left:-150px; }
html[dir="rtl"] .why-care::after{ left:auto; right:-120px; }

/* The "shine" sweep should travel the other way */
html[dir="rtl"] .card-shine{ left:auto; right:-140%; }
html[dir="rtl"] .premium-card:hover .card-shine,
html[dir="rtl"] .contact-card:hover .card-shine,
html[dir="rtl"] .testimonial-card:hover .card-shine{ right:170%; left:auto; }

/* ---------- Play button glyph stays pointing "forward" ---------- */

html[dir="rtl"] .play-btn i{
    margin-left:0;
    margin-right:4px;
}


/* ==========================================================================
   MOBILE DRAWER VARIANT OF THE SWITCHER
   ========================================================================== */

.lang-switch-mobile{
    display:none;
}

@media (max-width:1250px){

    /* In the drawer the dropdown becomes a simple inline row of pills */
    .lang-switch-mobile{
        display:block;
        padding:18px 0 6px;
        border-top:1px solid rgba(0,0,0,.06);
    }

    .lang-switch-mobile .lang-mobile-label{
        display:block;
        margin-bottom:12px;
        color:#6B7C86;
        font-size:12px;
        font-weight:700;
        letter-spacing:.12em;
        text-transform:uppercase;
    }

    .lang-switch-mobile .lang-mobile-options{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }

    .lang-switch-mobile .lang-option{
        width:auto;
        flex:1 1 auto;
        justify-content:center;
        padding:12px 16px;
        border:1px solid rgba(11,114,133,.16);
        border-radius:50px;
    }

    .lang-switch-mobile .lang-option .lang-latin{
        display:none;
    }
}