/* color mode */
.color-mode .dropstart .dropdown-toggle:before{
    display: none;
}
.color-mode .dropdown-menu.show {
    display: block !important;
}

.color-mode .dropdown-menu {
    display: none !important;
    z-index: 9999;
}

.color-mode .dropdown .btn {
    border: none;
}

.color-mode .dropdown-toggle:after {
    display: none;
}

/* ==========================================================
   Agendy brand overrides (feature/agendy-public-arculat)
   ========================================================== */
.agendy-page-title {
    background: linear-gradient(120deg, #292dc2 0%, #0084e9 100%);
}
.agendy-page-title h1 { color: #fff; }
.agendy-page-title ul li a,
.agendy-page-title ul li { color: rgba(255,255,255,0.75); }
.agendy-page-title ul li a:hover { color: #fff; }

/* Chrome-free standalone booking page (Roland/marveen 9825/9828, pixel v-terv, kartya
   agendy-linked-calendar-standalone-redesign): wraps {$content} in index_hu/en.tpl's new
   ?bare=1 branch. Pale, generic agendy-brand-toned backdrop -- NOT per-tenant colored (that's
   already the WIDGET's own job via [data-agendy-branded="1"]/--agendy-brand-primary on
   .agendy-bw itself; this outer frame is a step further up the DOM and stays brand-generic
   rather than duplicating that mechanism a second time). */
.agendy-bare-page {
    min-height: 100vh;
    background:
        radial-gradient(560px 320px at 50% -80px, rgba(41, 45, 194, .07), transparent),
        #f6f7fb;
    padding: 3.5rem 1.25rem 4rem;
}
/* Platform credit (Roland, marveen 9837): discreet, small, does not compete with the widget's
   own (toggleable) footer above it -- muted color, no underline until hover, plain text label
   rather than a logo/badge so it reads as a quiet mention, not a second brand mark. */
.agendy-bare-page__credit {
    text-align: center;
    margin: 1.5rem 0 0;
}
.agendy-bare-page__credit a {
    font-size: .7rem;
    color: #b7b9ca;
    text-decoration: none;
}
.agendy-bare-page__credit a:hover { text-decoration: underline; }

/* Widget visual polish (pixel latvanyterv, Roland jovahagyta -- "kool", marveen 9634/9666/9671):
   Roland a jelenlegi widgetet "nyers formazasunak" latta a demo-oldalon. Scope-egyeztetes pixellel
   (msg 9672-9675, marveen kartyazta a het-racsos datumvalasztot KULON, jovobeli otletkent -- lasd
   agendy-widget-week-grid-datepicker): EBBEN a korben CSAK a tiszta CSS-reszek, a MEGLEVO date-input
   +per-nap-REST szerkezetre epitve, semmilyen markup/JS-strukturat nem valtoztat. A widget mostantol
   sajat kartya-keret + arnyek (nem tamaszkodik a befogado oldal hatteret), a fejlec logo+nev+alcim
   egy sorban (grid-area, wrapper div nelkul -- lasd lent), a szolgaltatas-lista chip/pill alaku
   (pixel .chip mintaja). EGY TARTALMI (nem csak vizualis) donteset ERDEMES TUDNI: a szolgaltatas-
   leiras (.agendy-bw__card-desc) a chip-nezetben elrejtve -- pixel mockupja sem mutatja, de ez MAR
   nem tisztan dekorativ valtoztatas, informacio-lathatosagot erint minden mar elo tenant ugyfele
   szamara. Ha ez gond, konnyen visszaallithato (egy display:block a chip-en belul). */
.agendy-bw {
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e2ee;
    border-radius: 16px;
    padding: 1.75rem 1.85rem 1.6rem;
    box-shadow: 0 16px 40px rgba(20, 30, 20, .08);
}
/* logo+cim+alcim egy sorban, wrapper div nelkul: a 3-4 gyerek (logo/h1/p/langs) mind kozvetlen
   gyereke a .agendy-bw__head-nek a booking-widget.tpl-ben (nincs kulon "text" wrapper) -- CSS Grid
   nevesitett teruletekkel megoldja ezt UJ markup nelkul. Logo nelkuli naptarnal a "logo" oszlop
   tartalom hianyaban 0-ra esik ossze, nincs ures rés. */
/* 3-column head (pixel v-terv, Roland "jobb felso sarokba" kerese, marveen 10307/10322):
   langs moved into its OWN column next to title/subtitle so the switcher sits top-right instead
   of on its own row below them. Narrow viewports fall back to the old 2-column stack (media query
   below custom.css.agendy-bw__lang) -- there just isn't room for a 3rd column under ~480px. */
.agendy-bw__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo title langs" "logo subtitle langs" "openpage openpage openpage";
    align-items: start;
    column-gap: .75rem;
    text-align: left;
    margin-bottom: 1.6rem;
}
.agendy-bw__title { grid-area: title; color: #1f194c; font-weight: 600; font-size: 1.05rem; }
.agendy-bw__subtitle { grid-area: subtitle; color: #575a7b; font-size: .85rem; }
/* .agendy-bw__logo's SIZE (max-height) stays in agendyService.css (functional/structural, per that
   file's own boundary) -- grid-area is a LAYOUT concern tied to the grid this file just introduced,
   so it lives here, as an override on top. */
.agendy-bw__logo { grid-area: logo; }
/* Language-switcher pill group (pixel v-terv). The 2/3-class selectors here are DELIBERATELY more
   specific than agendyService.css's plain .agendy-bw__langs/.agendy-bw__lang placeholder rules
   (kanban fa6d4d85) -- that keeps this override correct regardless of the two files' load order,
   which turned out to be documented INCONSISTENTLY between them (custom.css:163's old comment on
   the footer override says the opposite of agendyService.css's own comment; the actual <link>
   order in index_hu/en.tpl has custom.css BEFORE {$cms.css}, so agendyService.css loads last --
   flagged to marveen/pixel as a separate pre-existing bug, not fixed here). No markup change: the
   .agendy-bw__langs/.agendy-bw__lang elements already exist in booking-widget.tpl. */
.agendy-bw__head .agendy-bw__langs {
    grid-area: langs;
    margin-top: 0;
    align-self: start;
    justify-self: end;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: #f4f5fb;
    border: 1px solid #ececf6;
    border-radius: 999px;
    flex-wrap: wrap;
}
.agendy-bw__head .agendy-bw__langs .agendy-bw__lang {
    padding: .32rem .62rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #575a7b;
    text-decoration: none;
    opacity: 1;
    transition: background .15s, color .15s;
}
.agendy-bw__head .agendy-bw__langs .agendy-bw__lang:hover { color: #292dc2; }
.agendy-bw__head .agendy-bw__langs .agendy-bw__lang.is-active {
    background: #1f194c;
    color: #fff;
    font-weight: 700;
}
@media (max-width: 480px) {
    .agendy-bw__head {
        grid-template-columns: auto 1fr;
        grid-template-areas: "logo title" "logo subtitle" "langs langs" "openpage openpage";
    }
    .agendy-bw__head .agendy-bw__langs { justify-self: end; margin-top: .5rem; }
}
/* Open-on-own-page link (Roland, marveen 9841) -- hidden by default (template can't know if this
   render ends up iframed), shown by JS only inside an actual embed. Small/muted so it doesn't
   compete with the title -- same visual weight as the widget's own footer credit. */
.agendy-bw__openpage {
    grid-area: openpage;
    margin-top: .5rem;
    font-size: .74rem;
    color: #9497b8;
    text-decoration: none;
}
.agendy-bw__openpage:hover { color: #292dc2; text-decoration: underline; }
.agendy-bw__group-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #8386a3; margin: 0 0 .6rem;
}
.agendy-bw__list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
/* Dropdown megjelenites-mod (marveen 9723, kartya agendy-embed-display-settings) -- ugyanazok a
   szinek/formak mint a lista-nezetben (border/radius/tipografia), csak select+gomb elrendezesben. */
.agendy-bw__select-row { display: flex; gap: .6rem; margin: 0 0 1.4rem; flex-wrap: wrap; }
.agendy-bw__select {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    padding: .55rem .8rem;
    font-size: .88rem;
    color: #1f194c;
    font-family: inherit;
}
.agendy-bw__select:focus { outline: none; border-color: #292dc2; }
.agendy-bw__card {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    border: 1px solid #dcdcec;
    border-radius: 999px;
    padding: .5rem .5rem .5rem 1.1rem;
    transition: border-color .15s ease;
}
.agendy-bw__card:hover { border-color: #292dc2; }
.agendy-bw__card-name { display: block; font-weight: 600; color: #1f194c; font-size: .88rem; }
.agendy-bw__card-desc { display: none; }
.agendy-bw__card-meta { display: flex; align-items: center; gap: .6rem; }
.agendy-bw__card-dur { color: #9497b8; font-size: .74rem; }
.agendy-bw__card-price { font-weight: 600; color: #292dc2; font-size: .82rem; }
.agendy-bw__pick {
    background: #292dc2;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .45rem 1rem;
    font-weight: 500;
    font-size: .78rem;
}
.agendy-bw__pick:hover { background: #0084e9; }
.agendy-bw__pick:disabled { opacity: .5; cursor: not-allowed; }
.agendy-bw__pick:disabled:hover { background: #292dc2; }
.agendy-bw__empty { text-align: center; color: #9497b8; padding: 3rem 0; }
.agendy-bw__card-main { display: flex; flex-direction: row; align-items: baseline; gap: .5rem; }

/* footer credit -- overrides agendyService.css's unbranded placeholder (right-aligned, opacity .6)
   with pixel's centered/muted styling.
   THE OLD COMMENT HERE CLAIMED "custom.css loads after that file so this wins the cascade" AND THAT
   WAS FALSE, which is why this override silently did not apply: index_hu.tpl loads custom.css on
   line 25 and {$cms.css} (which brings agendyService.css) on line 26, so agendyService.css lands
   LAST. With identical single-class specificity it won all four properties -- measured in a real
   browser, not reasoned about: computed text-align was `right` (not center), margin-top 12px,
   font-size 11px, opacity 0.6. The credit had been rendering as the placeholder all along, and the
   comment asserting the opposite is what hid it. Scoped one level deeper so the override wins on
   specificity regardless of load order -- the same fix plex used for .agendy-bw__langs above.
   (tars, 2026-07-30; found while correcting the load-order comment marveen filed as a doc nit.) */
.agendy-bw .agendy-bw__footer { text-align: center; margin-top: 1.2rem; }
.agendy-bw .agendy-bw__brand { font-size: .68rem; color: #b7b9ca; opacity: 1; }
.agendy-bw .agendy-bw__brand:hover { text-decoration: underline; }

/* booking panel -- date/slot picker + contact form (step 2) */
.agendy-bw__panel {
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 16px;
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 7px 18px rgba(0, 9, 128, 0.05);
    padding: 2rem;
    margin-top: 1.5rem;
}
.agendy-bw__back {
    background: none;
    border: 0;
    color: #292dc2;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.25rem;
}
.agendy-bw__panel-title { color: #1f194c; font-weight: 600; margin-bottom: 1.25rem; }
.agendy-bw__step { margin-bottom: 1.5rem; }
.agendy-bw__label { display: block; color: #1f194c; font-weight: 500; font-size: .9rem; margin-bottom: .4rem; }
.agendy-bw__date {
    padding: 10px 14px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #1f194c;
}
.agendy-bw__date:focus { outline: none; border-color: #292dc2; }

/* Nap-jelolo datepicker (kartya agendy-widget-week-grid-datepicker, Roland/marveen 9723): a mai
   natur date-inputot valto trigger+popover. A szinek/radius/border a mar meglevo .agendy-bw__date-
   bol es .agendy-bw__slot-bol vannak atvéve -- nincs uj design-nyelv, csak uj komponens ugyanazzal
   a paletttaval (primary #292dc2, border #dcdcec, muted #9497b8). */
.agendy-bw__daypick { position: relative; display: inline-block; }
.agendy-bw__daypick-trigger {
    padding: 10px 14px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #1f194c;
    background: #fff;
    cursor: pointer;
    min-width: 180px;
    text-align: left;
}
.agendy-bw__daypick-trigger:hover,
.agendy-bw__daypick-trigger:focus { outline: none; border-color: #292dc2; }
.agendy-bw__daypick-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: 280px;
    background: #fff;
    border: 1px solid #dcdcec;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 30, 20, .12);
    padding: .9rem;
    box-sizing: border-box;
}
/* CSS can't do the real fix here: .agendy-bw__daypick (the positioned ancestor) is inline-block,
   sized to the trigger button, so a percentage max-width on this element would resolve against
   THAT narrow box, not the widget's actual card -- a %-based safety net would wrongly shrink the
   popover even in the common wide-widget case. positionPop() (public.js) measures the WIDGET root
   itself and sets width/left as inline styles when the embed is narrower than 280px + margin
   (Roland report, 2026-07-28: a narrow embedded widget on an otherwise-wide desktop page overflowed
   its own card while staying comfortably inside the browser viewport, which the old viewport-only
   overflow check never caught). */
.agendy-bw__daypick-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}
.agendy-bw__daypick-month { font-weight: 600; color: #1f194c; font-size: .92rem; }
.agendy-bw__daypick-navbtn {
    background: none;
    border: 1px solid #dcdcec;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 1.1rem;
    color: #292dc2;
    cursor: pointer;
}
.agendy-bw__daypick-navbtn:hover { border-color: #292dc2; }
.agendy-bw__daypick-weekdays,
.agendy-bw__daypick-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.agendy-bw__daypick-weekdays span {
    font-size: .68rem;
    font-weight: 600;
    color: #9497b8;
    padding: .3rem 0;
    text-transform: uppercase;
}
.agendy-bw__daypick-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .45rem 0;
    font-size: .85rem;
    font-family: inherit;
    color: #1f194c;
    cursor: pointer;
}
.agendy-bw__daypick-day--blank { visibility: hidden; cursor: default; }
.agendy-bw__daypick-day--unavailable { color: #c7c9dc; }
.agendy-bw__daypick-day--available { color: #1f194c; font-weight: 600; }
.agendy-bw__daypick-day--available::after {
    content: '';
    display: block;
    width: 4px; height: 4px;
    margin: 3px auto 0;
    border-radius: 50%;
    background: #292dc2;
}
.agendy-bw__daypick-day--today { border-color: #dcdcec; }
.agendy-bw__daypick-day--selected { background: #292dc2; border-color: #292dc2; color: #fff !important; }
.agendy-bw__daypick-day--selected::after { background: #fff; }
.agendy-bw__daypick-day:hover:not(.agendy-bw__daypick-day--blank):not(.agendy-bw__daypick-day--selected) {
    border-color: #292dc2;
}
.agendy-bw__daypick-legend { color: #9497b8; font-size: .72rem; margin: .6rem 0 0; text-align: center; }

/* mobile: bottom sheet instead of a floating popover -- the embed is often a narrow iframe
   (same breakpoint reasoning as the rest of the widget's mobile layout). */
@media (max-width: 480px) {
    .agendy-bw__daypick-pop {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        width: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(20, 30, 20, .16);
    }
}

.agendy-bw__slots { margin-bottom: 1.5rem; }
.agendy-bw__hint { color: #9497b8; text-align: center; padding: 1rem 0; }
.agendy-bw__slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .6rem;
}
.agendy-bw__slot {
    background: #fbfbff;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    padding: .55rem .5rem;
    font-weight: 500;
    color: #1f194c;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.agendy-bw__slot:hover { border-color: #292dc2; color: #292dc2; }
.agendy-bw__slot.is-selected { background: #292dc2; border-color: #292dc2; color: #fff; }

.agendy-bw__form-title { color: #1f194c; font-weight: 600; font-size: 1rem; margin: 1.5rem 0 1rem; }
.agendy-bw__field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 6px; }
/* agendy-redeem-code-picker-not-listed: this class's own `display: flex` outranks the browser's
   default `[hidden] { display: none }` UA rule (equal specificity, later in the cascade) -- setting
   the `hidden` PROPERTY on a .agendy-bw__field element (as the new redeem-picker's JS does for the
   coupon/pass blocks) left it visually showing anyway, computedDisplay:'flex', measured live. This
   was a LATENT bug: nothing before this feature ever toggled `hidden` at runtime on this class (the
   coupon/pass fields were previously server-{if}-gated -- present-and-shown or absent, never
   present-but-JS-hidden), so it never manifested until now. */
.agendy-bw__field[hidden] { display: none; }
.agendy-bw__field label { color: #1f194c; font-weight: 500; font-size: .9rem; }
.agendy-bw__field input {
    padding: 12px 14px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
}
.agendy-bw__field input:focus { outline: none; border-color: #292dc2; }
.agendy-bw__chosen-slot { color: #575a7b; font-size: .9rem; margin-bottom: 1rem; }
.agendy-bw__submit {
    background: #292dc2;
    background: linear-gradient(-45deg, #292dc2, #0084e9);
    color: #fff;
    border: 0;
    border-radius: 30px;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.agendy-bw__submit:disabled { opacity: .5; cursor: not-allowed; }
.agendy-bw__submit:not(:disabled):hover { opacity: .9; }
.agendy-bw__result { margin-top: 1.5rem; text-align: center; color: #1f194c; }

/* agendy-widget-success-hide-block (Roland item #9): the .is-confirmed state is what's left once
   showBookingConfirmed() (public.js) hides the rest of the panel -- own margin/padding so it reads
   as a standalone confirmation card, not a leftover message strip under an empty panel. */
.agendy-bw__result.is-confirmed { margin-top: 0; padding: 1rem 0; }
.agendy-bw__result-icon {
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto .75rem;
    border-radius: 50%;
    background: #e4f6ec;
    color: #1a7a44;
    font-size: 1.5rem;
    font-weight: 700;
}
.agendy-bw__result-text { margin: 0; font-size: 1.05rem; font-weight: 500; }

/* agendy-redeem-code-picker-not-listed (Roland #3): a compact tab pair, same palette as the
   widget's other field/button language -- no new design tokens. */
.agendy-bw__redeem-picker { margin-bottom: 1rem; }
.agendy-bw__redeem-picker-label { display: block; font-size: .85rem; font-weight: 500; color: #4a4d6b; margin-bottom: .4rem; }
.agendy-bw__redeem-picker-tabs { display: flex; gap: 8px; }
.agendy-bw__redeem-picker-tab {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid #dcdcec;
    border-radius: 10px;
    background: #fff;
    color: #4a4d6b;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.agendy-bw__redeem-picker-tab:hover { border-color: #292dc2; }
.agendy-bw__redeem-picker-tab.is-active { background: #292dc2; border-color: #292dc2; color: #fff; }

/* coupon-redeem (kanban agendy-coupon-redeem-flow) -- same palette/radius as the rest of the
   widget's own field/button language above, no new design tokens. */
.agendy-bw__coupon-row { display: flex; gap: 8px; }
.agendy-bw__coupon-row input { flex: 1; }
.agendy-bw__coupon-check {
    background: #292dc2;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 1.1rem;
    font-weight: 600;
    font-size: .78rem;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}
.agendy-bw__coupon-check:hover { background: #0084e9; }
.agendy-bw__coupon-check:disabled { opacity: .5; cursor: not-allowed; }
.agendy-bw__coupon-msg { border-radius: 12px; padding: .7rem .9rem; font-size: .82rem; line-height: 1.5; margin-top: .6rem; }
.agendy-bw__coupon-msg.is-ok { background: #e4f6ec; color: #1a7a44; }
.agendy-bw__coupon-msg.is-err { background: #fce6e6; color: #b3261e; }
.agendy-bw__coupon-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 1rem 0 1.2rem;
    padding: .85rem 1rem;
    background: #f8f9fc;
    border: 1px solid #ececf6;
    border-radius: 12px;
    font-size: .88rem;
    color: #1f194c;
    font-weight: 600;
}
.agendy-bw__coupon-price .agendy-bw__coupon-price-old { color: #9497b8; text-decoration: line-through; font-weight: 500; margin-right: 6px; }

/* pass-redeem (P4 redemption engine, plex, 2026-08-13) -- no check-button/msg/price block like
   coupon (no read-only preview endpoint exists), just the field + a small static hint. */
.agendy-bw__field-hint { color: #9497b8; font-size: .78rem; margin: 0; line-height: 1.4; }
.agendy-bw__field input:disabled { opacity: .5; cursor: not-allowed; background: #f8f9fc; }

/* privacy notice link (kanban agendy-vendeg-regisztracio-adatkezelesi-tajekoztatas-20260902) --
   [hidden] whenever the tenant has no text (Roland's decision), see public.js applyPrivacyLink(). */
.agendy-bw__privacy { margin: .4rem 0; font-size: .82rem; }
.agendy-bw__privacy a { color: #4b5bd6; text-decoration: underline; cursor: pointer; }
.agendy-bw__privacy-text { display: block; margin-top: .5rem; padding: .7rem .9rem; border-radius: 12px;
    background: #f4f5fb; color: #4a4d68; font-size: .8rem; line-height: 1.5; max-height: 260px; overflow-y: auto; }

/* pricing cards -- make the "+ ÁFA" (net price) label clearly visible next to the big price,
   not just present in the markup (Roland/tars R2: don't let it read as the final price). */
.pricing-table .price-plan span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #292dc2;
    margin-top: .35rem;
}

/* header account nav (R5) -- .attr-nav > ul > li > a defaults to #fff (built for a dark/
   transparent hero header); our navbar is light, so the plain login link needs an explicit
   dark color or it's invisible white-on-white. */
.attr-nav .agendy-nav-login {
    color: #1f194c !important;
    font-weight: 500;
    padding: 21px 15px;
}
.attr-nav .agendy-nav-login:hover { color: #292dc2 !important; }

/* Mobile: the theme's #nav dropdown is position:absolute (~232px tall for our 5-item menu),
   so .attr-nav (normal flow, float:left) renders at the same top offset and overlaps it --
   the original theme only ever put 1-2 small icons in .attr-nav, never full buttons+text.
   Push .attr-nav below the open dropdown and lay our 3 items out as a clean stacked block. */
@media (max-width: 991px) {
    .attr-nav .agendy-nav-login { padding: 10px 0; display: inline-block; }
    .navbar-header-custom ~ .attr-nav,
    .menu_area .attr-nav {
        float: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 0 0 20px;
        padding: 0 12px;
        width: 100%;
    }

    /* The 245px above was unconditional, but the dropdown it clears only exists
       while the burger is OPEN -- closed, it left 245px of empty header on every
       mobile page load, measured: header 426px tall on a 844px screen, pushing
       the hero CTA to 97% of the viewport. Scope it to the open state instead.
       The theme marks that on both the menu (ul.navbar-nav.open) and the burger
       (.navbar-toggler.menu-opened); either match is enough, both are listed so
       one renamed class does not silently bring the overlap back. Measured with
       the menu open: dropdown 71..304, buttons start at 313. */
    .menu_area:has(.navbar-nav.open) .attr-nav,
    .menu_area:has(.navbar-toggler.menu-opened) .attr-nav {
        margin-top: 245px;
    }
    .attr-nav > ul { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .attr-nav > ul > li { display: block; width: 100%; }
    .attr-nav > ul > li > a.butn { display: block; text-align: center; }
}

/* Mobile hero: measured at 390x844, the "Foglaljon időpontot" CTA sat at 97% of
   the viewport height, so the bottom-pinned consent bar covered it.

   Note what is NOT touched here: the hero's padding-TOP. .header-position pulls
   the hero up by 71px below 991px, so of the 100px top padding only 29px is
   actual clearance under the nav -- cutting it is how the headline ends up
   behind the navbar. The three levers below are all below the fold line. */
@media (max-width: 767px) {
    /* 1. The intro paragraph is 90% wide (.w-90). Its counterpart .w-md-80 only
       applies from 768px up, so under that the missing 10% buys nothing except
       an extra wrapped line. */
    .main-banner-style02 .header-text p {
        width: 100%;
    }

    /* 2. Hero bottom padding: the <=991px rule sets `100px 0 50px 0`. */
    .main-banner-style02 {
        padding-bottom: 24px;
    }

    /* 3. Headline: 27.85px/33.42px across three lines is more than a phone
       needs, and it is the tallest single block in the hero. */
    .main-banner-style02 .header-text h1 {
        font-size: 24px;
        line-height: 29px;
    }
}

/* Kezdolapi funkcio-teaser slider (2 csoport x 3 elem) -- Roland/marveen msg 15965.
   Behajtas custom.js-ben (data-role="agendy-teaser"), vanilla JS, nincs owl.carousel/
   swiper/slick fuggoseg. */
.agendy-teaser-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
}
.agendy-teaser-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    cursor: pointer;
    padding: 0;
    transition: filter .2s ease, border-color .2s ease;
}
.agendy-teaser-slider__arrow:hover {
    filter: brightness(0.97);
    border-color: rgba(0, 0, 0, .25);
}
.agendy-teaser-slider__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
}