/* mienaq additional styles — Tailwind handles most of the work */

:root { color-scheme: dark; }

html { scroll-behavior: smooth; }

body {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  /* respect notch / safe-area on iOS / Android */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ====== Language switcher (combobox) ====== */
#lang-combobox { display: flex; }
.lang-trigger { white-space: nowrap; }
.lang-popover {
  inset-inline-end: 0;
  margin-inline-end: max(0px, env(safe-area-inset-right));
}

/* old toggle (kept for backward-compat) */
.lang-btn[aria-pressed="true"] {
  background: rgba(124, 92, 255, 0.85);
  color: #fff;
  font-weight: 700;
}

/* Use-case tab */
.uc-tab {
  color: rgba(255, 255, 255, 0.6);
  transition: all .2s ease;
  min-height: 44px;
}
.uc-tab[aria-selected="true"] {
  background: rgba(124, 92, 255, 0.85);
  color: #fff;
  font-weight: 700;
}
.uc-tab:hover { color: #fff; }

/* FAQ accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary .chev { transition: transform .2s ease; }
details[open] > summary .chev { transform: rotate(180deg); }

/* subtle fade-in */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* card hover */
.card { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.card:hover { transform: translateY(-2px); border-color: rgba(124,92,255,0.45); }

/* Focus ring */
:focus-visible { outline: 2px solid #9b86ff; outline-offset: 2px; border-radius: 6px; }

/* Step bullets — logical inline-start so RTL flips automatically */
.step-bullet {
  position: absolute;
  inset-inline-start: -18px;
  top: 0;
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: rgba(124, 92, 255, 0.18);
  border: 1px solid rgba(124, 92, 255, 0.45);
  color: #bcaaff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
}

/* RTL adjustments */
html[dir="rtl"] .step-list,
html[dir="rtl"] ol[id$="-list"] {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 0; margin-right: 1rem;
  padding-left: 0; padding-right: 2rem;
}
html[dir="rtl"] .lang-popover { transform: translateX(0); }
html[dir="rtl"] svg.flip-rtl { transform: scaleX(-1); }
html[dir="rtl"] body { font-feature-settings: normal; }

/* keep min-width safe down to 320px */
@media (max-width: 360px) {
  header .max-w-7xl { padding-left: 12px; padding-right: 12px; gap: 4px; }
  .lang-trigger { padding-left: 10px; padding-right: 10px; }
  .lang-current { max-width: 6.5rem; }
}

/* hide flat lang buttons (legacy) when combobox is present */
#lang-combobox + .lang-buttons-legacy { display: none; }