/* ============================================================
   PINGOU — language switcher, Arabic typography, RTL layout
   ============================================================ */

/* ---------- language switcher ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--tint), 0.028);
  direction: ltr;
  flex: none;
  vertical-align: middle;
}
.lang-btn {
  min-width: 27px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.lang-btn:hover { color: var(--text-soft); background: rgba(var(--tint),.05); }
.lang-btn.is-active { background: rgba(11,122,93,.12); color: var(--mint); }
.lang-btn[data-lang="ar"] { font-family: "Cairo", var(--font-body); font-size: 10.5px; line-height: 1; }
.app-header .lang-switch { margin-right: 2px; }
.auth-topbar .lang-switch { margin-right: 4px; }
.mobile-menu .lang-switch {
  display: flex;
  width: 100%;
  margin-top: 18px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(var(--tint),.035);
}
.mobile-menu .lang-btn { flex: 1; height: 34px; font-size: 10px; border-radius: 9px; }
.mobile-menu .lang-btn[data-lang="ar"] { font-size: 13px; }
.invoice-topbar .lang-switch { background: rgba(0,0,0,.025); border-color: #d5d0c6; }
.invoice-topbar .lang-btn { color: #77736b; }
.invoice-topbar .lang-btn:hover { color: #171717; background: rgba(0,0,0,.05); }
.invoice-topbar .lang-btn.is-active { background: #171717; color: #f4f1ea; }

/* ---------- Arabic typography ---------- */
html.lang-ar body,
html.lang-ar button,
html.lang-ar input,
html.lang-ar select,
html.lang-ar textarea {
  font-family: "Cairo", var(--font-body);
}
html.lang-ar h1,
html.lang-ar h2,
html.lang-ar h3,
html.lang-ar h4,
html.lang-ar h5,
html.lang-ar h6,
html.lang-ar .display,
html.lang-ar .brand-name,
html.lang-ar .pc-price .amt,
html.lang-ar .plan-lg .lg-price .amt,
html.lang-ar .inv-logo,
html.lang-ar .inv-status h1 {
  font-family: "Cairo", var(--font-display);
  letter-spacing: 0;
}
html.lang-ar .hero h1 { font-size: clamp(2.7rem, 5.2vw, 4.8rem); line-height: 1.24; }
html.lang-ar .hero h1 .line { display: inline; }
html.lang-ar .hero h1 .line::after { content: " "; }
html.lang-ar .sec-head h2 { line-height: 1.3; font-size: clamp(2rem, 3.6vw, 3.2rem); }
html.lang-ar .page-hero h1 { line-height: 1.22; font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
html.lang-ar .cta-panel h2 { line-height: 1.25; }
html.lang-ar .app-copy h2 { line-height: 1.25; }
html.lang-ar .plan-card h3, html.lang-ar .plan-lg h2 { line-height: 1.25; }
html.lang-ar .quote-card blockquote { line-height: 1.7; font-size: 16px; }
html.lang-ar .faq-q { line-height: 1.5; }
html.lang-ar .eyebrow,
html.lang-ar .mono,
html.lang-ar .tag,
html.lang-ar .pill,
html.lang-ar .sc-index,
html.lang-ar .ps-num,
html.lang-ar .footer-col h4,
html.lang-ar .footer-bottom,
html.lang-ar .pay-mini,
html.lang-ar .tech-chip,
html.lang-ar .dash-stat span,
html.lang-ar .dash-side-card h3,
html.lang-ar .review-block-head h4,
html.lang-ar .case-kicker,
html.lang-ar .breadcrumb {
  font-family: "Cairo", var(--font-mono);
  letter-spacing: 0;
}
html.lang-ar .eyebrow { font-weight: 600; }
html.lang-ar .eyebrow .num { font-family: "Cairo"; }
html.lang-ar .brand-name { letter-spacing: .14em; font-family: var(--font-display); }
html.lang-ar .brand-sup { font-family: "Cairo"; letter-spacing: 0; }
html.lang-ar .logo-mark, html.lang-ar .avatar { font-family: "Cairo"; }
html.lang-ar .btn { font-family: "Cairo"; font-weight: 600; }
html.lang-ar .field-hint, html.lang-ar .label { line-height: 1.6; }
html.lang-ar .footer-bottom { font-size: 9.5px; }
html.lang-ar .marquee .logo-item span { font-family: var(--font-display); }
html.lang-ar .marquee { direction: ltr; }

/* ---------- RTL layout ---------- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .hero-copy, html[dir="rtl"] .page-hero, html[dir="rtl"] .sec-head,
html[dir="rtl"] .service-card, html[dir="rtl"] .plan-card, html[dir="rtl"] .plan-lg,
html[dir="rtl"] .quote-card, html[dir="rtl"] .guarantee, html[dir="rtl"] .faq-q,
html[dir="rtl"] .case-head, html[dir="rtl"] .case-body, html[dir="rtl"] .cta-panel { text-align: right; }
html[dir="rtl"] .project-info { text-align: right; }
html[dir="rtl"] .hero-visual,
html[dir="rtl"] .browser-card,
html[dir="rtl"] .project-media,
html[dir="rtl"] .project-frame,
html[dir="rtl"] .frame,
html[dir="rtl"] .mock,
html[dir="rtl"] .app-phones,
html[dir="rtl"] .phone,
html[dir="rtl"] .app-ui,
html[dir="rtl"] .project-frame--app,
html[dir="rtl"] .case-media,
html[dir="rtl"] .style-swatches,
html[dir="rtl"] .payments-row,
html[dir="rtl"] .marquee,
html[dir="rtl"] .logo-item,
html[dir="rtl"] .lang-switch { direction: ltr; }
html[dir="rtl"] .project-media, html[dir="rtl"] .case-media, html[dir="rtl"] .hero-visual { text-align: left; }
html[dir="rtl"] .app-breadcrumb {
  border-left: 0;
  border-right: 1px solid var(--line);
  padding-left: 0;
  padding-right: 20px;
}
html[dir="rtl"] .wizard-head .wh-right { right: auto; left: 34px; }
html[dir="rtl"] .case-close { float: left; margin-left: 14px; margin-right: 0; }
html[dir="rtl"] .step-rail-item:not(:last-child)::before { left: auto; right: 11.5px; }
html[dir="rtl"] .radio-tile { text-align: right; }
html[dir="rtl"] .radio-tile .rt-dot { right: auto; left: 11px; }
html[dir="rtl"] .input-group > .icon,
html[dir="rtl"] .input-group > [data-icon] { left: auto; right: 14px; }
html[dir="rtl"] .input-group .input { padding-left: 50px; padding-right: 40px; text-align: right; }
html[dir="rtl"] .input-group .input-action { right: auto; left: 7px; }
html[dir="rtl"] .select {
  padding-right: 14px;
  padding-left: 38px;
  background-position: left 14px center;
}
html[dir="rtl"] .upload-box .ub-icon { order: 0; }
html[dir="rtl"] .addon-qty { direction: ltr; }
html[dir="rtl"] .checkout-submit-row, html[dir="rtl"] .summary-total,
html[dir="rtl"] .se-total, html[dir="rtl"] .inv-total-row,
html[dir="rtl"] .review-total { direction: rtl; }
html[dir="rtl"] .pc-price, html[dir="rtl"] .lg-price, html[dir="rtl"] .sp-price,
html[dir="rtl"] .price, html[dir="rtl"] .hero-price .hp-num,
html[dir="rtl"] .summary-total strong, html[dir="rtl"] .se-total strong,
html[dir="rtl"] .review-total .rt-val, html[dir="rtl"] .order-amount,
html[dir="rtl"] .inv-total-row b, html[dir="rtl"] .stat .s-val {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .pc-price, html[dir="rtl"] .lg-price, html[dir="rtl"] .sp-price,
html[dir="rtl"] .hero-price .hp-num, html[dir="rtl"] .stat .s-val { justify-content: flex-end; }
html[dir="rtl"] .summary-line b, html[dir="rtl"] .se-line b, html[dir="rtl"] .pay-mini,
html[dir="rtl"] .tech-chip, html[dir="rtl"] .frame-url, html[dir="rtl"] .inv-num {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .review-block-head, html[dir="rtl"] .case-kicker,
html[dir="rtl"] .dash-section-head, html[dir="rtl"] .side-plan-head,
html[dir="rtl"] .payment-head { direction: rtl; }
html[dir="rtl"] .inv-status { text-align: left; }
html[dir="rtl"] .inv-table th { text-align: right; }
html[dir="rtl"] .inv-table th:last-child, html[dir="rtl"] .inv-table td:last-child { text-align: left; }
html[dir="rtl"] .inv-totals { justify-content: flex-start; }
html[dir="rtl"] .inv-totals-inner { margin-left: 0; }
html[dir="rtl"] .inv-paid, html[dir="rtl"] .inv-sandbox, html[dir="rtl"] .inv-next span { direction: rtl; }
html[dir="rtl"] .inv-notes .inv-next i { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .invoice-topbar .inv-actions { margin-left: 0; }
html[dir="rtl"] .toast { direction: rtl; text-align: right; }
html[dir="rtl"] .toast .t-icon { order: 0; }
html[dir="rtl"] .modal-head { direction: rtl; }
html[dir="rtl"] .oauth-account { direction: rtl; }
html[dir="rtl"] .auth-tabs, html[dir="rtl"] .social-btns { direction: rtl; }
html[dir="rtl"] .brand { direction: ltr; }
html[dir="rtl"] .brand-sup { margin-top: 1px; }
html[dir="rtl"] .footer-col, html[dir="rtl"] .footer-brand { text-align: right; }
html[dir="rtl"] .filter-group { direction: rtl; }
html[dir="rtl"] .work-count { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .plan-help-card .ph-row,
html[dir="rtl"] .addon-row-mini { direction: rtl; }
html[dir="rtl"] .case-quote, html[dir="rtl"] .case-section { text-align: right; }
html[dir="rtl"] .summary-plan, html[dir="rtl"] .pay-method, html[dir="rtl"] .billing-strip,
html[dir="rtl"] .order-card, html[dir="rtl"] .draft-card { direction: rtl; }
html[dir="rtl"] .order-info, html[dir="rtl"] .draft-info { text-align: right; }
html[dir="rtl"] .summary-plan .sp-ic, html[dir="rtl"] .draft-ic, html[dir="rtl"] .draft-progress,
html[dir="rtl"] .order-amount, html[dir="rtl"] .draft-total { direction: ltr; }
html[dir="rtl"] .wizard-actions { direction: rtl; }
html[dir="rtl"] .app-header-right { flex-direction: row-reverse; }
html[dir="rtl"] .app-breadcrumb { direction: rtl; }
html[dir="rtl"] .nav-rock { direction: rtl; }
html[dir="rtl"] .footer-bottom, html[dir="rtl"] .dash-head, html[dir="rtl"] .dash-section-head { direction: rtl; }
html[dir="rtl"] .pay-overlay-card, html[dir="rtl"] .modal-card { text-align: right; }
html[dir="rtl"] .pay-overlay-card .secure-note { direction: rtl; }
html[dir="rtl"] .oauth-note, html[dir="rtl"] .demo-box, html[dir="rtl"] .auth-session { direction: rtl; }
html[dir="rtl"] .app-footer-mini { direction: rtl; }
html[dir="rtl"] .auth-visual { text-align: right; }
html[dir="rtl"] .auth-visual .av-bottom { direction: rtl; }
html[dir="rtl"] .av-estimate .ae-row, html[dir="rtl"] .av-estimate .ae-total { direction: rtl; }
html[dir="rtl"] .av-estimate .ae-row b, html[dir="rtl"] .av-estimate .ae-total strong { direction: ltr; }
html[dir="rtl"] .inv-head, html[dir="rtl"] .inv-meta, html[dir="rtl"] .inv-notes,
html[dir="rtl"] .inv-foot { direction: rtl; }
html[dir="rtl"] .invoice-barcode, html[dir="rtl"] .inv-reference { direction: ltr; text-align: left; }
html[dir="rtl"] .inv-reference { direction: ltr; }
html[dir="rtl"] .footer-brand .brand { justify-content: flex-end; }
html[dir="rtl"] .nav-links a.is-active::after { left: auto; right: 50%; transform: translateX(50%); }
html[dir="rtl"] .mobile-menu a.m-link span { direction: ltr; }
html[dir="rtl"] .case-results { direction: rtl; }
html[dir="rtl"] .review-row { direction: rtl; }
html[dir="rtl"] .review-row dt { text-align: right; }
html[dir="rtl"] .review-row dd { text-align: right; }
html[dir="rtl"] .field .label { direction: rtl; }
html[dir="rtl"] .field .label .opt { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .checkbox { direction: rtl; }
html[dir="rtl"] .checkbox input { margin-left: 0; }
html[dir="rtl"] .terms-box .checkbox { direction: rtl; }
html[dir="rtl"] .job-row { direction: rtl; }

/* directional icons */
html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] .icon-arrow-left,
html[dir="rtl"] .icon-arrow-up-right,
html[dir="rtl"] .icon-chevron-right {
  transform: scaleX(-1);
}

@media (max-width: 900px) {
  .lang-switch .lang-btn { min-width: 24px; padding: 0 5px; }
  .app-header .lang-switch { display: inline-flex; }
}
@media (max-width: 720px) {
  html.lang-ar .hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.4rem); }
  html.lang-ar .sec-head h2 { font-size: clamp(1.8rem, 7.2vw, 2.6rem); }
  .invoice-topbar .lang-switch { display: inline-flex; }
}

/* Keep money runs readable inside RTL layouts */
html[dir="rtl"] .it-amt,
html[dir="rtl"] .inv-total-row b,
html[dir="rtl"] .summary-line b,
html[dir="rtl"] .se-line b,
html[dir="rtl"] .sm-line b,
html[dir="rtl"] .sm-head b,
html[dir="rtl"] .draft-total,
html[dir="rtl"] .order-amount,
html[dir="rtl"] .hc-tier-top b,
html[dir="rtl"] .inv-recurring-row b,
html[dir="rtl"] .inv-recurring-total b {
  direction: ltr;
  unicode-bidi: isolate;
}