/* ==========================================================================
   szallas-magyarorszag.hu – teljes stíluslap
   --------------------------------------------------------------------------
   Szándékosan egyetlen, keretrendszer nélküli CSS fájl. Indoklás:
   - nincs több száz kilobájtos, kihasználatlan CSS (jobb LCP és CLS),
   - egyetlen HTTP kérés, agresszíven cache-elhető,
   - a Core Web Vitals közvetlenül befolyásolja a keresési helyezést.

   Felépítés: 1) tokenek  2) alapok  3) elemek  4) blokkok  5) reszponzív
   ========================================================================== */

/* --- 1. Design tokenek --------------------------------------------------- */
:root {
    --brand-900: #0a3d42;
    --brand-700: #0f5c63;
    --brand-600: #12707a;
    --brand-500: #168a95;
    --brand-100: #e2f2f3;
    --brand-50:  #f2f9fa;

    --accent-600: #c2410c;
    --accent-500: #ea580c;
    --accent-100: #ffedd5;

    --ink-900: #10171b;
    --ink-700: #33424a;
    --ink-500: #5b6b74;
    --ink-300: #93a3ac;
    --ink-200: #d5dde1;
    --ink-100: #e9eef0;
    --ink-50:  #f5f8f9;
    --white: #fff;

    --success-600: #15803d;
    --success-100: #dcfce7;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgb(16 23 27 / 6%), 0 1px 3px rgb(16 23 27 / 8%);
    --shadow: 0 4px 6px -2px rgb(16 23 27 / 6%), 0 12px 24px -8px rgb(16 23 27 / 12%);
    --shadow-lg: 0 12px 32px -8px rgb(16 23 27 / 18%);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

    --container: 1180px;
    --header-h: 64px;
}

/* --- 2. Alapok ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-900);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-3);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-3); }

a {
    color: var(--brand-600);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container {
    width: min(100% - 2 * var(--space-4), var(--container));
    margin-inline: auto;
}

.container--narrow { width: min(100% - 2 * var(--space-4), 760px); }

.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;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-700);
    color: var(--white);
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
    left: 0;
    top: 0;
}

.lead {
    font-size: 1.1rem;
    color: var(--ink-700);
}

.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose p { color: var(--ink-700); }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--space-4); }
.prose li { color: var(--ink-700); margin-bottom: var(--space-1); }

.visually-heading {
    font-size: 1rem;
    color: var(--ink-500);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

/* --- 3. Elemek ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
    background: var(--ink-100);
    color: var(--ink-900);
}

.btn:hover { text-decoration: none; background: var(--ink-200); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand-600); color: var(--white); }
.btn--primary:hover { background: var(--brand-700); }

.btn--ghost {
    background: transparent;
    border-color: var(--ink-200);
    color: var(--ink-700);
}
.btn--ghost:hover { background: var(--ink-50); }

.btn--block { width: 100%; }
.btn--small { padding: 8px 14px; font-size: .9rem; }
.btn--large { padding: 15px 24px; font-size: 1.05rem; }

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
}

.badge--sale { background: var(--accent-500); color: var(--white); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-700);
    font-size: .93rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.chip:hover {
    text-decoration: none;
    border-color: var(--brand-500);
    background: var(--brand-50);
    color: var(--brand-700);
}

.chip em {
    font-style: normal;
    font-size: .8rem;
    color: var(--ink-300);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip-list--spaced { margin-top: var(--space-5); }

.notice {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--accent-100);
    color: var(--accent-600);
    font-size: .92rem;
}

.notice code {
    background: rgb(255 255 255 / 60%);
    padding: 1px 5px;
    border-radius: 4px;
}

/* --- 4. Blokkok ---------------------------------------------------------- */

/* Fejléc */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--white);
    border-bottom: 1px solid var(--ink-100);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-700);
    font-size: 1.05rem;
}

.logo:hover { text-decoration: none; }
.logo__mark { display: inline-flex; color: var(--brand-600); }
.logo__text { color: var(--ink-900); font-weight: 500; }
.logo__text strong { color: var(--brand-700); font-weight: 800; }

.site-nav__toggle {
    display: none;
    background: none;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink-700);
    position: relative;
}

.hamburger::before, .hamburger::after {
    content: "";
    position: absolute;
    left: 0;
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.site-nav__list a {
    color: var(--ink-700);
    font-weight: 500;
    font-size: .96rem;
}

.site-nav__list a.btn { color: var(--ink-900); }

/* Morzsamenü */
.breadcrumbs {
    padding: var(--space-3) 0;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-100);
    font-size: .86rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--ink-500);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--ink-300);
}

.breadcrumbs a { color: var(--ink-500); }

/* Hero */
.hero {
    padding: var(--space-8) 0 var(--space-7);
    background:
        radial-gradient(1200px 400px at 15% -10%, var(--brand-100), transparent 60%),
        linear-gradient(180deg, var(--brand-50), var(--white));
}

.hero__title { max-width: 20ch; }

.hero__lead {
    max-width: 60ch;
    font-size: 1.1rem;
    color: var(--ink-700);
    margin-bottom: var(--space-6);
}

.hero__usp {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
    color: var(--ink-700);
    font-size: .92rem;
}

.hero__usp li::before {
    content: "✓";
    color: var(--success-600);
    font-weight: 700;
    margin-right: var(--space-2);
}

/* Keresőűrlap */
.searchbox {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    grid-template-columns: 2fr 1fr 1fr 1.2fr auto;
    align-items: end;
}

.searchbox--compact {
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
}

.searchbox__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.searchbox__field label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.searchbox input[type="text"],
.searchbox input[type="date"],
.searchbox input[type="number"],
.searchbox select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    font: inherit;
    color: var(--ink-900);
    background: var(--white);
    min-height: 44px;
}

.searchbox__guests { display: flex; gap: var(--space-2); }
.searchbox__guests select { flex: 1; min-width: 0; }

.searchbox__submit { align-self: end; }
.searchbox__submit .btn { min-height: 44px; }

.searchbox__autocomplete { position: relative; }

.autocomplete__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.autocomplete__list li {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: .93rem;
}

.autocomplete__list li:hover,
.autocomplete__list li[aria-selected="true"] { background: var(--brand-50); }

.autocomplete__list small { color: var(--ink-300); }

.searchbar {
    padding: var(--space-4) 0;
    background: var(--brand-50);
    border-bottom: 1px solid var(--ink-100);
}

/* Szekciók */
.section { padding: var(--space-7) 0; }
.section--tight { padding: var(--space-5) 0; }
.section--muted { background: var(--ink-50); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section__more { font-size: .93rem; font-weight: 600; white-space: nowrap; }

.page-head {
    padding: var(--space-7) 0 var(--space-5);
    background: linear-gradient(180deg, var(--brand-50), var(--white));
}

.page-head--slim { padding: var(--space-6) 0 var(--space-3); }

/* Úticél kártyák */
.dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.dest-grid--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.dest-card {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--ink-100);
    transition: box-shadow .18s ease, transform .18s ease;
}

.dest-card:hover {
    text-decoration: none;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.dest-card__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--ink-100);
}

.dest-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-100), var(--ink-100));
    color: var(--brand-600);
}

.dest-card__body { display: block; padding: var(--space-3); }
.dest-card__name { display: block; color: var(--ink-900); }
.dest-card__meta { display: block; font-size: .85rem; color: var(--ink-500); }

/* Szálláshely kártyák */
/* A minimális kártyaszélesség úgy van megválasztva, hogy a lábrészben az
   értékelés és az ár EGYMÁS MELLETT is elférjen (kb. 125 + 125 + 12 px).
   Keskenyebb kártyán a kettő hol egy sorba, hol egymás alá került volna,
   ami kártyánként eltérő, rendezetlen képet adott. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}

.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--ink-100);
}

.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Kép nélküli szálláshely: nem üres folt, hanem beszédes helykitöltő. */
.card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--brand-100), var(--ink-100));
    color: var(--brand-600);
}

.card__placeholder-text {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-500);
}

.card__media .badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    flex: 1;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: .8rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.card__stars { color: #d9a441; letter-spacing: .05em; }

.card__title { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.card__title a { color: var(--ink-900); }

.card__location {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: .87rem;
    color: var(--ink-500);
}

.card__distance { color: var(--ink-300); }

.card__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    font-size: .8rem;
    color: var(--ink-500);
}

.card__amenities li::after { content: "·"; margin-left: var(--space-2); color: var(--ink-300); }
.card__amenities li:last-child::after { content: ""; }

.card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
    /* Szándékosan NINCS flex-wrap: az értékelés és az ár minden kártyán
       egymás mellett marad, így a lista egységes képet ad. A helyet a
       .card-grid minimális oszlopszélessége garantálja. */
    flex-wrap: nowrap;
}

/* Az árblokk minden eleme külön sorban áll, és nem törik ketté: a szűk
   kártyán különben a "/ éjszaka" és az "adókkal kb. …" egy sorba csúszna. */
.card__price {
    text-align: right;
    line-height: 1.3;
    flex: 0 0 auto;
    white-space: nowrap;
}

.card__price-old { display: block; font-size: .82rem; color: var(--ink-300); }

/* Az összeg és a "/ éj" egy sorban marad, a becsült bruttó alatta külön sorban. */
.card__price-value { font-size: 1.15rem; color: var(--ink-900); }
.card__price small { font-size: .78rem; color: var(--ink-500); }
.card__price-missing { color: var(--ink-300); white-space: normal; }
.card__cta { margin-top: var(--space-2); }

.rating { display: flex; align-items: center; gap: var(--space-2); }

.rating__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 5px 7px;
    background: var(--brand-700);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: .95rem;
}

.rating__text { display: flex; flex-direction: column; line-height: 1.25; }
.rating__text strong { font-size: .85rem; white-space: nowrap; }
.rating__text small { font-size: .76rem; color: var(--ink-500); }
.rating--empty .rating__text small { color: var(--ink-300); }

/* Listaoldal elrendezés */
.listing { padding: var(--space-6) 0; }
.listing__title { margin-bottom: var(--space-4); }

.listing__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* A ragadó szűrőpanel nem lóghat túl a képernyőn: a magasságát a látható
   területhez kötjük, és ha a tartalom (sok szolgáltatás-szűrő) ennél hosszabb,
   a panel saját görgetést kap. Enélkül az alja elérhetetlen marad. */
.listing__sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    max-height: calc(100vh - var(--header-h) - 2 * var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Hely a görgetősávnak, hogy ne takarja a találatszámokat. */
    padding-right: 4px;
}

/* Diszkrét görgetősáv, hogy ne törje meg a panel képét. */
.listing__sidebar::-webkit-scrollbar { width: 8px; }
.listing__sidebar::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 999px;
}
.listing__sidebar::-webkit-scrollbar-track { background: transparent; }

.filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
}

.filters__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.filters__header h2 { margin: 0; font-size: 1.05rem; }
.filters__reset { font-size: .85rem; color: var(--accent-600); }

.filters__group { border: 0; padding: 0; margin: 0; }

.filters__group legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-500);
}

.filters__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 0;
    font-size: .93rem;
    cursor: pointer;
}

.filters__option span { flex: 1; }
.filters__option em { font-style: normal; font-size: .8rem; color: var(--ink-300); }

.filters__option input,
.filters__star input { width: 17px; height: 17px; accent-color: var(--brand-600); }

.filters__price { display: flex; align-items: center; gap: var(--space-2); }

.filters__price input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font: inherit;
}

.filters__hint { margin: var(--space-2) 0 0; font-size: .8rem; color: var(--ink-300); }

.filters__stars { display: flex; flex-direction: column; gap: 2px; }

.filters__star {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: .93rem;
    cursor: pointer;
    color: #b8860b;
}

.filters__mobile-toggle { display: none; margin-bottom: var(--space-3); }

/* Találati lista */
.results__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--ink-100);
}

.results__count { margin: 0; color: var(--ink-700); font-size: .95rem; }

.results__sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .9rem;
    color: var(--ink-500);
}

.results__sort select {
    padding: 8px 10px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font: inherit;
    background: var(--white);
}

.empty {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    background: var(--ink-50);
    border-radius: var(--radius);
}

.empty p { color: var(--ink-500); max-width: 46ch; margin-inline: auto; }

/* Lapozó */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

.pagination__list { display: flex; gap: var(--space-1); }

.pagination__list a,
.pagination__list .is-current,
.pagination__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    font-size: .93rem;
}

.pagination__list a:hover, .pagination__step:hover {
    text-decoration: none;
    border-color: var(--brand-500);
    background: var(--brand-50);
}

.pagination__list .is-current {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--white);
    font-weight: 700;
}

.pagination__gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--ink-300); }

/* Úticél céloldal */
.dest-hero {
    padding: var(--space-7) 0 var(--space-5);
    background: linear-gradient(180deg, var(--brand-50), var(--white));
}

.dest-hero--image {
    position: relative;
    background:
        linear-gradient(180deg, rgb(10 61 66 / 72%), rgb(10 61 66 / 86%)),
        var(--hero-image) center / cover no-repeat;
}

.dest-hero--image .dest-hero__title,
.dest-hero--image .dest-hero__meta { color: var(--white); }

.dest-hero__title { margin-bottom: var(--space-2); }
.dest-hero__meta { color: var(--ink-700); margin-bottom: var(--space-5); }

/* Témalista */
.theme-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.theme-list a {
    display: block;
    height: 100%;
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.theme-list a:hover {
    text-decoration: none;
    border-color: var(--brand-500);
    box-shadow: var(--shadow-sm);
}

.theme-list strong { display: block; color: var(--ink-900); margin-bottom: 4px; }
.theme-list span { display: block; font-size: .89rem; color: var(--ink-500); }
.theme-list--large a { padding: var(--space-5); }

/* GYIK */
.faq { display: flex; flex-direction: column; gap: var(--space-2); }

.faq__item {
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius);
}

.faq__item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
    content: "+";
    float: right;
    color: var(--brand-600);
    font-weight: 700;
}

.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: var(--space-2) 0 0; color: var(--ink-700); }

/* Szálláshely adatlap */
.property__header { padding: var(--space-6) 0 var(--space-4); }

.property__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500);
}

.property__stars { color: #d9a441; }
.property__title { margin-bottom: var(--space-2); }

.property__address {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-500);
    font-size: .95rem;
}

.gallery__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-2);
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 460px;
}

.gallery__item { margin: 0; height: 100%; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--main { grid-row: span 2; }

.property__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-6) 0;
}

.review-box {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--brand-50);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
}

.review-box__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: var(--space-3);
    background: var(--brand-700);
    color: var(--white);
    border-radius: var(--radius);
    font-size: 1.5rem;
    font-weight: 800;
}

.review-box__label { margin: 0; font-weight: 700; }
.review-box__count { margin: 0; font-size: .88rem; color: var(--ink-500); }

.amenities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.amenities__group h3 { font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.amenities__group li { padding: 3px 0; font-size: .94rem; color: var(--ink-700); }
.amenities__group li::before { content: "✓"; color: var(--success-600); margin-right: 8px; font-weight: 700; }

.map {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--ink-100);
}

.map iframe { display: block; width: 100%; height: 340px; border: 0; }

/* Ugyanaz a védelem, mint a szűrőpanelnél: alacsony képernyőn a ragadó
   foglaló doboz alja (és vele a foglalás gomb) nem vágódhat le. */
.property__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    max-height: calc(100vh - var(--header-h) - 2 * var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.booking-box {
    padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.booking-box__old { margin: 0 0 4px; display: flex; align-items: center; gap: var(--space-2); }
.booking-box__old s { color: var(--ink-300); }

.booking-box__price { margin: 0; line-height: 1.2; }
.booking-box__price strong { font-size: 1.85rem; }
.booking-box__price span { color: var(--ink-500); font-size: .92rem; }
.booking-box__price--empty strong { font-size: 1.2rem; color: var(--ink-500); }

.booking-box__total { margin: var(--space-2) 0 0; font-size: .92rem; color: var(--ink-700); }

.booking-box__dates {
    margin: var(--space-2) 0 var(--space-4);
    font-size: .88rem;
    color: var(--ink-500);
}

.booking-box__usp { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.booking-box__usp li { font-size: .89rem; color: var(--ink-700); }
.booking-box__usp li::before { content: "✓"; color: var(--success-600); font-weight: 700; margin-right: 8px; }

.booking-box__disclaimer {
    margin: var(--space-4) 0 0;
    font-size: .78rem;
    color: var(--ink-300);
    line-height: 1.45;
}

/* Hibaoldal */
.error-code {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--brand-100);
    margin: 0;
    line-height: 1;
}

/* Lábléc */
.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-7) 0 var(--space-5);
    background: var(--brand-900);
    color: var(--ink-200);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--space-6);
}

.site-footer__brand { font-weight: 800; color: var(--white); font-size: 1.1rem; margin-bottom: var(--space-2); }
.site-footer__lead { font-size: .9rem; color: var(--ink-300); max-width: 40ch; }

.site-footer__title {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.site-footer__links { display: flex; flex-direction: column; gap: 8px; }
.site-footer__links a { color: var(--ink-200); font-size: .92rem; }
.site-footer__links a:hover { color: var(--white); }

.site-footer__legal {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 12%);
    font-size: .82rem;
    color: var(--ink-300);
}

/* Süti sáv */
.cookie-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--white);
    border-top: 1px solid var(--ink-200);
    box-shadow: 0 -6px 24px rgb(16 23 27 / 12%);
}

.cookie-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.cookie-bar p { margin: 0; font-size: .88rem; color: var(--ink-700); }
.cookie-bar__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* --- 5. Reszponzív ------------------------------------------------------- */
@media (max-width: 1024px) {
    .searchbox { grid-template-columns: 1fr 1fr; }
    .searchbox__field--destination { grid-column: 1 / -1; }
    .searchbox__submit { grid-column: 1 / -1; }
    .listing__layout { grid-template-columns: 1fr; }

    /* Egyoszlopos elrendezésben a panel a tartalommal együtt görög,
       ezért a magasságkorlátot és a belső görgetést fel kell oldani. */
    .listing__sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .property__layout { grid-template-columns: 1fr; }
    .property__aside {
        position: static;
        order: -1;
        max-height: none;
        overflow: visible;
    }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .site-nav__toggle { display: block; }

    .site-nav__list {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-3) var(--space-4);
        background: var(--white);
        border-bottom: 1px solid var(--ink-100);
        box-shadow: var(--shadow);
    }

    .site-nav__list.is-open { display: flex; }
    .site-nav__list li { padding: var(--space-2) 0; }

    .filters__mobile-toggle { display: block; }
    .listing__filters { display: none; }
    .listing__filters.is-open { display: block; }

    .gallery__grid { grid-template-columns: 1fr; grid-template-rows: auto; max-height: none; }
    .gallery__item:not(.gallery__item--main) { display: none; }

    .card-grid { grid-template-columns: 1fr; }
    .dest-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    .cookie-bar__inner { flex-direction: column; align-items: stretch; }
    .cookie-bar__actions { justify-content: stretch; }
    .cookie-bar__actions .btn { flex: 1; }
}

@media (max-width: 520px) {
    .searchbox { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .results__bar { flex-direction: column; align-items: flex-start; }
}

/* Mozgáscsökkentés – akadálymentesség */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Nyomtatás */
@media print {
    .site-header, .site-footer, .cookie-bar, .filters, .searchbox, .btn { display: none !important; }
    body { color: #000; }
}

/* Ár-tartalom jelzése a találati listán */
.results__pricenote {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ink-50);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--radius-sm);
    font-size: .86rem;
    color: var(--ink-500);
}

/* Szobatípus a foglaló dobozban */
.booking-box__roomtype {
    margin: var(--space-2) 0 0;
    font-size: .88rem;
    color: var(--ink-700);
    padding: 6px 10px;
    background: var(--brand-50);
    border-radius: var(--radius-sm);
}

/* Becsült, adókkal növelt ár (tájékoztató) */
.card__price-gross {
    display: block;
    font-size: .76rem;
    color: var(--ink-300);
    white-space: nowrap;
}

/* A bal oldali értékelés-blokk zsugorodhat, hogy az árnak jusson hely. */
.card__footer .rating { min-width: 0; }
.card__footer .rating__text { min-width: 0; }
.card__footer .rating__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__footer .rating { flex: 1 1 auto; overflow: hidden; }

.booking-box__gross {
    margin: 2px 0 0;
    font-size: .9rem;
    color: var(--ink-500);
}

/* Időpontválasztó a foglaló dobozban */
.booking-box__form {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-3);
    background: var(--ink-50);
    border-radius: var(--radius);
}

.booking-box__form .booking-box__dates { margin: 0 0 var(--space-2); }

.booking-box__fields {
    display: grid;
    gap: 2px var(--space-2);
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-3);
}

.booking-box__fields label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* A vendéglétszám teljes szélességben, a két dátum alatt. */
.booking-box__fields label[for="foglalas-fo"],
.booking-box__fields select { grid-column: 1 / -1; }

.booking-box__fields input,
.booking-box__fields select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    margin-bottom: var(--space-2);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    font: inherit;
    background: var(--white);
    color: var(--ink-900);
}

/* Javaslatlista: úticél és szálláshely megkülönböztetése */
.autocomplete__item { align-items: baseline; }
.autocomplete__name { font-weight: 500; }

/* A szálláshely-javaslatok elé apró jelölés, hogy első pillantásra
   elkülönüljenek a településektől. */
.autocomplete__item--szallas .autocomplete__name::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 7px;
    border-radius: 2px;
    background: var(--brand-500);
    vertical-align: middle;
}

.autocomplete__item--szallas small { color: var(--ink-500); }

/* --- „Oldal teteje” gomb --------------------------------------------------
   Diszkrét: csak hosszabb görgetés után jelenik meg, halványan, és nem takar
   tartalmat. A süti sáv felett helyezkedik el, amíg az látszik. */
.to-top {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 45;

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 14px;
    min-height: 44px;              /* kényelmes érintési méret */

    border: 1px solid var(--ink-200);
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(6px);
    color: var(--ink-700);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow);

    /* Megjelenés előtt: áttetsző és kissé lejjebb. */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, background-color .15s ease;
}

.to-top.is-visible { opacity: .88; transform: translateY(0); }
.to-top:hover { opacity: 1; background: var(--white); color: var(--brand-700); }

/* Amíg a süti sáv látszik, a gomb feljebb csúszik, hogy ne fedjék egymást. */
.to-top.has-cookie-bar { bottom: calc(var(--space-4) + 96px); }

@media (max-width: 520px) {
    /* Mobilon csak az ikon, hogy ne takarjon tartalmat. */
    .to-top { right: var(--space-3); bottom: var(--space-3); padding: 11px; }
    .to-top__text { display: none; }
}

/* A Booking.com másodlagos gomb alatti magyarázat. Azért kell, mert ott
   szándékosan nincs ár: a Booking nem ad hozzáférést az adataihoz. */
.booking-box__alt-note {
    margin: .5rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--muted, #667);
}