/*
 * Rishta Desk in Urdu — RTL corrections + Nastaliq type.
 * Loaded only when body.phwo-rishta-ur is set (visitor chose اردو).
 * rishta.css / chat.css stay untouched; this sheet only mirrors what they
 * declared as left/right and swaps the type for a Nastaliq face with the
 * generous line-height it needs to stay legible.
 */

/* ---------- type ---------- */
.phwo-rishta-ur,
.phwo-rishta-ur .phwo-rishta-hero,
.phwo-rishta-ur .phwo-rishta-promises,
.phwo-rishta-ur .phwo-rishta-how,
.phwo-rishta-ur .phwo-rishta-elig,
.phwo-rishta-ur .phwo-rishta-assist,
.phwo-rishta-ur .phwo-rishta-role,
.phwo-rishta-ur .phwo-rishta-faq,
.phwo-rishta-ur .phwo-rishta-register,
.phwo-rishta-ur .phwo-rishta-done,
.phwo-rishta-ur .phwo-chat-main,
.phwo-rishta-ur .phwo-lang-line {
	font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", Inter, system-ui, sans-serif;
	line-height: 2;
	letter-spacing: 0;
	text-transform: none;
}
.phwo-rishta-ur h1, .phwo-rishta-ur h2, .phwo-rishta-ur h3, .phwo-rishta-ur h4,
.phwo-rishta-ur .phwo-rishta-step legend,
.phwo-rishta-ur .phwo-rishta-hero h2,
.phwo-rishta-ur .phwo-chat-card h1 {
	font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", Georgia, serif;
	line-height: 1.9;
	letter-spacing: 0;
	font-weight: 700;
}
.phwo-rishta-ur .phwo-rishta-hero h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
.phwo-rishta-ur .phwo-rishta-kicker,
.phwo-rishta-ur .phwo-rishta-sub,
.phwo-rishta-ur .phwo-rf-label { letter-spacing: 0; text-transform: none; }
.phwo-rishta-ur .phwo-rishta-sub { font-size: .95rem; }
.phwo-rishta-ur p, .phwo-rishta-ur li, .phwo-rishta-ur label, .phwo-rishta-ur summary { line-height: 2; }
.phwo-rishta-ur .phwo-rf-help, .phwo-rishta-ur .phwo-rishta-steps li p,
.phwo-rishta-ur .phwo-rishta-promises li span:last-child { font-size: .98rem; }
/* Nastaliq descends deep: give inline-block things headroom. */
.phwo-rishta-ur .phwo-btn { line-height: 1.9; padding-top: .45rem; padding-bottom: .55rem; }
.phwo-rishta-ur .phwo-rishta-kicker { line-height: 1.9; }

/* Latin, numbers, codes and typed input stay in the Latin face and LTR so
 * reference numbers, phone numbers and CNIC digits read the right way. */
.phwo-rishta-ur input, .phwo-rishta-ur select, .phwo-rishta-ur textarea,
.phwo-rishta-ur code, .phwo-rishta-ur kbd,
.phwo-rishta-ur .phwo-rishta-ref strong,
.phwo-rishta-ur [data-meter-pct], .phwo-rishta-ur [data-meter-req], .phwo-rishta-ur [data-pct],
.phwo-rishta-ur .phwo-chat-time, .phwo-rishta-ur .phwo-rail-tick,
.phwo-rishta-ur .phwo-rishta-counter,
.phwo-rishta-ur .phwo-lang-pill a[lang=en], .phwo-rishta-ur .phwo-lang-line a[lang=en] {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
	letter-spacing: 0;
}
.phwo-rishta-ur input[type=tel], .phwo-rishta-ur input[type=email], .phwo-rishta-ur input[type=number],
.phwo-rishta-ur input[type=date], .phwo-rishta-ur input[name=id_number], .phwo-rishta-ur input[name=height_cm],
.phwo-rishta-ur .phwo-rishta-ref strong, .phwo-rishta-ur code, .phwo-rishta-ur #phwo-gate-pin {
	direction: ltr; text-align: left; unicode-bidi: isolate;
}
.phwo-rishta-ur .phwo-rishta-ref strong { display: inline-block; }
/* Free-text fields: let the browser follow the first strong character. */
.phwo-rishta-ur input[type=text], .phwo-rishta-ur textarea { unicode-bidi: plaintext; text-align: start; }
.phwo-rishta-ur input::placeholder, .phwo-rishta-ur textarea::placeholder { font-family: "Noto Nastaliq Urdu", Inter, sans-serif; line-height: 1.8; }

/* ---------- hero ---------- */
.phwo-rishta-ur .phwo-rishta-hero-inner { text-align: right; }
.phwo-rishta-ur .phwo-rishta-urdu { text-align: right; }
.phwo-rishta-ur .phwo-rishta-hero-proof li::before { margin-right: 0; margin-left: .4rem; }
.phwo-rishta-ur .phwo-rishta-savestate.is-on::before { margin-right: 0; margin-left: .35rem; }

/* ---------- lists, promises, steps, FAQ ---------- */
.phwo-rishta-ur .phwo-rishta-elig ul,
.phwo-rishta-ur .phwo-rishta-role-card ul { padding-left: 0; padding-right: 1.2rem; }
.phwo-rishta-ur .phwo-rishta-steps li > span { margin-left: 0; margin-right: 0; }
.phwo-rishta-ur .phwo-rishta-faq-item summary { padding-right: 1.6rem; padding-left: .2rem; }
.phwo-rishta-ur .phwo-rishta-faq-item summary::before,
.phwo-rishta-ur .phwo-rishta-faq-item summary::after { right: 0; left: auto; }
.phwo-rishta-ur .phwo-rishta-assist { text-align: right; }

/* ---------- notes / callouts (border was on the left) ---------- */
.phwo-rishta-ur .phwo-rishta-note {
	border-left: 0;
	border-right: 3px solid var(--phwo-color-primary, #0D5C63);
}
.phwo-rishta-ur .phwo-rishta-focusbar,
.phwo-rishta-ur .phwo-rishta-resume { text-align: right; }

/* ---------- the form ---------- */
/* Rail on the right, panel on the left: mirror the shell. */
.phwo-rishta-ur .phwo-rishta-shell { grid-template-columns: minmax(0, 1fr) 250px; }
.phwo-rishta-ur .phwo-rishta-rail { order: 2; }
.phwo-rishta-ur .phwo-rishta-panel { order: 1; }
@media (max-width: 860px) {
	.phwo-rishta-ur .phwo-rishta-shell { grid-template-columns: 1fr; }
	.phwo-rishta-ur .phwo-rishta-rail { order: 1; }
	.phwo-rishta-ur .phwo-rishta-panel { order: 2; }
}
.phwo-rishta-ur .phwo-rishta-rail li { grid-template-columns: 1fr 34px; }
.phwo-rishta-ur .phwo-rishta-rail li .phwo-rail-no { order: 2; }
.phwo-rishta-ur .phwo-rishta-rail li .phwo-rail-label { order: 1; text-align: right; }
.phwo-rishta-ur .phwo-rishta-prep li { grid-template-columns: 1fr 44px; text-align: right; }
.phwo-rishta-ur .phwo-rishta-prep-ico { grid-column: 2; grid-row: 1 / span 2; }
.phwo-rishta-ur .phwo-rishta-prep li strong,
.phwo-rishta-ur .phwo-rishta-prep li > span:not(.phwo-rishta-prep-ico) { grid-column: 1; }

.phwo-rishta-ur .phwo-rf-label,
.phwo-rishta-ur .phwo-rf-help,
.phwo-rishta-ur .phwo-rf-error,
.phwo-rishta-ur .phwo-step-intro,
.phwo-rishta-ur .phwo-rishta-step legend { text-align: right; }
.phwo-rishta-ur .phwo-rf-label em { margin-right: .15rem; }

/* select chevron moves to the left edge */
.phwo-rishta-ur .phwo-rf select { padding-right: .95rem; padding-left: 2.4rem; }
.phwo-rishta-ur .phwo-rf-select::after { right: auto; left: .95rem; }

/* dropzones */
.phwo-rishta-ur .phwo-drop-remove { right: auto; left: .4rem; }
.phwo-rishta-ur .phwo-drop-name { text-align: right; }

/* capture cards */
.phwo-rishta-ur .phwo-capture-head { flex-direction: row-reverse; text-align: right; }
.phwo-rishta-ur .phwo-capture-actions { justify-content: flex-start; }
.phwo-rishta-ur .phwo-capture-stage.is-recording::before,
.phwo-rishta-ur [data-recording]::before { left: auto; right: .7rem; }
.phwo-rishta-ur .phwo-rishta-challenge { text-align: right; }

/* consents */
.phwo-rishta-ur .phwo-check { flex-direction: row-reverse; text-align: right; }
.phwo-rishta-ur .phwo-check input { margin-left: .6rem; margin-right: 0; }

/* meter / topbar / nav */
.phwo-rishta-ur .phwo-rishta-topbar,
.phwo-rishta-ur .phwo-rishta-meter-head { flex-direction: row-reverse; }
.phwo-rishta-ur .phwo-rishta-meter-bar { transform: scaleX(-1); }
.phwo-rishta-ur .phwo-rishta-upload-bar { transform: scaleX(-1); }
.phwo-rishta-ur .phwo-rishta-nav { flex-direction: row-reverse; }
.phwo-rishta-ur .phwo-rishta-nav-right { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
.phwo-rishta-ur .phwo-rishta-nav [data-save-later] { margin-right: 0; margin-left: auto; }
@media (max-width: 860px) {
	.phwo-rishta-ur .phwo-rishta-nav [data-save-later] { margin-left: 0; }
	.phwo-rishta-ur .phwo-rishta-nav .phwo-btn-primary { margin-right: 0; }
}
.phwo-rishta-ur .phwo-review { text-align: right; }
.phwo-rishta-ur .phwo-rishta-inline { text-align: right; }

/* ---------- success + notices ---------- */
.phwo-rishta-ur .phwo-rishta-done { text-align: center; }
.phwo-rishta-ur .phwo-notice { text-align: right; }

/* ---------- private pages (chat / portal / consent / gate) ---------- */
.phwo-rishta-ur .phwo-chat-card, .phwo-rishta-ur .phwo-chat-gate { text-align: right; }
.phwo-rishta-ur .phwo-chat-gate { text-align: center; }
.phwo-rishta-ur .phwo-chat-you { text-align: left; }
.phwo-rishta-ur .phwo-chat-time { text-align: left; }
.phwo-rishta-ur .phwo-chat-bubble { text-align: right; unicode-bidi: plaintext; line-height: 1.9; }
/* Mirror the bubble tails: "me" sits on the left in RTL, "them" on the right. */
.phwo-rishta-ur .phwo-chat-msg.is-me { justify-content: flex-start; }
.phwo-rishta-ur .phwo-chat-msg.is-them { justify-content: flex-end; }
.phwo-rishta-ur .phwo-chat-msg.is-me .phwo-chat-bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; }
.phwo-rishta-ur .phwo-chat-msg.is-them .phwo-chat-bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.phwo-rishta-ur .phwo-chat-msg.is-staff .phwo-chat-bubble::before { content: "PHWO عملہ"; letter-spacing: 0; text-transform: none; font-family: "Noto Nastaliq Urdu", Inter, sans-serif; }
.phwo-rishta-ur .phwo-chat-compose, .phwo-rishta-ur .phwo-chat-form { flex-direction: row-reverse; }
.phwo-rishta-ur .phwo-chat-compose textarea { text-align: right; }
.phwo-rishta-ur .phwo-chat-pin-form { text-align: center; }
.phwo-rishta-ur .phwo-chat-fine { text-align: center; }
.phwo-rishta-ur .phwo-chat-error { text-align: right; }
.phwo-rishta-ur .phwo-chat-main table th, .phwo-rishta-ur .phwo-chat-main table td { text-align: right; }
.phwo-rishta-ur .phwo-chat-main ul, .phwo-rishta-ur .phwo-chat-main ol { padding-left: 0; padding-right: 1.2rem; }

/* ---------- the language toggle ---------- */
.phwo-lang-pill {
	position: fixed; z-index: 9000; top: 88px; right: 16px;
	display: inline-flex; align-items: center; gap: .15rem;
	padding: .3rem .45rem; border-radius: 999px;
	background: #0D5C63; color: #fff;
	box-shadow: 0 6px 20px rgba(20,38,43,.22);
	font: 600 .9rem/1.2 Inter, system-ui, sans-serif;
}
.phwo-lang-pill a { color: #fff; text-decoration: none; padding: .3rem .65rem; border-radius: 999px; opacity: .85; }
.phwo-lang-pill a:hover { opacity: 1; }
.phwo-lang-pill a.is-on { background: #E8A33D; color: #14262B; opacity: 1; }
.phwo-lang-pill a[lang=ur] { font-family: "Noto Nastaliq Urdu", Inter, serif; line-height: 1.6; }
.phwo-lang-pill span { opacity: .5; }
@media (max-width: 860px) {
	.phwo-lang-pill { top: auto; bottom: 16px; right: 16px; }
}
.phwo-lang-line {
	margin: 0 0 1rem; padding: .5rem .9rem;
	background: var(--phwo-color-mist, #F5F8F8); border-radius: 8px;
	font-size: .95rem; color: var(--phwo-muted, #6b7a80);
}
.phwo-lang-line a { color: var(--phwo-color-primary, #0D5C63); font-weight: 600; }

/* RTL viewport: the off-canvas nav must not create a sideways page (blank screen on phones). */
html[dir="rtl"], html[dir="rtl"] body { overflow-x: clip; }
html[dir="rtl"] .phwo-nav:not(.is-open) { visibility: hidden; }
html[dir="rtl"] .phwo-nav.is-open { visibility: visible; }
@media (max-width: 860px) {
	.phwo-lang-pill { left: 16px !important; right: auto !important; bottom: 84px !important; }
}

/* THE blank-page bug: in an RTL document, anything parked at left:-9999px
   (the skip link, honeypot fields) extends the scrollable area 9999px to the
   left and Chrome opens the page on that empty side. Hide them the clip way. */
html[dir="rtl"] .phwo-skip:not(:focus),
html[dir="rtl"] .phwo-hp,
html[dir="rtl"] .phwo-newsletter .phwo-hp,
html[dir="rtl"] .phwo-form .phwo-hp {
	left: auto !important; right: auto !important;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	width: 1px; height: 1px; overflow: hidden;
}

/* language pill: bottom-left everywhere, clear of the logo and the assistant */
.phwo-lang-pill { top: auto !important; bottom: 18px !important; left: 18px !important; right: auto !important; }
@media (max-width: 860px) { .phwo-lang-pill { bottom: 84px !important; } }