/* PillDrops landing — i18n picker + RTL adjustments.
 * Included on every page. Works alongside the existing per-page styles.
 */

/* ── Language picker ────────────────────────────────────────── */
.pd-lang-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--divider, #e5e2dd);
    border-radius: 100px;
    color: var(--text2, #52504c);
    font-size: 0.82rem;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease;
}
.pd-lang-wrap:hover { background: var(--surface-var, #f0ede8); }
.pd-lang-wrap svg { flex-shrink: 0; opacity: .65; }

.pd-lang-select {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    padding: 0 18px 0 2px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 10px;
    max-width: 140px;
}
.pd-lang-select:focus { outline: 2px solid var(--primary, #1a7a5e); outline-offset: 2px; border-radius: 4px; }

/* Mobile: compact the picker in the nav */
@media (max-width: 560px) {
    .pd-lang-wrap { padding: 5px 8px; font-size: .76rem; }
    .pd-lang-select { max-width: 110px; padding-right: 14px; }
}

/* ── Footer picker (full width, visually distinct) ───────── */
.pd-lang-footer { margin-top: 14px; display: flex; justify-content: center; }

/* ── RTL adjustments (Arabic, Urdu) ──────────────────────── */
html[dir="rtl"] {
    /* Flip logical margins/padding where they were written with left/right. */
}
html[dir="rtl"] body { direction: rtl; }

/* Flip arrow/direction SVGs in CTAs so they point inward, not outward */
html[dir="rtl"] .btn-p svg[viewBox="0 0 24 24"] line + polyline,
html[dir="rtl"] .btn-s svg[viewBox="0 0 24 24"] line + polyline,
html[dir="rtl"] .arrow svg,
html[dir="rtl"] .pbtn svg,
html[dir="rtl"] .cat-pill svg { transform: scaleX(-1); }

/* Common layout flips for nav + crumbs + footer */
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }
html[dir="rtl"] .crumb { direction: rtl; }
html[dir="rtl"] .crumb .sep { transform: scaleX(-1); display: inline-block; }
html[dir="rtl"] .footer-row { direction: rtl; }

/* Feature cards, pricing cards, FAQ summary — adjust icon-text ordering */
html[dir="rtl"] .care-bullets li { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .pcard li { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .pcard li svg { margin-top: 3px; }
html[dir="rtl"] .faq-item summary { flex-direction: row-reverse; }
html[dir="rtl"] .meta { direction: rtl; }
html[dir="rtl"] .author-pill { flex-direction: row-reverse; }

/* Competitor comparison table alignment */
html[dir="rtl"] .compete table th,
html[dir="rtl"] .compete table td { text-align: right; }
html[dir="rtl"] .compete table th[style*="text-align:right"],
html[dir="rtl"] .compete table td.ms,
html[dir="rtl"] .compete table td:last-child { text-align: left; }

/* Feature-card pro-tag and save-badge: flip margin side */
html[dir="rtl"] .pro-tag { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .save-badge { margin-left: 0; margin-right: 6px; }

/* Post/blog layout */
html[dir="rtl"] .post blockquote { border-left: 0; border-right: 3px solid var(--primary, #1a7a5e); padding-left: 0; padding-right: 16px; }
html[dir="rtl"] .callout { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .toc ol { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .shot-inline figcaption { direction: rtl; text-align: right; }

/* Fix: the hero eyebrow's icon + text ordering */
html[dir="rtl"] .badge { flex-direction: row-reverse; }
html[dir="rtl"] .eyebrow { flex-direction: row-reverse; }
html[dir="rtl"] .post-cta a.btn-p { flex-direction: row-reverse; }

/* Price card ::before badge (MOST POPULAR / FOR CAREGIVERS) is
   translateX(-50%) positioned — works identically in RTL. */

/* Typography tweaks: Arabic script renders slightly larger at the same
   font-size as Latin — nudge down proportionally to avoid overflow. */
html[lang="ar"] body {
    font-size: 0.97rem;
    line-height: 1.7;
}
html[lang="ar"] .hero h1 {
    letter-spacing: 0;
    line-height: 1.2;
}

/* Japanese line-height nudge for CJK */
html[lang="ja"] body { line-height: 1.8; letter-spacing: 0.01em; }

/* ── "Translate disclaimer" banner (shown when a page's prose isn't
       fully translated yet and we fall back to English) ─────────── */
.pd-translate-note {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 10px 16px;
    background: var(--gold-light, #fff5e1);
    color: var(--gold, #cb8a2e);
    border-radius: 10px;
    font-size: .82rem;
    text-align: center;
}