/* =========================================================================
   theme.css — Számít amit érzel
   -------------------------------------------------------------------------
   Ez a fájl a template (css/bootstrap.min.css + css/style.css) FÖLÖTT töltődik.
   Célja:
     1. Márka-színpaletta felülírása (a sablon ciánkékje helyett meleg, nyugodt
        terrakotta – illik a mentálhigiénés/terápiás profilhoz).
     2. Új, konverziós elemek: ragadós mobil hívósáv, CTA sáv, videó kártyák,
        ártáblázat, GYIK harmonika, űrlap, süti-sáv.
     3. Akadálymentesítés: fókuszjelölés, nagy érintőfelületek, kontraszt.

   A sablon eredeti fájljait NEM módosítjuk – így egy esetleges sablonfrissítés
   nem törli el a testreszabást.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Színpaletta
   ------------------------------------------------------------------------- */
:root {
    --sz-primary: #AE5A3C;          /* terrakotta – CTA, kiemelés */
    --sz-primary-dark: #8F4630;
    --sz-primary-light: #F3E4DD;
    --sz-dark: #26332F;             /* mély fenyőzöld – sötét szekciók */
    --sz-dark-soft: #33443E;
    --sz-sage: #7D9C8C;             /* zsálya – másodlagos akcentus */
    --sz-cream: #FAF6F2;            /* meleg törtfehér háttér */
    --sz-ink: #23201E;              /* fő szövegszín */
    --sz-muted: #6B6560;

    /* Bootstrap változók átírása, hogy a sablon saját szabályai is kövessék */
    --bs-primary: #AE5A3C;
    --bs-primary-rgb: 174, 90, 60;
    --bs-dark: #26332F;
    --bs-dark-rgb: 38, 51, 47;
    --bs-light: #FAF6F2;
    --bs-light-rgb: 250, 246, 242;
    --bs-body-color: #23201E;
}

/* A bootstrap.min.css-be fordított színosztályok felülírása.
   (A CSS-változó önmagában nem hat, mert a sablon Bootstrap buildjébe
   a ciánkék érték bele van égetve.) */
.btn-primary,
.bg-primary {
    background-color: var(--sz-primary) !important;
    border-color: var(--sz-primary) !important;
}
.text-primary { color: var(--sz-primary) !important; }
.border-primary { border-color: var(--sz-primary) !important; }
.bg-dark { background-color: var(--sz-dark) !important; }
.text-dark { color: var(--sz-dark) !important; }
.bg-light { background-color: var(--sz-cream) !important; }

.btn-primary {
    color: #fff !important;
    border-radius: 50rem;
    font-weight: 600;
    transition: background-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--sz-primary-dark) !important;
    border-color: var(--sz-primary-dark) !important;
    /* A sablon inset-box-shadow trükkjét felülírjuk olvashatóbb hover-re. */
    box-shadow: none !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--sz-primary) !important;
    border-color: var(--sz-primary) !important;
    border-radius: 50rem;
    font-weight: 600;
    background-color: transparent;
    transition: all .25s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--sz-primary) !important;
    border-color: var(--sz-primary) !important;
    color: #fff !important;
}

.btn-light {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--sz-primary) !important;
    border-radius: 50rem;
    font-weight: 600;
}
.btn-light:hover,
.btn-light:focus {
    background-color: var(--sz-primary-light) !important;
    border-color: var(--sz-primary-light) !important;
    color: var(--sz-primary-dark) !important;
    box-shadow: none !important;
}

.btn-outline-light {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .6) !important;
    border-radius: 50rem;
    font-weight: 600;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: #fff !important;
    color: var(--sz-dark) !important;
}

a { color: var(--sz-primary); }
a:hover, a:focus { color: var(--sz-primary-dark); }

body {
    color: var(--sz-ink);
    background-color: #ffffff;
    padding-bottom: 0;
}

/* Vízszintes túlcsordulás elleni védelem.
   FONTOS: `overflow-x: clip`-et használunk, NEM `hidden`-t.
   A `hidden` görgető konténert hoz létre, ami a `position: sticky` elemet
   (a fejlécet, amit a main.js tesz ragadóssá görgetéskor) megbontja.
   A `clip` nem hoz létre görgető konténert, ezért a sticky működik. */
html, body {
    overflow-x: clip;
}

/* -------------------------------------------------------------------------
   2. Akadálymentesítés
   ------------------------------------------------------------------------- */
/* „Ugrás a tartalomra” link – csak fókuszban látszik.
   FONTOS: NEM `left: -9999px`-szel rejtjük el, mert az megnöveli a dokumentum
   görgethető szélességét, és vízszintes túlcsordulást okoz mobilon.
   Helyette a szabványos `clip` technikát használjuk. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    width: auto;
    height: auto;
    padding: .75rem 1.25rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    z-index: 2000;
    background: var(--sz-primary);
    color: #fff;
    border-radius: 0 0 .5rem 0;
    font-weight: 600;
}

/* Látható fókuszjel mindenhol – a sablon nem adott. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--sz-primary);
    outline-offset: 2px;
    border-radius: .25rem;
}

/* Érintőfelület: minimum 44px magasság mobilon a fő gomboknak. */
@media (max-width: 991.98px) {
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn.rounded-pill { padding-left: 1.25rem; padding-right: 1.25rem; }
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. Fejléc / márka
   ------------------------------------------------------------------------- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    line-height: 1.1;
}
.brand-mark > i {
    color: var(--sz-primary);
    font-size: 1.9rem;
}
.brand-text { display: flex; flex-direction: column; }
.brand-nev {
    font-family: "Playfair Display", serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--sz-dark);
    letter-spacing: .01em;
}
.brand-alcim {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--sz-muted);
}

.navbar { min-height: 84px; }
.navbar .nav-link {
    font-weight: 600;
    color: var(--sz-dark);
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--sz-primary) !important; }

.navbar-cta { align-items: center; }

/* A topbar "Find A Location" helyett szöveg – igazítás */
.bg-dark .text-light,
.bg-dark a.text-light { color: rgba(255, 255, 255, .88) !important; }
.bg-dark a.text-light:hover { color: #fff !important; }

/* -------------------------------------------------------------------------
   4. Hero (főoldal)
   ------------------------------------------------------------------------- */
.header-carousel .header-carousel-item { position: relative; }
.hero-kep {
    height: 78vh;
    min-height: 520px;
    max-height: 780px;
    object-fit: cover;
    object-position: center 22%;
}
.header-carousel .carousel-caption {
    background: linear-gradient(100deg, rgba(20, 26, 24, .88) 0%, rgba(20, 26, 24, .62) 55%, rgba(20, 26, 24, .30) 100%);
}
.header-carousel .carousel-caption-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.hero-megjegyzes { color: rgba(255, 255, 255, .78); font-size: .95rem; }

@media (max-width: 767.98px) {
    .hero-kep { height: 76vh; min-height: 460px; object-position: center 15%; }
    .header-carousel .carousel-caption-content h1 { font-size: 2.4rem; }
    .header-carousel .carousel-caption-content p { font-size: 1rem !important; }
    .hero-cta .btn { width: 100%; }
}

/* Aloldali fejléc – a háttérkép és a kivágás a `_data/kepek.js`-ből jön
   (`fejlecKep` / `fejlecPozicio`): a `breadcrumb.njk` inline stílusként teszi
   rá a `--fejlec-kep` / `--fejlec-pozicio` változóra. Így a kép cseréje egy
   sor az adatfájlban, itt nem kell hozzányúlni.
   A 68%-os sötét réteg (`--fejlec-reteg`) azért kell, hogy a fehér cím és a
   világos alcím a fotó legvilágosabb részein is elérje a 4,5:1 kontrasztot
   (mérve: `_tools\bella-kapcsolat-fejlec.mjs`, lásd TODO.md).
   Szándékosan HOSSZÚ tulajdonságok (nem `background` shorthand): a `var()` a
   shorthandben a `/ cover` miatt törékeny. */
.bg-breadcrumb {
    --fejlec-reteg: rgba(20, 26, 24, .68);
    background-image: linear-gradient(var(--fejlec-reteg), var(--fejlec-reteg)),
                      var(--fejlec-kep, url(../img/izabella-portre.jpg));
    background-position: var(--fejlec-pozicio, center 20%);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 170px 0 70px 0;
}
/* Ha EGY oldal mégis más hátteret kapna, az itt írható felül – a fejléc megkapja
   az oldal slugját (`breadcrumb.njk`), pl.:
   .bg-breadcrumb--arak { --fejlec-kep: url(../img/par-es-csalad.jpg); } */
@media (max-width: 767.98px) {
    .bg-breadcrumb { padding: 120px 0 50px 0; }
    .bg-breadcrumb h1.display-3 { font-size: 2rem; }
}
/* A fejléc alcíme a fotó fölötti sötét rétegen ül. A sablon `text-white-50`-je
   (50% fehér) a mért legvilágosabb képrésznél 2,5–2,8:1 volt – olvashatatlan.
   A 85%-os fehér a sötét rétegen 5:1 fölött marad. */
.bg-breadcrumb .fejlec-alcim { color: rgba(255, 255, 255, .85); }

/* -------------------------------------------------------------------------
   5. Szekció-címek és kártyák
   ------------------------------------------------------------------------- */
.udvozlo-kep {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center 20%;
}
/* A „Köszöntelek" szekció portréja: ez ÁLLÓ keret, ezért itt a közeli portré
   a helyes – az egész arc látszik. Ne cseréld fekvő képre. */

/* --- Szolgáltatás-kártya kép ---------------------------------------------
   @en észrevétele: „Bella van a középpontban, más nem is látszik, ez elég
   szerencsétlen". Ennek három technikai oka volt:

     1. A három fotó eltérő arányú – kettő ÁLLÓ (1024×1536, 2:3), egy FEKVŐ
        (1024×683, 3:2). Azonos kártyaszélesség mellett ebből ~525 px, illetve
        ~233 px magas kép lett: a kártyák eltérő magasságúak és léptékűek.
     2. Az `object-fit: cover` alapértelmezett `object-position: center`
        az ÁLLÓ fotó közepét mutatta – egész alakos portrénál ez a törzs.
     3. A hover `scale(1.3)`-mal pont a közepére, a törzsre nagyított.

   A megoldás: egységes 4:3 keret minden kártyán, és a kivágás képenként
   állítható (`kep.pozicio` a szolgaltatasok.js-ben), hogy az ARC kerüljön
   a keretbe – ugyanazzal a technikával, mint a fejlécnél fent.

   Az arány, a nagyítás és a hover szín a `_data/kepek.js`-ben van, és a build
   generálja belőle a `/assets/css/kepek.css` változókat – így egy helyen van
   az igazság. A `kepek-teszt.html` összehasonlító lapon ellenőrizhető. */
.service .service-item .service-img img {
    aspect-ratio: var(--sz-kartya-arany, 4 / 3);
    height: auto;
    object-fit: cover;
    /* Az `object-position` inline stílusként jön a képenkénti adatból. */
    transition: transform .5s ease;
}

.service .service-item .service-img:hover img {
    /* A sablon `scale(1.3)`-a túl erős volt, és a közepére zoomolt. */
    transform: scale(var(--sz-hover-nagyitas, 1.05));
    transform-origin: var(--sz-hover-kozep, center 25%);
}

.service .service-item:hover .service-img::before {
    /* A sablon ciánkékje (21,185,217) helyett a márka terrakottája.
       Ez a szín a sablonból maradt benn – márkához igazítva. */
    background: var(--sz-hover-szin, rgba(174, 90, 60, .28));
}

/* --- Szolgáltatás részletes oldal – nagy kép -----------------------------
   Korábban a 2:3 arányú fotó a `col-lg-5` oszlopban ~690 px magasra nőtt.
   A 4:5 klasszikus portréarány: megmarad a portré jelleg, de a kép nem
   nyomja el a mellette lévő tartalmat. */
.szolgaltatas-fokep {
    /* Az arány INLINE stílusként jön, mert a fotó irányától függ (álló → 4:5,
       fekvő → 3:2). Egy fekvő fotót 4:5 álló keretbe kényszerítve a kép
       870 px magasra nőne. A `layoutcheck.mjs` 700 px-nél jelez. */
    object-fit: cover;
}

/* A videó-kártyák posztere ugyanazokból a fotókból készül, ezért ott is
   felfelé toljuk a kivágást, hogy az arc látszódjon. */
.video-kartya__poszter { object-position: center 25%; }

.feature-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sz-primary);
    font-size: 1.4rem;
    flex: 0 0 auto;
}
.vegzettseg-kartya .feature-icon,
.garancia-kartya .feature-icon { margin-bottom: 1rem; }

/* A sablon „barna villanás" hover effektje a `.feature-item` kártyákon
   (főoldal „Hogyan dolgozom", /arak/ „Tudnivalók", szolgáltatás-garanciák):
   a `::before` réteg terrakottára festette a teljes kártyát. A sablon a
   szöveget ilyenkor fehérre váltja – de csak a `.feature-content` wrapperen
   belül, ami a mi markupunkban nincs, ezért a szöveg sötéten maradt a barna
   alapon, azaz olvashatatlanul. A kártyák ráadásul NEM kattinthatók, tehát a
   hover félrevezető is volt („lehet rá menni"). Törölve; a kártya képe,
   szegélye és elrendezése változatlan. */
.feature .feature-item::before { display: none; }
.feature .feature-item { transition: none; }

/* --- A `.feature-item` kártyák BELSŐ elrendezése -------------------------
   A sablon `.feature .feature-item`-je `display: flex` (sor) és NINCS belső
   margója. A sablon ehhez `.feature-content` wrappert vár (ikon + egy
   szövegblokk = két flex-elem), ami a mi markupunkban nincs – ezért az ikon,
   a cím és a bekezdés **három** flex-elemként egymás MELLÉ került: a cím
   85 px széles oszlopba szorult (9 sor), és hozzáért az ikonhoz.

   Mérve (`_tools\bella-kartya-meret.mjs`, főoldal, javítás előtt):
     .feature-item  display: flex, row, padding: 0
     ikon  62×62  ·  cím 85×224 (9 sor)  ·  szöveg 207×240
     hézag ikon→cím vízszintesen: 0 px

   Javítás: függőleges folyás (ikon felül, alatta a cím, alatta a szöveg) és
   belső margó. A `!important` azért kell, mert a markup `mb-3` Bootstrap
   segédosztálya szintén `!important`-tal dolgozik. */
.feature .feature-item {
    display: block;
    padding: 1.5rem 1.6rem;
}
.feature .feature-item .feature-icon { margin-bottom: 1.25rem !important; }
.feature .feature-item h3 { margin-bottom: .75rem !important; }

.vegzettseg-kartya,
.garancia-kartya,
.ar-kartya,
.kapcsolodo-kartya,
.kapcsolat-kartya,
.lepes-kartya,
.szemlelet-kartya {
    border: 1px solid rgba(38, 51, 47, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vegzettseg-kartya:hover,
.garancia-kartya:hover,
.kapcsolodo-kartya:hover,
.kapcsolat-kartya:hover,
.lepes-kartya:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(38, 51, 47, .10);
}
.kapcsolodo-kartya,
.kapcsolat-kartya { color: inherit; text-decoration: none; }

/* CTA sáv (a lábléc előtt) */
.cta-sav {
    background: linear-gradient(120deg, var(--sz-dark) 0%, var(--sz-dark-soft) 55%, var(--sz-primary-dark) 100%);
}

/* Sötét szakaszok (szemlélet, diszkréció) */
.idezet-szakasz {
    background: linear-gradient(rgba(28, 36, 33, .93), rgba(28, 36, 33, .93)),
                url(../img/par-es-csalad.jpg) center center / cover no-repeat;
}
.szemlelet-idezet { border: 0; padding: 0; margin: 0; }
.szemlelet-idezet i { font-size: 2rem; }
.szemlelet-idezet p { color: #fff; font-family: "Playfair Display", serif; font-style: italic; }
.szemlelet-idezet .blockquote-footer { font-size: .95rem; }

/* Idézet a szolgáltatás oldalon */
.szolgaltatas-idezet {
    border-left: 4px solid var(--sz-primary);
    padding: .5rem 0 .5rem 1.5rem;
    background: var(--sz-primary-light);
    border-radius: 0 .5rem .5rem 0;
    padding-right: 1.5rem;
}
.szolgaltatas-idezet p { font-style: italic; }

/* Listák pipával */
.szolgaltatas-lista li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .6rem;
}
.szolgaltatas-lista li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--sz-primary);
    position: absolute;
    left: 0;
    top: .1rem;
}
ol.szolgaltatas-lista li::before { content: none; }
ol.szolgaltatas-lista li { padding-left: 0; }

/* Lépés-kártyák (1-2-3) */
.lepes-szam {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sz-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   6. Videó kártyák – lusta betöltés, saját poszter
   ------------------------------------------------------------------------- */
.video-kartya {
    background: var(--sz-cream);
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid rgba(38, 51, 47, .08);
    display: flex;
    flex-direction: column;
}
.video-kartya__gomb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.video-kartya__poszter {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .35s ease;
}
.video-kartya__gomb:hover .video-kartya__poszter { transform: scale(1.04); }
.video-kartya__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 72 px: kényelmes érintőfelület (>44 px), de nem takarja el a fotót. */
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* Tömör márkaszín + puha árnyék: a világos fotón is jól elválik. */
    background: var(--sz-primary);
    box-shadow: 0 8px 22px rgba(20, 26, 24, .34);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding-left: 4px;
    transition: background-color .25s ease, transform .25s ease;
}
.video-kartya__gomb:hover .video-kartya__play {
    background: var(--sz-primary-dark);
    transform: translate(-50%, -50%) scale(1.06);
}
.video-kartya__szoveg { padding: 1rem 1.25rem 1.25rem; background: #fff; }

/* --- A videó-gomb a sablon „video” blokkjában (`.video .btn-play`) -------
   A sablon gombja: 100 px-es, FAKÓ barack korong (`--bs-secondary` #EFA286)
   + mögötte egy 115 px-es **PULZÁLÓ** terrakotta gyűrű (`pulse-border`
   animáció, 1,5 s). A fotó közepén – gyakran az arcon – ez egy nagy,
   elmosódott, folyton mozgó foltot adott, ami eltakarta az alanyt;
   @en jelezte, hogy csúnya.
   Helyette: kisebb, TÖMÖR terrakotta korong éles fehér háromszöggel és puha
   árnyékkal; a pulzáló gyűrű megszűnt. A sablon fájljához nem nyúlunk, ezért
   a felülírás itt történik (a `theme.css` a `style.css` UTÁN töltődik).
   A gomb mérete a háromszög méretét követi (a korongot a `::after` adja). */
.video .btn-play { width: 20px; height: 26px; }
.video .btn-play::before { content: none; }   /* pulzáló gyűrű törölve */
.video .btn-play::after {
    width: 76px;
    height: 76px;
    background: var(--sz-primary);
    box-shadow: 0 8px 22px rgba(20, 26, 24, .34);
    transition: background-color .25s ease, transform .25s ease;
}
.video .btn-play span {
    border-left: 20px solid var(--bs-white);
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}
.video .btn-play:hover::after { background: var(--sz-primary-dark); transform: translate(-50%, -50%) scale(1.06); }
.video .btn-play:focus-visible::after { outline: 3px solid #fff; outline-offset: 4px; }

/* -------------------------------------------------------------------------
   7. Ártáblázat és ár kártyák
   ------------------------------------------------------------------------- */
.ar-tabla { --bs-table-bg: transparent; margin-bottom: 0; }
.ar-tabla thead th {
    border-bottom: 2px solid var(--sz-primary);
    color: var(--sz-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .06em;
}
.ar-tabla tbody th { font-weight: 600; color: var(--sz-dark); }
.ar-tabla tbody td, .ar-tabla tbody th { padding-top: 1rem; padding-bottom: 1rem; }
.ar-kartya { border-top: 4px solid var(--sz-primary); }

/* -------------------------------------------------------------------------
   8. GYIK harmonika
   ------------------------------------------------------------------------- */
.gyik-accordion .accordion-item {
    border: 1px solid rgba(38, 51, 47, .1);
    border-radius: .5rem !important;
    overflow: hidden;
    margin-bottom: .75rem;
    background: #fff;
}
.gyik-accordion .accordion-button {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--sz-dark);
    background: #fff;
    padding: 1.15rem 1.25rem;
    box-shadow: none;
}
.gyik-accordion .accordion-button:not(.collapsed) {
    color: var(--sz-primary);
    background: var(--sz-primary-light);
}
.gyik-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.gyik-accordion .accordion-button::after {
    background-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
}
.gyik-accordion .accordion-body {
    padding: 1.25rem;
    color: var(--sz-ink);
}
.gyik-accordion .accordion-collapse { border-top: 1px solid rgba(38, 51, 47, .08); }

/* -------------------------------------------------------------------------
   9. Űrlap
   ------------------------------------------------------------------------- */
.appointment-form {
    background: #fff !important;
    border: 1px solid rgba(38, 51, 47, .1);
    box-shadow: 0 18px 48px rgba(38, 51, 47, .10);
}
.appointment-form .form-control,
.appointment-form .form-select {
    border: 1px solid rgba(38, 51, 47, .18);
    background-color: #fff;
    color: var(--sz-ink);
    border-radius: .4rem;
}
.urlap-idopont .form-control,
.urlap-idopont .form-select {
    border: 1px solid rgba(38, 51, 47, .18);
    border-radius: .4rem;
    background-color: #fff;
    color: var(--sz-ink);
}
.urlap-idopont .form-control:focus,
.urlap-idopont .form-select:focus {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 .2rem rgba(174, 90, 60, .18);
}
.urlap-idopont .form-label { font-weight: 600; color: var(--sz-dark); }
.urlap-idopont .form-text { color: var(--sz-muted); }
.urlap-idopont .form-check-input:checked {
    background-color: var(--sz-primary);
    border-color: var(--sz-primary);
}
.urlap-idopont .form-check-input:focus {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 .2rem rgba(174, 90, 60, .18);
}

/* Sürgősségi doboz */
.surgos-doboz {
    background: #fff;
    border-left: 5px solid #C0392B;
    box-shadow: 0 8px 26px rgba(38, 51, 47, .08);
}

/* -------------------------------------------------------------------------
   10. Ragadós mobil hívósáv  (a DeepSeek-kritika 1. pontja)
   ------------------------------------------------------------------------- */
.mobil-hivo-sav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    gap: 1px;
    /* Védelem a véletlen vízszintes túlcsordulás ellen */
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    background: rgba(38, 51, 47, .12);
    box-shadow: 0 -6px 22px rgba(38, 51, 47, .18);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobil-hivo-sav__gomb {
    flex: 1 1 50%;
    /* A flex-elemek alapértelmezett min-width:auto értéke miatt a hosszú
       felirat kifeszítheti a sávot a képernyőn túlra. */
    min-width: 0;
    overflow: hidden;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    letter-spacing: .02em;
    white-space: nowrap;
}
.mobil-hivo-sav__gomb span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mobil-hivo-sav__gomb i { font-size: 1.05rem; }
.mobil-hivo-sav__gomb--tel { background: var(--sz-primary); color: #fff; }
.mobil-hivo-sav__gomb--tel:hover { background: var(--sz-primary-dark); color: #fff; }
.mobil-hivo-sav__gomb--urlap { background: var(--sz-dark); color: #fff; }
.mobil-hivo-sav__gomb--urlap:hover { background: var(--sz-dark-soft); color: #fff; }

/* A ragadós sáv ne takarja el a lap alját mobilon */
@media (max-width: 991.98px) {
    body { padding-bottom: 58px; }
    .back-to-top { bottom: 76px !important; }
}

/* -------------------------------------------------------------------------
   11. Süti-sáv
   ------------------------------------------------------------------------- */
.suti-sav {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1060;
    background: var(--sz-dark);
    color: #fff;
    border-radius: .6rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    font-size: .92rem;
    /* `left`+`right`+`max-width` együtt: a doboz sose legyen szélesebb a
       képernyőnél, és a hosszú szöveg törjön. */
    max-width: min(1100px, calc(100vw - 2rem));
    margin: 0 auto;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.suti-sav__szoveg { flex: 1 1 380px; min-width: 0; }
.suti-sav a { color: #fff; text-decoration: underline; }
.suti-sav__gombok { display: flex; gap: .5rem; flex-wrap: wrap; min-width: 0; }
@media (max-width: 991.98px) {
    /* A süti-sáv a ragadós hívósáv fölött legyen */
    .suti-sav { bottom: 72px; }
}

/* -------------------------------------------------------------------------
   12. Lábléc
   ------------------------------------------------------------------------- */
/* A sablon csak a lábléc LINKJEIT színezi (`.footer-item a`), ezért a
   bekezdések a világos body-szövegszínt örökölték: a „Számít amit érzel” cím
   alatti bemutatkozó mondat sötéten jelent meg a sötét láblécen
   (mért kontraszt 1,23:1 – gyakorlatilag olvashatatlan). A lábléc teljes
   szövege világos lesz; a linkek, a `.text-white-50` és a „KITÖLTENDŐ”
   jelölések megtartják a saját színüket. */
.footer {
    background: var(--sz-dark) !important;
    color: rgba(255, 255, 255, .82);
}
.footer .footer-item a { color: rgba(255, 255, 255, .82); }
.footer .footer-item a:hover { color: #fff; padding-left: .25rem; }
.copyright { background: #1C2623 !important; }
/* A sablon szerzői hivatkozása a terrakotta link-színt kapta, ami a sötét
   sávon csak 3,2:1 – a hivatkozás és az aláhúzás megmarad (a licenc így kéri),
   de világos színt kap, hogy olvasható legyen. */
.copyright a.border-bottom { color: rgba(255, 255, 255, .82); }
.copyright a.border-bottom:hover { color: #fff; }

/* -------------------------------------------------------------------------
   13. Jogi oldalak (adatvédelem, impresszum)
   ------------------------------------------------------------------------- */
.jogi-szoveg h2 {
    font-size: 1.35rem;
    margin-top: 2.25rem;
    margin-bottom: .9rem;
    color: var(--sz-dark);
}
.jogi-szoveg p, .jogi-szoveg li { line-height: 1.75; }
.jogi-szoveg dt { font-weight: 600; color: var(--sz-dark); }

/* -------------------------------------------------------------------------
   14. Egyéb
   ------------------------------------------------------------------------- */
.testimonial-item { border-left: 4px solid var(--sz-primary); }

.blog-kartya img { aspect-ratio: 16 / 10; object-fit: cover; }

/* -------------------------------------------------------------------------
   14. KITÖLTENDŐ jelölések (DEMÓ MÓD)
   -------------------------------------------------------------------------
   Amíg `site.demoMod` igaz, a hiányzó adatok helyén látható jelölés áll.
   Szándékosan FELTŰNŐ – hogy a megrendelő észrevegye, és hogy senki ne
   téveszthesse össze kész tartalommal. Élesítés után ezek eltűnnek.
   ------------------------------------------------------------------------- */
.kitoltendo-jelveny {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #FFF3CD;
    color: #7A4B00;
    border: 1px dashed #C98A00;
    border-radius: .25rem;
    padding: .15rem .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.kitoltendo-jelveny--kicsi {
    font-size: .68rem;
    padding: .1rem .4rem;
}

/* A sötét láblécben/sávban is olvasható legyen */
.bg-dark .kitoltendo-jelveny,
.footer .kitoltendo-jelveny {
    background: rgba(255, 215, 0, .18);
    color: #FFD966;
    border-color: rgba(255, 215, 0, .5);
}

/* Közösségi média helyőrző ikon */
.kozossegi-helyorzo {
    border-style: dashed !important;
    border-color: #C98A00 !important;
    color: #C98A00 !important;
    cursor: help;
    opacity: .75;
}
.kozossegi-helyorzo:hover { opacity: 1; }
.footer .kozossegi-helyorzo,
.bg-dark .kozossegi-helyorzo {
    border-color: rgba(255, 215, 0, .6) !important;
    color: #FFD966 !important;
    background: transparent !important;
}

/* Részletes kitöltendő doboz */
.kitoltendo-doboz {
    background: #FFFBF0;
    border: 1px dashed #C98A00;
    border-left: 5px solid #C98A00;
    border-radius: .5rem;
    padding: 1.25rem;
    height: 100%;
}
.kitoltendo-doboz__fej {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}
.kitoltendo-doboz__fej strong {
    font-size: 1.05rem;
    color: var(--sz-dark);
}
.kitoltendo-doboz__adatok dt {
    color: #7A4B00;
    font-weight: 600;
}
.kitoltendo-doboz__adatok code {
    background: #FFF3CD;
    color: #7A4B00;
    padding: .1rem .35rem;
    border-radius: .2rem;
    font-size: .82rem;
    word-break: break-word;
}

.kitoltendo-osszefoglalo {
    background: #FFFBF0;
    border: 2px dashed #C98A00;
}

/* Nyomtatásban is látszódjon, hogy mi hiányzik */
@media print {
    .kitoltendo-jelveny,
    .kitoltendo-doboz { background: #fff !important; border-color: #000 !important; color: #000 !important; }
}

/* Nyomtatási nézet – a ragadós sávok ne jelenjenek meg papíron */
@media print {
    .mobil-hivo-sav, .suti-sav, .back-to-top, .navbar, .bg-dark, .cta-sav { display: none !important; }
    body { padding-bottom: 0; }
}