/* ---------------------------------------------------------------------------
   The public site, right to left.

   Loaded only when the page language is Kurdish, Arabic or Persian. The grid
   and flex layouts mirror themselves from dir="rtl" on <html>; this file fixes
   the things that do not — physical offsets written as left/right, borders on
   one side, arrows that point the wrong way, and the typography, because the
   display face has no Arabic letters and letter-spacing pulls a joined script
   apart.
--------------------------------------------------------------------------- */

/* --- typography ---------------------------------------------------------- */

:root {
    --serif: 'Vazirmatn', 'Noto Sans Arabic', Georgia, serif;
    --sans: 'Vazirmatn', 'Noto Sans Arabic', Arial, sans-serif;
}

/* Kurdish uses letters (ڕ ڵ ۆ ێ) that Vazirmatn does not carry, so Noto leads
   for that language and Vazirmatn only fills in behind it. */
html[lang="ckb"] {
    --serif: 'Noto Sans Arabic', 'Vazirmatn', Georgia, serif;
    --sans: 'Noto Sans Arabic', 'Vazirmatn', Arial, sans-serif;
}

/* Tracking separates letters that are meant to join, and italics are not a
   feature of the Arabic script — both are switched off, except on the Latin
   brand marks that keep their own styling. */
body :not(.logo-copy):not(.logo-copy *):not(.powered-credit):not(.powered-credit *) {
    letter-spacing: normal;
}

h1, h2, h3,
h1 em, h2 em,
.kicker, .section-label, .btn, .nav-cta, .text-link {
    font-style: normal;
}

/* Arabic-script letterforms sit taller, so the same leading reads tighter. */
p, li, .hero-intro, .story-note p, .service-item p, .visit-details span {
    line-height: 1.85;
}

h1, h2 { line-height: 1.35; }

/* --- header and hero ----------------------------------------------------- */

.hero-photo figcaption {
    left: auto;
    right: 36px;
    border-left: 0;
    border-right: 2px solid var(--gold);
    padding-left: 0;
    padding-right: 14px;
}

.photo-index {
    right: auto;
    left: 36px;
}

.hero-hours {
    left: auto;
    right: 0;
}

.live-dot {
    margin-right: 0;
    margin-left: 8px;
}

.scroll-progress { transform-origin: right; }

/* --- the arrows ---------------------------------------------------------- */

/* Decorative arrows are drawn pointing away from the text; in a right-to-left
   line "away" is the other way. The glyph is mirrored rather than swapped so
   only one arrow has to exist. */
.nav-cta span,
.text-link span,
.service-list article > a,
.map-card > a span,
.booking-form button[type="submit"] > span {
    margin-left: 0;
    margin-right: 8px;
    display: inline-block;
    transform: scaleX(-1);
}

/* Down arrows point down in every language. */
.text-link[href="#services"] span { transform: none; }

.mobile-rail-hint { direction: rtl; }

/* --- sections ------------------------------------------------------------ */

.values article + article {
    border-left: 0;
    border-right: 1px solid var(--line);
    padding-left: 0;
    padding-right: 32px;
}

.service-list article:hover { padding-left: 0; padding-right: 10px; }

.hydrofacial-visual figcaption {
    padding-left: 0;
    padding-right: 15px;
    border-left: 0;
    border-right: 2px solid var(--gold);
}

.hydrofacial-points span:nth-child(even) {
    padding-left: 0;
    padding-right: 18px;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, .14);
}

.portrait small {
    left: auto;
    right: 16px;
}

.map-card {
    left: auto;
    right: 28px;
}

/* --- the booking form ---------------------------------------------------- */

.booking-form select {
    padding-right: 14px;
    padding-left: 30px;
    background-position: left 12px center;
}

.input-shell input { padding-right: 14px !important; padding-left: 38px !important; }
.input-shell i { right: auto; left: 4px; }

.custom-select-trigger,
.custom-select-option { text-align: right; }

.booking-copy h2 { font-size: clamp(36px, 3.6vw, 56px); line-height: 1.5; }
.booking-form label > span { font-size: 12px; line-height: 1.8; }
.booking-form .custom-select-trigger small { font-size: 11px; line-height: 1.8; }
.booking-form .whatsapp-preview textarea { text-align: right; line-height: 1.9; unicode-bidi: plaintext; }

.slot-hint i {
    margin-left: 0;
    margin-right: 8px;
}

/* Times and phone numbers are read left to right in every one of these
   languages, so they are isolated from the surrounding right-to-left run. */
.time-slots button,
.booking-form input[name="phone"],
.visit-details a[href^="tel:"],
.booking-copy a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

.time-slots button { text-align: center; }
.time-slots button.localized-time { direction: rtl; }
.service-item .duration, .service-item > strong, .hydrofacial-offer strong { unicode-bidi: isolate; }

/* Flatpickr draws its own calendar grid; leaving it left to right keeps the
   weekday columns in the order the month names imply. */
.flatpickr-calendar { direction: ltr; }

/* --- toast and cursor ---------------------------------------------------- */

.toast {
    right: auto;
    left: 24px;
}

@media (max-width: 600px) {
    .toast { left: 14px; right: 14px; }
    .hero-photo figcaption { right: 20px; }
    .photo-index { left: 20px; }
    .map-card { right: 14px; left: 14px; }
    .portrait small { right: 10px; }
}

/* --- the honeypot -------------------------------------------------------- */

/* The spam trap is parked off the left edge, which is off-screen in a
   left-to-right page but scrollable space in a right-to-left one. */
.honeypot {
    left: auto !important;
    right: -10000px !important;
}