/* Az ingyenes bemutató foglaló oldala — a Figma-terv (Remedi / időpontfoglalás,
   "book a demo section v1") szerint: ezt a változatot választotta a csapat.

   Ö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. */

:root {
    --szoveg: #1d2b36;
    --halvany: #5d6b78;
    --keret: #d8dee4;
    --turkiz: #2ac5b0;          /* a terv háttérszíne */
    --turkiz-sotet: #21a897;
    --korall: #f47b7f;          /* a terv gombszíne */
    --korall-sotet: #e26166;
    --hiba: #c0392b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--szoveg);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

.fejlec {
    background: #fff;
    border-bottom: 1px solid var(--keret);
    padding: 16px 24px;
}
.fejlec_logo img { display: block; height: 40px; width: auto; }

/* A türkiz sáv a teljes szélességet kitölti, a tartalom középre fogott. */
.bemutato {
    background: var(--turkiz);
    /* Halvány fénylés jobbra fent, ahogy a terven is: egyetlen gradienssel,
       kép nélkül — a céloldal betöltési ideje közvetlenül számít. */
    background-image: radial-gradient(60% 80% at 78% 18%, rgba(255,255,255,.18), transparent 60%);
    padding: 56px 24px;
}

.bemutato_racs {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* A „Mire számíthat” blokk külön elem: asztalin a bevezető alatt, a bal
       oszlopban; mobilon az űrlap alatt (lásd lent). */
    grid-template-areas: "bevezeto urlap" "ervek urlap";
    gap: 0 64px;
    align-items: center;
}
.bevezeto { grid-area: bevezeto; align-self: end; }
.bevezeto_ervek { grid-area: ervek; align-self: start; color: #fff; }
.urlap_doboz { grid-area: urlap; }

/* A rács elemei alapból akkorára nőnek, amekkora a tartalmuk — az időpontsáv
   hat oszlopa így kitolta az egész oldalt telefonon, vízszintes görgetéssel.
   A min-width: 0 engedi, hogy a sáv a saját keretén belül görögjön. */
.bemutato_racs > * { min-width: 0; }

/* --- bal oldal --- */

.bevezeto { color: #fff; }

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

.bevezeto h1 {
    font-size: 2.3rem;
    line-height: 1.2;
    margin: 0 0 20px;
    font-weight: 700;
}
.bevezeto_lead {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 12px;
}
.bevezeto_szoveg {
    margin: 0 0 32px;
    color: rgba(255, 255, 255, .92);
    max-width: 30em;
}
.bevezeto_alcim {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 16px;
}

/* A pipa CSS-ből készül, nem képből: egy céloldalon minden kérés számít. */
.ervek { list-style: none; margin: 0; padding: 0; }
.ervek li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .92);
    max-width: 30em;
}
.ervek li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}
.ervek li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--turkiz);
    border-bottom: 2px solid var(--turkiz);
    transform: rotate(-45deg);
}

/* --- jobb oldal: a kártya --- */

.urlap_doboz {
    background: #fff;
    border-radius: 12px;
    padding: 36px 40px 40px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

.urlap_cim {
    font-size: 1.55rem;
    font-weight: 600;
    margin: 0 0 24px;
}

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

label {
    display: block;
    font-size: .85rem;
    color: var(--halvany);
    margin-bottom: 4px;
}
.kotelezo { color: var(--korall); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    color: var(--szoveg);
    padding: 10px 12px;
    border: 1px solid var(--keret);
    border-radius: 8px;
    background: #fff;
}
textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--turkiz);
    box-shadow: 0 0 0 3px rgba(42, 197, 176, .15);
}

/* --- időpontrács --- */

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

/* A napok oszlopai felulrol igazodnak: van, amelyik nap tobb szabad savot
   kinal, mint a szomszedja. */
.nap { text-align: center; align-self: start; }

/* A terven a nap egy halvány türkiz csempe: hónap, nagy nap-szám, hét napja. */
.nap_fej {
    background: #eaf7f5;
    border: 1px solid #dcefec;
    border-radius: 10px;
    padding: 8px 4px 6px;
    font-size: .68rem;
    color: var(--halvany);
    line-height: 1.25;
    margin-bottom: 8px;
}
.nap_fej strong {
    display: block;
    font-size: 1.15rem;
    color: var(--szoveg);
    font-weight: 700;
    line-height: 1.2;
}

.ora {
    display: block;
    width: 100%;
    font: inherit;
    font-size: .8rem;
    padding: 7px 4px;
    margin-bottom: 6px;
    background: #f4f6f8;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--szoveg);
    cursor: pointer;
}
.ora:hover { background: #e9edf1; }
.ora[aria-pressed="true"] {
    background: #e6f7f4;
    border-color: var(--turkiz);
    font-weight: 600;
}

/* A 2. lépés tetején: mire foglal a látogató. */
.valasztott_idopont {
    background: #e6f7f4;
    border: 1px solid var(--turkiz);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: .9rem;
    color: var(--szoveg);
}
.valasztott_idopont .link_gomb { margin: 0 0 0 8px; padding: 0; line-height: inherit; vertical-align: baseline; }

/* --- egyebek --- */

.kotelezo_sugo {
    font-size: .72rem;
    color: var(--halvany);
    margin: 4px 0 14px;
}

.jelolo label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: var(--szoveg);
    cursor: pointer;
}
.jelolo input { margin-top: 3px; flex: 0 0 auto; }
.jelolo a { color: var(--turkiz-sotet); }

.gomb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: var(--korall);
    border: 0;
    border-radius: 4px;
    padding: 11px 22px;
    margin-top: 18px;
    cursor: pointer;
}
.gomb::after { content: "›"; font-size: 1.15rem; line-height: 1; }
.gomb:hover { background: var(--korall-sotet); }
.gomb:disabled { opacity: .6; cursor: default; }

/* Az első lépés tovább-gombja a terven körvonalas: nem versenyez a végleges
   beküldéssel, de látszik, hogy innen hova tovább. */
.gomb_korvonal {
    color: var(--turkiz-sotet);
    background: #fff;
    border: 1px solid var(--turkiz);
}
.gomb_korvonal:hover { background: #f0fbf9; }

.lepes_lab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.lepes_lab_jobbra { justify-content: flex-end; }

/* "‹ Időpont módosítása" — link, nem gomb: a visszalépés mellékút. */
.link_gomb {
    font: inherit;
    font-size: .9rem;
    color: var(--turkiz-sotet);
    background: none;
    border: 0;
    padding: 0;
    margin-top: 18px;
    cursor: pointer;
}
.link_gomb:hover { text-decoration: underline; }

.sugo { font-size: .78rem; color: var(--halvany); margin: 4px 0 0; }

.hiba { color: var(--hiba); font-size: .8rem; margin: 4px 0 0; min-height: 0; }
.hiba.altalanos { margin-top: 10px; }

.rejtett { display: none; }

.koszonjuk { text-align: center; }
.koszonjuk h2 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: var(--turkiz-sotet);
}

.lablec {
    background: #fff;
    text-align: center;
    padding: 24px;
    color: var(--halvany);
    font-size: .9rem;
}
.lablec a { color: var(--turkiz-sotet); }

/* --- mobil --- */

@media (max-width: 900px) {
    .bemutato { padding: 32px 16px; }
    /* Telefonon a foglaló az első képernyőre kerül: bevezető → űrlap → érvek. */
    .bemutato_racs { grid-template-columns: 1fr; grid-template-areas: "bevezeto" "urlap" "ervek"; gap: 32px; }
    .bevezeto h1 { font-size: 1.8rem; }
    /* A <br> ELREJTESE osszeragasztotta a ket szot ("tobbetmegtudni"), es az
       igy keletkezett hosszu szo kilogott a kepernyorol. Maradjon a tores. */
    .urlap_doboz { padding: 24px 20px 28px; }
    .mezo_par { grid-template-columns: 1fr; gap: 0; }
    /* Hat oszlop nem fér ki telefonon: vízszintesen görgethető sáv lesz belőle,
       így a napok sorrendje és a fej–idő párosítás megmarad. */
    .napok {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .nap { flex: 0 0 88px; }
}