/* ── Urdu / RTL Language Styles ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

/* ── Language Toggle Bar ─────────────────────────────────────────────────── */

.nw-lang-bar {
    background: #1E293B;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid #334155;
}

.nw-lang-bar .nw-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.nw-lang-bar__label {
    font-size: 0.75rem;
    color: #94A3B8;
    margin-right: 4px;
}

.nw-lang-btn {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: none;
    color: #94A3B8;
}

.nw-lang-btn:hover {
    color: #fff;
    border-color: #475569;
}

.nw-lang-btn.is-active {
    background: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
}

.nw-lang-btn--ur {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* ── Content visibility ──────────────────────────────────────────────────── */

.nw-lang-ur { display: none; }
.nw-lang-en { display: block; }

body.nw-urdu .nw-lang-ur { display: block; }
body.nw-urdu .nw-lang-en { display: none; }

/* For inline/flex elements */
.nw-lang-ur--inline { display: none; }
.nw-lang-en--inline { display: inline; }

body.nw-urdu .nw-lang-ur--inline { display: inline; }
body.nw-urdu .nw-lang-en--inline { display: none; }

/* ── Urdu content wrapper ────────────────────────────────────────────────── */

.nw-urdu-content {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif;
    line-height: 2.2;
    font-size: 1.0625rem;
}

.nw-urdu-content h1,
.nw-urdu-content h2,
.nw-urdu-content h3,
.nw-urdu-content h4 {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
    line-height: 2;
    color: #0F172A;
}

.nw-urdu-content h1 { font-size: 2rem; }
.nw-urdu-content h2 { font-size: 1.375rem; margin-bottom: 12px; margin-top: 32px; }
.nw-urdu-content h3 { font-size: 1.125rem; margin-bottom: 8px; }

.nw-urdu-content p {
    color: #374151;
    margin-bottom: 16px;
}

.nw-urdu-content ul,
.nw-urdu-content ol {
    padding-right: 24px;
    padding-left: 0;
}

.nw-urdu-content li {
    margin-bottom: 8px;
    color: #374151;
}

.nw-urdu-content strong {
    color: #0F172A;
    font-weight: 700;
}

.nw-urdu-content a {
    color: #1D4ED8;
}

/* Hero in Urdu */
.nw-page-hero--ur {
    direction: rtl;
    text-align: center;
}

.nw-page-hero--ur .nw-page-hero__title {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.8;
}

.nw-page-hero--ur .nw-page-hero__sub {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 2.2;
    font-size: 1.0625rem;
    color: #475569;
}

/* ── Urdu service desc blocks ────────────────────────────────────────────── */

.nw-service-desc-block.nw-urdu-content {
    direction: rtl;
    text-align: right;
}

/* ── Urdu KB categories ──────────────────────────────────────────────────── */

.nw-kb-cat-card--ur {
    direction: rtl;
    text-align: right;
}

.nw-kb-cat-card--ur .nw-kb-cat-card__body h3,
.nw-kb-cat-card--ur .nw-kb-cat-card__body p {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.9;
}

/* ── Urdu about sidebar ──────────────────────────────────────────────────── */

.nw-about-sidebar--ur {
    direction: rtl;
}

.nw-about-sidebar--ur .nw-about-stat__label,
.nw-about-sidebar--ur .nw-about-cta-card p,
.nw-about-sidebar--ur .nw-about-cta-card h3 {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.9;
}

/* ── Urdu What's New ─────────────────────────────────────────────────────── */

.nw-whats-new--ur {
    direction: rtl;
    text-align: right;
}

.nw-whats-new--ur .nw-whats-new__item strong,
.nw-whats-new--ur .nw-whats-new__item p,
.nw-whats-new--ur .nw-whats-new__date,
.nw-whats-new--ur h2 {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.9;
}

/* ── Support spotlight Urdu ──────────────────────────────────────────────── */

.nw-support-spotlight--ur {
    direction: rtl;
    text-align: right;
}

.nw-support-spotlight--ur h3,
.nw-support-spotlight--ur p {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.9;
}

/* ── Preserve button colours inside Urdu content blocks ─────────────────── */
/* .nw-urdu-content sets dark text which inherits into buttons — override    */

.nw-urdu-content .nw-btn--primary,
.nw-urdu-content .nw-btn--primary * { color: #fff !important; }

.nw-urdu-content .nw-btn--outline,
.nw-urdu-content .nw-btn--outline * { color: var(--nw-primary, #1D4ED8) !important; }

.nw-urdu-content .nw-btn--ghost,
.nw-urdu-content .nw-btn--ghost *   { color: var(--nw-gray, #64748B) !important; }

/* ── Urdu text on dark hero backgrounds ─────────────────────────────────── */
/* Hero sections use dark backgrounds — override Urdu text colors to white   */

.nw-support-hero .nw-urdu-content h1,
.nw-support-hero .nw-urdu-content h2,
.nw-support-hero .nw-urdu-content h3,
.nw-page-hero .nw-urdu-content h1,
.nw-page-hero .nw-urdu-content h2,
.nw-page-hero .nw-urdu-content h3 {
    color: #fff;
}

.nw-support-hero .nw-urdu-content p,
.nw-page-hero .nw-urdu-content p {
    color: rgba(255, 255, 255, 0.8);
}

/* Inline styles on hero titles/subs also need overriding via !important
   because the templates use style="" attributes on those elements          */
.nw-support-hero [style*="Noto Nastaliq"],
.nw-page-hero [style*="Noto Nastaliq"] {
    color: #fff !important;
}

.nw-support-hero .nw-support-hero__sub[style],
.nw-page-hero .nw-page-hero__sub[style] {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Badge Urdu ──────────────────────────────────────────────────────────── */

.nw-badge--ur {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* ── CTA section Urdu ────────────────────────────────────────────────────── */

.nw-section--ur {
    direction: rtl;
    text-align: center;
}

.nw-section--ur h2,
.nw-section--ur p {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 2;
}