/* ==========================================================================
   Peak Prime Health — Arabic RTL Stylesheet
   Integrates luxury Tajawal typography, right-to-left layout flows,
   and visual balancing across all components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

html[dir="rtl"],
body[dir="rtl"] {
  direction: rtl;
  text-align: right;
  --font-display: "Tajawal", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;
  --font-body:    "Tajawal", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;
  --font-heading: "Tajawal", "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;
}

/* Typography refinement for Arabic */
html[dir="rtl"] body {
  font-family: var(--font-body);
  letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .cat-title,
html[dir="rtl"] .card-title {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

html[dir="rtl"] .kicker {
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */
html[dir="rtl"] .brand,
html[dir="rtl"] .footer-brand {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left;
  display: inline-flex;
  align-items: center;
}

html[dir="rtl"] .brand-name {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-family: var(--font-display) !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}

html[dir="rtl"] .brand-sub {
  margin-left: 8px !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  padding-right: 0 !important;
  border-left: 1px solid var(--line-strong) !important;
  border-right: none !important;
  letter-spacing: 0.12em !important;
}

/* Constrain hero media so it is never stretched or overly tall */
html[dir="rtl"] .hero-media-wrap {
  max-height: 380px !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg);
}

html[dir="rtl"] .hero-media-wrap img,
html[dir="rtl"] .hero-photo {
  max-height: 380px !important;
  width: 100% !important;
  object-fit: cover !important;
}

html[dir="rtl"] .nav {
  margin-left: 0;
  margin-right: 0;
  flex: 1;
}

html[dir="rtl"] .nav .nav-services-wrap {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .nav .region-select-wrap {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 860px) {
  html[dir="rtl"] .nav {
    flex: none;
    margin-right: 0;
  }
  html[dir="rtl"] .nav .nav-services-wrap {
    margin-right: 0;
  }
  html[dir="rtl"] .nav .region-select-wrap {
    margin-right: 0;
  }
}

html[dir="rtl"] .nav-toggle {
  margin-left: 0;
  margin-right: auto;
}

/* Language Toggle styling */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px !important;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong) !important;
  background: var(--paper);
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  transition: all .16s ease;
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--cream) !important;
  border-color: var(--gold) !important;
  color: var(--gold-deep) !important;
  text-decoration: none !important;
}

/* Region Toggle styling (RTL) */
html[dir="rtl"] .region-dropdown-menu {
  right: auto;
  left: 0;
}
html[dir="rtl"] .region-option {
  text-align: right;
}

/* Services Dropdown styling (RTL) */
html[dir="rtl"] .nav-services-dropdown {
  left: auto;
  right: 0;
}
html[dir="rtl"] .nav-service-item {
  text-align: right;
}
html[dir="rtl"] .nav-service-item:hover {
  padding-left: 14px !important;
  padding-right: 17px !important;
}

/* --------------------------------------------------------------------------
   Cards, Grids & Lists
   -------------------------------------------------------------------------- */
html[dir="rtl"] .card-lg ul.small,
html[dir="rtl"] .cat-highlights {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .cat-highlights li {
  padding-left: 0;
  padding-right: 4px;
}

html[dir="rtl"] .card.med .med-price {
  direction: ltr;
  text-align: right;
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

html[dir="rtl"] .ph-flag {
  left: auto;
  right: 12px;
}

/* Form choices & checkmarks */
html[dir="rtl"] .choices,
html[dir="rtl"] .choice {
  text-align: right;
}

html[dir="rtl"] .choice input[type="radio"],
html[dir="rtl"] .choice input[type="checkbox"] {
  margin-left: 8px;
  margin-right: 0;
}

html[dir="rtl"] .trust-inner {
  justify-content: space-around;
}

html[dir="rtl"] .footer-brand svg {
  margin-left: 8px;
  margin-right: 0;
}

/* Notice box & doctor bio */
html[dir="rtl"] .notice {
  text-align: right;
}

html[dir="rtl"] .dr-card-meta {
  border-left: none;
  border-right: 2px solid var(--line-gold);
  padding-left: 0;
  padding-right: 12px;
}

/* Interactive elements */
html[dir="rtl"] .rx-disclaimer svg {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .wl-protocol-btn {
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   Longevity & Biomarker RTL Styles
   -------------------------------------------------------------------------- */
html[dir="rtl"] .longevity-hero-copy,
html[dir="rtl"] .longevity-stat-item,
html[dir="rtl"] .bio-age-card,
html[dir="rtl"] .bio-age-header,
html[dir="rtl"] .biomarker-card,
html[dir="rtl"] .biomarker-card h4,
html[dir="rtl"] .nad-card,
html[dir="rtl"] .nad-card-left,
html[dir="rtl"] .nad-card-info,
html[dir="rtl"] .nad-science-intro,
html[dir="rtl"] .nad-benefit-box,
html[dir="rtl"] .nad-expanded-foot,
html[dir="rtl"] .pricing-tier-card,
html[dir="rtl"] .tier-features li {
  text-align: right;
}

html[dir="rtl"] .longevity-compare-table th:first-child,
html[dir="rtl"] .longevity-compare-table td:first-child,
html[dir="rtl"] .comp-feature {
  text-align: right !important;
}

html[dir="rtl"] .pricing-tier-card .tier-price-wrap {
  justify-content: flex-start;
}

html[dir="rtl"] .pricing-badge {
  left: 28px;
  right: auto;
}

/* --------------------------------------------------------------------------
   Sexual Health Treatment Selectors RTL
   -------------------------------------------------------------------------- */
html[dir="rtl"] .rx-section,
html[dir="rtl"] .rx-price-meta {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Cart & Checkout RTL
   -------------------------------------------------------------------------- */
html[dir="rtl"] .flow-steps {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .commerce {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .summary-rail,
html[dir="rtl"] .summary,
html[dir="rtl"] .line-item,
html[dir="rtl"] .opt-card {
  text-align: right;
}

html[dir="rtl"] .qty output {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Account Portal RTL Styles
   -------------------------------------------------------------------------- */
html[dir="rtl"] .account-nav {
  border-right: none;
  border-left: 1px solid var(--line);
  text-align: right;
}

html[dir="rtl"] .account-main,
html[dir="rtl"] .account-panel {
  text-align: right;
}

html[dir="rtl"] .account-nav a {
  text-align: right;
}

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

html[dir="rtl"] #patient-msg-input {
  text-align: right;
}

@media (max-width: 820px) {
  html[dir="rtl"] .nav {
    left: auto;
    right: 0;
    text-align: right;
  }

  html[dir="rtl"] .account-nav {
    border-left: none;
    border-bottom: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   Legal & Telemedicine Consent RTL Styles
   -------------------------------------------------------------------------- */
html[dir="rtl"] .toc {
  text-align: right;
}

html[dir="rtl"] .toc ul {
  padding: 0;
}

html[dir="rtl"] .prose {
  text-align: right;
}

html[dir="rtl"] .prose ul,
html[dir="rtl"] .prose ol {
  padding-left: 0;
  padding-right: 22px;
}

@media (max-width: 820px) {
  .legal-layout {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Assessment Stage & Form RTL Styles
   -------------------------------------------------------------------------- */
html[dir="rtl"] .cat-card {
  text-align: right;
}

html[dir="rtl"] .cat-desc,
html[dir="rtl"] .cat-title,
html[dir="rtl"] .cat-price {
  text-align: right;
}

html[dir="rtl"] .cat-highlights {
  text-align: right;
}

html[dir="rtl"] .cat-highlights li {
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
}

html[dir="rtl"] .cat-highlights li::before {
  left: auto;
  right: 2px;
}

html[dir="rtl"] .assess-category-bar,
html[dir="rtl"] .assess-cat-info {
  text-align: right;
}

html[dir="rtl"] .assessment-shell,
html[dir="rtl"] .safety-panel,
html[dir="rtl"] .pillar-questions,
html[dir="rtl"] .q,
html[dir="rtl"] .field {
  text-align: right;
}

html[dir="rtl"] .choice {
  text-align: right;
  justify-content: flex-start;
}

html[dir="rtl"] .choice span {
  text-align: right;
}

html[dir="rtl"] .opt {
  text-align: right;
}

html[dir="rtl"] .bmi-live-box {
  text-align: right;
}

html[dir="rtl"] .result-card {
  text-align: right;
}

html[dir="rtl"] .option-row {
  text-align: right;
}

html[dir="rtl"] .option-main {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Booking Calendar & Checkout Map RTL
   -------------------------------------------------------------------------- */
html[dir="rtl"] .booking {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .cal-dow div {
  font-family: var(--font-body);
  font-size: 11px;
}

html[dir="rtl"] .cal-legend {
  justify-content: flex-start;
}

html[dir="rtl"] .map-overlay-hint {
  text-align: center;
}

html[dir="rtl"] .map-action-bar {
  flex-direction: row-reverse;
  justify-content: space-between;
}

html[dir="rtl"] .map-gps-status {
  text-align: right;
}

html[dir="rtl"] .pin-callout {
  text-align: center;
}

/* --------------------------------------------------------------------------
   FAQ & Contact RTL
   -------------------------------------------------------------------------- */
html[dir="rtl"] .faq-layout,
html[dir="rtl"] .contact-layout {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] #faq-search {
  text-align: right;
}

html[dir="rtl"] .faq summary {
  text-align: right;
}

html[dir="rtl"] .team-card,
html[dir="rtl"] .team-body {
  text-align: right;
}

html[dir="rtl"] .team-name {
  flex-direction: row;
}

html[dir="rtl"] #contact-form {
  text-align: right;
}

html[dir="rtl"] #contact-form .field label,
html[dir="rtl"] #contact-form .input,
html[dir="rtl"] #contact-form .select,
html[dir="rtl"] #contact-form .textarea {
  text-align: right;
}

html[dir="rtl"] .rx-features-list {
  text-align: right;
}

html[dir="rtl"] .rx-features-list li {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Hero Two-Column & Showcase (RTL)
   -------------------------------------------------------------------------- */
html[dir="rtl"] .hero-lead {
  text-align: right;
}

html[dir="rtl"] .hero-tile-top {
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-tile-arrow {
  transform: rotate(180deg);
}

html[dir="rtl"] .hero-card-tile:hover .hero-tile-arrow {
  transform: rotate(180deg) translate(-2px, -2px);
}

html[dir="rtl"] .hero-tile-info {
  text-align: right;
}

html[dir="rtl"] .hero-tile-img {
  align-self: flex-start;
}

html[dir="rtl"] .hero-tile-badge-graphic {
  justify-content: flex-start;
}

html[dir="rtl"] .hero-license-badge {
  letter-spacing: 0;
}

html[dir="rtl"] .float-dha-sub {
  letter-spacing: 0;
}

/* WhatsApp Float in RTL */
html[dir="rtl"] .whatsapp-float-tooltip {
  font-family: var(--font-body);
  letter-spacing: 0;
  direction: rtl;
  text-align: center;
}

/* How It Works 4-Card Tray in RTL */
html[dir="rtl"] .how-step-header {
  text-align: right;
}

html[dir="rtl"] .how-step-tag {
  letter-spacing: 0;
}