/*
 * Indicatorul de focus, uniform pe tot site-ul.
 *
 * ── CONTEXT ─────────────────────────────────────────────────────────────────
 * Existau şapte reguli `outline: none`, inclusiv una globală pe
 * input/select/textarea. Pentru butoane şi linkuri asta însemna că la navigarea
 * cu Tab nu se vedea absolut nimic: nu ştiai pe ce element eşti, deci nu ştiai
 * ce se întâmplă când apeşi Enter.
 *
 * ── DE CE GRI/NEGRU, ŞI NU CULOAREA MĂRCII ──────────────────────────────────
 * `--brand` e #FF385C, iar `--error` e #C13515. Sunt amândouă roşii. Cât timp
 * focusul era roşu — şi aşa era, fiindcă `components.css` colora marginea
 * câmpului focusat cu `var(--brand)` — orice câmp în care intrai arăta ca un
 * câmp greşit sau necompletat. Într-un formular cu 14 câmpuri obligatorii,
 * distincţia asta contează: roşul trebuie să însemne un singur lucru.
 *
 * Aşa că focusul e neutru peste tot: contur gri închis, cu un halou discret.
 * Roşul rămâne exclusiv pentru erori (`.field-missing`), care au specificitate
 * mai mare şi câştigă când sunt amândouă active.
 *
 * ── DE CE NU ATINGE CÂMPURILE DE TEXT CU `outline` ──────────────────────────
 * Specificaţia cere ca `:focus-visible` să se potrivească MEREU pe elementele
 * care aşteaptă introducere de text (input text/number/date, textarea), oricum
 * ar fi primit focusul — logica fiind că, dacă ai cursorul într-un câmp, trebuie
 * să vezi unde scrii. Deci pe ele nu putem folosi `:focus-visible` ca „doar
 * tastatură". Le lăsăm stilul propriu al site-ului, doar îi schimbăm culoarea
 * din roşu în gri.
 *
 * ── DE CE `[tabindex]` A FOST RESTRÂNS ──────────────────────────────────────
 * Prima versiune folosea `[tabindex]`, care se potriveşte şi cu `tabindex="-1"`.
 * Acelea sunt elemente focusabile doar din cod, nu opriri de Tab — iar flatpickr
 * pune `tabindex="-1"` pe FIECARE zi din calendar. Rezultatul: un contur pe
 * fiecare zi pe care dădeai click. Acum acceptăm doar valori nenegative.
 */

:root {
    --focus-ring: #222222;                    /* gri închis, neutru */
    --focus-ring-soft: rgba(34, 34, 34, .16); /* halou */
    --focus-ring-on-dark: #ffffff;            /* pe fundal întunecat */
}

/* ─── Elemente unde `:focus-visible` e realmente condus de tastatură ───────── */
/*
 * ATENŢIE la `[tabindex="0"]`: e nevoie de `:not(input)`, altfel prinde câmpuri
 * de text. Concret, flatpickr creează un input vizibil („altInput") şi îi pune
 * `tabindex="0"`. Fără excludere, câmpul de dată primea în acelaşi timp
 * `outline` de aici ŞI `border-color` + `box-shadow` de mai jos — adică două
 * borduri suprapuse.
 *
 * Nu se pune `border-radius` aici. Prima versiune forţa `border-radius: 4px`,
 * ceea ce însemna că orice element cu altă rotunjire îşi schimba forma în
 * momentul focusării: câmpurile-pastilă (40px) deveneau aproape dreptunghiulare
 * la un simplu click. Conturul urmează oricum rotunjirea proprie a elementului.
 */
:where(
    a,
    button,
    summary,
    [role="button"],
    [tabindex="0"]:not(input):not(textarea):not(select),
    select,
    input[type="checkbox"],
    input[type="radio"],
    input[type="file"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
):focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 2px !important;
}

/* Pe fundal închis conturul gri s-ar pierde în buton. */
.btn-brand:focus-visible,
.btn-black:focus-visible,
.hero-btn-primary:focus-visible,
.map-popup-btn:focus-visible,
.acx-btn:focus-visible {
    outline-color: var(--focus-ring-on-dark) !important;
    box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

/* ─── Câmpurile de formular ────────────────────────────────────────────────── */
/* Acelaşi limbaj vizual ca înainte (margine + halou), dar neutru în loc de roşu.
   Nu punem `outline`, ca să nu apară un contur la fiecare click în câmp. */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.settings-input:focus,
.pill-input:focus,
.input-flush:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

/* Când câmpul e marcat ca lipsă, roşul de eroare trebuie să câştige. */
.form-group.field-missing .form-input:focus,
.form-group.field-missing .form-select:focus,
.form-group.field-missing .form-textarea:focus,
.form-group.field-missing input:focus,
.form-group.field-missing textarea:focus {
    border-color: var(--error, #C13515);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #C13515) 18%, transparent);
}

/* ─── Dropdown-urile custom ───────────────────────────────────────────────── */
/*
 * Sunt `<div>`-uri care înlocuiesc un `<select>`, deci nu au focus nativ. Fără
 * indicator nu se vede pe ce câmp eşti la navigarea cu Tab, iar oraşul e
 * obligatoriu — fără el formularul nu se poate completa fără mouse.
 *
 * Primesc EXACT acelaşi tratament ca un câmp obişnuit: margine colorată plus
 * halou, nu contur. Înainte aveau doar contur, iar câmpurile doar umbră — deci
 * două câmpuri alăturate din acelaşi formular arătau diferit când le focusai,
 * ceea ce le făcea să pară elemente de tipuri diferite.
 */
.custom-dropdown-trigger-v2:focus-visible,
.custom-dropdown-trigger-v2.active {
    outline: none !important;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

/* Când câmpul e marcat lipsă, roşul de eroare câştigă şi aici. */
.form-group.field-missing .custom-dropdown-trigger-v2:focus-visible,
.form-group.field-missing .custom-dropdown-trigger-v2.active {
    border-color: var(--error, #C13515);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #C13515) 18%, transparent);
}

/* Opţiunea evidenţiată. Inelul apare doar la navigarea cu tastele: clasa `.kb`
   e pusă din JS la prima apăsare de tastă şi scoasă la prima mişcare de mouse. */
.custom-dropdown-item-v2.is-active {
    background: var(--gray-bg, #f7f7f7);
}
.custom-dropdown-overlay-v2.kb .custom-dropdown-item-v2.is-active {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: -2px !important;
}

/* ─── Calendarul (flatpickr) ───────────────────────────────────────────────── */
/*
 * Input-ul vizibil al calendarului e generat de flatpickr, care îi copiază
 * clasele noastre şi adaugă `form-control input` (valoarea implicită a
 * `altInputClass`). Îl tratăm ca pe orice alt câmp: fără contur, doar margine şi
 * halou, şi cu rotunjirea lui de pastilă păstrată.
 */
input.flatpickr-input,
input.form-control.input {
    outline: none !important;
}
input.form-control.input:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

/* Zilele au `tabindex="-1"`, deci nu sunt opriri de Tab şi nu trebuie să arate
   contur la click. Regula generală nu le mai prinde; o spunem şi explicit,
   fiindcă flatpickr vine cu propriile stiluri de focus. */
.flatpickr-day:focus,
.flatpickr-day:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* La navigarea cu tastele flatpickr mută clasa `.flatpickr-day` focusată prin
   atributul de selecţie, deci acolo păstrăm un indicator discret. */
.flatpickr-calendar.hasTime .flatpickr-time input:focus,
.flatpickr-monthDropdown-months:focus-visible,
.numInput:focus-visible {
    outline: 2px solid var(--focus-ring) !important;
    outline-offset: 1px !important;
}

/* ─── Link de sărire peste navigaţie ──────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10000;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--black, #222);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-to-content:focus {
    top: 12px;
}

/* ─── Caseta de scris din chat ─────────────────────────────────────────────
   Inputul e „gol": fără margine, fără fundal, aşezat într-un container rotunjit
   care arată el focusul, prin `:focus-within`. Regula generală de mai sus îi
   punea totuşi margine şi halou — ieşea un dreptunghi gri cu colţuri drepte,
   desenat în interiorul casetei rotunjite. Două inele de focus, unul peste
   celălalt, dintre care unul cu forma greşită. */
.messages-input-wrapper input:focus,
.messages-input-wrapper textarea:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}