/* ═══════════════════════════════════════════════════════════════════════════
   i18n — Locale Selector Modal & RTL Support
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────────────────────── */
.i18n-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.35s, backdrop-filter 0.35s;
  padding: 20px;
}
.i18n-overlay--visible {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.i18n-card {
  background: #fff;
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  padding: 36px 28px 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  position: relative;
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s;
}
.i18n-overlay--visible .i18n-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.i18n-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #dadce0;
  background: #fff;
  color: #5f6368;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.i18n-close:hover {
  background: #f1f3f4;
  border-color: #bdc1c6;
}

.i18n-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.i18n-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #202124;
  text-align: center;
  margin: 0 0 6px;
}

.i18n-card__subtitle {
  font-size: 0.85rem;
  color: #5f6368;
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.i18n-card__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.i18n-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.i18n-field__select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
  color: #202124;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.i18n-field__select:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.i18n-field__select:hover {
  border-color: #bdc1c6;
}

/* ── Confirm Button ─────────────────────────────────────────────────────── */
.i18n-card__confirm {
  width: 100%;
  padding: 13px 20px;
  background: #1a73e8;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.i18n-card__confirm:hover {
  background: #1557b0;
  box-shadow: 0 4px 16px rgba(26, 115, 232, 0.3);
}
.i18n-card__confirm:active {
  transform: scale(0.98);
}

/* ── Locale Trigger (Navbar) ────────────────────────────────────────────── */
.locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #5f6368;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}
.locale-trigger:hover {
  border-color: #1a73e8;
  color: #1a73e8;
  background: rgba(26, 115, 232, 0.04);
}
.locale-trigger svg {
  flex-shrink: 0;
}
.locale-trigger__label {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* ── RTL Support ────────────────────────────────────────────────────────── */
html.rtl {
  direction: rtl;
}

/* Flip specific layout elements for RTL */
html.rtl .nav-links,
html.rtl .footer-grid {
  direction: rtl;
}

/* Flip icons that indicate direction */
html.rtl .panel-nav--next svg,
html.rtl .sticky-cta__btn svg {
  transform: scaleX(-1);
}

/* Flip select arrow for RTL */
html.rtl .i18n-field__select {
  background-position: left 14px center;
  padding-left: 36px;
  padding-right: 14px;
}

html.rtl .i18n-close {
  right: auto;
  left: 14px;
}

/* Fix text alignment for RTL in key sections */
html.rtl .service-panel__info,
html.rtl .abo-card__inner,
html.rtl .intake-form,
html.rtl .intake-sidebar {
  text-align: right;
}

html.rtl .flex.items-center.gap-3 {
  flex-direction: row-reverse;
}

/* Ensure form labels flip */
html.rtl .form-label {
  left: auto;
  right: 14px;
}

html.rtl .form-group--float .form-input:focus ~ .form-label,
html.rtl .form-group--float .form-input:not(:placeholder-shown) ~ .form-label {
  left: auto;
  right: 10px;
}

/* Footer RTL */
html.rtl .footer-top__right {
  align-items: flex-start !important;
}

/* Stats bar RTL */
html.rtl .stats-bar__value {
  direction: ltr; /* Keep numbers LTR */
}

/* Cookie banner RTL */
html.rtl .cookie-banner__inner {
  flex-direction: row-reverse;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .i18n-card {
    padding: 28px 20px 20px;
  }
  .locale-trigger__label {
    display: none;
  }
  .locale-trigger {
    padding: 6px 8px;
  }
}