/* Nueva Living -- RTL layer, loaded only on Arabic (dir="rtl") pages.
   ------------------------------------------------------------------
   Scope and approach: the base stylesheets (liora-pages.css,
   liora-property.css) already avoid hardcoded `text-align: left` almost
   everywhere, so paragraph and heading flow already follows the browser's
   native start-alignment under `dir="rtl"` with zero extra CSS. This file
   only overrides declarations that are explicitly physical (margin-left,
   padding-right, border-right, left:, right:, float, text-align: left/right,
   or a directional transform) on components that are genuinely
   directional -- not decorative artwork, logos, or photography, which stay
   unmirrored per the design brief. Rules are scoped under [dir="rtl"] and
   grouped by component so a reviewer can trace each override back to the
   LTR rule it corrects, rather than a blanket left/right find-replace.
   ------------------------------------------------------------------ */

/* ---------- Arabic typeface ----------
   Cairo is applied only to :lang(ar) text runs, so a mixed-language page
   (an Arabic sentence containing a Latin brand name or a property
   reference) keeps Montserrat/Cinzel for the Latin portion and Cairo for
   the Arabic portion, rather than forcing one face across a bidi string. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url(../fonts/arabic/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:lang(ar) {
  font-family: 'Cairo', 'Montserrat', Arial, sans-serif;
}

/* Cinzel first, Cairo second. Font fallback resolves per character, and
   Cairo's @font-face is unicode-range limited to Arabic, so Arabic text
   gets Cairo while Latin inside the same heading -- brand names, place
   names, "Costa del Sol" -- keeps the Cinzel it uses on every other
   locale. Listing Cairo first meant Latin dropped to the sans fallback
   and looked nothing like the rest of the site. */
[dir="rtl"] .display-title,
[dir="rtl"] .section-headline,
[dir="rtl"] .hero-title,
[dir="rtl"] h1:lang(ar),
[dir="rtl"] h2:lang(ar) {
  font-family: 'Cinzel', 'Cairo', Georgia, serif;
  letter-spacing: 0;
}

/* Numbers, prices, phone numbers, references and other LTR-internal
   tokens must not be visually reordered by the surrounding RTL run. */
[dir="rtl"] .timeline-payment-value,
[dir="rtl"] .availability-table td[data-label="السعر"],
[dir="rtl"] [data-label] strong,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  unicode-bidi: isolate;
}

/* Prices carry a trailing tax note -- "EUR890,000 + IVA" -- and the "+" is a
   neutral character, so an RTL paragraph reorders the two groups and paints
   it as "IVA + EUR890,000". Same cause as the phone numbers below: pin the
   value to LTR and let it sit right-aligned in the RTL column. */
[dir="rtl"] .unit-card-price,
[dir="rtl"] .availability-table td[data-label] strong,
[dir="rtl"] .availability-release-stats strong {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Phone numbers, emails and other Latin/numeric values shown as their own
   line. `isolate` alone is not enough for a spaced number: the digit runs
   are each left-to-right, but the spaces between them are neutral, so the
   RTL paragraph orders the GROUPS right-to-left and "+34 645 44 66 24"
   paints as "24 66 44 645 34+". Forcing the element itself to LTR keeps
   the value exactly as written while it still sits in the RTL layout. */
[dir="rtl"] .founder-contact strong,
[dir="rtl"] .founder-contact a,
[dir="rtl"] .contact-detail-value,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="https://wa.me/"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ---------- Navigation ---------- */
[dir="rtl"] .site-nav {
  direction: rtl;
}

[dir="rtl"] .nav-burger span {
  margin-inline: auto;
}

/* Language switcher panel opens toward the reading direction */
[dir="rtl"] .lang-switcher-panel {
  right: auto;
  left: 0;
  text-align: right;
}

/* ---------- Breadcrumb ---------- */
[dir="rtl"] .breadcrumb-list {
  direction: rtl;
}

[dir="rtl"] .breadcrumb-list li + li::before {
  transform: scaleX(-1);
}

/* ---------- Footer ---------- */
[dir="rtl"] .footer-grid {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .footer-bottom {
  text-align: right;
}

/* ---------- Hero facts / quick-facts panel (absolute-positioned box) ---------- */
[dir="rtl"] .project-hero .hero-facts,
[dir="rtl"] .quick-facts-panel {
  left: auto;
  right: 0;
  text-align: right;
}

/* ---------- Payment terms grid: the divider border sits on the
   trailing edge of each item in LTR (border-right), so in RTL the
   trailing edge is the left side. ---------- */
[dir="rtl"] .timeline-payment-item {
  border-right: 0;
  border-left: 1px solid var(--line);
  padding: 4px 0 4px clamp(20px, 3vw, 36px);
}

[dir="rtl"] .timeline-payment-item:last-child {
  padding-left: 0;
  border-left: 0;
}

[dir="rtl"] .timeline-payment-heading {
  direction: rtl;
}

/* ---------- Availability release stats + table ---------- */
[dir="rtl"] .availability-release-stats {
  direction: rtl;
}

[dir="rtl"] .availability-table {
  direction: rtl;
}

[dir="rtl"] .availability-table th,
[dir="rtl"] .availability-table td {
  text-align: right;
}

/* ---------- Timeline track (construction milestones) ----------
   The horizontal progress line reads start-to-end; in RTL that is
   right-to-left, so the whole track's visual order mirrors while each
   milestone icon (a symmetric mark, not an arrow) stays unmirrored. */
[dir="rtl"] .timeline-track {
  direction: rtl;
}

/* ---------- Media gallery cards + dialog ---------- */
[dir="rtl"] .project-media-grid {
  direction: rtl;
}

[dir="rtl"] .project-media-card-cta {
  direction: rtl;
}

[dir="rtl"] .media-note {
  margin: 0 auto 0 0;
}

/* Image galleries do not mirror. A row of photographs has no reading order,
   so flipping the controls for Arabic only produced a viewer whose "next"
   sat on the left pointing left -- the reverse of every other language for
   no gain. The dialog shell lays out left-to-right in every locale; only the
   caption inside it follows the page direction. */
[dir="rtl"] .project-media-dialog-shell {
  direction: ltr;
}

[dir="rtl"] .media-dialog-figure figcaption {
  direction: rtl;
  text-align: right;
}

/* Same for the card gallery: slide 1 is the leftmost slide everywhere, so a
   swipe means the same thing in every language and the dots read in the same
   order as the photos. The dot row still sits in the mirrored corner -- it is
   the order inside it that stays fixed. */
[dir="rtl"] .project-card-gallery-track,
[dir="rtl"] .project-card-gallery-dots {
  direction: ltr;
}

/* ---------- FAQ / accordion toggle icon space ---------- */
[dir="rtl"] .faq-item p {
  padding-right: 0;
  padding-left: 34px;
}

/* ---------- Project section nav (in-page chevron indicator) ---------- */
[dir="rtl"] .project-nav::before {
  right: auto;
  left: calc(var(--project-nav-edge) + 22px);
  transform: scaleX(-1);
}

/* ---------- Generic directional icons ----------
   Chevrons and arrows that indicate "next/forward" flip so they still
   point toward the reading direction's forward motion. Symmetric icons
   (search, close, play, pause, checkmarks, the brand monogram) are left
   alone -- only glyphs whose shape itself encodes a direction are mirrored. */
[dir="rtl"] .hero-discovery-link svg,
[dir="rtl"] .btn-arrow,
[dir="rtl"] .project-media-card-cta > span[aria-hidden="true"],
[dir="rtl"] .cta-chevron {
  transform: scaleX(-1);
}

/* ---------- Cinematic presentation chrome ----------
   Slide progress ("01 / 12"), guided/manual toggle, exit control and the
   project-details drawer all mirror as a unit; the underlying photography
   and video layers are never mirrored. */
[dir="rtl"] #vox {
  direction: rtl;
}

[dir="rtl"] .v-details-panel {
  right: auto;
  left: 0;
}

[dir="rtl"] .v-details-close {
  right: auto;
  left: 24px;
}

[dir="rtl"] .v-controls {
  direction: rtl;
}

/* Horizontal scene entrance motion is direction-aware: scenes advance
   toward the reading direction instead of always sliding leftward. */
[dir="rtl"] .v-scene-layer {
  --viewing-motion-sign: -1;
}

/* ---------- Forms ----------
   Text/email/tel inputs stay LTR-typed for addresses and numbers even
   inside an RTL form, per the bidi requirements; the fields themselves
   (label position, border radius, focus ring) mirror with the form. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  text-align: right;
}

[dir="rtl"] .form-field label,
[dir="rtl"] .form-field {
  text-align: right;
}

/* ---------- Reduced motion ----------
   Mirrored transforms above are static (a flipped icon), not animation;
   respecting prefers-reduced-motion for the site's existing animated
   elements is handled by the base stylesheets already and is unaffected
   by this file. */

/* Shortlist heart: mirror the burger-adjacent trigger's physical margins
   so it sits at the far (logical) end beside the burger in RTL too. */
[dir="rtl"] .nueva-shortlist-mobile-trigger {
  margin-left: 12px;
  margin-right: auto;
}

/* ---------- Small tracked-caps labels (nav tabs, kickers, table headers,
   availability chips, unit-card facts, etc.) ----------
   This whole family across the site shares one Latin-uppercase-small-caps
   treatment: 8-9.5px with ~0.2em letter-spacing, relying on
   text-transform:uppercase for the visual caps. Arabic has no case, so
   the transform does nothing useful, and the letter-spacing actively
   breaks the cursive joins Arabic letterforms need to read correctly --
   the combination makes this text read far smaller and harder to parse
   than the same declaration does in Latin. One shared floor fixes the
   whole family instead of patching ~100 individual rules one at a time;
   revisit here if a new kicker-style class is added elsewhere and reads
   too small under Arabic. */
[dir="rtl"] :is(
  .advisory-badge,
  .ai-search button[data-ai-search-submit],
  .area-explore,
  .area-price-item span,
  .area-price-sources a,
  .availability-chip,
  .availability-disclosure summary,
  .availability-filter-clear,
  .availability-filter-count,
  .availability-filter-label,
  .availability-floorplan-link,
  .availability-release-stats span,
  .availability-status,
  .availability-table td::before,
  .availability-table th,
  .breadcrumb-list a,
  .breadcrumb-list span,
  .btn,
  .calculator-bar-legend,
  .calculator-field span,
  .calculator-field-label,
  .calculator-rate-toggle button,
  .calculator-result span,
  .clear-filters,
  .developments-view-tab,
  .discovery-field > span,
  .discovery-mode,
  .discovery-note span,
  .discovery-sort span,
  .discovery-summary p,
  .distance span,
  .document-row a,
  .field label,
  .filter-pill,
  .fine-label,
  .footer-col a,
  .footer-col-title,
  .form-note,
  .founder-contact span,
  .founder-role,
  .guide-article-page .guide-checklist-reset,
  .guide-article-page .guide-compare-row .guide-compare-label,
  .guide-article-page .guide-overview-item span,
  .guide-article-page .guide-role span,
  .guide-article-page .guide-step-more summary,
  .guide-article-page .guide-tab,
  .guide-article-page .guide-toc-label,
  .guide-card-body .meta span,
  .hero-discovery-link,
  .hero-fact span,
  .hero-lead-toggle,
  .image-caption,
  .kicker,
  .label,
  .legal-nav a,
  .lifestyle-toggle-count,
  .lifestyle-toggle-label,
  .map-legend,
  .map-node text,
  .map-note,
  .map-project-label,
  .map-road-label,
  .media-dialog-close,
  .media-dialog-figure figcaption span,
  .media-dialog-stack-count,
  .media-fact span,
  .media-filter,
  .meta span,
  .metric span,
  .mobile-menu a,
  .nav-links a,
  .project-eyebrow,
  .project-link,
  .project-media-caption small,
  .project-media-card-cta,
  .project-media-film figcaption span,
  .project-media-film-play,
  .project-nav a,
  .project-tags span,
  .project-tour figcaption span,
  .project-tour-cta,
  .quick-fact span,
  .res-meta span,
  .section-kicker,
  .segment-related-list a,
  .selected-chip,
  .sticky-mobile-cta a,
  .testimonial-card footer,
  .timeline-label,
  .timeline-payment-kicker,
  .timeline-payment-label,
  .unit-card-cta,
  .unit-card-facts dt,
  .unit-card-plan-hint,
  .unit-size-part em,
  .viewing-insights span,
  .why-group-head h3
) {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}