@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap');

/* =========================================================
   ZEMI DESIGN TOKENEK
   Forrás: Figma – SZínrendszer, Színrendszer - Tokenek, Színrendszer - Alkalmazás, Typography, Ikonok
   ========================================================= */

/* Márka alapszínek – rögzített értékek, nem módosítjuk */
:root { --zemi-navy: #022151; --zemi-coral: #F94D6C; --zemi-lime: #D9F04A; --zemi-light-blue: #CDE7F1; --zemi-warm-white: #FEF9F7; }

/* Színskálák (50–900) */
:root { --navy-50: #E6EDF5; --navy-100: #C0D0E4; --navy-200: #8BA8CC; --navy-300: #5680B4; --navy-400: #2E5A9A; --navy-500: #0A3A7A; --navy-600: #062F66; --navy-700: #042651; --navy-800: #021B3D; --navy-900: #01102A; }
:root { --coral-50: #FEE8EC; --coral-100: #FDC5CE; --coral-200: #FB9DAD; --coral-300: #FA758C; --coral-400: #F94D6C; --coral-500: #E83A59; --coral-600: #D12A48; --coral-700: #B01E38; --coral-800: #8E152B; --coral-900: #6B0E1F; }
:root { --lime-50: #F8FCE0; --lime-100: #F1F8BF; --lime-200: #E9F490; --lime-300: #E1F06A; --lime-400: #D9F04A; --lime-500: #C2D83E; --lime-600: #A8BD30; --lime-700: #8DA024; --lime-800: #72811B; --lime-900: #556113; }
:root { --lightblue-50: #F0F7FA; --lightblue-100: #E1EFF5; --lightblue-200: #CDE7F1; --lightblue-300: #A8D4E6; --lightblue-400: #82C0DA; --lightblue-500: #5CACCE; --lightblue-600: #3A94BD; --lightblue-700: #2C7A9F; --lightblue-800: #206080; --lightblue-900: #154660; }
:root { --neutral-0: #FFFFFF; --neutral-50: #F8F9FA; --neutral-100: #F1F2F4; --neutral-200: #E3E5E8; --neutral-300: #D0D3D7; --neutral-400: #AEB2B7; --neutral-500: #858A90; --neutral-600: #686D73; --neutral-700: #50545A; --neutral-800: #35383D; --neutral-900: #1D1F22; }

/* Háttér- és felülettokenek */
:root { --bg-default: var(--neutral-0); --bg-subtle: var(--zemi-warm-white); --bg-brand: var(--navy-700); }
:root { --surface-default: var(--neutral-0); --surface-secondary: var(--neutral-100); --surface-elevated: var(--neutral-0); --surface-brand: var(--navy-700); --surface-disabled: var(--neutral-200); --surface-warm-white: var(--zemi-warm-white); --surface-dark: var(--neutral-900); }
:root { --surface-success: #E8F5EC; --surface-warning: #FFF8E0; --surface-error: #FDECEB; --surface-info: #E6EDF5; }
:root { --bg-section: var(--neutral-50); --surface-tinted: #F1F7FA; --surface-band: var(--zemi-navy); --surface-search: var(--neutral-100); --surface-rating: var(--neutral-0); --surface-verified: var(--accent-light-blue); --text-verified: var(--text-secondary); --shadow-header: 0 0.25rem 0.3125rem rgba(0, 0, 0, 0.08); --border-menu: #DCDCDC; --border-search-mobile: #C4C4C4; --surface-menu-card: rgba(205, 231, 241, 0.3); color-scheme: light; }

/* Szövegszínek */
:root { --text-primary: #022151; --text-secondary: var(--neutral-700); --text-tertiary: var(--neutral-600); --text-disabled: var(--neutral-300); --text-disabled-action: var(--neutral-500); --text-disabled-tertiary: var(--neutral-400); --text-placeholder: var(--neutral-500); }
:root { --text-link: #0A3A7A; --text-link-hover: #022151; --text-link-pressed: #021B3D; }
:root { --text-error: #C4271A; --text-success: #1A7A3A; --text-warning: #8A6200; --text-info: #0A3A7A; }
:root { --text-on-primary: #FFFFFF; --text-on-coral-accent: #111111; --text-on-navy: #FFFFFF; --text-on-lime: #022151; --text-on-light-blue: #022151; --text-on-warm-white: #022151; --text-on-dark: #FFFFFF; }

/* Keretek és elválasztók */
:root { --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-500); --border-focus: #0A3A7A; --border-focus-on-primary: #022151; --border-disabled: var(--neutral-200); }

/* Interakciós színek – Coral elsődleges, Lime másodlagos, Navy harmadlagos */
:root { --action-primary: var(--coral-600); --action-primary-hover: var(--coral-700); --action-primary-pressed: #8F152B; --action-primary-disabled: var(--neutral-300); }
:root { --action-secondary: #D9F04A; --action-secondary-hover: #C2D83E; --action-secondary-pressed: #A8BD30; --action-secondary-disabled: var(--neutral-300); }
:root { --action-tertiary: #022151; --action-tertiary-hover: #E6EDF5; --action-tertiary-pressed: #C0D0E4; }

/* Kiemelőszínek (badge, chip, kiválasztott állapot) */
:root { --accent-coral: var(--coral-400); --accent-lime: var(--lime-400); --accent-light-blue: var(--lightblue-200); }

/* Betűcsaládok – a Switzer helyett ideiglenesen Inter a tartalék (Figma: "Inter fallback") */
:root { --font-heading: 'Outfit', sans-serif; --font-body: 'Switzer', 'Inter', sans-serif; }

/* Típusskála – font rövidítés (súly méret/sorköz család) + betűköz */
:root { --type-display-l: 600 4rem/4.5rem var(--font-heading); --ls-display-l: -0.075rem; --type-display-m: 600 3.25rem/3.75rem var(--font-heading); --ls-display-m: -0.05rem; --type-display-s: 600 2.75rem/3.25rem var(--font-heading); --ls-display-s: -0.03125rem; }
:root { --type-headline-l: 600 2.25rem/2.75rem var(--font-heading); --ls-headline-l: -0.01875rem; --type-headline-m: 600 2rem/2.5rem var(--font-heading); --ls-headline-m: -0.0125rem; --type-headline-s: 500 1.75rem/2.25rem var(--font-heading); --ls-headline-s: -0.00625rem; }
:root { --type-title-l: 600 1.5rem/2rem var(--font-heading); --ls-title-l: 0px; --type-title-m: 500 1.25rem/1.75rem var(--font-heading); --ls-title-m: 0px; --type-title-s: 500 1rem/1.5rem var(--font-heading); --ls-title-s: 0.00625rem; }
:root { --type-body-l: 400 1.125rem/1.75rem var(--font-body); --ls-body-l: 0px; --type-body-m: 400 1rem/1.5rem var(--font-body); --ls-body-m: 0px; --type-body-s: 400 0.875rem/1.25rem var(--font-body); --ls-body-s: 0.00625rem; }
:root { --type-label-l: 500 1rem/1.25rem var(--font-body); --ls-label-l: 0.00625rem; --type-label-m: 500 0.875rem/1.125rem var(--font-body); --ls-label-m: 0.009375rem; --type-label-s: 600 0.75rem/1rem var(--font-body); --ls-label-s: 0.0125rem; }
:root { --type-button: 600 0.875rem/1.25rem var(--font-body); --type-button-lg: 500 1rem/1.25rem var(--font-body); --type-button-sm: 600 0.875rem/1.125rem var(--font-body); }

/* Lekerekítések, rács */
:root { --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-pill: 62.4375rem; }
:root { --container-max: 75rem; --container-margin: 2rem; --grid-gutter: 1.5rem; --touch-target: 3rem; }
/* 1440 px fölött a méretek a 1440-es terv szerintiek maradnak, csak a tartalom szélesedik: 120 px-es oldalsó
   margóval, legfeljebb --container-max-wide szélességig (1500 px, 1740 px-es képernyőtől), utána középen. */
:root { --container-max-wide: 93.75rem; }
@media (min-width: 1441px) { :root { --container-max: var(--container-max-wide); --container-margin: 7.5rem; } }

/* Sötét mód – Figma "Dark Mode" változók (a rendszerbeállítás szerint vált) */
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; --bg-default: #0B1322; --bg-subtle: #0B1322; --bg-section: #121C2E; --bg-brand: #163A6B; }
:root { --surface-default: #1A2740; --surface-secondary: #22314D; --surface-elevated: #22314D; --surface-brand: #163A6B; --surface-disabled: #2A3852; --surface-warm-white: #0B1322; --surface-dark: #0B1322; --surface-tinted: #121C2E; --surface-band: #162849; --surface-search: #22314D; --surface-rating: #121C2E; --surface-verified: #163A6B; --text-verified: #CDE7F1; }
:root { --surface-success: rgba(95, 214, 138, 0.14); --surface-warning: rgba(245, 196, 81, 0.14); --surface-error: rgba(255, 143, 163, 0.14); --surface-info: #1E3A5A; }
:root { --text-primary: #FEF9F7; --text-secondary: #C3CAD8; --text-tertiary: #98A2B6; --text-disabled: #4A5672; --text-disabled-action: #98A2B6; --text-disabled-tertiary: #6A7389; --text-placeholder: #C3CAD8; }
:root { --text-link: #FEF9F7; --text-link-hover: #CDE7F1; --text-link-pressed: #A8D4E6; --text-error: #FF8FA3; --text-success: #5FD68A; --text-warning: #F5C451; --text-info: #8BCBE8; --text-on-warm-white: #FEF9F7; }
:root { --border-subtle: #2A3852; --border-default: #6A7389; --border-strong: #FEF9F7; --border-focus: #F9406C; --border-focus-on-primary: #FEF9F7; --border-disabled: #2A3852; }
:root { --action-primary-disabled: #2A3852; --action-secondary-disabled: #2A3852; --action-tertiary: #FEF9F7; --action-tertiary-hover: rgba(254, 249, 247, 0.08); --action-tertiary-pressed: rgba(254, 249, 247, 0.16); }
:root { --shadow-header: none; --border-menu: #2A3852; --border-search-mobile: #6A7389; --surface-menu-card: rgba(205, 231, 241, 0.08); }
}

/* =========================================================
   KERETRENDSZER ALAP (MonkeyDog UI-készlet, Zemi tokenekkel)
   ========================================================= */
* { box-sizing: border-box; outline: 0; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*::-webkit-scrollbar { width: 0.625rem!important; height: 0.625rem!important; }
*::-webkit-scrollbar-thumb { background-color: var(--neutral-400); }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* A méretek rem-ben vannak, 1rem = 16px minden szélességen (a @media határok és az 1px-es vonalak px-ben). */
body { background: var(--bg-default); color: var(--text-secondary); font: var(--type-body-m); letter-spacing: var(--ls-body-m); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font-family: inherit; }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
:where(a) { color: var(--text-link); text-decoration: none; }
:where(a:hover) { color: var(--text-link-hover); text-decoration: underline; }
:where(a:active) { color: var(--text-link-pressed); text-decoration: none; }
:where(a, button, [tabindex], summary):focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }
h1,h2,h3,h4,h5,h6 { display: block; margin: 0; padding: 0; font: inherit; color: var(--text-primary); }
button { -webkit-appearance: button; }
button:not(:disabled) { cursor: pointer; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"], textarea { display: block; width: 100%; min-height: 2.75rem; padding: 0.5625rem 0.9375rem; font: var(--type-body-m); letter-spacing: var(--ls-body-m); color: var(--text-primary); background: var(--surface-default); background-clip: padding-box; border: 1px solid var(--border-default); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--radius-md); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, textarea:focus { color: var(--text-primary); background-color: var(--surface-default); border-color: var(--border-focus); outline: 0; box-shadow: inset 0 0 0 1px var(--border-focus); }
input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
input:disabled, textarea:disabled, select:disabled { background-color: var(--surface-disabled); border-color: var(--border-disabled); color: var(--text-disabled-action); cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"], .is-invalid { border-color: var(--text-error) !important; }
select { display: block; width: 100%; min-height: 2.75rem; padding: 0.5625rem 2.75rem 0.5625rem 0.9375rem; font: var(--type-body-m); color: var(--text-primary); background: url("/libraries/Feather/chevron-down.svg") no-repeat, var(--surface-default); background-position: right 0.85rem center; background-size: 1.125rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select:focus { border-color: var(--border-focus); box-shadow: inset 0 0 0 1px var(--border-focus); }
.select2 { width: 100% !important; }
.select2-results { font: var(--type-body-s); }
.select2-container .select2-selection--single { padding: 0.5625rem 2.75rem 0.5625rem 0.9375rem !important; height: initial !important; min-height: 2.75rem; }
.select2-container--default .select2-selection--single { border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; line-height: 1.5rem !important; }
.select2-container .select2-selection--single .select2-selection__rendered { padding: initial !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { background: url("/libraries/Feather/chevron-down.svg") no-repeat !important; background-size: 1.125rem !important; border: 0 !important; width: 1.125rem !important; height: 1rem !important; right: 0.75rem !important; left: initial !important; transition: 0.2s !important; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg) !important; }
.select2-selection--single { transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.select2-selection--single[aria-expanded="true"] { border-color: var(--border-focus) !important; box-shadow: inset 0 0 0 1px var(--border-focus); }
.select2-container--disabled { opacity: 0.3; }
.select2-dropdown { border-color: var(--border-default) !important; border-radius: var(--radius-md) !important; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--navy-50) !important; color: var(--text-primary) !important; }

/* Gombok – háromszintű CTA-rendszer: primary (Coral), secondary (Lime), tertiary (Navy körvonal), text (szöveges gomb).
   A keretrendszer .btn.blue / .btn.gray osztályai (pl. a modal() gombjai) a primary / tertiary megjelenést kapják. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.6875rem 1.4375rem; font: var(--type-button); letter-spacing: 0; color: var(--text-primary); text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.btn:hover { text-decoration: none; }
.btn .icon { margin: -0.125rem 0; }
.btn.disabled, .btn:disabled { pointer-events: none; cursor: default; }
.btn.primary, .btn.blue { background-color: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-primary); }
.btn.primary:hover, .btn.blue:hover { background-color: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--text-on-primary); }
.btn.primary:active, .btn.blue:active { background-color: var(--action-primary-pressed); border-color: var(--action-primary-pressed); }
.btn.primary:focus-visible, .btn.blue:focus-visible { outline: 0.125rem solid var(--border-focus-on-primary); outline-offset: 0.125rem; }
.btn.secondary { background-color: var(--action-secondary); border-color: var(--action-secondary); color: var(--text-on-lime); }
.btn.secondary:hover { background-color: var(--action-secondary-hover); border-color: var(--action-secondary-hover); color: var(--text-on-lime); }
.btn.secondary:active { background-color: var(--action-secondary-pressed); border-color: var(--action-secondary-pressed); }
.btn.secondary:focus-visible { outline: 0; border-color: var(--border-focus); box-shadow: inset 0 0 0 1px var(--border-focus); }
.btn.tertiary, .btn.gray { background-color: transparent; border-color: var(--action-tertiary); color: var(--text-primary); }
.btn.tertiary:hover, .btn.gray:hover { background-color: var(--action-tertiary-hover); color: var(--text-primary); }
.btn.tertiary:active, .btn.gray:active { background-color: var(--action-tertiary-pressed); }
.btn.tertiary:focus-visible, .btn.gray:focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }
.btn.text { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 1px; }
.btn.text:hover { color: var(--text-link-hover); text-decoration-thickness: 0.125rem; }
.btn.text:active { color: var(--text-link-pressed); }
.btn.primary.disabled, .btn.primary:disabled, .btn.blue.disabled, .btn.blue:disabled, .btn.secondary.disabled, .btn.secondary:disabled { background-color: var(--action-primary-disabled); border-color: var(--action-primary-disabled); color: var(--text-disabled-action); }
.btn.tertiary.disabled, .btn.tertiary:disabled, .btn.gray.disabled, .btn.gray:disabled { background-color: transparent; border-color: var(--border-default); color: var(--text-disabled-tertiary); }
.btn.text.disabled, .btn.text:disabled { color: var(--text-disabled-tertiary); }
.btn.block { display: flex; width: 100%; }
.btn.lg { min-height: 3.25rem; padding: 0.9375rem 1.6875rem; gap: 0.75rem; font: var(--type-button-lg); letter-spacing: var(--ls-label-l); }
.btn.lg .icon { width: 1.125rem; height: 1.125rem; }
.btn.sm { min-height: 2.375rem; padding: 0.5625rem 1.1875rem; font: var(--type-button-sm); }
.tabs { display: flex; align-items: stretch; gap: 0.375rem; padding-right: 1.25rem; overflow-y: hidden; overflow-x: auto; height: 2.875rem; font: var(--type-label-m); }
.tabs::-webkit-scrollbar { width: 0px !important; height: 0px !important; }
.tabs > div { padding: 0 1.8rem; background: var(--surface-secondary); color: var(--text-secondary); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); cursor: pointer; transition: 0.15s height; user-select: none; display: flex; align-items: center; z-index: 3; white-space: nowrap; }
.tabs > div.active { background: var(--zemi-navy); color: var(--text-on-navy); opacity: 1; border-bottom: 0px; }
.tab-contents { padding: 1.875rem; border: 1px solid var(--border-subtle); }
.tab-contents > div { display: none; transition: 0.2s; }
.tab-contents > div.active { display: block; }

/* Rendszerüzenetek – success, warning, error, info (alapértelmezés: warning, mint a keretrendszerben) */
.alert { --alert-color: var(--text-warning); --alert-bg: var(--surface-warning); --alert-icon: url("/modules/_global/images/icons/status-alert-triangle.svg"); display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.75rem 3rem 0.75rem 1rem; color: var(--alert-color); background-color: var(--alert-bg); border-radius: var(--radius-md); font: var(--type-body-m); position: relative; }
.alert::before { content: ""; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--alert-color) var(--alert-icon) no-repeat center / 0.875rem 0.875rem; }
.alert.success { --alert-color: var(--text-success); --alert-bg: var(--surface-success); --alert-icon: url("/modules/_global/images/icons/status-check.svg"); }
.alert.warning { --alert-color: var(--text-warning); --alert-bg: var(--surface-warning); --alert-icon: url("/modules/_global/images/icons/status-alert-triangle.svg"); }
.alert.error { --alert-color: var(--text-error); --alert-bg: var(--surface-error); --alert-icon: url("/modules/_global/images/icons/status-x-circle.svg"); }
.alert.info { --alert-color: var(--text-info); --alert-bg: var(--surface-info); --alert-icon: url("/modules/_global/images/icons/status-info.svg"); }
.alert button.close { position: absolute; top: 50%; right: 0.25rem; z-index: 2; transform: translateY(-50%); }
.alert button.close:before { background: var(--alert-color); }
button.close { box-sizing: content-box; border: 0; border-radius: var(--radius-md); opacity: .7; background: transparent; color: var(--text-primary); }
button.close:before { content: ""; display: block; padding: 0.75rem; width: 1.5em; height: 1.5em; background: currentColor; -webkit-mask-image: url("/modules/_global/images/icons/x.svg"); mask-image: url("/modules/_global/images/icons/x.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 1.5rem; mask-size: 1.5rem; }
button.close:hover { text-decoration: none; opacity: 1; }
button.close:focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0; opacity: 1; }
.dropdown-wrapper { position: relative; display: table; }
.dropdown-wrapper > button:after { display: inline-block; width: 0; height: 0; margin-left: 0.6em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }
.dropdown-wrapper .dropdown-menu { position: absolute; transform: translate3d(0px, 3rem, 0px); top: 0px; left: 0px; will-change: transform; z-index: 1000; display: none; min-width: 10rem; padding: .5rem 0; margin: .125rem 0 0; font: var(--type-body-m); color: var(--text-primary); text-align: left; list-style: none; background-color: var(--surface-elevated); background-clip: padding-box; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(2, 33, 81, 0.25); overflow: hidden; }
.dropdown-wrapper .dropdown-menu > div { display: block; width: 100%; padding: .5rem 1.25rem; font-weight: 400; color: var(--text-primary); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; cursor: pointer; }
.dropdown-wrapper .dropdown-menu > div:hover { color: var(--text-primary); text-decoration: none; background-color: var(--navy-50); }
.modal { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(1, 16, 42, 0); transition: background 0.3s linear; }
.modal.show { background: rgba(1, 16, 42, 0.55); }
.modal button.close { position: absolute; right: 0.5rem; top: 0.5rem; }
.modal button.close:active { opacity: 0.6; transition: 0.2s; }
.modal button.close.hide { display: none; }
.modal img { max-height: 12.5rem; max-width: 18.75rem; margin: auto; display: block; }
.modal .modal-box { width: 37.5rem; min-height: 8.75rem; background: var(--surface-elevated); border-radius: var(--radius-lg); box-shadow: 0 1.5rem 3rem -0.75rem rgba(1, 16, 42, 0.35); padding: 2rem; position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 1.25rem; }
.modal .modal-box.long { width: initial !important; max-width: calc(100% - 1.875rem) !important; }
.modal .modal-box.long .modal-content { max-height: calc(100vh - 12.5rem); overflow-y: auto; padding-right: 1.25rem; }
.modal .modal-title { font: var(--type-title-l); letter-spacing: var(--ls-title-l); color: var(--text-primary); padding-right: 2rem; }
.modal .modal-content { font: var(--type-body-m); color: var(--text-secondary); width: 100%; }
.modal .modal-btn-container { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; width: 100%; }
.modal .modal-btn-container button { margin-top: 0.625rem; }
.daterangepicker { box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(2, 33, 81, 0.25); border-radius: var(--radius-md) !important; border: 1px solid var(--border-subtle) !important; font-family: var(--font-body) !important; }
.daterangepicker:before { border-bottom: 0.4375rem solid var(--border-subtle) !important; }
.daterangepicker:after { border-bottom: 0.375rem solid var(--surface-elevated) !important; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect { width: initial !important; min-height: 0; padding: 0.25rem 1.5rem 0.25rem 0.625rem !important; background-position: 95% center; display: initial; }
.drp-calendar.left, .daterangepicker .drp-calendar.right { padding: 1rem 1rem !important; }
.drp-calendar th { font-weight: 600 !important; color: var(--text-primary) !important; }
.drp-calendar td { color: var(--text-secondary) !important; }
.drp-calendar td, .daterangepicker .drp-calendar th { font-size: 0.8rem !important; width: 2.0625rem !important; height: 2.0625rem !important; }
.drp-calendar td.active { background-color: var(--zemi-navy) !important; color: var(--text-on-navy) !important; border-radius: var(--radius-md); }
.drp-calendar select { display: initial; padding: 0.3125rem 0.625rem !important; }
.drp-calendar td.today, .daterangepicker .drp-calendar td.today.active { border-radius: var(--radius-md); background: var(--navy-50) !important; color: var(--text-primary) !important; }
.drp-buttons { padding: 1rem 1.75rem !important; border-top: 1px solid var(--border-subtle) !important; }
.drp-buttons .btn { font-size: .75rem !important; font-weight: 600 !important; padding: .5rem 1rem !important; min-height: 0; border-radius: var(--radius-pill) !important; }
.btn.btn-primary { color: var(--text-on-primary); background-color: var(--action-primary); border-color: var(--action-primary); }
.btn.btn-primary.focus:not(.btn-text), .btn.btn-primary:focus:not(.btn-text), .btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled) { color: var(--text-on-primary); background-color: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.btn.btn-default { color: var(--text-primary); background-color: transparent; border-color: var(--action-tertiary); }
.drp-calendar th.next span, .daterangepicker .drp-calendar th.prev span { border-color: var(--text-secondary) !important; }
.drp-selected { padding-bottom: 0.625rem; }
.container { position: relative; width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-margin)); margin: auto; padding: 0 var(--container-margin); }

@media (max-width: 1440px) {
.modal .modal-box { width: 32.5rem; min-height: 7.5rem; gap: 1rem; }
}

@media (max-width: 1024px) {
.modal .modal-box { width: calc(100% - 1.25rem); max-width: 25rem; min-height: 7.5rem; gap: 1rem; padding: 1.5rem; }
.modal .modal-title { font: var(--type-title-m); }
.modal .modal-content { font: var(--type-body-s); }
}

/* =========================================================
   ZEMI – OLDALSPECIFIKUS ALAPOK
   1. Tipográfia
   2. Szövegszín-segédosztályok
   3. Chipek, badge-ek, címkék
   4. Ikonrendszer
   5. Rács (Figma: 1920 / 1440 / 1024 / 768 / 390)
   6. Mobil tipográfia
   ========================================================= */

/* ===== 1. Tipográfia ===== */
.display-l { font: var(--type-display-l); letter-spacing: var(--ls-display-l); }
.display-m { font: var(--type-display-m); letter-spacing: var(--ls-display-m); }
.display-s { font: var(--type-display-s); letter-spacing: var(--ls-display-s); }
.headline-l { font: var(--type-headline-l); letter-spacing: var(--ls-headline-l); }
.headline-m { font: var(--type-headline-m); letter-spacing: var(--ls-headline-m); }
.headline-s { font: var(--type-headline-s); letter-spacing: var(--ls-headline-s); }
.title-l { font: var(--type-title-l); letter-spacing: var(--ls-title-l); }
.title-m { font: var(--type-title-m); letter-spacing: var(--ls-title-m); }
.title-s { font: var(--type-title-s); letter-spacing: var(--ls-title-s); }
.body-l { font: var(--type-body-l); letter-spacing: var(--ls-body-l); }
.body-m { font: var(--type-body-m); letter-spacing: var(--ls-body-m); }
.body-s { font: var(--type-body-s); letter-spacing: var(--ls-body-s); }
.label-l { font: var(--type-label-l); letter-spacing: var(--ls-label-l); }
.label-m { font: var(--type-label-m); letter-spacing: var(--ls-label-m); }
.label-s { font: var(--type-label-s); letter-spacing: var(--ls-label-s); }
.overline { font: var(--type-label-s); letter-spacing: 0.09375rem; text-transform: uppercase; }

/* ===== 2. Szövegszín-segédosztályok ===== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-link { color: var(--text-link); }
.text-error { color: var(--text-error); }
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }
.text-info { color: var(--text-info); }
.text-accent { color: var(--accent-coral); }
.text-action { color: var(--action-primary); }

/* ===== 3. Chipek, badge-ek, címkék ===== */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.9375rem; font: var(--type-button); color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; }
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); text-decoration: none; }
.chip.is-selected, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--zemi-navy); border-color: var(--zemi-navy); color: var(--text-on-navy); }
.chip:focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }
.badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0.25rem 0.625rem; font: 700 0.75rem/1rem var(--font-body); color: var(--text-primary); background: var(--accent-light-blue); border-radius: var(--radius-pill); white-space: nowrap; }
.badge.new { background: var(--action-primary); color: var(--text-on-primary); }
.badge.sale { background: var(--accent-lime); color: var(--text-on-lime); }
.badge.info { background: var(--accent-light-blue); color: var(--text-on-light-blue); }
.badge.verified { gap: 0.25rem; font: 600 0.75rem/1rem var(--font-body); background: var(--surface-verified); color: var(--text-verified); border-radius: var(--radius-sm); }
.tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.375rem 0.75rem; font: 700 0.75rem/1rem var(--font-body); letter-spacing: 0.03125rem; text-transform: uppercase; color: var(--text-primary); background: var(--accent-light-blue); border-radius: var(--radius-sm); white-space: nowrap; }
.tag.promo { background: var(--action-primary); color: var(--text-on-primary); }
.tag.highlight { background: var(--accent-lime); color: var(--text-on-lime); }
.tag.muted { background: var(--accent-light-blue); color: var(--text-on-light-blue); }

/* ===== 4. Ikonrendszer =====
   Használat: <span class="icon icon-search md" aria-hidden="true"></span>
   Az SVG maszkként működik, a szín a "color" tulajdonságból jön (currentColor).
   Méretek (Figma): xs 14, sm 16, md 20, lg 24 (alap), xl 32, social 40 px-es jel 48 px-es érintési területen. */
.icon { display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; background-color: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; vertical-align: middle; }
.icon.xs { width: 0.875rem; height: 0.875rem; }
.icon.sm { width: 1rem; height: 1rem; }
.icon.md { width: 1.25rem; height: 1.25rem; }
.icon.lg { width: 1.5rem; height: 1.5rem; }
.icon.xl { width: 2rem; height: 2rem; }
.icon.social { width: 3rem; height: 3rem; }
.icon.success { color: var(--text-success); }
.icon.warning { color: var(--text-warning); }
.icon.error { color: var(--text-error); }
.icon.info { color: var(--text-info); }
.icon.accent { color: var(--accent-coral); }
.icon.action { color: var(--action-primary); }
.icon.muted { color: var(--text-tertiary); }
.icon-arrow-down-up { --icon: url("/modules/_global/images/icons/arrow-down-up.svg"); }
.icon-arrow-left { --icon: url("/modules/_global/images/icons/arrow-left.svg"); }
.icon-arrow-right { --icon: url("/modules/_global/images/icons/arrow-right.svg"); }
.icon-arrow-right-14 { --icon: url("/modules/_global/images/icons/arrow-right-14.svg"); }
.icon-arrow-up-left { --icon: url("/modules/_global/images/icons/arrow-up-left.svg"); }
.icon-badge-check { --icon: url("/modules/_global/images/icons/badge-check.svg"); }
.icon-bike { --icon: url("/modules/_global/images/icons/bike.svg"); }
.icon-calendar { --icon: url("/modules/_global/images/icons/calendar.svg"); }
.icon-calendar-check { --icon: url("/modules/_global/images/icons/calendar-check.svg"); }
.icon-calendar-days { --icon: url("/modules/_global/images/icons/calendar-days.svg"); }
.icon-calendar-days-20 { --icon: url("/modules/_global/images/icons/calendar-days-20.svg"); }
.icon-car-front { --icon: url("/modules/_global/images/icons/car-front.svg"); }
.icon-check { --icon: url("/modules/_global/images/icons/check.svg"); }
.icon-chevron-down { --icon: url("/modules/_global/images/icons/chevron-down.svg"); }
.icon-chevron-right { --icon: url("/modules/_global/images/icons/chevron-right.svg"); }
.icon-circle-check-big { --icon: url("/modules/_global/images/icons/circle-check-big.svg"); }
.icon-circle-x { --icon: url("/modules/_global/images/icons/circle-x.svg"); }
.icon-clock { --icon: url("/modules/_global/images/icons/clock.svg"); }
.icon-clock-32 { --icon: url("/modules/_global/images/icons/clock-32.svg"); }
.icon-confetti-fill { --icon: url("/modules/_global/images/icons/confetti-fill.svg"); }
.icon-credit-card { --icon: url("/modules/_global/images/icons/credit-card.svg"); }
.icon-download { --icon: url("/modules/_global/images/icons/download.svg"); }
.icon-download-20 { --icon: url("/modules/_global/images/icons/download-20.svg"); }
.icon-drama { --icon: url("/modules/_global/images/icons/drama.svg"); }
.icon-facebook { --icon: url("/modules/_global/images/icons/facebook.svg"); }
.icon-file-check { --icon: url("/modules/_global/images/icons/file-check.svg"); }
.icon-flower { --icon: url("/modules/_global/images/icons/flower.svg"); }
.icon-fork-knife-fill { --icon: url("/modules/_global/images/icons/fork-knife-fill.svg"); }
.icon-gift { --icon: url("/modules/_global/images/icons/gift.svg"); }
.icon-grid-2x2 { --icon: url("/modules/_global/images/icons/grid-2x2.svg"); }
.icon-heart { --icon: url("/modules/_global/images/icons/heart.svg"); }
.icon-heart-pulse { --icon: url("/modules/_global/images/icons/heart-pulse.svg"); }
.icon-info { --icon: url("/modules/_global/images/icons/info.svg"); }
.icon-instagram { --icon: url("/modules/_global/images/icons/instagram.svg"); }
.icon-luggage { --icon: url("/modules/_global/images/icons/luggage.svg"); }
.icon-mail-check { --icon: url("/modules/_global/images/icons/mail-check.svg"); }
.icon-mail-check-alt { --icon: url("/modules/_global/images/icons/mail-check-alt.svg"); }
.icon-map-pin { --icon: url("/modules/_global/images/icons/map-pin.svg"); }
.icon-map-pin-fill { --icon: url("/modules/_global/images/icons/map-pin-fill.svg"); }
.icon-menu { --icon: url("/modules/_global/images/icons/menu.svg"); }
.icon-message-circle { --icon: url("/modules/_global/images/icons/message-circle.svg"); }
.icon-moon { --icon: url("/modules/_global/images/icons/moon.svg"); }
.icon-mountain-snow { --icon: url("/modules/_global/images/icons/mountain-snow.svg"); }
.icon-palette { --icon: url("/modules/_global/images/icons/palette.svg"); }
.icon-plane { --icon: url("/modules/_global/images/icons/plane.svg"); }
.icon-plus { --icon: url("/modules/_global/images/icons/plus.svg"); }
.icon-refresh-cw { --icon: url("/modules/_global/images/icons/refresh-cw.svg"); }
.icon-search { --icon: url("/modules/_global/images/icons/search.svg"); }
.icon-search-fill { --icon: url("/modules/_global/images/icons/search-fill.svg"); }
.icon-shield-check { --icon: url("/modules/_global/images/icons/shield-check.svg"); }
.icon-shopping-cart { --icon: url("/modules/_global/images/icons/shopping-cart.svg"); }
.icon-sliders-horizontal { --icon: url("/modules/_global/images/icons/sliders-horizontal.svg"); }
.icon-star-filled { --icon: url("/modules/_global/images/icons/star-filled.svg"); }
.icon-star-half { --icon: url("/modules/_global/images/icons/star-half.svg"); }
.icon-sun { --icon: url("/modules/_global/images/icons/sun.svg"); }
.icon-ticket-bold { --icon: url("/modules/_global/images/icons/ticket-bold.svg"); }
.icon-trash { --icon: url("/modules/_global/images/icons/trash.svg"); }
.icon-user { --icon: url("/modules/_global/images/icons/user.svg"); }
.icon-users { --icon: url("/modules/_global/images/icons/users.svg"); }
.icon-users-20 { --icon: url("/modules/_global/images/icons/users-20.svg"); }
.icon-users-three { --icon: url("/modules/_global/images/icons/users-three.svg"); }
.icon-utensils { --icon: url("/modules/_global/images/icons/utensils.svg"); }
.icon-waves { --icon: url("/modules/_global/images/icons/waves.svg"); }
.icon-x { --icon: url("/modules/_global/images/icons/x.svg"); }
.icon-status-check { --icon: url("/modules/_global/images/icons/status-check.svg"); }
.icon-status-alert-triangle { --icon: url("/modules/_global/images/icons/status-alert-triangle.svg"); }
.icon-status-x-circle { --icon: url("/modules/_global/images/icons/status-x-circle.svg"); }
.icon-status-info { --icon: url("/modules/_global/images/icons/status-info.svg"); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); padding: 0; color: var(--text-primary); background: transparent; border: 0; border-radius: var(--radius-pill); transition: background-color .15s ease-in-out; }
.icon-btn:hover { background-color: var(--action-tertiary-hover); color: var(--text-primary); text-decoration: none; }

/* ===== 5. Rács – tartalomszélesség és margók a Figma rácsrendszere szerint ===== */
@media (max-width: 1023px) { :root { --container-margin: 1.5rem; } }
@media (max-width: 767px) { :root { --container-margin: 1rem; --grid-gutter: 1rem; } }

/* ===== 6. Mobil tipográfia (Figma: Typography/Mobile/* stílusok) ===== */
@media (max-width: 767px) {
:root { --type-display-l: 600 2rem/2.5rem var(--font-heading); --ls-display-l: 0px; --type-display-m: 600 2rem/2.5rem var(--font-heading); --ls-display-m: 0px; --type-display-s: 600 2rem/2.5rem var(--font-heading); --ls-display-s: 0px; }
:root { --type-headline-l: 600 1.75rem/2.125rem var(--font-heading); --ls-headline-l: 0px; --type-headline-m: 600 1.5rem/2rem var(--font-heading); --ls-headline-m: -0.0125rem; --type-headline-s: 500 1.375rem/1.75rem var(--font-heading); --ls-headline-s: 0px; }
}

/* ===== 7. Segédosztályok ===== */
html #mdCookie, html #mdCookie * { font-family: var(--font-body); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1024px) { .m-only { display: none !important; } }
@media (max-width: 1023px) { .d-only { display: none !important; } }

/* ===== 8. Fejléc (Figma: Navigation, Navigáció / Menü állapotok A) ===== */
/* Ragadós fejléc: lefelé görgetésnél elbújik, felfelé görgetésnél visszajön (js/functions.js – is-stuck / is-hidden) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-default); box-shadow: var(--shadow-header); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.site-header.is-hidden { transform: translateY(calc(-100% - 1rem)); box-shadow: none; }
.site-header:has(:focus-visible) { transform: none; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 5rem; }
.site-logo { display: block; flex-shrink: 0; line-height: 0; }
.site-logo img { display: block; width: 7.5rem; height: 2rem; }
.header-search { position: relative; flex: 0 1 22.375rem; min-width: 13.75rem; }
.header-search input[type="search"] { min-height: 2.5rem; height: 2.5rem; padding: 0 3rem 0 1.5rem; font: 400 0.875rem/normal var(--font-body); letter-spacing: 0; color: var(--text-primary); background: var(--surface-search); border: 0; border-radius: var(--radius-pill); }
.header-search input[type="search"]::placeholder { color: var(--text-tertiary); }
.header-search input[type="search"]:focus { box-shadow: inset 0 0 0 0.125rem var(--border-focus); }
.header-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.header-search .search-btn { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; color: #FFFFFF; background: var(--zemi-navy); border: 0; border-radius: 50%; transition: background-color .15s ease-in-out; }
.header-search .search-btn:hover { background: var(--navy-500); }
.main-nav { align-self: stretch; }
.main-nav > ul { display: flex; align-items: stretch; gap: 2rem; height: 100%; margin: 0; padding: 0; list-style: none; }
.main-nav > ul > li { display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; gap: 0.375rem; font: var(--type-label-l); letter-spacing: var(--ls-label-l); color: var(--text-primary); white-space: nowrap; }
.nav-link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 0.125rem; }
.nav-link .chevron { transform: rotate(90deg); }
.user-nav { display: flex; align-items: center; gap: 0.25rem; margin-right: -0.5rem; }
.user-nav .icon-btn { width: 2.5rem; height: 2.5rem; }
.menu-toggle { display: none !important; }

/* Lenyíló megamenü: a fejléc konténerének jobb széléhez igazodik, 8 px-re a fejléc alatt.
   Egérrel rámutatva vagy billentyűzettel (fókusz) nyílik; a ::before híd tartja nyitva a rés fölött. */
.mega-menu { position: absolute; top: calc(100% + 0.5rem); right: var(--container-margin); z-index: 5; width: 60rem; max-width: calc(100% - 2 * var(--container-margin)); padding: 1.4375rem; background: var(--bg-section); border: 1px solid var(--border-menu); border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.5rem); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s; }
.mega-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5625rem; height: 0.5625rem; }
.mega-alkalmak { background: var(--bg-default); }
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu, .has-mega.is-open .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.main-nav .has-mega.is-dismissed .mega-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.5rem); } /* Esc után zárva marad, amíg az egér / fókusz el nem hagyja */
.mega-inner { display: flex; align-items: flex-start; gap: 1.5rem; }
.mega-group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
/* Egyetlen linkcsoport (pl. Alkalmak): két csoport helyén, a linkek két oszlopba tördelve */
.mega-group.wide .mega-links { display: block; align-self: stretch; columns: 2; column-gap: 1.5rem; margin-bottom: -0.625rem; }
.mega-group.wide .mega-links li { padding-bottom: 0.625rem; break-inside: avoid; }
.mega-title { margin: 0; font: 600 1rem/normal var(--font-heading); color: var(--text-primary); }
.mega-links { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding: 0; list-style: none; font: 400 0.875rem/1.125rem var(--font-body); }
.mega-links a { color: var(--text-primary); white-space: nowrap; }
.mega-alkalmak .mega-links a { color: var(--text-secondary); }
.mega-links a:hover { color: var(--text-primary); }
.mega-more { font: 500 0.875rem/1.125rem var(--font-body); color: var(--text-primary); white-space: nowrap; }
.mega-feature { flex: 0 0 20rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.mega-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; color: var(--text-primary); background: var(--bg-section); border-radius: 0.75rem; outline: 1px solid var(--border-default); outline-offset: -1px; } /* a Figma belső körvonala: a képre rajzolódik, nem növeli a méretet */
.mega-card:hover { text-decoration: none; }
.mega-card:focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }
.mega-card img { display: block; width: 100%; height: 10rem; object-fit: cover; background: var(--text-secondary); }
.mega-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }
.mega-card-title { font: 600 1.125rem/normal var(--font-heading); color: var(--text-primary); }
.mega-card-text { font: 400 0.875rem/1.125rem var(--font-body); color: var(--text-tertiary); }
.mega-alkalmak .mega-card-text { color: var(--text-secondary); }
.mega-card-link { font: 500 0.875rem/1.125rem var(--font-body); color: var(--text-primary); }
.mega-card:hover .mega-card-link { text-decoration: underline; }

/* Mobilmenü – teljes képernyős panel, főnézet + almenük (Figma: Navigáció, Navigáció / Élmények, Navigáció / Alkalmak / B) */
.mobile-menu { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-default); }
.mobile-menu[hidden], .mm-view[hidden] { display: none; }
body.menu-open, body.modal-open { overflow: hidden; }
.mm-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.5rem; padding: 0 var(--container-margin); }
.mm-header.sub { justify-content: flex-start; height: 3rem; }
.mm-header .icon-btn { flex-shrink: 0; }
.mm-close { margin-right: -0.75rem; }
.mm-back { margin-left: -0.75rem; margin-right: -0.75rem; }
.mm-title { flex: 1; margin: 0; font: 600 1.25rem/normal var(--font-heading); color: var(--text-primary); }
.mm-body { display: flex; flex-direction: column; padding: 1.6875rem 0 2.5rem; }
.mm-header.sub + .mm-body { padding-top: 1rem; }
[data-view="alkalmak"] .mm-header.sub + .mm-body { padding-top: 1.5625rem; }
.mm-nav, .mm-account, .mm-list, .mm-chips { margin: 0; padding: 0 var(--container-margin); list-style: none; }
.mm-item { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 3rem; padding: 0; font: 600 1.125rem/normal var(--font-heading); color: var(--text-primary); text-align: left; background: none; border: 0; }
.mm-item:hover { text-decoration: none; }
.mm-divider { height: 0; margin: 1.5rem var(--container-margin); border: 0; border-top: 1px solid var(--border-default); }
.mm-account a { display: flex; align-items: center; gap: 1rem; height: 3rem; font: 400 1rem/normal var(--font-heading); color: var(--text-primary); }
.mm-account a:hover { text-decoration: none; }
.mm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4375rem; font: 400 0.875rem/1 var(--font-heading); color: #FFFFFF; background: var(--action-primary); border-radius: var(--radius-pill); }
.mm-card { display: flex; align-items: center; gap: 1rem; margin: 1.5rem var(--container-margin) 0; padding: 1rem 0.125rem 1rem 1rem; color: var(--text-primary); background: var(--surface-menu-card); border-radius: 0.5rem; }
.mm-card:hover { text-decoration: none; }
.mm-card img { flex: 0 0 6rem; width: 6rem; height: 6rem; object-fit: cover; border-radius: 0.375rem; }
.mm-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mm-card-title { font: 600 1.125rem/1.375rem var(--font-heading); color: var(--text-primary); }
.mm-card-text { font: 400 0.875rem/1.25rem var(--font-body); color: var(--text-secondary); }
/* Világos / sötét mód váltó (js/theme.js): asztalon a fejléc ikonjai között, mobilon a menü jobb alsó sarkában */
.mobile-menu .mm-view[data-view="main"] { display: flex; flex-direction: column; min-height: 100%; }
.mm-view[data-view="main"] .mm-body { flex: 1 0 auto; }
.mm-footer { display: flex; justify-content: flex-end; margin-top: auto; padding: 1.5rem var(--container-margin) 0; }
.mm-theme { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); padding: 0; color: var(--text-primary); background: var(--surface-default); border: 1px solid var(--border-default); border-radius: 50%; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12); cursor: pointer; transition: background-color .15s ease-in-out; }
.mm-theme:hover { background-color: var(--action-tertiary-hover); }
.theme-toggle[hidden] { display: none !important; }
.mm-arrow { display: inline-flex; flex-shrink: 0; padding: 0.625rem; }
.mm-arrow-btn { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: #FFFFFF; background: var(--action-primary); border-radius: 50%; }
.mm-arrow-btn .icon { width: 0.875rem; height: 0.875rem; }
.mm-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3rem; font: 400 1rem/normal var(--font-heading); color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
.mm-list a:hover { text-decoration: none; }
.mm-list .mm-all a { font: 600 1.125rem/normal var(--font-heading); border-bottom: 0; }
[data-view="alkalmak"] .mm-list { margin-top: 0.5rem; }
.mm-group-title { display: flex; align-items: center; height: 3rem; margin: 0; padding: 0 var(--container-margin); font: 600 1.125rem/normal var(--font-heading); color: var(--text-primary); }
.mm-list + .mm-group-title { margin-top: 1.5625rem; }
.mm-chips { display: flex; gap: 1rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; }
.mm-chips::-webkit-scrollbar { display: none; }
.mm-chips a { display: inline-flex; padding: 0.75rem 1rem; font: 500 1rem/1.5rem var(--font-heading); color: var(--text-primary); white-space: nowrap; border: 1px solid var(--border-default); border-radius: 1rem; }
.mm-chips a:hover { text-decoration: none; background: var(--action-tertiary-hover); }
.mm-browse { display: flex; align-items: center; gap: 1rem; height: 3.5rem; margin: 1.5625rem var(--container-margin) 0; padding: 1rem; font: 600 1rem/1.5rem var(--font-heading); color: var(--text-primary); background: var(--surface-menu-card); border-radius: 0.5rem; }
.mm-browse:hover { text-decoration: none; }
.mm-browse span:not(.icon) { flex: 1; }

/* ===== 9. Hírlevél-sáv, lábléc és hírlevél-ablak (Figma: Hírlevél, Footer, Hírlevél – feliratkozási modal) ===== */
.newsletter-band { padding: 4.5rem 0; background: var(--surface-band); color: #FFFFFF; }
.newsletter-band .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.newsletter-text { max-width: 47.25rem; }
.newsletter-band h2 { font: 500 1.75rem/2.25rem var(--font-heading); letter-spacing: -0.00625rem; color: #FFFFFF; }
.newsletter-band p { margin: 0.75rem 0 0; font: var(--type-body-m); color: #FFFFFF; }
.newsletter-band .btn { flex-shrink: 0; gap: 0.375rem; }
.newsletter-band .btn .icon { width: 1rem; height: 1rem; }
.site-footer { padding: 2.625rem 0 2.5rem; background: var(--surface-warm-white); }
.footer-top { display: grid; grid-template-columns: 17.5rem repeat(4, 11.25rem); column-gap: 1.5rem; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.footer-logo { display: inline-block; color: var(--text-primary); }
.footer-logo:hover { text-decoration: none; }
.footer-logo-text { display: block; font: 700 1.5rem/normal var(--font-heading); color: var(--text-primary); }
.footer-logo-img { display: none; }
.footer-brand p { margin: 0; font: var(--type-body-m); color: var(--text-secondary); }
.footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col h3 { font: 500 1rem/1.5rem var(--font-heading); letter-spacing: 0.00625rem; color: var(--text-primary); }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col li { font: 400 0.875rem/1.25rem var(--font-body); }
.footer-col a { font: 400 0.875rem/1.25rem var(--font-body); letter-spacing: 0.00625rem; color: var(--text-secondary); }
.footer-col a:hover, .footer-legal a:hover { color: var(--text-primary); }
@media (min-width: 1441px) { .footer-top { justify-content: space-between; } }
.footer-bottom { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-default); }
.footer-copy { margin: 0; font: 400 0.75rem/1rem var(--font-body); color: var(--text-secondary); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font: 400 0.75rem/1rem var(--font-body); }
.footer-legal li + li::before { content: "·"; margin: 0 1.25rem; font: 400 0.75rem/1rem var(--font-body); color: var(--text-secondary); }
.footer-legal a { font: 400 0.75rem/1rem var(--font-body); color: var(--text-secondary); }
.footer-social { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); }
.social-link:hover { color: var(--navy-500); text-decoration: none; }
/* a jelek SVG-je belső margóval készült: 29 px-es ikon 24 px-es helyen adja a terv 24 px-es jelét */
.social-link .icon { width: 1.8125rem; height: 1.8125rem; margin: -0.15625rem; }

/* Hírlevél-feliratkozás párbeszédablak */
.nl-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.nl-modal[hidden] { display: none; }
.nl-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.13); }
.nl-dialog { position: relative; display: flex; flex-direction: column; gap: 1.5rem; width: 30rem; max-width: 100%; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 3.5rem 2rem 2rem; background: var(--surface-default); border-radius: 1rem; box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.09); }
.nl-close { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--text-primary); background: transparent; border: 0; border-radius: 50%; }
.nl-close:hover { background: var(--action-tertiary-hover); }
.nl-intro h2 { font: 600 1.5rem/2rem var(--font-heading); color: var(--text-primary); }
.nl-intro p { margin: 0.5rem 0 0; font: var(--type-body-m); color: var(--text-secondary); }
.nl-form { display: flex; flex-direction: column; gap: 1.5rem; }
.nl-fields { display: flex; flex-direction: column; gap: 1rem; }
.nl-field { display: block; }
.nl-field input[type="text"], .nl-field input[type="email"] { height: 3.5rem; min-height: 3.5rem; padding: 0 1rem; font: var(--type-label-m); letter-spacing: var(--ls-label-m); border-color: var(--border-default); border-radius: var(--radius-sm); }
.nl-field input::placeholder { color: var(--text-secondary); }
.nl-consent { display: flex; align-items: flex-start; gap: 0.75rem; font: var(--type-label-m); letter-spacing: var(--ls-label-m); color: var(--text-secondary); cursor: pointer; }
.nl-consent a { color: inherit; text-decoration: underline; }
.nl-consent input { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin: 0 1px; background: var(--surface-default) no-repeat center / 0.875rem; border: 0.09375rem solid var(--border-strong); border-radius: 0.125rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
.nl-consent input:checked { background-color: var(--zemi-navy); border-color: var(--zemi-navy); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10.5l3.2 3.2L15 7'/%3e%3c/svg%3e"); }
.nl-consent input:focus-visible { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }
.nl-submit { min-height: 3rem; border-radius: 2.5rem; font: var(--type-label-l); letter-spacing: var(--ls-label-l); }

/* Sötét mód: a kereső körvonalas, a gombja egyszerű ikon (Figma: Főoldal – Desktop / Dark Mode) */
@media (prefers-color-scheme: dark) {
.header-search input[type="search"] { box-shadow: inset 0 0 0 1px var(--border-default); }
.header-search input[type="search"]:focus { box-shadow: inset 0 0 0 0.125rem var(--border-focus); }
.header-search .search-btn { background: transparent; color: var(--text-primary); }
.header-search .search-btn:hover { background: var(--action-tertiary-hover); }
.header-search .search-btn .icon { --icon: url("/modules/_global/images/icons/search.svg"); }
.nl-backdrop { background: rgba(0, 0, 0, 0.6); } /* sötét oldalon a világos módbeli 13%-os takarás nem látszana */
.nl-consent input:checked { background-color: var(--accent-lime); border-color: var(--accent-lime); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23022151' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10.5l3.2 3.2L15 7'/%3e%3c/svg%3e"); }
}

/* ===== 10. Fejléc, lábléc – tablet és mobil (Figma: iPhone 13 & 14 Főoldal / Mobilnézet) ===== */
@media (max-width: 1263px) {
.site-header .container { gap: 1rem; }
.main-nav > ul { gap: 1.25rem; }
}
/* keskeny asztali nézetben a témaváltó ikon miatt szűkebb térközök, hogy a keresőmező felirata kiférjen */
@media (min-width: 1024px) and (max-width: 1199px) {
.site-header .container { gap: 0.75rem; }
.main-nav > ul { gap: 0.875rem; }
.user-nav { gap: 0; }
.header-search input[type="search"] { padding-left: 1rem; padding-right: 2.75rem; }
.footer-top { grid-template-columns: minmax(12.5rem, 17.5rem) repeat(4, minmax(0, 11.25rem)); justify-content: space-between; }
}

@media (min-width: 1024px) {
.mobile-menu { display: none !important; }
}

@media (max-width: 1023px) {
.site-header .container { flex-wrap: wrap; height: auto; padding-top: 0.25rem; padding-bottom: 0.75rem; row-gap: 1.25rem; }
.site-header .site-logo { order: 1; }
.user-nav { order: 2; gap: 0; margin-left: auto; margin-right: -0.75rem; }
.user-nav .icon-btn { width: 3rem; height: 3rem; }
.menu-toggle { display: inline-flex !important; }
.header-search { order: 3; flex: 1 1 100%; min-width: 0; }
.header-search input[type="search"] { height: 2.625rem; min-height: 2.625rem; padding-left: 0.75rem; background: var(--surface-default); box-shadow: inset 0 0 0 1px var(--border-search-mobile); }
.header-search input[type="search"]::placeholder { color: var(--border-search-mobile); }
.header-search .search-btn { top: 1px; right: 1px; }
.header-search .search-btn .icon { width: 1.125rem; height: 1.125rem; }
.main-nav { display: none; }
.newsletter-band { padding: 3rem 0; }
.footer-top { grid-template-columns: repeat(4, 1fr); row-gap: 2rem; }
.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
.site-header { box-shadow: none; }
.site-header.is-stuck { box-shadow: var(--shadow-header); }
.site-header.is-hidden { box-shadow: none; }
.newsletter-band { padding: 2.5rem 0; }
.newsletter-band .container { flex-direction: column; align-items: stretch; gap: 1.5rem; }
.newsletter-band .btn { width: 100%; }
.newsletter-band .btn .icon { width: 1.125rem; height: 1.125rem; }
.site-footer { padding: 2.5rem 0 2.25rem; } /* alul 36px: a közösségi ikonok rajzolata 4px-lel kisebb a 48px-es dobozuknál */
.footer-top { grid-template-columns: 1fr; row-gap: 1.5rem; }
.footer-brand { gap: 0.375rem; }
.footer-logo-text { display: none; }
.footer-logo-img { display: block; }
.footer-logo-img img { display: block; width: 7.5rem; height: 2rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 2rem; }
.footer-legal { order: 1; gap: 0.5rem 1rem; }
.footer-legal li + li::before { display: none; }
.footer-copy { order: 2; }
.footer-social { order: 3; gap: 1.5rem; margin-left: 0; }
.social-link { width: 3rem; height: 3rem; }
.social-link .icon { width: 3rem; height: 3rem; margin: 0; }
.nl-dialog { padding: 3.5rem 1rem 1.5rem; }
}

/* Nagyobb telefon, kis tablet: a lábléc linkoszlopai kettesével */
@media (min-width: 480px) and (max-width: 767px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) { .btn, .chip, .icon-btn, input, textarea, select, .site-header, .mega-menu { transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* ===== 11. Élmények-oldalak közös szakaszai (exp-) =====
   Az Élmények oldal (/elmenyek, modul: categories), a kategóriaoldalak (/elmenyek/…, modul: category) és a keresési oldal
   (/kereses, modul: search) közös elemei: szakaszfej, hero (morzsamenüvel), ajánlatkártyák, ajándékválasztó felhívás,
   szerkesztői blokkok, GYIK. Markup: modules/_global/view/sections/*.php. (A szűrhető ajánlatlista külön komponens: modules/offers.) Forrás: Figma – „… élmények oldal” és „Kategória - Ajánlatlista - élmények / gasztronómia”. */
.exp-section { padding: 5rem 0; background: var(--bg-default); }
.exp-section-head { display: flex; flex-direction: column; gap: 0.75rem; }
.exp-section-title { font: var(--type-headline-l); letter-spacing: var(--ls-headline-l); color: var(--text-primary); }
.exp-section-lead { margin: 0; font: var(--type-body-l); letter-spacing: var(--ls-body-l); color: var(--text-secondary); }
/* kép nélküli helykitöltő (ha a kép még nincs feltöltve) */
.exp-hero.no-image, .exp-offer-img.no-image, .exp-gift-img.no-image, .exp-editorial-img.no-image { background: linear-gradient(160deg, var(--navy-300) 0%, var(--navy-500) 45%, var(--navy-800) 100%); }

/* Hero (kategóriaoldalon morzsamenüvel) */
.exp-hero { position: relative; display: flex; align-items: center; min-height: 23.75rem; padding: 2.5rem 0; overflow: hidden; background: var(--zemi-navy); }
.exp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.exp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 33, 81, 0.96) 0%, rgba(2, 33, 81, 0.84) 45%, rgba(2, 33, 81, 0.3) 72%, rgba(2, 33, 81, 0) 100%); } /* olvashatóság a kép bal oldalán */
.exp-hero .container { position: relative; z-index: 1; }
.exp-hero-content { display: flex; flex-direction: column; gap: 1.5rem; max-width: 47.5rem; }
.exp-hero-title { font: var(--type-display-l); letter-spacing: var(--ls-display-l); color: var(--text-on-primary); }
.exp-hero-lead { max-width: 40.625rem; margin: 0; font: var(--type-body-l); letter-spacing: var(--ls-body-l); color: var(--text-on-primary); }
.exp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 0.375rem; margin: 0; padding: 0; list-style: none; font: 400 1rem/1.25rem var(--font-heading); color: var(--accent-light-blue); }
.exp-breadcrumb li + li::before { content: "/"; margin-right: 0.375rem; }
.exp-breadcrumb a { color: inherit; }
.exp-breadcrumb a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 0.25rem; }

/* Ajánlatkártyák (Népszerű élmények) */
.exp-popular { background: var(--bg-section); }
.exp-popular-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.exp-more-link { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; font: 400 1rem/1.25rem var(--font-heading); color: var(--text-primary); }
.exp-more-link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 0.25rem; }
.exp-offer-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.exp-offer-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; min-height: 21.875rem; padding: 0 0.75rem 0.75rem; overflow: hidden; background: var(--surface-default); border: 1px solid var(--border-subtle); border-radius: 0.75rem; transition: box-shadow .2s ease; }
.exp-offer-card:hover { box-shadow: 0 1rem 2rem -1.25rem rgba(2, 33, 81, 0.4); }
.exp-offer-img { display: block; flex-shrink: 0; width: calc(100% + 1.5rem); max-width: none; height: auto; margin: 0 -0.75rem; aspect-ratio: 282 / 206; object-fit: cover; } /* a kártya tetején kifutó kép */
.exp-offer-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.125rem; margin: 0; font: 400 0.875rem/1.125rem var(--font-body); letter-spacing: 0.009375rem; color: var(--text-tertiary); }
.exp-offer-location { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-offer-rating { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; white-space: nowrap; }
.exp-offer-rating .icon { width: 0.75rem; height: 0.75rem; color: var(--accent-coral); }
.exp-offer-title { overflow: hidden; font: 600 1.125rem/1.5rem var(--font-heading); color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; }
.exp-offer-title a { color: inherit; }
.exp-offer-title a::after { content: ""; position: absolute; inset: 0; } /* az egész kártya a link */
.exp-offer-title a:hover { text-decoration: none; }
.exp-offer-title a:focus-visible { outline: 0; }
.exp-offer-card:has(a:focus-visible) { outline: 0.125rem solid var(--border-focus); outline-offset: 0.125rem; }
.exp-offer-price { display: flex; align-items: center; min-height: 2rem; margin: auto 0 0; padding-top: 0.25rem; font: 700 1rem/1.25rem var(--font-body); color: var(--text-primary); }
.exp-popular-all { margin-top: 2rem; font: 600 1rem/1.25rem var(--font-heading); letter-spacing: 0.02rem; border-width: 0.125rem; }

/* Ajándékválasztó felhívás */
.exp-gift { padding: 5rem 0; background: var(--bg-default); }
.exp-gift-panel { display: flex; align-items: center; gap: 4rem; padding: 3.5rem; background: var(--surface-band); border-radius: 1rem; }
.exp-gift-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.exp-gift-title { font: var(--type-headline-l); letter-spacing: var(--ls-headline-l); color: var(--text-on-navy); }
.exp-gift-lead { margin: 0; font: var(--type-body-l); letter-spacing: var(--ls-body-l); color: var(--text-on-navy); }
.exp-gift-btn { min-height: 0; padding: 1rem 1.75rem; font: 600 1.125rem/1.4375rem var(--font-heading); letter-spacing: 0; }
.exp-gift-img { display: block; flex: 0 0 20rem; width: 20rem; height: 15rem; object-fit: cover; border-radius: 0.75rem; }

/* Szerkesztői blokkok */
.exp-editorial { padding: 5rem 0 7rem; background: var(--bg-default); }
.exp-editorial .container { display: flex; flex-direction: column; gap: 6rem; }
.exp-editorial-block { display: flex; align-items: center; gap: 1.5rem; }
.exp-editorial-block.reverse { flex-direction: row-reverse; } /* a 2. blokkban a kép jobbra */
.exp-editorial-img { display: block; flex: 0 0 calc(50% - 0.75rem); width: calc(50% - 0.75rem); height: auto; aspect-ratio: 588 / 440; object-fit: cover; border-radius: 0.75rem; }
.exp-editorial-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; padding: 0 1.5rem; }
.exp-editorial-title { font: var(--type-headline-l); letter-spacing: var(--ls-headline-l); color: var(--text-primary); }
.exp-editorial-text p { margin: 0; font: 400 1rem/1.625rem var(--font-body); color: var(--text-secondary); }
.exp-editorial-text p a { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.1875rem; }
.exp-editorial-text p a:hover { color: var(--text-link-hover); text-decoration-thickness: 0.125rem; }

/* GYIK */
.exp-faq { padding: 6rem 0; background: var(--surface-tinted); border-top: 1px solid var(--border-subtle); }
.exp-faq .exp-section-head { margin-bottom: 2.5rem; }
.exp-faq-item { border-bottom: 1px solid var(--border-default); }
.exp-faq-item summary { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; list-style: none; }
.exp-faq-item summary::-webkit-details-marker { display: none; }
.exp-faq-question { flex: 1 1 auto; font: var(--type-title-m); color: var(--text-primary); }
.exp-faq-item summary .icon { color: var(--text-primary); transition: transform .2s ease; }
.exp-faq-item[open] summary .icon { transform: rotate(45deg); } /* a plusz nyitva × */
.exp-faq-item summary:hover .exp-faq-question { text-decoration: underline; text-underline-offset: 0.25rem; }
.exp-faq-answer { max-width: 56.25rem; margin: 0; padding: 0 3rem 1.5rem 0; font: 400 1rem/1.625rem var(--font-body); color: var(--text-secondary); }

/* Tablet: vízszintesen görgethető ajánlatok, a felhívásban a kép felül */
@media (max-width: 1023px) {
.exp-section, .exp-faq { padding: 4rem 0; }
.exp-hero { min-height: 20rem; }
.exp-hero-title { font: 600 3rem/3.5rem var(--font-heading); letter-spacing: -1px; }
.exp-offer-row { display: flex; gap: 1.5rem; margin: 0 calc(-1 * var(--container-margin)); padding: 0 var(--container-margin) 0.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--container-margin); scrollbar-width: none; }
.exp-offer-row::-webkit-scrollbar { display: none; }
.exp-offer-row > li { flex: 0 0 16.4375rem; min-width: 0; scroll-snap-align: start; } /* min-width: a hosszú (nem tördelt) cím ne szélesítse a kártyát */
.exp-offer-row .exp-offer-title { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* a keskeny kártyán a cím két sorba tördelődhet */
.exp-offer-img { aspect-ratio: 263 / 206; }
.exp-gift { padding: 4rem 0; }
.exp-gift-panel { flex-direction: column-reverse; align-items: stretch; gap: 2rem; padding: 2.5rem; }
.exp-gift-img { flex: none; width: 100%; height: auto; aspect-ratio: 358 / 240; }
.exp-editorial { padding: 4rem 0 5rem; }
.exp-editorial .container { gap: 4rem; }
}

/* Mobil (390 px) */
@media (max-width: 767px) {
.exp-section, .exp-faq { padding: 2.5rem 0; }
.exp-section-head { gap: 0.5rem; }
.exp-section-title { font: 600 1.75rem/2.125rem var(--font-heading); letter-spacing: -0.01875rem; }
.exp-section-lead { font: var(--type-body-m); letter-spacing: var(--ls-body-m); }
.exp-faq .exp-section-head { margin-bottom: 1.5rem; }
.exp-hero { min-height: 12.5rem; }
.exp-hero-content { gap: 1rem; }
.exp-hero-title { font: 600 2rem/2.375rem var(--font-heading); letter-spacing: -0.075rem; }
.exp-hero-lead { font: 400 0.875rem/1.25rem var(--font-body); letter-spacing: 0; }
.exp-popular-head { margin-bottom: 2rem; padding-bottom: 0; border-bottom: 0; }
.exp-gift { padding: 0; }
.exp-gift .container { padding: 0; }
.exp-gift-panel { gap: 1.5rem; padding: 1.5rem 1rem; border-radius: 0; }
.exp-gift-title { font: 600 1.75rem/2.125rem var(--font-heading); letter-spacing: -0.01875rem; }
.exp-editorial { padding: 2.5rem 0; }
.exp-editorial .container { gap: 1.5rem; }
.exp-editorial-block, .exp-editorial-block.reverse { flex-direction: column; align-items: stretch; }
.exp-editorial-img { flex: none; width: 100%; aspect-ratio: 358 / 268; }
.exp-editorial-text { gap: 1rem; padding: 0 1rem; }
.exp-editorial-title { font: 600 1.5rem/1.875rem var(--font-heading); letter-spacing: -0.01875rem; }
.exp-faq-answer { padding-right: 0; }
}

@media (prefers-color-scheme: dark) { .exp-offer-card:hover { box-shadow: 0 1rem 2rem -1.25rem rgba(0, 0, 0, 0.8); } }
@media (prefers-reduced-motion: reduce) { .exp-offer-card, .exp-faq-item summary .icon { transition-duration: .01ms !important; } }