/* ============================================================================
   BonTrip — Public site CSS
   Modern, responsive, category-color aware.
   Variables --category-color / --category-color-dark / --category-color-light
   sunt injectate inline din layout.php pe baza culorii categoriei.
   ============================================================================ */

/* -------- Reset + tokens -------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f5f9;
    --color-ink: #0f172a;
    --color-ink-soft: #334155;
    --color-muted: #64748b;
    --color-line: #e2e8f0;
    --color-line-soft: #f1f5f9;

    /* Layered "floating" shadows — dau senzatia de card care pluteste */
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .07);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, .1), 0 24px 48px rgba(15, 23, 42, .1);
    --shadow-xl: 0 20px 40px rgba(15, 23, 42, .14), 0 40px 80px rgba(15, 23, 42, .12);
    --shadow-float: 0 10px 20px rgba(15, 23, 42, .08), 0 20px 40px rgba(15, 23, 42, .1), 0 30px 60px rgba(15, 23, 42, .06);
    --shadow-float-lift: 0 16px 32px rgba(15, 23, 42, .12), 0 32px 64px rgba(15, 23, 42, .14), 0 48px 96px rgba(15, 23, 42, .1);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Fallback pentru --category-color (definit inline in <head>) */
    --category-color: #0ea5e9;
    --category-color-dark: #0284c7;
    --category-color-light: #0ea5e915;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--category-color); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--category-color-dark); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; color: var(--color-ink); font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* Cat ies pistele derulabile in afara containerului (`.home-categories-grid`,
   `.subcategories-grid`), ca sa incapa umbra cardurilor.
   TREBUIE sa fie exact cat paddingul containerului: pista se trage in afara cu
   atat si isi pune inapoi tot atat ca padding propriu, deci cardurile cad fix pe
   marginea continutului. Mai mult decat paddingul, si pista iese din ecran —
   exact asta se intampla sub 640px, unde containerul scade la 16px si pista
   ramasese la 24. */
:root { --track-bleed: 24px; }

/* -------- Prose (rich content) -------- */
.prose { color: var(--color-ink-soft); font-size: 1.0625rem; line-height: 1.75; }
.prose p { margin-bottom: 1.25em; }
.prose h2, .prose h3 { margin-top: 1.5em; color: var(--color-ink); }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 1.25em; }
.prose li { margin-bottom: .35em; }
.prose strong { color: var(--color-ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--category-color); padding: .25em 0 .25em 1em; margin: 1.5em 0; color: var(--color-ink-soft); font-style: italic; }

/* -------- Header -------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--color-line);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 54px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-ink);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -.01em;
}
.site-logo:hover { color: var(--category-color); }

.site-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--category-color), var(--category-color-dark));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px var(--category-color-light);
}

/* Cu sigla in loc de pictograma, patratul colorat n-are ce cauta: sigla isi
   poarta singura culoarea si are alt raport decat 1:1. */
.site-logo-icon--img {
    width: auto;
    height: 40px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.site-logo-icon--img img {
    display: block;
    height: 100%;
    width: auto;
}
/* Sigla contine deja numele — scris inca o data alaturi ar fi de doua ori */
.site-logo-icon--img + .site-logo-text { display: none; }

.site-header-right { display: flex; align-items: center; gap: 12px; }

/* -------- Language switcher -------- */
.lang-switcher { position: relative; }

.lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--ease);
}
.lang-switcher-btn:hover {
    border-color: var(--category-color);
    color: var(--category-color);
    background: var(--category-color-light);
}
.lang-switcher-btn .lang-caret {
    font-size: .7rem;
    transition: transform .2s var(--ease);
}
.lang-switcher.is-open .lang-switcher-btn .lang-caret { transform: rotate(180deg); }

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .2s var(--ease);
    z-index: 100;
}
.lang-switcher.is-open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s var(--ease);
}
.lang-switcher-item:hover { background: var(--color-surface-alt); }
.lang-switcher-item.is-active {
    background: var(--category-color-light);
    color: var(--category-color-dark);
    font-weight: 600;
}

.lang-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.lang-switcher-item.is-active .lang-code-badge {
    background: var(--category-color);
    color: #fff;
}

/* -------- Main -------- */
.site-main { min-height: 60vh; }

/* -------- Hero -------- */
.hero {
    position: relative;
    padding: 96px 0 80px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 400px at 90% -10%, var(--category-color-light), transparent 60%),
        radial-gradient(600px 300px at 0% 100%, rgba(255, 255, 255, .05), transparent 70%);
    pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-content { max-width: 760px; }

.hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw + 1rem, 4.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.hero-subtitle {
    font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem);
    color: rgba(255, 255, 255, .88);
    max-width: 620px;
    margin: 0 0 28px;
    line-height: 1.6;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hero-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.hero-home {
    padding: 120px 0 100px;
    text-align: center;
}
.hero-home .hero-content { margin: 0 auto; }
.hero-home .hero-subtitle { margin-left: auto; margin-right: auto; }

/* -------- Breadcrumb (in hero) -------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .875rem;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, .78);
}
.breadcrumb a {
    color: rgba(255, 255, 255, .78);
    transition: color .15s var(--ease);
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { opacity: .5; }
.breadcrumb-current {
    color: #fff;
    font-weight: 500;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------- Section base -------- */
.section {
    padding: 88px 0;
    background: var(--color-surface);
}
/* Sectiunile paginii de home isi aleg singure fundalul (sunt preluate din
   varianta statica: degradeuri, verde inchis), deci nu intra in alternanta.
   Fara exceptia asta ar castiga regula de aici, care e mai specifica. */
.section:nth-of-type(even):not([style*="background"]):not([class*="section-home-"]) {
    background: var(--color-bg);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw + .5rem, 2.75rem);
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -.015em;
}

.section-subtitle {
    color: var(--color-muted);
    font-size: 1.125rem;
    margin: 0;
    line-height: 1.6;
}

.section-desc { color: var(--color-muted); font-size: 1.0625rem; margin: 0; }

/* -------- Home category grid -------- */
.section-home-categories { background: var(--color-bg); }

/* Antetul acestei sectiuni pastreaza tipografia si culorile din varianta
   statica a site-ului (Manrope + paleta verde), nu pe cele ale site-ului
   public. Valorile sunt preluate ca atare din static/assets/css/main.css
   (.section-label, .gradient-text) si home.css (.discovery-heading). */
.section-home-categories .section-header,
.section-home-activities .section-header,
.section-home-events .section-header {
    max-width: 850px;
    margin-bottom: 65px;
}
.section-home-categories .section-eyebrow,
.section-home-activities .section-eyebrow,
.section-home-events .section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border-radius: 50px;
    background: rgba(115, 205, 8, .11);
    color: #00991a;
    font-family: 'Manrope', var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
}
.section-home-categories .section-title,
.section-home-activities .section-title,
.section-home-events .section-title {
    font-family: 'Manrope', var(--font-body);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -2.5px;
    color: #102218;
    margin: 22px 0 0;
}
/* Degradeul din varianta statica, decupat pe text. */
/* Accentul verde din titluri. Pe prima pagina e scris in sablon; pe paginile de
   categorie, regiune, zona si ghid e pus de PageToc peste numele locului sau al
   categoriei, oriunde apare intr-un h2 — de aceea regula sta aici, in foaia
   incarcata pe toate paginile, nu in cate una pe pagina. */
.section-home-categories .section-title-accent,
.section-home-activities .section-title-accent,
.section-home-events .section-title-accent,
.site-main .section-title-accent {
    background: linear-gradient(135deg, #73cd08, #00991a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.section-home-categories .section-desc,
.section-home-activities .section-desc,
.section-home-events .section-desc {
    max-width: 720px;
    margin: 24px auto 0;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 18px;
    line-height: 1.8;
}

/* Un singur rand derulabil, nu grila. Derularea e nativa (overflow-x +
   scroll-snap), deci pe touch merge prin swipe si fara JS; sagetile din
   org-carousel.js doar apar cand exista continut in afara ecranului.

   `overflow-x: auto` face si axa verticala sa taie, deci umbra cardurilor
   trebuie sa incapa in padding — vezi mai jos de ce e alta decat in grila.

   Paddingul lateral de 24px are doua sarcini: tine umbra ultimului card vizibil
   si il ascunde pe cel de dupa el, care incepe exact la marginea zonei
   derulabile. Cardurile ocupa fix latimea containerului, deci se vad patru. */
.home-categories-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 24px var(--track-bleed) 32px;
    margin: -24px calc(var(--track-bleed) * -1) 0;
    scroll-padding-inline: var(--track-bleed);
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Cat timp cardurile incap, stau centrate; cand nu, pornesc din stanga.
       `safe` evita capcana clasica: un container centrat care depaseste
       latimea porneste derulat la mijloc. */
    justify-content: safe center;

    /* Cardul ascuns incepe exact la marginea pistei, deci din umbra lui se vede
       cat se intinde lateral. Masca stinge cei 24px de padding pana la zero,
       asa ca ce cade acolo dispare. Cardurile incep de la 24px, deci raman
       neatinse. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--track-bleed), #000 calc(100% - var(--track-bleed)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--track-bleed), #000 calc(100% - var(--track-bleed)), transparent 100%);
}
.home-categories-grid::-webkit-scrollbar { display: none; }

/* 4 pe ecran pe desktop. Latimea e fixa prin flex-basis, deci cardurile nu se
   intind si nu intra in zona de padding, care e vizibila. */
.home-categories-grid > .home-category-card {
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .home-categories-grid > .home-category-card { flex-basis: calc((100% - 2 * 24px) / 3); }
}
@media (max-width: 860px) {
    .home-categories-grid > .home-category-card { flex-basis: calc((100% - 24px) / 2); }
}
/* Pe mobil se vede un singur card. La 100% cardul ocupa exact latimea zonei de
   continut, iar urmatorul incepe dupa gap-ul de 24px — adica fix la marginea
   din dreapta a pistei, deci nu se mai vede deloc. */
@media (max-width: 600px) {
    .home-categories-grid > .home-category-card { flex-basis: 100%; }
}

/* -------- Umbra cardurilor din carusel --------
   Cardul foloseste in mod normal umbrele din varianta statica: 35px difuzie in
   repaus, 70px la hover. Intr-o zona derulabila asa ceva nu are cum sa incapa —
   umbra e taiata la marginea containerului si se vede o dunga.

   Constrangerea e dubla: umbra ultimului card vizibil trebuie sa incapa in
   paddingul de 24px, iar cea a cardului urmator (care incepe exact la marginea
   pistei) se vede cu atat cat se intinde lateral. De aceea umbrele de aici sunt
   mult mai stranse — sub 20px in repaus si sub 40px la hover, unde oricum
   hover-ul se intampla doar pe carduri vizibile. Culoarea e aceeasi cu a
   umbrelor din varianta statica.

   Restul paginii, unde cardurile stau in grile obisnuite, pastreaza umbrele
   mari. */
.home-categories-grid > .home-category-card,
.subcategories-grid > .subcategory-card {
    box-shadow: 0 2px 4px rgba(16, 34, 24, .05), 0 4px 12px rgba(16, 34, 24, .05);
}
/* Doar umbra se schimba — ridicarea la hover ramane cea din varianta statica. */
.home-categories-grid > .home-category-card:hover,
.subcategories-grid > .subcategory-card:hover {
    box-shadow: 0 6px 16px rgba(16, 34, 24, .08), 0 12px 32px rgba(16, 34, 24, .07);
}

/* Sagetile stau sub lista, in dreapta — regulile de baza sunt in
   org-carousel.css. Marginea negativa le urca in spatiul rezervat umbrei, ca
   sa nu para rupte de lista; altfel ar sta la 32px + 18px sub carduri. */
.home-categories-carousel .carousel-controls,
.subcategories-carousel .carousel-controls {
    margin-top: -12px;
}

/* Cardurile de subcategorie sunt identice cu cele de categorie, deci impart
   aceleasi reguli.

   Forma, tipografia si umbrele vin din varianta statica (.discovery-card din
   static/assets/css/home.css). Acolo fiecare card avea un degrade fix, scris
   de mana pentru fiecare pozitie; aici degradeul se calculeaza din culoarea
   categoriei (--card-color), asa ca merge pentru orice categorie.

   Continutul e lipit de baza cardului (justify-content: flex-end), ca in
   varianta statica: cardurile dintr-un rand se intind la aceeasi inaltime, iar
   textele raman aliniate jos indiferent cat de lung e fiecare. */
.home-category-card,
.subcategory-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 250px;
    padding: 30px 25px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--card-color, var(--category-color)) 8%, #fff), #fff);
    border-radius: 25px;
    border: 1px solid rgba(16, 34, 24, .09);
    box-shadow: 0 10px 35px rgba(16, 34, 24, .05);
    color: #102218;
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease;
    position: relative;
    overflow: hidden;
}
.home-category-card:hover,
.subcategory-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 70px rgba(16, 34, 24, .08);
    color: #102218;
}

/* Pictograma sta centrata pe latimea cardului, fara chenar colorat in jur —
   culoarea categoriei ramane doar pe pictograma. Textul de dedesubt ramane
   aliniat la stanga. */
.home-category-icon,
.subcategory-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* min-height, nu height: cardurile cu pictograma-font raman la 64px, cele cu
       imagine cresc pana la inaltimea ei (120px) fara sa dea peste titlu. */
    min-height: 64px;
    background: none;
    color: var(--card-color, var(--category-color));
    font-size: 2.25rem;
    margin-bottom: 20px;
    transition: transform .3s var(--ease);
}
.home-category-card:hover .home-category-icon,
.subcategory-card:hover .subcategory-icon { transform: scale(1.08); }

/* Imaginea ico-{cod}.png. Regula e comuna celor doua carduri: si prima pagina,
   si pagina de categorie afiseaza acum aceeasi imagine (vezi CategoryIcon). */
.home-category-icon img,
.subcategory-icon img {
    height: 120px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* Tot din varianta statica: .discovery-card h3 / p. */
.home-category-name,
.subcategory-name {
    font-family: 'Manrope', var(--font-body);
    font-size: 20px;
    margin: 0 0 11px;
    font-weight: 700;
    color: #102218;
}
.home-category-desc,
.subcategory-desc {
    font-family: 'Manrope', var(--font-body);
    color: #59675f;
    font-size: 13px;
    margin: 0;
    line-height: 1.65;
}

/* -------- Subcategories -------- */
.section-subcategories { background: var(--color-surface); }

/* Acelasi carusel ca la categoriile de pe prima pagina, inclusiv spatiul lasat
   umbrelor (vezi explicatia de la .home-categories-grid). */
.subcategories-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 24px var(--track-bleed) 32px;
    margin: -24px calc(var(--track-bleed) * -1) 0;
    scroll-padding-inline: var(--track-bleed);
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: safe center;

    /* Vezi explicatia de la .home-categories-grid */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--track-bleed), #000 calc(100% - var(--track-bleed)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--track-bleed), #000 calc(100% - var(--track-bleed)), transparent 100%);
}
.subcategories-grid::-webkit-scrollbar { display: none; }

/* 4 pe ecran, ca la categoriile de pe prima pagina. */
.subcategories-grid > .subcategory-card {
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    scroll-snap-align: start;
}

@media (max-width: 1100px) {
    .subcategories-grid > .subcategory-card { flex-basis: calc((100% - 2 * 24px) / 3); }
}
@media (max-width: 860px) {
    .subcategories-grid > .subcategory-card { flex-basis: calc((100% - 24px) / 2); }
}
/* Un singur card pe mobil, ca la categoriile de pe prima pagina. */
@media (max-width: 600px) {
    .subcategories-grid > .subcategory-card { flex-basis: 100%; }
}

/* Cardul de subcategorie e identic cu cel de categorie de pe prima pagina:
   pictograma sus, nume, descriere. Toate regulile sunt comune, deci stau mai
   sus, langa .home-category-card. */

/* -------- Cards grid variants -------- */
.cards-grid { display: grid; gap: 24px; }
.cards-grid-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards-grid-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards-grid-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* -------- Feature card (audience) -------- */
.feature-card {
    padding: 32px 28px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-float);
    text-align: center;
    transition: all .3s var(--ease);
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float-lift);
}

.feature-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: var(--category-color-light);
    margin: 0 auto 20px;
    overflow: hidden;
}
.feature-card-icon img { max-width: 60%; max-height: 60%; object-fit: contain; }
.feature-card-icon-fallback { color: var(--category-color); font-size: 2rem; }
.feature-card-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.feature-card-desc { color: var(--color-muted); font-size: .95rem; margin: 0; line-height: 1.6; }

/* -------- Benefit card -------- */
.benefit-card {
    padding: 28px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-float);
    transition: all .3s var(--ease);
    position: relative;
}
.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float-lift);
}

.benefit-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--category-color), var(--category-color-dark));
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px var(--category-color-light);
}
.benefit-icon-wrap img { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); }
.benefit-icon-fallback { color: #fff; }

.benefit-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.benefit-desc { color: var(--color-muted); font-size: .95rem; margin: 0; line-height: 1.6; }

/* -------- Difficulty card -------- */
.difficulty-card {
    padding: 32px 28px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-float);
    transition: all .3s var(--ease);
    position: relative;
    overflow: hidden;
}
.difficulty-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    background: var(--category-color);
    opacity: .3;
    transition: opacity .3s var(--ease);
}
.difficulty-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float-lift);
}
.difficulty-card:hover::after { opacity: 1; }

.difficulty-bars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.difficulty-bar {
    width: 32px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-line);
    transition: background .3s var(--ease);
}
.difficulty-bar.is-active { background: var(--category-color); }

.difficulty-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.difficulty-desc { color: var(--color-muted); font-size: .95rem; margin: 0 0 14px; }

.difficulty-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 600;
}

/* -------- Quick info -------- */
.section-quick-info { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%); }

.quick-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.quick-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-md);
    transition: all .25s var(--ease);
}
.quick-info-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
}

.quick-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--category-color-light);
    color: var(--category-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.quick-info-icon img { width: 26px; height: 26px; object-fit: contain; }

.quick-info-label {
    color: var(--color-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.quick-info-value { color: var(--color-ink); font-weight: 600; }

/* -------- Equipment card -------- */
.equipment-card {
    padding: 26px 24px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all .3s var(--ease);
}
.equipment-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float);
}

.equipment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--color-surface-alt);
    margin: 0 auto 16px;
    overflow: hidden;
}
.equipment-icon img { max-width: 60%; max-height: 60%; object-fit: contain; }
.equipment-icon-fallback { color: var(--category-color); font-size: 1.5rem; }

.equipment-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.equipment-desc { color: var(--color-muted); font-size: .875rem; margin: 0; line-height: 1.55; }

/* -------- Process -------- */
.section-process { background: var(--color-surface); }

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    counter-reset: process-count;
}

.process-card {
    position: relative;
    padding: 32px 28px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-float);
    transition: all .3s var(--ease);
}
.process-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-float-lift);
}

.process-step-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--category-color);
    margin-bottom: 8px;
}

.process-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.process-desc { color: var(--color-muted); font-size: .95rem; margin: 0; line-height: 1.6; }

/* -------- Video -------- */
.section-video { background: var(--color-bg); }

.video-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
}

.video-text .section-title { text-align: left; margin-bottom: 20px; }
.video-text .section-subtitle { text-align: left; }

.video-frame {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
    .video-layout { grid-template-columns: 1fr; gap: 32px; }
    .video-text .section-title, .video-text .section-subtitle { text-align: center; }
}

/* -------- Safety rules -------- */
.section-safety { background: var(--color-surface); }

.safety-intro { text-align: center; margin-bottom: 32px; }

.safety-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.safety-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    background: var(--color-surface-alt);
    border-left: 3px solid var(--category-color);
    border-radius: 8px;
    color: var(--color-ink);
    font-size: .95rem;
    line-height: 1.5;
}
.safety-list li i { color: var(--category-color); margin-top: 3px; flex-shrink: 0; }

/* -------- Gallery -------- */
.section-gallery { background: var(--color-bg); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    grid-auto-rows: 220px;
}

.gallery-item {
    overflow: hidden;
    border-radius: var(--radius-md);
    display: block;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-float-lift); }
.gallery-item:hover img { transform: scale(1.06); }

.gallery-item-featured { grid-column: span 2; grid-row: span 2; }
@media (max-width: 640px) {
    .gallery-item-featured { grid-column: span 1; grid-row: span 1; }
}

/* -------- FAQ -------- */
.section-faq { background: var(--color-surface); }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.faq-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.faq-item[open] {
    box-shadow: var(--shadow-float-lift);
    transform: translateY(-2px);
}
.faq-item summary {
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-ink);
    transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--category-color); }

.faq-toggle {
    color: var(--color-muted);
    font-size: .9rem;
    transition: transform .25s var(--ease), color .2s var(--ease);
}
.faq-item[open] .faq-toggle {
    transform: rotate(45deg);
    color: var(--category-color);
}

.faq-answer {
    padding: 0 24px 22px;
    color: var(--color-ink-soft);
    line-height: 1.7;
    font-size: 1rem;
    animation: faqExpand .25s var(--ease);
}
@keyframes faqExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------- Similar (related categories) -------- */
.section-similar { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); }

.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.similar-card {
    display: block;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
    color: var(--color-ink);
    transition: all .3s var(--ease);
    box-shadow: var(--shadow-float);
}
.similar-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-float-lift);
    color: var(--color-ink);
}

.similar-card-image {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.5rem;
    position: relative;
    overflow: hidden;
}
.similar-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.similar-card:hover .similar-card-image img { transform: scale(1.06); }

.similar-card-body { padding: 22px 24px; }
.similar-card-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.similar-card-desc { color: var(--color-muted); font-size: .9rem; margin: 0 0 14px; line-height: 1.55; }

.similar-card-cta {
    color: var(--category-color);
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s var(--ease);
}
.similar-card:hover .similar-card-cta { gap: 10px; }

/* -------- Intro section -------- */
.section-intro { padding: 72px 0; }
.section-intro .section-title { text-align: left; }
.section-intro .section-subtitle { text-align: left; }
.intro-body { margin-top: 24px; }

/* -------- Custom section -------- */
.section-custom .custom-content { margin-top: 20px; }

/* -------- Buttons -------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--category-color), var(--category-color-dark));
    color: #fff;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 8px 20px var(--category-color-light);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary:hover {
    box-shadow: 0 12px 28px var(--category-color-light);
    color: #fff;
}

/* -------- Footer -------- */
.site-footer-logo-img{
	max-width:150px;
	filter: brightness(0) invert(1);
}
.site-footer-logo-note{
	display:block;
}
.site-footer-note{
	padding-top: 5px;
	padding-bottom: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 10px;
    color: #94a3b8;	
	text-align:center;
}
.site-footer {
    background: #0f172a;
    color: rgba(255, 255, 255, .75);
    padding: 56px 0 32px;
    margin-top: 80px;
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.site-footer-brand strong { display: block; color: #fff; font-size: 1.15rem; margin-bottom: 4px; }
.site-footer-brand p { margin: 0; color: rgba(255, 255, 255, .55); font-size: .875rem; }

.site-footer-copy { color: rgba(255, 255, 255, .45); font-size: .8125rem; margin: 0; }

/* -------- Responsive -------- */
@media (max-width: 900px) {
    .section { padding: 64px 0; }
    .hero { padding: 72px 0 60px; }
    .hero-home { padding: 88px 0 72px; }
    .section-header { margin-bottom: 40px; }
    .site-footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
    .container, .container-narrow { padding: 0 16px; }
    :root { --track-bleed: 16px; } /* se schimba odata cu paddingul de mai sus */
    .section { padding: 56px 0; }
    .hero { padding: 60px 0 48px; }
    .site-header .container { height: 60px; }
    .site-logo-text { display: none; }
    .lang-switcher-btn { padding: 8px 12px; }
    .breadcrumb { font-size: .8rem; margin-bottom: 20px; }
    .cards-grid { gap: 16px; }
    .hero-meta { gap: 10px; }
    .hero-cat-icon { width: 44px; height: 44px; font-size: 1.05rem; }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------- Print -------- */
@media print {
    .site-header, .site-footer, .lang-switcher, .hero-badge { display: none !important; }
    .hero { background: none !important; color: #000; padding: 20px 0; }
    .hero-title, .hero-subtitle, .breadcrumb, .breadcrumb a { color: #000 !important; }
    .section { padding: 24px 0; page-break-inside: avoid; }
}

/* =============================================================================
   Casete de acord (Termeni + prelucrarea datelor)
   Folosite la inregistrare membru/furnizor si la formularele de cerere.
   ========================================================================== */
.consent-group {
    margin: 22px 0 18px;
    padding: 16px 18px;
    background: #f8fafb;
    border: 1px solid #eaecf0;
    border-radius: 14px;
}
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 400;
}
.consent-row:last-of-type { margin-bottom: 0; }

/* Caseta nu trebuie sa se micsoreze cand textul se rupe pe mai multe randuri */
.consent-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #16a34a;
    cursor: pointer;
}
.consent-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475467;
}
.consent-text a {
    color: #16a34a;
    text-decoration: underline;
}
.consent-text a:hover { color: #15803d; }
.consent-required { color: #dc2626; margin-left: 2px; }

.consent-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #94a3b8;
}

/* Pe fundal inchis (formularul de cerere din pagina activitatii) */
.offer-form .consent-group {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}
.offer-form .consent-text { color: ##475467;/*color: #e2e8f0;*/ }
.offer-form .consent-text a { color: #4ade80; }
.offer-form .consent-note { color: #94a3b8; }
.org-request-form .offer-note{
	text-align: center;
    font-size: 13px;
    color: #667085;
    margin-top: 15px;
}

/* =============================================================================
   Stele pentru note — randate de stars_html() (src/Helpers/Stars.php)
   Iconite Font Awesome, ca sa poata exista si o jumatate de stea; ★ text nu are
   un echivalent pe jumatate care sa arate la fel peste fonturi.
   Regula sta aici pentru ca acest fisier e incarcat pe toate paginile publice.
   ========================================================================== */
.stars {
    display: inline-flex;
    align-items: center;
    gap: .16em;
    line-height: 1;
    /* Culoarea si marimea vin de la containerul din pagina */
    color: inherit;
    font-size: inherit;
}

/* =============================================================================
   PAGINA DE HOME — sectiunile preluate din varianta statica

   Valorile (culori, marimi, spatieri) sunt copiate ca atare din
   static/assets/css/main.css si static/assets/css/home.css, ca sectiunile sa
   arate identic. De aceea sunt cifre in loc de variabilele site-ului public:
   varianta statica are alta paleta si alta tipografie (Manrope), iar aici o
   pastram doar in interiorul acestor sectiuni.

   Fiecare sectiune are `background` propriu, ca sa nu intre sub regula
   `.section:nth-of-type(even)` de mai sus.
   ========================================================================== */

/* -------- elemente comune celor doua sectiuni -------- */

/* static/assets/css/main.css — .section-label */
.home-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border-radius: 50px;
    background: rgba(115, 205, 8, .11);
    color: #00991a;
    font-family: 'Manrope', var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
}

/* static/assets/css/main.css — .gradient-text */
.home-gradient-text {
    background: linear-gradient(135deg, #73cd08, #00991a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* -------- Despre BonTrip (static .intro) -------- */

.section-home-about {
    padding: 120px 0;
    background: linear-gradient(135deg, #f4faf6 0%, #fff 55%, #f5faff 100%);
}

.section-home-about .home-about-header {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.section-home-about .home-about-title {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    margin: 23px 0 0;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
    letter-spacing: -2.8px;
}

.section-home-about .home-about-desc {
    max-width: 780px;
    margin: 26px auto 0;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 18px;
    line-height: 1.85;
}

/* static .values */
.section-home-about .home-values {
    margin-top: 65px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.section-home-about .home-value-card {
    padding: 38px 30px;
    border: 1px solid rgba(16, 34, 24, .09);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(16, 34, 24, .05);
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease;
}
.section-home-about .home-value-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 70px rgba(16, 34, 24, .08);
}

/* Linia de deasupra titlului isi schimba degradeul de la card la card. */
.section-home-about .home-value-line {
    width: 48px;
    height: 4px;
    margin: 0 auto 27px;
    border-radius: 10px;
    background: linear-gradient(90deg, #73cd08, #00991a);
}
.section-home-about .home-value-card:nth-child(2) .home-value-line {
    background: linear-gradient(90deg, #0066ab, #31a5df);
}
.section-home-about .home-value-card:nth-child(3) .home-value-line {
    background: linear-gradient(90deg, #ff7f00, #ffbe00);
}

.section-home-about .home-value-card h3 {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    font-size: 21px;
    margin: 0 0 13px;
}
.section-home-about .home-value-card p {
    margin: 0;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 14px;
    line-height: 1.75;
}

/* -------- Cum functioneaza (static .how) -------- */

.section-home-how {
    padding: 120px 0;
    background: linear-gradient(135deg, #f6faf7, #fff);
}

.section-home-how .home-how-header {
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.section-home-how .home-how-title {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    margin: 22px 0 0;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.section-home-how .home-how-desc {
    margin: 23px auto 0;
    max-width: 700px;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 18px;
    line-height: 1.8;
}

.section-home-how .home-steps {
    margin-top: 65px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.section-home-how .home-step {
    padding: 38px 30px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(16, 34, 24, .09);
    box-shadow: 0 10px 35px rgba(16, 34, 24, .05);
    text-align: center;
}

.section-home-how .home-step-number {
    width: 46px;
    height: 46px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #73cd08, #00991a);
    color: #fff;
    font-family: 'Manrope', var(--font-body);
    font-size: 13px;
    font-weight: 800;
}

.section-home-how .home-step h3 {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    font-size: 20px;
    margin: 0 0 12px;
}
.section-home-how .home-step p {
    margin: 0;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 14px;
    line-height: 1.75;
}

/* -------- structura comuna celor doua sectiuni „split” -------- */

/* static/assets/css/home.css — .split */
.home-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 75px;
    align-items: center;
}

.home-split-title {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    margin: 22px 0 0;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.home-split-desc {
    margin: 24px 0 0;
    max-width: 570px;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 17px;
    line-height: 1.85;
}

/* -------- Pentru calatori (static .travelers) -------- */

.section-home-travelers {
    padding: 125px 0;
    background: #fff;
}

/* static .feature-list / .feature */
.section-home-travelers .home-feature-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-home-travelers .home-feature {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(16, 34, 24, .09);
    text-align: left;
}
.section-home-travelers .home-feature:last-child { border-bottom: 0; }

.section-home-travelers .home-feature h3 {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    font-size: 16px;
    margin: 0 0 7px;
}
.section-home-travelers .home-feature p {
    margin: 0;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 14px;
    line-height: 1.7;
}

/* -------- Pentru organizatori (static .organizers) -------- */

.section-home-organizers {
    padding: 125px 0;
    background: linear-gradient(135deg, #0d2116, #143b25);
    color: #fff;
    overflow: hidden;
}

/* Halo-ul verde din coltul din dreapta sus, ca in varianta statica. */
.section-home-organizers::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -300px;
    top: -300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(115, 205, 8, .14), transparent 68%);
}

/* Continutul trebuie sa stea peste halo. */
.section-home-organizers .home-split { position: relative; z-index: 2; }

.section-home-organizers .home-section-label {
    background: rgba(115, 205, 8, .12);
    color: #cfff9e;
}
.section-home-organizers .home-split-title { color: #fff; }
.section-home-organizers .home-split-desc { color: rgba(255, 255, 255, .72); }

/* static .organizer-features — grila 2x2, nu lista */
.section-home-organizers .home-organizer-features {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.section-home-organizers .home-organizer-feature {
    padding: 24px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .045);
    text-align: center;
}

.section-home-organizers .home-organizer-feature h3 {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #fff;
    font-size: 15px;
    margin: 0 0 9px;
}
.section-home-organizers .home-organizer-feature p {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-family: 'Manrope', var(--font-body);
    font-size: 12px;
    line-height: 1.65;
}

/* -------- cardul de indemn -------- */

/* Ia forma cardului de formular din varianta statica (.form-card din
   static/assets/css/forms.css), dar in loc de campuri are doua indemnuri:
   pagina de detalii si contul. */
.home-cta-card {
    position: relative;
    z-index: 2;
    padding: 38px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(16, 34, 24, .09);
    box-shadow: 0 35px 100px rgba(16, 34, 24, .12);
    font-family: 'Manrope', var(--font-body);
    text-align: center;
}

.home-cta-heading { margin-bottom: 28px; }

.home-cta-heading h3 {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    font-size: 26px;
    letter-spacing: -.7px;
    margin: 0;
}

.home-cta-heading p {
    max-width: 470px;
    margin: 9px auto 0;
    color: #7a867f;
    font-size: 13.5px;
    line-height: 1.65;
}

/* static/assets/css/home.css — .button + .button-primary */
.home-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 25px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #73cd08, #00991a);
    box-shadow: 0 15px 35px rgba(0, 153, 26, .25);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.home-cta-button:hover {
    color: #fff;
}

.home-cta-account {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(16, 34, 24, .09);
}

.home-cta-account p {
    margin: 0;
    color: #7a867f;
    font-size: 13px;
    line-height: 1.6;
}

.home-cta-links {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(16, 34, 24, .28);
    font-size: 14px;
}

.home-cta-links a {
    color: #00991a;
    font-weight: 800;
    text-decoration: none;
}
.home-cta-links a:hover { text-decoration: underline; }

/* -------- Sectiunea finala (static .final) -------- */

.section-home-final {
    padding: 120px 0;
    background: linear-gradient(135deg, #eff9e9, #fff, #edf7fc);
}

.home-final-box {
    max-width: 1050px;
    margin: auto;
    padding: 80px 50px;
    text-align: center;
    border-radius: 38px;
    border: 1px solid rgba(16, 34, 24, .09);
    background: #fff;
    box-shadow: 0 25px 70px rgba(16, 34, 24, .08);
}

.home-final-title {
    font-family: 'Manrope', var(--font-body);
    font-weight: 700;
    color: #102218;
    margin: 23px 0 0;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -3px;
}

.home-final-desc {
    max-width: 690px;
    margin: 25px auto 0;
    color: #59675f;
    font-family: 'Manrope', var(--font-body);
    font-size: 18px;
    line-height: 1.8;
}

/* Eticheta de deasupra listei de zone — separa prozele de sirul de pastile. */
.home-zones-label {
    margin: 46px 0 0;
    color: #7a867f;
    font-family: 'Manrope', var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* static/assets/css/home.css — .category-cloud / .category */
.home-zone-cloud {
    max-width: 950px;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.home-zone-pill {
    padding: 11px 17px;
    border: 1px solid rgba(16, 34, 24, .09);
    border-radius: 50px;
    background: #fff;
    color: #39473f;
    font-family: 'Manrope', var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .035);
    transition: .25s ease;
}
.home-zone-pill:hover {
    border-color: rgba(115, 205, 8, .4);
    color: #00991a;
}

/* -------- responsive: aceleasi praguri ca in varianta statica -------- */

@media (max-width: 1050px) {
    .section-home-about .home-values { grid-template-columns: 1fr; }

    .home-split {
        grid-template-columns: 1fr;
        gap: 55px;
    }
    .home-split-copy { text-align: center; }
    .home-split-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .section-home-travelers .home-feature { text-align: center; }
    .section-home-organizers .home-organizer-features {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    .section-home-about,
    .section-home-how,
    .section-home-travelers,
    .section-home-organizers,
    .section-home-final { padding: 80px 0; }

    .section-home-about .home-about-title,
    .section-home-how .home-how-title,
    .home-split-title { letter-spacing: -1.8px; }

    .section-home-about .home-about-desc,
    .section-home-how .home-how-desc { font-size: 15px; }

    .section-home-how .home-steps { grid-template-columns: 1fr; }

    .section-home-organizers .home-organizer-features { grid-template-columns: 1fr; }

    .home-cta-card { padding: 30px 22px; }

    .home-final-box {
        padding: 55px 24px;
        border-radius: 28px;
    }
    .home-final-title { letter-spacing: -2px; }
    .home-final-desc { font-size: 15px; }
}


/* =============================================================================
   RANDURI DE CARDURI CU ULTIMUL RAND CENTRAT

   O grila (`display:grid`) nu poate centra un rand incomplet: coloanele sunt
   fixe, deci doua carduri dintr-un rand de trei raman lipite la stanga si
   golul cade in dreapta. Cu flex, randul incomplet se aseaza la mijloc de la
   sine — asta e tot rostul schimbarii.

   Latimea unui card se socoteste o singura data, aici; fiecare sectiune spune
   doar cate coloane are (`--row-cols`) si cat spatiu intre ele (`--row-gap`),
   iar la ecrane mici e de ajuns sa schimbe numarul de coloane.
   ========================================================================== */
.guide-cards-grid.grid,
.guide-marketplace-grid,
.organizers-grid,
.guide-stats-grid,
.zone-cards,
.zone-seasons,
.v6-audience-grid,
.activity-equipment-grid,
.activity-profile-grid,
.activity-review-grid,
.organizer-stats,
.nearby-grid,
.trust-levels,
.same-organizer-grid,
.nearby-area-grid,
.recommended-grid,
.v6-offers-grid,
.v6-organizer-grid,
.org-exp-grid,
.v6-level-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--row-gap);
}

.guide-cards-grid.grid > *,
.guide-marketplace-grid > *,
.organizers-grid > *,
.guide-stats-grid > *,
.zone-cards > *,
.zone-seasons > *,
.v6-audience-grid > *,
.activity-equipment-grid > *,
.activity-profile-grid > *,
.activity-review-grid > *,
.organizer-stats > *,
.nearby-grid > *,
.trust-levels > *,
.same-organizer-grid > *,
.nearby-area-grid > *,
.recommended-grid > *,
.v6-offers-grid > *,
.v6-organizer-grid > *,
.org-exp-grid > *,
.v6-level-grid > * {
    flex: 0 0 calc((100% - (var(--row-cols) - 1) * var(--row-gap)) / var(--row-cols));
    max-width: calc((100% - (var(--row-cols) - 1) * var(--row-gap)) / var(--row-cols));
    min-width: 0;
}


/* =============================================================================
   PICTOGRAMELE COMUNE — /images/common/ico-*.png, puse de CommonIcon::img()

   Inainte erau caractere scrise in sablon (🎒, ⚠, 📍). Emoji-ul il deseneaza
   sistemul de operare, deci arata altfel pe Windows, pe Mac si pe Android, iar
   unele cad pe varianta alb-negru din font.

   Marimea e in `em`, nu in pixeli: pictograma se ia dupa textul de langa ea.
   Asa aceeasi clasa intra potrivit si intr-un cerc de 52px cu `font-size:23px`
   (iese 31px), si intr-un rand de 14px (iese 19px), fara cate o regula pentru
   fiecare loc in parte.
   ========================================================================== */

.bt-ico {
    /* `inline-block` bate `img{display:block}` din foile de pagina */
    display: inline-block;
    height: 1.35em;
    width: auto;
    max-width: 100%;
    /* Asezare pe linia textului. Intr-un container flex e ignorat, deci nu
       strica nimic acolo unde pictograma sta singura intr-un cerc. */
    vertical-align: -.28em;
    /* Sa nu fie stransa cand sta intr-un rand flex langa un text lung */
    flex: none;
    object-fit: contain;
}



/* ANPC */
.site-footer .anpc-area {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.site-footer .anpc-badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: #fff; 
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  padding: .625rem 1.125rem;
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #333;
}
.site-footer .anpc-badge:hover { background: #fff; color: #333; }
.site-footer .anpc-badge img { height: 20px; width: auto; }


/***************contact*****************/
.exr-contact-page {
            --exr-contact-green: #00991A;
            --exr-contact-lime: #73CD08;
            --exr-contact-orange: #FF7F00;
            --exr-contact-yellow: #FFBE00;
            --exr-contact-blue: #0066AB;

            --exr-contact-dark: #163125;
            --exr-contact-text: #526158;
            --exr-contact-muted: #7A8780;
            --exr-contact-bg: #F6F9F6;
            --exr-contact-white: #FFFFFF;
            --exr-contact-border: #E2E9E3;
            --exr-contact-error: #C62828;

            width: 100%;
            min-height: 100vh;
            padding: 70px 20px 90px;

            background:
                radial-gradient(
                    circle at 10% 10%,
                    rgba(115, 205, 8, 0.10),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 5%,
                    rgba(0, 102, 171, 0.08),
                    transparent 25%
                ),
                var(--exr-contact-bg);

            color: var(--exr-contact-text);

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Arial,
                sans-serif;

            line-height: 1.6;
        }

        .exr-contact-page *,
        .exr-contact-page *::before,
        .exr-contact-page *::after {
            box-sizing: border-box;
        }

        .exr-contact-container {
            width: min(1050px, 100%);
            margin: 0 auto;
        }

        /* =========================
           HERO
        ========================= */

        .exr-contact-hero {
            max-width: 800px;
            margin: 0 auto 48px;
            text-align: center;
        }

        .exr-contact-label {
            display: inline-block;

            margin-bottom: 18px;
            padding: 7px 14px;

            border-radius: 50px;

            background: rgba(0, 153, 26, 0.09);
            color: var(--exr-contact-green);

            font-size: 12px;
            font-weight: 800;
        }

        .exr-contact-title {
            margin: 0 0 18px;

            color: var(--exr-contact-dark);

            font-size: clamp(40px, 5vw, 58px);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -1.8px;
        }

        .exr-contact-title-accent {
            color: var(--exr-contact-green);
        }

        .exr-contact-subtitle {
            max-width: 680px;
            margin: 0 auto;

            color: var(--exr-contact-muted);

            font-size: 17px;
            line-height: 1.7;
        }

        /* =========================
           INTRO
        ========================= */

        .exr-contact-intro {
            margin-bottom: 42px;
            padding: 36px 40px;

            background: var(--exr-contact-white);

            border: 1px solid var(--exr-contact-border);
            border-radius: 22px;

            box-shadow:
                0 12px 35px rgba(22, 49, 37, 0.06);
        }

        .exr-contact-intro-title {
            margin: 0 0 9px;

            color: var(--exr-contact-dark);

            font-size: 25px;
            font-weight: 750;
        }

        .exr-contact-intro-text {
            margin: 0;

            color: var(--exr-contact-text);

            font-size: 15px;
            line-height: 1.75;
        }

        /* =========================
           SECTION
        ========================= */

        .exr-contact-section {
            margin-top: 42px;
        }

        .exr-contact-section-heading {
            margin-bottom: 20px;
        }

        .exr-contact-section-title {
            margin: 0 0 5px;

            color: var(--exr-contact-dark);

            font-size: 27px;
            font-weight: 750;
            line-height: 1.2;
        }

        .exr-contact-section-description {
            margin: 0;

            color: var(--exr-contact-muted);

            font-size: 14px;
        }

        /* =========================
           CONTACT CARDS
        ========================= */

        .exr-contact-grid {
            display: grid;

            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 18px;
        }

        .exr-contact-card {
            padding: 28px;

            background: var(--exr-contact-white);

            border: 1px solid var(--exr-contact-border);
            border-radius: 18px;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
        }

        .exr-contact-card:hover {
            transform: translateY(-3px);

            border-color: rgba(0, 153, 26, 0.25);

            box-shadow:
                0 12px 30px rgba(22, 49, 37, 0.07);
        }

        .exr-contact-icon {
            width: 46px;
            height: 46px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-bottom: 18px;

            border-radius: 13px;

            font-size: 17px;
            font-weight: 800;
        }

        .exr-contact-icon-green {
            background: rgba(0, 153, 26, 0.10);
            color: var(--exr-contact-green);
        }

        .exr-contact-icon-blue {
            background: rgba(0, 102, 171, 0.10);
            color: var(--exr-contact-blue);
        }

        .exr-contact-icon-orange {
            background: rgba(255, 127, 0, 0.11);
            color: var(--exr-contact-orange);
        }

        .exr-contact-card-title {
            margin: 0 0 8px;

            color: var(--exr-contact-dark);

            font-size: 17px;
            font-weight: 750;
        }

        .exr-contact-card-text {
            margin: 0 0 17px;

            color: var(--exr-contact-muted);

            font-size: 13px;
            line-height: 1.65;
        }

        .exr-contact-email {
            color: var(--exr-contact-green);

            font-size: 13px;
            font-weight: 800;

            text-decoration: none;
        }

        .exr-contact-email:hover {
            text-decoration: underline;
        }

        /* =========================
           FORMULAR CONTACT
        ========================= */

        .exr-contact-form-wrapper {
            margin-top: 46px;
        }

        .exr-contact-form-card {
            padding: 40px;

            background: var(--exr-contact-white);

            border: 1px solid var(--exr-contact-border);
            border-radius: 22px;

            box-shadow:
                0 12px 35px rgba(22, 49, 37, 0.06);
        }

        .exr-contact-form-header {
            max-width: 700px;
            margin-bottom: 30px;
        }

        .exr-contact-form-title {
            margin: 0 0 8px;

            color: var(--exr-contact-dark);

            font-size: 27px;
            font-weight: 800;
            line-height: 1.2;
        }

        .exr-contact-form-description {
            margin: 0;

            color: var(--exr-contact-muted);

            font-size: 14px;
            line-height: 1.7;
        }

        .exr-contact-form-grid {
            display: grid;

            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 20px;
        }

        .exr-contact-form-field {
            display: flex;
            flex-direction: column;
        }

        .exr-contact-form-field-full {
            grid-column: 1 / -1;
        }

        .exr-contact-form-label {
            margin-bottom: 7px;

            color: var(--exr-contact-dark);

            font-size: 13px;
            font-weight: 750;
        }

        .exr-contact-form-required {
            color: var(--exr-contact-orange);
        }

        .exr-contact-form-input,
        .exr-contact-form-select,
        .exr-contact-form-textarea {
            width: 100%;

            padding: 13px 14px;

            background: #FBFDFC;

            border: 1px solid var(--exr-contact-border);
            border-radius: 10px;

            color: var(--exr-contact-dark);

            font-family: inherit;
            font-size: 14px;

            outline: none;

            transition:
                border-color .2s ease,
                box-shadow .2s ease,
                background .2s ease;
        }

        .exr-contact-form-input::placeholder,
        .exr-contact-form-textarea::placeholder {
            color: #A0AAA4;
        }

        .exr-contact-form-input:focus,
        .exr-contact-form-select:focus,
        .exr-contact-form-textarea:focus {
            background: var(--exr-contact-white);

            border-color: var(--exr-contact-green);

            box-shadow:
                0 0 0 3px rgba(0, 153, 26, 0.09);
        }

        .exr-contact-form-select {
            cursor: pointer;
        }

        .exr-contact-form-textarea {
            min-height: 150px;

            resize: vertical;
        }

        /* =========================
           CONSENT
        ========================= */

        .exr-contact-form-consent {
            display: flex;
            align-items: flex-start;
            gap: 10px;

            margin-top: 22px;
        }

        .exr-contact-form-checkbox {
            flex-shrink: 0;

            width: 17px;
            height: 17px;

            margin-top: 2px;

            accent-color: var(--exr-contact-green);

            cursor: pointer;
        }

        .exr-contact-form-consent-text {
            margin: 0;

            color: var(--exr-contact-muted);

            font-size: 12px;
            line-height: 1.6;
        }

        .exr-contact-form-consent-link {
            color: var(--exr-contact-green);

            font-weight: 700;
            text-decoration: none;
        }

        .exr-contact-form-consent-link:hover {
            text-decoration: underline;
        }

        /* =========================
           SUBMIT
        ========================= */

        .exr-contact-form-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;

            margin-top: 27px;
            padding-top: 24px;

            border-top: 1px solid var(--exr-contact-border);
        }

        .exr-contact-form-note {
            margin: 0;

            color: var(--exr-contact-muted);

            font-size: 12px;
        }

        .exr-contact-form-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-width: 150px;

            padding: 13px 22px;

            background:
                linear-gradient(
                    135deg,
                    var(--exr-contact-green),
                    #087D23
                );

            border: 0;
            border-radius: 10px;

            color: var(--exr-contact-white);

            font-family: inherit;
            font-size: 13px;
            font-weight: 800;

            cursor: pointer;

            transition:
                transform .2s ease,
                box-shadow .2s ease,
                opacity .2s ease;
        }

        .exr-contact-form-button:hover {
            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(0, 153, 26, 0.20);
        }

        .exr-contact-form-button:active {
            transform: translateY(0);
        }

        /* =========================
           INFO
        ========================= */

        .exr-contact-info {
            display: flex;
            align-items: flex-start;
            gap: 16px;

            margin-top: 18px;
            padding: 20px 22px;

            background: rgba(0, 102, 171, 0.055);

            border-left: 3px solid var(--exr-contact-blue);
            border-radius: 9px;
        }

        .exr-contact-info-mark {
            flex-shrink: 0;

            width: 28px;
            height: 28px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background: rgba(0, 102, 171, 0.12);
            color: var(--exr-contact-blue);

            font-size: 13px;
            font-weight: 800;
        }

        .exr-contact-info-text {
            margin: 0;

            color: var(--exr-contact-text);

            font-size: 13px;
            line-height: 1.7;
        }

        /* =========================
           CTA
        ========================= */

        .exr-contact-cta {
            margin-top: 48px;
            padding: 45px 30px;

            background:
                linear-gradient(
                    120deg,
                    var(--exr-contact-green),
                    #087D23
                );

            border-radius: 23px;

            text-align: center;

            color: var(--exr-contact-white);
        }

        .exr-contact-cta-title {
            margin: 0 0 9px;

            font-size: 29px;
            font-weight: 800;
            line-height: 1.2;
        }

        .exr-contact-cta-text {
            max-width: 650px;
            margin: 0 auto;

            color: rgba(255, 255, 255, 0.87);

            font-size: 14px;
            line-height: 1.65;
        }

        .exr-contact-cta-button {
            display: inline-block;

            margin-top: 22px;
            padding: 12px 22px;

            background: var(--exr-contact-white);
            color: var(--exr-contact-green);

            border-radius: 10px;

            font-size: 13px;
            font-weight: 800;

            text-decoration: none;

            transition: .2s ease;
        }

        .exr-contact-cta-button:hover {
            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(0, 0, 0, 0.12);
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 850px) {

            .exr-contact-page {
                padding: 55px 15px 70px;
            }

            .exr-contact-grid {
                grid-template-columns: 1fr;
            }

            .exr-contact-form-grid {
                grid-template-columns: 1fr;
            }

            .exr-contact-form-field-full {
                grid-column: auto;
            }
        }

        @media (max-width: 600px) {

            .exr-contact-title {
                font-size: 40px;
                letter-spacing: -1px;
            }

            .exr-contact-subtitle {
                font-size: 15px;
            }

            .exr-contact-intro {
                padding: 27px 23px;
            }

            .exr-contact-card {
                padding: 23px;
            }

            .exr-contact-form-card {
                padding: 25px 20px;
            }

            .exr-contact-form-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .exr-contact-form-button {
                width: 100%;
            }

            .exr-contact-cta {
                padding: 35px 22px;
            }

            .exr-contact-cta-title {
                font-size: 26px;
            }
        }
/***************contact end*****************/
/***************sugestii si reclamatii*****************/
.exr-feedback-page {
        --exr-green: #00991A;
        --exr-lime: #73CD08;
        --exr-orange: #FF7F00;
        --exr-yellow: #FFBE00;
        --exr-blue: #0066AB;

        --exr-dark: #163125;
        --exr-text: #526158;
        --exr-muted: #7A8780;
        --exr-bg: #F6F9F6;
        --exr-white: #FFFFFF;
        --exr-border: #E2E9E3;

        width: 100%;
        padding: 70px 20px 90px;

        background:
            radial-gradient(
                circle at 10% 10%,
                rgba(115, 205, 8, 0.10),
                transparent 28%
            ),
            radial-gradient(
                circle at 90% 5%,
                rgba(0, 102, 171, 0.08),
                transparent 25%
            ),
            var(--exr-bg);

        color: var(--exr-text);

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif;

        line-height: 1.6;

        box-sizing: border-box;
    }

    .exr-feedback-page *,
    .exr-feedback-page *::before,
    .exr-feedback-page *::after {
        box-sizing: border-box;
    }

    .exr-feedback-container {
        width: min(1050px, 100%);
        margin: 0 auto;
    }

    /* HERO */

    .exr-feedback-hero {
        max-width: 800px;
        margin: 0 auto 48px;

        text-align: center;
    }

    .exr-feedback-label {
        display: inline-block;

        margin-bottom: 18px;
        padding: 7px 14px;

        border-radius: 50px;

        background: rgba(0, 153, 26, 0.09);
        color: var(--exr-green);

        font-size: 12px;
        font-weight: 800;
        letter-spacing: .2px;
    }

    .exr-feedback-title {
        margin: 0 0 18px;

        color: var(--exr-dark);

        font-size: clamp(38px, 5vw, 56px);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -1.8px;
    }

    .exr-feedback-title-accent {
        color: var(--exr-green);
    }

    .exr-feedback-subtitle {
        max-width: 670px;
        margin: 0 auto;

        color: var(--exr-muted);

        font-size: 17px;
        line-height: 1.7;
    }

    /* INTRO */

    .exr-feedback-intro {
        margin-bottom: 42px;
        padding: 36px 40px;

        background: var(--exr-white);

        border: 1px solid var(--exr-border);
        border-radius: 22px;

        box-shadow:
            0 12px 35px rgba(22, 49, 37, 0.06);
    }

    .exr-feedback-intro-title {
        margin: 0 0 9px;

        color: var(--exr-dark);

        font-size: 25px;
        font-weight: 750;
    }

    .exr-feedback-intro-text {
        margin: 0;

        color: var(--exr-text);

        font-size: 15px;
        line-height: 1.75;
    }

    /* SECTION */

    .exr-feedback-section {
        margin-top: 42px;
    }

    .exr-feedback-section-heading {
        margin-bottom: 20px;
    }

    .exr-feedback-section-title {
        margin: 0 0 5px;

        color: var(--exr-dark);

        font-size: 27px;
        font-weight: 750;
        line-height: 1.2;
    }

    .exr-feedback-section-description {
        margin: 0;

        color: var(--exr-muted);

        font-size: 14px;
    }

    /* CONTACT CARDS */

    .exr-feedback-contact-grid {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 18px;
    }

    .exr-feedback-contact-card {
        padding: 27px;

        background: var(--exr-white);

        border: 1px solid var(--exr-border);
        border-radius: 18px;

        transition:
            transform .2s ease,
            box-shadow .2s ease,
            border-color .2s ease;
    }

    .exr-feedback-contact-card:hover {
        transform: translateY(-3px);

        border-color: rgba(0, 153, 26, .25);

        box-shadow:
            0 12px 30px rgba(22, 49, 37, .07);
    }

    .exr-feedback-contact-icon {
        width: 45px;
        height: 45px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 17px;

        border-radius: 13px;

        font-size: 16px;
        font-weight: 800;
    }

    .exr-feedback-contact-icon-green {
        background: rgba(0, 153, 26, .10);
        color: var(--exr-green);
    }

    .exr-feedback-contact-icon-blue {
        background: rgba(0, 102, 171, .10);
        color: var(--exr-blue);
    }

    .exr-feedback-contact-icon-orange {
        background: rgba(255, 127, 0, .11);
        color: var(--exr-orange);
    }

    .exr-feedback-contact-title {
        margin: 0 0 7px;

        color: var(--exr-dark);

        font-size: 17px;
        font-weight: 750;
    }

    .exr-feedback-contact-text {
        margin: 0 0 15px;

        color: var(--exr-muted);

        font-size: 13px;
        line-height: 1.65;
    }

    .exr-feedback-contact-link {
        color: var(--exr-green);

        font-size: 13px;
        font-weight: 800;

        text-decoration: none;
    }

    .exr-feedback-contact-link:hover {
        text-decoration: underline;
    }

    /* INFORMATION BLOCKS */

    .exr-feedback-info-grid {
        display: grid;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr);

        gap: 18px;
    }

    .exr-feedback-info-card {
        padding: 30px;

        background: var(--exr-white);

        border: 1px solid var(--exr-border);
        border-radius: 20px;
    }

    .exr-feedback-info-title {
        margin: 0 0 11px;

        color: var(--exr-dark);

        font-size: 20px;
        font-weight: 750;
    }

    .exr-feedback-info-text {
        margin: 0;

        color: var(--exr-muted);

        font-size: 14px;
        line-height: 1.75;
    }

    /* TOPICS */

    .exr-feedback-topics {
        display: flex;

        flex-wrap: wrap;

        gap: 9px;

        margin-top: 20px;
    }

    .exr-feedback-topic {
        display: inline-flex;
        align-items: center;

        padding: 8px 13px;

        background: var(--exr-bg);

        border: 1px solid var(--exr-border);
        border-radius: 50px;

        color: var(--exr-text);

        font-size: 12px;
        font-weight: 650;
    }

    /* PROCESS */

    .exr-feedback-process {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 18px;
    }

    .exr-feedback-process-card {
        padding: 27px;

        background: var(--exr-white);

        border: 1px solid var(--exr-border);
        border-radius: 18px;
    }

    .exr-feedback-process-number {
        width: 38px;
        height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 16px;

        border-radius: 50%;

        background: var(--exr-green);
        color: var(--exr-white);

        font-size: 14px;
        font-weight: 800;
    }

    .exr-feedback-process-card:nth-child(2)
    .exr-feedback-process-number {
        background: var(--exr-blue);
    }

    .exr-feedback-process-card:nth-child(3)
    .exr-feedback-process-number {
        background: var(--exr-orange);
    }

    .exr-feedback-process-title {
        margin: 0 0 6px;

        color: var(--exr-dark);

        font-size: 16px;
        font-weight: 750;
    }

    .exr-feedback-process-text {
        margin: 0;

        color: var(--exr-muted);

        font-size: 13px;
        line-height: 1.65;
    }

    /* NOTICE */

    .exr-feedback-notice {
        margin-top: 18px;
        padding: 18px 21px;

        background: rgba(0, 153, 26, .055);

        border-left: 3px solid var(--exr-green);
        border-radius: 9px;

        color: var(--exr-text);

        font-size: 13px;
        line-height: 1.7;
    }

    /* CTA */

    .exr-feedback-cta {
        margin-top: 45px;
        padding: 43px 30px;

        background:
            linear-gradient(
                120deg,
                var(--exr-green),
                #087D23
            );

        border-radius: 23px;

        text-align: center;

        color: var(--exr-white);
    }

    .exr-feedback-cta-title {
        margin: 0 0 8px;

        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
    }

    .exr-feedback-cta-text {
        max-width: 650px;
        margin: 0 auto;

        color: rgba(255,255,255,.87);

        font-size: 14px;
        line-height: 1.65;
    }

    .exr-feedback-cta-button {
        display: inline-block;

        margin-top: 21px;
        padding: 12px 21px;

        background: var(--exr-white);
        color: var(--exr-green);

        border-radius: 10px;

        font-size: 13px;
        font-weight: 800;

        text-decoration: none;

        transition: .2s ease;
    }

    .exr-feedback-cta-button:hover {
        transform: translateY(-2px);

        box-shadow:
            0 7px 18px rgba(0,0,0,.12);
    }

    /* RESPONSIVE */

    @media (max-width: 850px) {

        .exr-feedback-contact-grid,
        .exr-feedback-process {
            grid-template-columns: 1fr;
        }

        .exr-feedback-info-grid {
            grid-template-columns: 1fr;
        }

        .exr-feedback-page {
            padding: 55px 15px 70px;
        }
    }

    @media (max-width: 550px) {

        .exr-feedback-hero {
            margin-bottom: 35px;
        }

        .exr-feedback-title {
            font-size: 39px;
            letter-spacing: -1px;
        }

        .exr-feedback-subtitle {
            font-size: 15px;
        }

        .exr-feedback-intro {
            padding: 27px 23px;
        }

        .exr-feedback-contact-card,
        .exr-feedback-info-card,
        .exr-feedback-process-card {
            padding: 23px;
        }

        .exr-feedback-cta {
            padding: 35px 22px;
        }
    }
/***************sugestii si reclamatii*****************/
/***************despre noi*****************/
/* =========================================================
   BONTRIP ABOUT PAGE
   ---------------------------------------------------------
   Toate clasele folosesc prefixul "bontrip-"
   pentru a evita conflictele cu CSS-ul existent.
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.bontrip-about {
    --bontrip-green: #42bd0c;
    --bontrip-green-dark: #31a500;

    --bontrip-text: #102219;
    --bontrip-muted: #68756e;

    --bontrip-border: #e1e6e3;

    width: 100%;
    margin: 0;
    padding: 0;

    color: var(--bontrip-text);

    background: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.bontrip-about *,
.bontrip-about *::before,
.bontrip-about *::after {
    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.bontrip-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.bontrip-about-section {
    width: 100%;

    padding-left: 20px;
    padding-right: 20px;
}


/* =========================================================
   LABEL
   ========================================================= */

.bontrip-label {
    display: table;

    margin: 0 auto 25px;

    padding: 11px 18px;

    border-radius: 30px;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    white-space: nowrap;
}

.bontrip-label-green {
    color: #319e08;

    background: #edf8e8;
}


/* =========================================================
   TITLES
   ========================================================= */

.bontrip-title {
    margin: 0 auto;

    color: var(--bontrip-text);

    text-align: center;

    font-size: 56px;
    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -2.7px;
}

.bontrip-title span {
    color: var(--bontrip-green);
}


/* =========================================================
   FIRST SECTION
   ========================================================= */

.bontrip-about-intro {
    padding-top: 58px;
    padding-bottom: 58px;

    background: #ffffff;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.bontrip-intro-text {
    width: 100%;
    max-width: 820px;

    margin: 31px auto 0;

    color: var(--bontrip-muted);

    text-align: center;

    font-size: 17px;
    line-height: 1.9;

    font-weight: 400;
}

.bontrip-intro-text p {
    margin: 0 0 27px;
}

.bontrip-intro-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.bontrip-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 21px;

    width: 100%;
    max-width: 1150px;

    margin: 67px auto 0;
}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.bontrip-feature-card {
    position: relative;

    min-height: 245px;

    padding: 37px 32px 30px;

    border: 1px solid var(--bontrip-border);

    border-radius: 27px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 12px 35px rgba(20, 40, 28, 0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.bontrip-feature-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 42px rgba(20, 40, 28, 0.065);
}


/* =========================================================
   CARD LINE
   ========================================================= */

.bontrip-card-line {
    display: block;

    width: 48px;
    height: 4px;

    margin: 0 auto 30px;

    border-radius: 10px;
}

.bontrip-line-green {
    background: #42bf0c;
}

.bontrip-line-blue {
    background: #168dce;
}

.bontrip-line-orange {
    background: #f5a000;
}


/* =========================================================
   FEATURE CARD TITLE
   ========================================================= */

.bontrip-feature-card h2 {
    margin: 0 0 17px;

    color: var(--bontrip-text);

    font-size: 22px;
    line-height: 1.25;

    font-weight: 700;
}


/* =========================================================
   FEATURE CARD TEXT
   ========================================================= */

.bontrip-feature-card p {
    max-width: 330px;

    margin: 0 auto;

    color: #68746e;

    font-size: 15px;
    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   HOW SECTION
   ========================================================= */

.bontrip-how-section {
    padding-top: 36px;
    padding-bottom: 61px;

    background:
        linear-gradient(
            180deg,
            #fbfdfc 0%,
            #f7faf8 100%
        );
}


/* =========================================================
   HOW TITLE
   ========================================================= */

.bontrip-how-title {
    font-size: 58px;

    line-height: 1.05;
}


/* =========================================================
   HOW TEXT
   ========================================================= */

.bontrip-how-text {
    width: 100%;
    max-width: 760px;

    margin: 25px auto 0;

    color: var(--bontrip-muted);

    text-align: center;

    font-size: 17px;
    line-height: 1.85;
}

.bontrip-how-text p {
    margin: 0;
}


/* =========================================================
   STEPS GRID
   ========================================================= */

.bontrip-steps-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
    max-width: 1150px;

    margin: 66px auto 0;
}


/* =========================================================
   STEP CARD
   ========================================================= */

.bontrip-step-card {
    min-height: 282px;

    padding: 38px 35px 32px;

    border: 1px solid var(--bontrip-border);

    border-radius: 27px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 12px 35px rgba(20, 40, 28, 0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.bontrip-step-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 42px rgba(20, 40, 28, 0.065);
}


/* =========================================================
   STEP NUMBER
   ========================================================= */

.bontrip-step-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0 auto 27px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #59d51b 0%,
            #30ad08 100%
        );

    color: #ffffff;

    font-size: 13px;
    line-height: 1;

    font-weight: 700;

    box-shadow:
        0 5px 12px rgba(60, 190, 15, 0.18);
}


/* =========================================================
   STEP TITLE
   ========================================================= */

.bontrip-step-card h3 {
    margin: 0 0 16px;

    color: var(--bontrip-text);

    font-size: 21px;
    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   STEP TEXT
   ========================================================= */

.bontrip-step-card p {
    max-width: 330px;

    margin: 0 auto;

    color: #68746e;

    font-size: 15px;
    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .bontrip-title {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .bontrip-how-title {
        font-size: 50px;
    }

    .bontrip-feature-grid,
    .bontrip-steps-grid {
        max-width: 900px;
    }

    .bontrip-feature-card,
    .bontrip-step-card {
        padding-left: 24px;
        padding-right: 24px;
    }

    .bontrip-feature-card h2 {
        font-size: 20px;
    }

    .bontrip-step-card h3 {
        font-size: 20px;
    }

    .bontrip-intro-text,
    .bontrip-how-text {
        font-size: 15px;
    }

    .bontrip-feature-card p,
    .bontrip-step-card p {
        font-size: 14px;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

    .bontrip-feature-grid,
    .bontrip-steps-grid {
        grid-template-columns: 1fr;

        max-width: 560px;
    }

    .bontrip-feature-card {
        min-height: 220px;
    }

    .bontrip-step-card {
        min-height: 240px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .bontrip-about-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    /* FIRST SECTION */

    .bontrip-about-intro {
        padding-top: 30px;
        padding-bottom: 45px;
    }


    /* LABEL */

    .bontrip-label {
        margin-bottom: 20px;

        padding: 9px 14px;

        font-size: 9px;
    }


    /* TITLES */

    .bontrip-title,
    .bontrip-how-title {
        font-size: 34px;

        line-height: 1.08;

        letter-spacing: -1.3px;
    }


    /* INTRO */

    .bontrip-intro-text {
        margin-top: 23px;

        font-size: 14px;

        line-height: 1.7;
    }

    .bontrip-intro-text p {
        margin-bottom: 20px;
    }


    /* FEATURE GRID */

    .bontrip-feature-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 35px;
    }


    /* FEATURE CARD */

    .bontrip-feature-card {
        min-height: auto;

        padding: 32px 25px 30px;

        border-radius: 21px;
    }


    /* CARD LINE */

    .bontrip-card-line {
        width: 40px;
        height: 3px;

        margin-bottom: 22px;
    }


    /* CARD TITLE */

    .bontrip-feature-card h2 {
        margin-bottom: 12px;

        font-size: 20px;
    }


    /* CARD TEXT */

    .bontrip-feature-card p {
        font-size: 14px;

        line-height: 1.65;
    }


    /* HOW SECTION */

    .bontrip-how-section {
        padding-top: 45px;
        padding-bottom: 45px;
    }


    /* HOW TEXT */

    .bontrip-how-text {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* STEPS */

    .bontrip-steps-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 35px;
    }


    /* STEP CARD */

    .bontrip-step-card {
        min-height: auto;

        padding: 30px 25px;

        border-radius: 21px;
    }


    /* STEP NUMBER */

    .bontrip-step-number {
        width: 43px;
        height: 43px;

        margin-bottom: 21px;

        font-size: 12px;
    }


    /* STEP TITLE */

    .bontrip-step-card h3 {
        margin-bottom: 12px;

        font-size: 19px;
    }


    /* STEP TEXT */

    .bontrip-step-card p {
        font-size: 14px;

        line-height: 1.65;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .bontrip-title,
    .bontrip-how-title {
        font-size: 29px;

        letter-spacing: -1px;
    }

    .bontrip-intro-text,
    .bontrip-how-text {
        font-size: 13px;
    }

    .bontrip-feature-card,
    .bontrip-step-card {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/***************despre noi end*****************/

/* =========================================================
   PACKAGES PAGE
   HTML + CSS într-un singur bloc
   Fără header / footer
========================================================= */

.packages-page {
  --green: #00991A;
  --green-light: #73CD08;
  --orange: #FF7F00;
  --yellow: #FFBE00;
  --blue: #0066AB;

  --dark: #102018;
  --text: #33433a;
  --muted: #718078;
  --border: #e5ebe7;
  --bg: #f7faf8;
  --white: #ffffff;

  --shadow: 0 20px 60px rgba(20, 50, 32, 0.08);

  font-family: "DM Sans", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);

  width: 100%;
  overflow: hidden;
}

.packages-page *,
.packages-page *::before,
.packages-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   GRADIENT TEXT
========================================================= */

.packages-gradient {
  background: linear-gradient(135deg, #73cd08, #00991a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* =========================================================
   HERO
========================================================= */

.packages-hero {
  text-align: center;

  padding: 75px 20px 55px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(115, 205, 8, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(0, 102, 171, 0.09),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7faf8 100%
    );
}


.packages-eyebrow {
  display: inline-flex;

  align-items: center;
  gap: 8px;

  padding: 7px 13px;

  border: 1px solid #dcefd7;
  border-radius: 999px;

  background: #eff9ed;

  color: var(--green);

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  margin-bottom: 18px;
}


.packages-eyebrow-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green-light);

  box-shadow: 0 0 0 4px rgba(115, 205, 8, 0.12);
}


.packages-hero h1 {
  margin: 0 auto;

  max-width: 850px;

  font-family: "Manrope", "DM Sans", Arial, sans-serif;

  color: var(--dark);

  font-size: clamp(36px, 5vw, 58px);

  line-height: 1.08;

  letter-spacing: -2px;
}


.packages-hero-description {
  max-width: 680px;

  margin: 20px auto 0;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================================
   PLANS WRAPPER
========================================================= */

.packages-wrapper {
  max-width: 1120px;

  margin: 0 auto;

  padding: 15px 20px 75px;
}


.packages-plans {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;

  align-items: stretch;
}


/* =========================================================
   PLAN CARD
========================================================= */

.packages-plan {
  position: relative;

  display: flex;
  flex-direction: column;

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 25px;

  padding: 34px;

  box-shadow: var(--shadow);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.packages-plan:hover {
  transform: translateY(-5px);

  box-shadow:
    0 30px 70px rgba(20, 50, 32, 0.12);
}


/* PREMIUM */

.packages-plan--premium {
  border: 2px solid var(--green);

  box-shadow:
    0 25px 70px rgba(0, 153, 26, 0.13),
    0 0 0 5px rgba(0, 153, 26, 0.04);
	overflow:hidden;
}


/* =========================================================
   RECOMMENDED
========================================================= */

.packages-recommended {
  position: absolute;

  top: 0;
  right: 0;

  padding: 9px 19px;

  border-radius: 0 0 0 16px;

  background:
    linear-gradient(
      135deg,
      #00991a,
      #73cd08
    );

  color: #fff;

  font-size: 10px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* =========================================================
   PLAN TOP
========================================================= */

.packages-plan-top {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 27px;
}


.packages-plan-title {
  margin: 0 0 7px;

  font-family: "Manrope", "DM Sans", Arial, sans-serif;

  color: var(--dark);

  font-size: 27px;

  line-height: 1.2;
}


.packages-plan-description {
  max-width: 320px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


.packages-plan-icon {
  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 16px;

  font-size: 21px;
}


.packages-plan--basic .packages-plan-icon {
  background: #edf8ee;

  color: var(--green);
}


.packages-plan--premium .packages-plan-icon {
  background:
    linear-gradient(
      135deg,
      #e8f8e8,
      #f1fbdc
    );

  color: var(--green);
}


/* =========================================================
   FEATURES
========================================================= */

.packages-features {
  display: flex;

  flex-direction: column;

  border-top: 1px solid var(--border);

  margin: 0;

  padding: 10px 0 0;
}


.packages-feature {
  display: grid;

  grid-template-columns: 28px minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;

  min-height: 58px;

  padding: 12px 0;

  border-bottom: 1px solid #edf1ee;
}


.packages-feature:last-child {
  border-bottom: none;
}


/* CHECK */

.packages-check {
  width: 23px;
  height: 23px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #edf8ee;

  color: var(--green);

  font-size: 12px;

  font-weight: 900;
}


/* FEATURE NAME */

.packages-feature-name {
  color: #45534b;

  font-size: 14px;

  line-height: 1.45;
}


/* FEATURE VALUE */

.packages-feature-value {
  color: var(--dark);

  font-size: 15px;

  font-weight: 800;

  white-space: nowrap;
}


.packages-plan--premium .packages-feature-value {
  color: var(--green);
}


/* =========================================================
   HIGHLIGHTED FEATURE
========================================================= */

.packages-feature--highlight {
  margin: 0 -12px;

  padding-left: 12px;
  padding-right: 12px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      rgba(115, 205, 8, 0.07),
      transparent
    );
}


/* =========================================================
   SMALL PREMIUM BADGE
========================================================= */

.packages-feature-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 4px 8px;

  border-radius: 999px;

  background: #fff4df;

  color: #c76a00;

  font-size: 9px;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  white-space: nowrap;
}


/* =========================================================
   BUTTONS
========================================================= */

.packages-plan-action {
  margin-top: 25px;
}


.packages-button {
  width: 100%;

  min-height: 48px;

  border: 0;

  border-radius: 14px;

  font-family: inherit;

  font-size: 14px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.packages-button--basic {
  background: #f0f4f1;

  color: var(--dark);
}


.packages-button--basic:hover {
  background: #e5ebe7;
}


.packages-button--premium {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #00991a,
      #37b51c
    );

  box-shadow:
    0 10px 25px rgba(0, 153, 26, 0.2);
}


.packages-button--premium:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 30px rgba(0, 153, 26, 0.28);
}


/* =========================================================
   TRUST
========================================================= */

.packages-trust {
  max-width: 850px;

  margin: 35px auto 0;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 25px;

  flex-wrap: wrap;

  color: #748078;

  font-size: 13px;
}


.packages-trust-item {
  display: flex;

  align-items: center;

  gap: 7px;
}


.packages-trust-icon {
  color: var(--green);

  font-weight: 900;
}


/* =========================================================
   COMPARISON
========================================================= */

.packages-comparison-section {
  padding: 75px 20px;

  background: #ffffff;

  border-top: 1px solid var(--border);
}


.packages-comparison {
  max-width: 1000px;

  margin: 0 auto;
}


.packages-section-heading {
  text-align: center;

  margin-bottom: 35px;
}


/*.packages-section-heading h2 {
  margin: 0;

  font-family: "Manrope", "DM Sans", Arial, sans-serif;

  color: var(--dark);

  font-size: 32px;

  line-height: 1.2;

  letter-spacing: -1px;
}*/


.packages-section-heading h2 {
  margin: 0 auto;

  max-width: 850px;

  font-family: "Manrope", "DM Sans", Arial, sans-serif;

  color: var(--dark);

  font-size: clamp(36px, 5vw, 58px);

  line-height: 1.08;

  letter-spacing: -2px;
}


.packages-section-heading p {
  margin: 9px auto 0;

  color: var(--muted);

  font-size: 15px;
}


/* =========================================================
   DIV COMPARISON - DESKTOP
========================================================= */

.packages-comparison-box {
  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 20px;

  background: #ffffff;
}


/* HEADER */

.packages-comparison-header {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 150px 150px;

  align-items: center;

  min-height: 64px;

  background: #f7faf8;

  border-bottom: 1px solid var(--border);

  font-size: 13px;

  font-weight: 800;
}


.packages-comparison-header > div {
  padding: 15px 20px;
}


.packages-comparison-header > div:not(:first-child) {
  text-align: center;
}


.packages-comparison-premium {
  color: var(--green);
}


/* ROW */

.packages-comparison-row {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 150px 150px;

  align-items: center;

  min-height: 60px;

  border-bottom: 1px solid var(--border);
}


.packages-comparison-row:last-child {
  border-bottom: none;
}


.packages-comparison-row > div {
  padding: 14px 20px;

  font-size: 14px;
}


.packages-comparison-row > div:not(:first-child) {
  text-align: center;
}


.packages-comparison-name {
  color: #45534b;
}


.packages-comparison-value {
  color: var(--dark);

  font-weight: 700;
}


.packages-comparison-value--premium {
  color: var(--green);

  font-weight: 800;
}


.packages-comparison-check {
  color: var(--green);

  font-size: 18px;

  font-weight: 900;
}


.packages-comparison-minus {
  color: #bdc5c0;

  font-size: 18px;
}


/* =========================================================
   FEATURED ROW
========================================================= */

.packages-comparison-row--featured {
  background:
    linear-gradient(
      90deg,
      rgba(115, 205, 8, 0.055),
      transparent
    );
}


/* =========================================================
   CTA
========================================================= */

.packages-cta {
  max-width: 1050px;

  margin: 65px auto 10px;

  padding: 55px 30px;

  border-radius: 30px;

  text-align: center;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(115, 205, 8, 0.28),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(255, 190, 0, 0.25),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #006d20,
      #008f20 50%,
      #0066ab
    );

  box-shadow:
    0 25px 70px rgba(0, 70, 40, 0.2);
}


.packages-cta h2 {
  margin: 0 0 12px;

  font-family: "Manrope", "DM Sans", Arial, sans-serif;

  color: #ffffff;

  font-size: clamp(27px, 4vw, 38px);

  line-height: 1.15;
}


.packages-cta p {
  max-width: 600px;

  margin: 0 auto;

  color: rgba(255, 255, 255, 0.82);

  font-size: 15px;

  line-height: 1.65;
}


.packages-cta-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  margin-top: 25px;

  padding: 0 25px;

  border: 0;

  border-radius: 13px;

  background: #ffffff;

  color: var(--green);

  font-family: inherit;

  font-size: 14px;

  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

  transition: transform 0.2s ease;
}


.packages-cta-button:hover {
  transform: translateY(-2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

  .packages-hero {
    padding: 55px 18px 45px;
  }


  .packages-plans {
    grid-template-columns: 1fr;
  }


  /* Premium primul pe mobil */

  .packages-plan--premium {
    order: -1;
  }


  .packages-plan {
    padding: 27px 22px;
  }


  /*
     Transformăm comparația într-o listă
     de carduri responsive.
  */

  .packages-comparison-box {
    border: none;

    overflow: visible;

    background: transparent;
  }


  .packages-comparison-header {
    display: none;
  }


  .packages-comparison-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    min-height: auto;

    margin-bottom: 10px;

    padding: 0;

    border: 1px solid var(--border);

    border-radius: 15px;

    background: #ffffff;

    overflow: hidden;
  }


  .packages-comparison-row:last-child {
    margin-bottom: 0;
  }


  .packages-comparison-row > div {
    padding: 14px 15px;
  }


  .packages-comparison-name {
    grid-column: 1 / -1;

    background: #f7faf8;

    border-bottom: 1px solid var(--border);

    font-weight: 700;
  }


  .packages-comparison-row > div:nth-child(2),
  .packages-comparison-row > div:nth-child(3) {
    text-align: center;

    font-size: 13px;
  }


  .packages-comparison-row > div:nth-child(2)::before,
  .packages-comparison-row > div:nth-child(3)::before {
    display: block;

    margin-bottom: 4px;

    color: #89958e;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;
  }


  .packages-comparison-row > div:nth-child(2)::before {
    content: "Basic";
  }


  .packages-comparison-row > div:nth-child(3)::before {
    content: "Premium";
  }


  .packages-cta {
    margin: 45px 14px 10px;

    padding: 42px 22px;

    border-radius: 24px;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .packages-hero h1 {
    font-size: 36px;

    letter-spacing: -1px;
  }


  .packages-hero-description {
    font-size: 15px;
  }


  .packages-wrapper {
    padding-left: 14px;
    padding-right: 14px;
  }


  .packages-plan {
    padding: 24px 18px;

    border-radius: 21px;
  }


  .packages-plan-title {
    font-size: 25px;
  }


  .packages-feature {
    grid-template-columns: 25px minmax(0, 1fr);

    align-items: start;

    min-height: auto;

    padding: 13px 0;
  }


  .packages-feature-value {
    grid-column: 2;

    margin-top: -5px;
  }


  .packages-feature-badge {
    grid-column: 2;

    width: fit-content;

    margin-top: -5px;
  }


  .packages-feature--highlight {
    margin-left: -8px;
    margin-right: -8px;

    padding-left: 8px;
    padding-right: 8px;
  }


  .packages-trust {
    gap: 16px;

    font-size: 12px;
  }


  .packages-comparison-section {
    padding: 55px 14px;
  }


  .packages-section-heading h2 {
    font-size: 28px;
  }


  .packages-cta h2 {
    font-size: 29px;
  }
}
/* =========================================================
   PRICING
========================================================= */

.packages-plan-pricing {
  display: flex;
  align-items: baseline;
  gap: 7px;

  margin: 0 0 22px;
  padding: 18px 0 20px;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.packages-price {
  font-family: "Manrope", "DM Sans", Arial, sans-serif;

  font-size: 38px;
  line-height: 44px;

  font-weight: 900;

  letter-spacing: -1.5px;

  color: var(--dark);
}

.packages-plan--premium .packages-price {
  background: linear-gradient(135deg, #73cd08, #00991a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.packages-price-currency {
  font-size: 15px;
  font-weight: 800;

  color: var(--muted);
}

.packages-price-period {
  font-size: 13px;
  font-weight: 600;

  color: var(--muted);
}


/* GRATUIT */

.packages-price--free {
  font-size: 34px;

  background: linear-gradient(135deg, #73cd08, #00991a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* PREMIUM BADGE */

.packages-price-highlight {
  display: inline-flex;

  align-items: center;

  margin-left: auto;

  padding: 5px 9px;

  border-radius: 999px;

  background: #eff9e9;

  color: var(--green);

  font-size: 9px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: .05em;
}


/* PRICE NOTE */

.packages-price-note {
  margin: -10px 0 22px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.5;
}


@media (max-width: 480px) {

  .packages-plan-pricing {
    padding: 16px 0 18px;
  }

  .packages-price {
    font-size: 34px;
  }

  .packages-price--free {
    font-size: 31px;
  }

  .packages-price-highlight {
    margin-left: auto;
  }

}