/**
 * Kaan i18n — RTL/LTR, fonts, language dropdown, transitions
 */

/* —— Font switching by language —— */
html[lang="en"] {
  --font-display: "Atyp Text TRIAL", system-ui, sans-serif;
  --font-body: "Atyp Text TRIAL", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", sans-serif;
  --font-body: "IBM Plex Sans Arabic", sans-serif;
}

/* Layout stays LTR — only wording changes, never mirror the page */
html,
html[lang="ar"],
html[lang="en"],
body {
  direction: ltr !important;
}

html[lang="ar"] body {
  font-family: var(--font-body);
}

/*
 * Arabic script is RTL by nature; without this, headings like how.card1_title
 * visually jump to the right even when the page layout is LTR.
 */
[data-key],
[data-i18n-html],
.i18n-target,
.lang-dropdown__label,
.lang-dropdown__current {
  text-align: left;
  unicode-bidi: isolate;
}

/* How it works — feature cards (English / default LTR) */
.section--soft .feature-card {
  text-align: left;
}

.section--soft .feature-card h3,
.section--soft .feature-card p {
  text-align: left;
  width: 100%;
}


/*
 * Arabic: mirror "How Kaan Works" (.section--soft) only —
 * reversed card order, RTL text, images aligned to the right.
 */
html[lang="ar"] .section.section--soft,
html[lang="ar"] .section.section--soft .section__inner,
html[lang="ar"] .section.section--soft .how-grid {
  direction: rtl;
}

html[lang="ar"] .section.section--soft .feature-card {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .section.section--soft .feature-card h3,
html[lang="ar"] .section.section--soft .feature-card p,
html[lang="ar"] .section.section--soft .feature-card [data-key] {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

html[lang="ar"] .section.section--soft h2#how-title {
  direction: rtl;
  text-align: center;
  unicode-bidi: isolate;
}

/* CTA band — English: left-aligned title (never center) */
.cta-band .cta-band__title,
h2#cta-mid-title {
  text-align: left;
}

/*
 * Arabic: mirror .cta-band — swap title/aside, RTL copy, title not centered
 */
html[lang="ar"] .cta-band,
html[lang="ar"] .cta-band .cta-band__inner {
  direction: rtl;
}

html[lang="ar"] .cta-band h2#cta-mid-title,
html[lang="ar"] .cta-band .cta-band__title {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

html[lang="ar"] .cta-band .cta-band__aside {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .cta-band .cta-band__text,
html[lang="ar"] .cta-band .cta-band__btn,
html[lang="ar"] .cta-band .cta-band__btn [data-key] {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

/*
 * Arabic: mirror .quote-meta — person/stars flip, RTL names
 */
html[lang="ar"] .quote-meta {
  direction: rtl;
}

html[lang="ar"] .quote-meta__person {
  direction: rtl;
  flex-direction: row;
}

html[lang="ar"] .quote-meta .who,
html[lang="ar"] .quote-meta .who[data-key] {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

/* Hero */
.hero-copy,
.hero-copy h1,
.hero-copy p {
  text-align: left;
}

/*
 * Hero category cards — keep identical LTR layout in Arabic;
 * only data-key strings change (no RTL mirror or alignment flip).
 */
html[lang="ar"] .card-boxwrap,
html[lang="ar"] .card-boxwrap .hero-offer-card,
html[lang="ar"] .card-boxwrap .hero-offer-card__content,
html[lang="ar"] .card-boxwrap .hero-offer-card__title,
html[lang="ar"] .card-boxwrap .hero-offer-card__text,
html[lang="ar"] .card-boxwrap .hero-offer-card [data-key] {
  direction: ltr !important;
  text-align: left !important;
}

/* Why / diff-list — layout always LTR (column positions unchanged) */
.diff-list,
.diff-list__col,
.diff-list .diff-card {
  direction: ltr;
}

.diff-card__copy,
.diff-card__title,
.diff-card__copy p {
  text-align: left;
}

/*
 * Arabic: .diff-list — RTL text flow + right-aligned copy only (no grid/card mirror)
 */
html[lang="ar"] .diff-list,
html[lang="ar"] .diff-list__col,
html[lang="ar"] .diff-list .diff-card,
html[lang="ar"] .diff-list .diff-card__media {
  direction: ltr !important;
}

html[lang="ar"] .diff-list .diff-card__copy {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

html[lang="ar"] .diff-list .diff-card__title,
html[lang="ar"] .diff-list .diff-card__copy p,
html[lang="ar"] .diff-list .diff-card__copy [data-key] {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

/* Testimonials — layout LTR (intro, grid, slides unchanged) */
.testimonials__intro,
.testimonials-grid,
.testimonials-carousel-col,
.testimonials .slide {
  direction: ltr;
}

.testimonials__title,
.testimonials-lead,
.testimonials .slide .quote-title,
.testimonials .slide .quote-body {
  text-align: left;
}

/*
 * Arabic: .testimonials__intro + quote copy — RTL text, right align only
 */
html[lang="ar"] .testimonials__intro,
html[lang="ar"] .testimonials-grid,
html[lang="ar"] .testimonials-carousel-col,
html[lang="ar"] .testimonials .slide {
  direction: ltr !important;
}

html[lang="ar"] .testimonials__intro .testimonials__title,
html[lang="ar"] .testimonials__intro .testimonials-lead,
html[lang="ar"] .testimonials__intro [data-key] {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

html[lang="ar"] .testimonials .slide p.quote-title,
html[lang="ar"] .testimonials .slide p.quote-body,
html[lang="ar"] p.quote-title[data-key],
html[lang="ar"] p.quote-body[data-key] {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

/* CTA band aside */
.cta-band__aside,
.cta-band__text {
  text-align: left;
}

/* Arabic: form labels inside contact/join column */
html[lang="ar"] .contact-form-col label.contact-form__label,
html[lang="ar"] .contact-form-col .contact-form__label {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
  display: block;
  width: 100%;
}

/* Contact / forms */
.contact-hero__title,
.contact-hero__lead,
.contact-form__label,
.contact-card__title,
.contact-card__label,
.contact-card__value,
.contact-card__value--text {
  text-align: left;
}

/* Contact card — LTR layout (icon + row positions unchanged) */
.contact-card,
.contact-card__list,
.contact-card__row {
  direction: ltr;
}

/*
 * Arabic: .contact-card — RTL text + right alignment (contact.html + join.html)
 */
html[lang="ar"] .contact-card,
html[lang="ar"] .contact-card__list,
html[lang="ar"] .contact-card__row {
  direction: ltr !important;
}

html[lang="ar"] .contact-card__body {
  text-align: right;
}

html[lang="ar"] .contact-card__title[data-key],
html[lang="ar"] .contact-card__label[data-key],
html[lang="ar"] .contact-card__value--text[data-key] {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

html[lang="ar"] .contact-card__value-line {
  justify-content: flex-end;
}

html[lang="ar"] .contact-card__value {
  text-align: right;
}

/* Footer & nav text */
.footer-tagline,
.footer-links a,
.footer-col h3,
.nav-desktop .btn span,
.btn-join span {
  text-align: left;
}

/* Arabic: footer "Get the app" h3 — RTL text only (footer layout unchanged) */
html[lang="ar"] .footer-col h3[data-key="footer.get_app_heading"] {
  direction: rtl;
  text-align: right ;
  unicode-bidi: isolate;
}

/*
 * Arabic: .final-cta — RTL text, centered (index + privacy, layout unchanged)
 */
html[lang="ar"] .final-cta__title[data-key],
html[lang="ar"] .final-cta__lead[data-key],
html[lang="ar"] .final-cta__rating-text[data-key],
html[lang="ar"] .final-cta__btn [data-key] {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: center;
}

/* Keep intentionally centered blocks centered */
h2#why-title,
h2#how-title,
.section-title--how,
.section-title--why,
.final-cta__title,
.final-cta__lead,
.final-cta__rating,
.privacy-hero__title {
  text-align: center;
}

@media (max-width: 720px) {
  .cta-band__aside {
    text-align: center;
  }

  html[lang="ar"] .cta-band .cta-band__aside {
    align-items: center;
    text-align: center;
    width: 100%;
}

  html[lang="ar"] .cta-band h2#cta-mid-title,
  html[lang="ar"] .cta-band .cta-band__title {
    text-align: center !important;
  }
}

/* —— Smooth text transition on language change —— */
[data-key].i18n-fade,
.i18n-target.i18n-fade {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

html:not(.i18n-switching) [data-key],
html:not(.i18n-switching) .i18n-target {
  transition: opacity 0.2s ease;
}

/* —— RTL-only utility —— */
html[dir="rtl"] .rtl-only {
  display: revert;
}

html[dir="ltr"] .rtl-only {
  display: none !important;
}

html[dir="rtl"] .ltr-only {
  display: none !important;
}

html[dir="ltr"] .ltr-only {
  display: revert;
}

/* Icons stay same direction (LTR layout locked) */

/* ═══════════════════════════════════════════
   Language dropdown (.header-lang trigger)
   ═══════════════════════════════════════════ */

.lang-dropdown {
  position: relative;
  /* display: inline-flex; */
  flex-shrink: 0;
}

/* Trigger — user-facing .header-lang button (transparent, dark text) */
button.header-lang,
.header-lang.lang-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #181B25;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: auto;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

button.header-lang:hover,
.header-lang.lang-dropdown__trigger:hover {
  opacity: 0.85;
  background: transparent;
  border: none;
  box-shadow: none;
}

button.header-lang:focus-visible,
.header-lang.lang-dropdown__trigger:focus-visible {
  outline: 2px solid var(--color-primary, #046bd2);
  outline-offset: 3px;
  border-radius: 4px;
}

.lang-dropdown.is-open button.header-lang,
.lang-dropdown.is-open .header-lang.lang-dropdown__trigger {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 1;
}

.lang-dropdown__current {
  pointer-events: none;
  color: #181B25;
}

.lang-dropdown__chevron {
  color: #181B25;
}

.lang-dropdown__chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.65;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  pointer-events: none;
}

.lang-dropdown.is-open .lang-dropdown__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  inset-inline-start: auto;
  z-index: 300;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top end;
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.22s;
  pointer-events: none;
}

html[dir="rtl"] .lang-dropdown__menu {
  transform-origin: top start;
}

.lang-dropdown.is-open .lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lang-dropdown__menu[hidden] {
  display: block;
}

/* Language option buttons */
.lang-dropdown__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: #181b25;
  text-align: start;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lang-dropdown__option:hover {
  background: #f0f5fa;
}

.lang-dropdown__option:focus-visible {
  outline: 2px solid var(--color-primary, #046bd2);
  outline-offset: -2px;
}

.lang-dropdown__option.is-active {
  background: #e8f7ee;
  color: #104626;
}

.lang-dropdown__option.is-active:hover {
  background: #dff3e8;
}

.lang-dropdown__label {
  flex: 1;
  min-width: 0;
}

.lang-dropdown__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0;
  color: #27ae60;
  transition: opacity 0.15s ease;
}

.lang-dropdown__option.is-active .lang-dropdown__check {
  opacity: 1;
}

.lang-dropdown__check svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Mobile drawer: full-width dropdown */
.mobile-nav .lang-dropdown {
  width: 100%;
}

.mobile-nav button.header-lang,
.mobile-nav .header-lang.lang-dropdown__trigger {
  width: 100%;
  justify-content: space-between;
}

.mobile-nav .lang-dropdown__menu {
  position: static;
  inset: auto;
  width: 100%;
  margin-top: 6px;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

.mobile-nav .lang-dropdown:not(.is-open) .lang-dropdown__menu {
  display: none;
}

@media (max-width: 480px) {
  html[lang="ar"] .footer-col h3[data-key="footer.get_app_heading"] {
    text-align: left;
  }
  .lang-dropdown__menu {
    min-width: min(168px, calc(100vw - 48px));
  }
}

/* —— Join custom select (logical) —— */
.custom-select__field {
  padding-inline-end: 130px;
  padding-inline-start: 1.125rem;
}

.custom-select__button {
  inset-inline-end: 8px;
  inset-inline-start: auto;
}

html[dir="rtl"] .contact-form__select,
html[dir="rtl"] .custom-select__field {
  background-position: left 18px center;
}

html[dir="ltr"] .contact-form__select,
html[dir="ltr"] .custom-select__field {
  background-position: right 18px center;
}

/* Arabic: join category select + options — RTL, text on the right */
html[lang="ar"] select#business-category,
html[lang="ar"] select#business-category.custom-select__field {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate;
}

html[lang="ar"] select#business-category option {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .custom-select__button [data-key="join.category_select"] {
  direction: rtl;
  unicode-bidi: isolate;
}

/*
 * Arabic: .privacy-card — RTL text mirror only (card layout/position unchanged)
 */
html[lang="ar"] .privacy-card,
html[lang="ar"] .privacy-hero__inner {
  direction: ltr !important;
}

html[lang="ar"] .privacy-card .privacy-hero__title,
html[lang="ar"] .privacy-card .privacy-hero__title[data-key],
html[lang="ar"] .privacy-card .privacy-content,
html[lang="ar"] .privacy-card .privacy-content[data-key],
html[lang="ar"] .privacy-card .privacy-content h2,
html[lang="ar"] .privacy-card .privacy-content h3,
html[lang="ar"] .privacy-card .privacy-content p,
html[lang="ar"] .privacy-card .privacy-content ul,
html[lang="ar"] .privacy-card .privacy-content li,
html[lang="ar"] .privacy-card .privacy-content a {
  direction: rtl;
  text-align: right !important;
  unicode-bidi: isolate;
}

/* Privacy list bullets — aligned in LTR and RTL (see privacy.css) */

.optional-text {
  margin-inline-start: 4px;
}