/* Az ingyenes bemutató foglaló oldala — a Figma-terv (Remedi / időpontfoglalás,
   „Kérjen bemutató időpontot”, Version 01) szerint: egy lépés, egy kártyán az
   adatok és az időpontrács, a siker felugró ablakban.

   Önálló, keretrendszer nélküli stílus: az oldal hirdetési céloldal is, ezért
   nem húzzuk be a Semantic UI-t egyetlen űrlap kedvéért. A színek és a lábléc
   az ajánlatkérőéi (css/arajanlat/ajanlatkero.css), mert a terv ugyanaz. */

:root {
    --bm-tinta: #28224b;
    --bm-tinta-70: rgba(40, 34, 75, .7);
    --bm-tinta-60: rgba(40, 34, 75, .6);
    --bm-tinta-10: rgba(40, 34, 75, .1);
    --bm-zold-sotet: #197c70;
    --bm-zold: #29998e;
    --bm-turkiz: #2ac5b0;
    --bm-turkiz-gomb: #3dbeb5;
    --bm-turkiz-gomb-sotet: #31aaa2;
    --bm-menta-10: #eaf9f7;
    --bm-menta-20: #d4f3ef;
    --bm-korall: #f0555f;
    --bm-korall-sotet: #dc4650;
    --bm-oldal: #f8fcff;
    --bm-lablec: #d8f3f2;
    --bm-hiba: #d33a44;
}

* { box-sizing: border-box; }

body.bm-oldal {
    margin: 0;
    font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: var(--bm-tinta);
    background: var(--bm-oldal);
    -webkit-font-smoothing: antialiased;
    /* A díszítő formák (folt, hullám) kilógnak oldalra; clip, nem hidden: az
       nem hoz létre görgetési tárolót. */
    overflow-x: clip;
}

/* :where — nulla specifikusság, hogy az elemek saját margója (osztályból) érvényesüljön. */
:where(.bm-oldal h1, .bm-oldal h2, .bm-oldal p) { margin: 0; }
.bm-oldal a { color: var(--bm-zold-sotet); }
.bm-oldal img { max-width: 100%; }

.bm-kozep {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

/* A kötőjelnél a böngésző szívesen tör: "REMEDI-" / "ről?" — ez csúnya. */
.egyben { white-space: nowrap; }

/* ---- Gombok (a terv „btn” komponense) ---------------------------------- */

.bm-gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border: 0;
    border-radius: 32px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, opacity .15s;
}
.bm-oldal a.bm-gomb { color: #fff; }
.bm-gomb:disabled { opacity: .6; cursor: default; }
.bm-gomb-korall { background: var(--bm-korall); color: #fff; }
.bm-gomb-korall:hover { background: var(--bm-korall-sotet); }
.bm-gomb-turkiz { background: var(--bm-turkiz-gomb); color: #fff; }
.bm-gomb-turkiz:hover:not(:disabled) { background: var(--bm-turkiz-gomb-sotet); }

/* ---- Fejléc ------------------------------------------------------------- */

.bm-fejlec {
    position: relative;
    z-index: 5;
    background: #fff;
}
.bm-fejlec .bm-kozep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 85px;
}
.bm-fejlec-logo img { display: block; }

/* ---- Hero --------------------------------------------------------------- */

.bm-hero { position: relative; z-index: 1; }
.bm-hero-racs {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    min-height: 603px;
}
.bm-hero-szoveg {
    flex: 0 1 519px;
    padding-top: 120px;
}
.bm-elotag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--bm-zold-sotet);
}
.bm-hero h1 {
    font-size: 42px;
    line-height: 55px;
    font-weight: 500;
    margin-bottom: 16px;
}
.bm-hero-leiras {
    max-width: 458px;
    font-size: 20px;
    line-height: 30px;
    color: var(--bm-tinta-70);
    margin-bottom: 12px;
}
.bm-hero .bm-gomb { margin-top: 20px; }
/* A terven az illusztráció a hero tetejénél kezdődik, és az alja belóg a
   foglaló szakaszba. */
.bm-hero-kep {
    flex: 0 1 588px;
    width: 588px;
    height: auto;
    margin-top: 85px;
    margin-bottom: -20px;
}

/* ---- Foglaló kártya ----------------------------------------------------- */

.bm-foglalas {
    position: relative;
    padding: 120px 48px;
    scroll-margin-top: 0;
}
/* A háttér halvány menta, lefelé elfogy; felül lekerekített. */
.bm-foglalas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, rgba(140, 221, 213, .10), rgba(140, 221, 213, 0));
}
/* A bal oldali folt a kártya mögött (a terven el van forgatva). */
.bm-folt {
    position: absolute;
    z-index: 0;
    width: 1278px;
    max-width: none;
    height: 858px;
    left: -930px;
    top: 330px;
    transform: rotate(-130.5deg);
    pointer-events: none;
}

.bm-kartya {
    position: relative;
    z-index: 1;
    max-width: 1344px;
    margin: 0 auto;
    padding: 60px;
    background: #fff;
    border: 2px solid var(--bm-tinta-10);
    border-radius: 32px;
}
.bm-kartya-cim {
    font-size: 32px;
    line-height: 38px;
    font-weight: 400;
    margin-bottom: 40px;
}

.bm-urlap-racs {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 584px);
    justify-content: space-between;
    column-gap: 60px;
    align-items: start;
}
/* A rács elemei alapból akkorára nőnek, amekkora a tartalmuk: a görgethető
   időpontsáv így kitolta a kártyát telefonon. */
.bm-urlap-racs > * { min-width: 0; }

.mezo { margin-bottom: 16px; }
.mezo_par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.bm-kartya label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 17px;
    color: var(--bm-tinta);
}
.kotelezo { color: var(--bm-korall); }

.bm-kartya input[type="text"], .bm-kartya input[type="email"], .bm-kartya input[type="tel"],
.bm-kartya select, .bm-kartya textarea {
    display: block;
    width: 100%;
    padding: 11px 16px;
    font: inherit;
    font-size: 14px;
    line-height: 17px;
    color: var(--bm-tinta);
    background: #fff;
    border: 1px solid var(--bm-tinta-10);
    border-radius: 20px;
}
.bm-kartya ::placeholder { color: var(--bm-tinta-70); opacity: 1; }
.bm-kartya select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background: #fff url("/images/arajanlat/chevron-le.svg") no-repeat right 16px center / 15px 15px;
    cursor: pointer;
}
.bm-kartya textarea { resize: vertical; min-height: 81px; }
.bm-kartya input:focus, .bm-kartya select:focus, .bm-kartya textarea:focus {
    outline: none;
    border-color: var(--bm-turkiz);
    box-shadow: 0 0 0 3px rgba(42, 197, 176, .15);
}

/* ---- Időpontrács -------------------------------------------------------- */

.napok {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
/* Kevesebb nap esetén ne nyúljanak szét az oszlopok. */
.napok[data-napok="1"], .napok[data-napok="2"], .napok[data-napok="3"] { grid-template-columns: repeat(3, minmax(0, 90px)); }
.napok[data-napok="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.napok[data-napok="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* A napok oszlopai felülről igazodnak: van, amelyik nap több szabad sávot
   kínál, mint a szomszédja. */
.nap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}
/* A nap feje: hónap, nagy nap-szám, a hét napja — doboz nélkül, ahogy a terven. */
.nap_fej {
    padding: 8px 4px 4px;
    font-size: 14px;
    line-height: 17px;
    color: var(--bm-tinta);
}
.nap_fej strong {
    display: block;
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
}
.nap_fej small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 12px;
    color: var(--bm-tinta-60);
}

.ora {
    display: block;
    width: 100%;
    padding: 9px 4px;
    font: inherit;
    font-size: 14px;
    line-height: 17px;
    color: var(--bm-tinta);
    background: var(--bm-menta-10);
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.ora:hover { background: var(--bm-menta-20); }
.ora[aria-pressed="true"] {
    background: rgba(42, 197, 176, .2);
    border-color: var(--bm-turkiz);
}
.ora:focus-visible { outline: 2px solid var(--bm-zold-sotet); outline-offset: 2px; }

/* ---- A kártya alja ------------------------------------------------------ */

.kotelezo_sugo {
    margin-top: 16px;
    font-size: 12px;
    line-height: 15px;
    color: var(--bm-tinta);
}
.sugo { font-size: 13px; color: var(--bm-tinta-70); margin-top: 6px; }

.bm-urlap-lab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 26px;
}
.bm-urlap-lab .mezo { margin-bottom: 0; }

/* A jelölőnégyzet a terv szerint: halvány türkiz négyzet türkiz kerettel. */
.jelolo label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 17px;
    cursor: pointer;
}
.jelolo input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin: -1px 0 0;
    border: 1px solid var(--bm-turkiz);
    border-radius: 2.5px;
    background: rgba(42, 197, 176, .3);
    cursor: pointer;
}
.jelolo input[type="checkbox"]:checked {
    background: var(--bm-turkiz) url("/images/arajanlat/pipa.svg") no-repeat center / 11px auto;
}
.jelolo input[type="checkbox"]:focus-visible { outline: 2px solid var(--bm-zold-sotet); outline-offset: 2px; }
.jelolo a { color: var(--bm-zold-sotet); }

.hiba { color: var(--bm-hiba); font-size: 13px; margin-top: 4px; }
.hiba:empty { display: none; }
.hiba.altalanos { margin-top: 12px; text-align: right; }

.rejtett { display: none !important; }

/* A felugró ablak bezárása után a kártyán marad. */
.koszonjuk { text-align: center; padding: 20px 0; }
.koszonjuk img { display: block; margin: 0 auto 16px; }
.koszonjuk h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
    color: var(--bm-turkiz);
    margin-bottom: 12px;
}
.koszonjuk p { max-width: 520px; margin: 0 auto; line-height: 21px; }

/* ---- „Mire számíthat a bemutatón?” ------------------------------------- */

.bm-ervek { position: relative; z-index: 1; padding: 80px 0; }
.bm-ervek-racs {
    display: flex;
    align-items: center;
    gap: 80px;
}
.bm-ervek-kep {
    flex: 0 0 610px;
    display: flex;
    justify-content: center;
}
.bm-ervek-kep img { width: 460px; height: auto; }
.bm-ervek-szoveg { flex: 0 1 479px; }
.bm-ervek h2 {
    font-size: 32px;
    line-height: 37px;
    font-weight: 400;
    margin-bottom: 24px;
}
.bm-pipalista { list-style: none; margin: 0; padding: 0; }
.bm-pipalista li {
    position: relative;
    min-height: 34px;
    padding: 6px 0 0 50px;
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 22px;
    color: var(--bm-tinta-70);
}
.bm-pipalista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border: 2px solid var(--bm-tinta-10);
    border-radius: 10px;
    background: #fff url("/images/bemutato/pipa.svg") no-repeat center / 14px auto;
}

/* ---- „Kérdése van?” ----------------------------------------------------- */

.bm-kapcsolat { position: relative; z-index: 1; }
.bm-kapcsolat-racs {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    min-height: 456px;
}
.bm-kapcsolat-szoveg { padding-top: 119px; }
.bm-kapcsolat h2 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 400;
    margin-bottom: 16px;
}
.bm-kapcsolat h2 strong { font-weight: 500; }
.bm-elerhetoseg {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 40px;
}
.bm-elerhetoseg a { color: var(--bm-tinta); text-decoration: none; }
.bm-elerhetoseg a:hover { text-decoration: underline; }
.bm-elerhetoseg span { color: var(--bm-turkiz-gomb); margin: 0 4px; }
.bm-kapcsolat-kep { flex: 0 1 530px; width: 530px; height: auto; }

/* ---- Lábléc (mint az ajánlatkérőé) ------------------------------------- */

/* A hullám teteje a terven 270 px-szel a lábléc fölött kezdődik; a többi része a
   lábléc mögött van. Csak a látszó 270 px-et rajzoljuk, különben az alja a lábléc
   alatt üres sávot nyitna az oldal végén. */
.bm-lablec-hullam {
    position: relative;
    height: 0;
    /* A 2335 px-es hullám jobbra kilóg: a body clipje a dokumentum szélességét nem
       korlátozza, telefonon az oldal így 1449 px-esre nyílt. Függőlegesen kilóghat. */
    overflow-x: clip;
}
.bm-lablec-hullam::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    width: 2335px;
    height: 270px;
    margin-left: -1073px; /* a tervben x = -355 */
    background: url("/images/arajanlat/hullam-also.svg") no-repeat 0 0 / 2335px 746px;
    pointer-events: none;
}
.bm-lablec {
    position: relative;
    z-index: 1;
    background: var(--bm-lablec);
    padding: 80px 0 60px;
    font-size: 12px;
    line-height: 18px;
}
.bm-lablec-felso {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(42, 197, 176, .4);
}
.bm-lablec-logo img { display: block; width: 313px; height: 55px; }
.bm-lablec-logo p { margin-top: 16px; font-size: 16px; line-height: 19px; }
.bm-lablec-logo p b { font-weight: 400; color: var(--bm-zold); }
.bm-lablec-jobb { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.bm-kozosseg { display: flex; gap: 16px; }
.bm-kozosseg img { display: block; width: 32px; height: 32px; }
.bm-lablec-adatok { display: flex; gap: 52px; }
.bm-lablec-adatok div:last-child { text-align: right; }
.bm-lablec-also { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; }
.bm-lablec-also nav { display: flex; gap: 8px; }
.bm-lablec-also nav a, .bm-lablec-also nav span { color: var(--bm-zold); text-decoration: none; }

/* ---- Siker: felugró ablak ---------------------------------------------- */

.bm-ablak-hatter {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .5);
}
.bm-ablak {
    position: relative;
    width: 492px;
    max-width: 100%;
    padding: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--bm-tinta-10);
    border-radius: 32px;
    outline: none;
}
.bm-ablak img { display: block; width: 236px; height: auto; margin: 0 auto 24px; }
.bm-ablak h2 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 400;
    color: var(--bm-turkiz);
    margin-bottom: 16px;
}
.bm-ablak p { font-size: 16px; line-height: 21px; }
.bm-ablak-bezar {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 36px;
    height: 36px;
    font-size: 28px;
    line-height: 1;
    color: var(--bm-tinta-60);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.bm-ablak-bezar:hover { background: var(--bm-menta-10); color: var(--bm-tinta); }

/* ---- Kisebb asztali kijelző -------------------------------------------- */

@media (max-width: 1280px) {
    .bm-kozep { padding: 0 48px; }
    .bm-foglalas { padding: 100px 24px; }
    .bm-kartya { padding: 48px 40px; }
    .bm-urlap-racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
    .bm-hero-kep { width: 46%; }
    .bm-ervek-kep { flex-basis: 45%; }
    .bm-ervek-kep img { width: 100%; max-width: 460px; }
    .bm-kapcsolat-kep { width: 42%; }
}

/* ---- Tablet: egy oszlop ------------------------------------------------- */

@media (max-width: 960px) {
    .bm-hero-racs { min-height: 0; }
    .bm-hero-szoveg { flex-basis: 100%; padding: 56px 0 40px; }
    /* Telefonon és tableten a foglaló minél előbb látsszon: az illusztráció itt kimarad. */
    .bm-hero-kep { display: none; }
    .bm-foglalas { padding: 48px 16px 64px; }
    .bm-urlap-racs { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    /* Előbb az időpont, utána az adatok: aki időpontot keres, azt lássa először. */
    .bm-idopont { order: -1; margin-bottom: 16px; }
    .bm-folt { display: none; }
    .bm-ervek { padding: 56px 0; }
    .bm-ervek-racs { flex-direction: column; align-items: stretch; gap: 32px; }
    /* Oszlopirányban a flex-basis magasság lenne (479 / 530 px üres hely). */
    .bm-ervek-szoveg, .bm-kapcsolat-kep { flex-basis: auto; }
    .bm-ervek-kep { flex-basis: auto; order: 2; }
    .bm-ervek-kep img { max-width: 320px; }
    .bm-kapcsolat-racs { flex-direction: column; min-height: 0; gap: 24px; }
    .bm-kapcsolat-szoveg { padding-top: 24px; }
    .bm-kapcsolat-kep { width: 100%; max-width: 420px; align-self: center; }
    .bm-lablec-felso, .bm-lablec-also { flex-direction: column; align-items: flex-start; }
    .bm-lablec-jobb { align-items: flex-start; }
    .bm-lablec-adatok { flex-direction: column; gap: 12px; }
    .bm-lablec-adatok div:last-child { text-align: left; }
}

/* ---- Telefon ------------------------------------------------------------ */

@media (max-width: 600px) {
    .bm-kozep { padding: 0 16px; }
    .bm-fejlec .bm-kozep { height: 64px; }
    .bm-fejlec .bm-gomb { padding: 10px 18px; font-size: 14px; }
    .bm-hero-szoveg { padding: 32px 0 24px; }
    .bm-elotag { font-size: 13px; }
    .bm-hero h1 { font-size: 30px; line-height: 38px; }
    .bm-hero-leiras { font-size: 17px; line-height: 25px; }
    .bm-foglalas { padding: 24px 8px 48px; }
    .bm-kartya { padding: 24px 16px; border-radius: 20px; }
    .bm-kartya-cim { font-size: 24px; line-height: 30px; margin-bottom: 20px; }
    .mezo_par { grid-template-columns: 1fr; }
    /* Hat oszlop nem fér ki: vízszintesen görgethető sáv, így a napok sorrendje
       és a fej–idő párosítás megmarad. */
    .napok {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .nap { flex: 0 0 84px; }
    .bm-urlap-lab { flex-direction: column; align-items: stretch; }
    .bm-urlap-lab .bm-gomb { width: 100%; }
    .hiba.altalanos { text-align: left; }
    .bm-ervek h2, .bm-kapcsolat h2 { font-size: 26px; line-height: 32px; }
    .bm-pipalista li { font-size: 16px; }
    .bm-elerhetoseg { font-size: 17px; line-height: 28px; }
    .bm-lablec-logo img { width: 220px; height: auto; }
    .bm-ablak { padding: 32px 20px; }
    .bm-ablak img { width: 180px; }
    .bm-ablak h2 { font-size: 26px; line-height: 34px; }
}