/* ==========================================================================
   Bausch + Lomb – ESCRS regisztráció
   Design: 1920×1080, bal panel 640px (1/3) – itt: xl+ 1/4, lg 1/3
   ========================================================================== */

:root {
    --bl-navy: #19487f;        /* szövegek a bal panelen */
    --bl-teal: #0098a7;        /* form cím */
    --bl-sky: #61c5e9;         /* elválasztó vonalak */
    --bl-green: #82c495;       /* gomb */
    --bl-green-dark: #6fb583;
    --bl-field: #eef5f6;       /* input háttér */
    --bl-grad-from: #1e3f78;
    --bl-grad-to: #0b7299;
    --bl-error: #ffb4a8;

    --side-w: 100%;
    --k: 1;                    /* bal panel tartalom-skála */

    --bs-body-font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-color: var(--bl-navy);
}

html, body { height: 100%; }
body {
    font-family: var(--bs-body-font-family);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.reg-layout { min-height: 100%; display: flex; flex-direction: column; }

/* Bal panel ---------------------------------------------------------------- */
.reg-side {
    background: #fff;
    container-type: inline-size;
    display: flex;
    justify-content: center;
}
.reg-side__inner {
    width: 100%;
    max-width: 420px;
    padding: 40px 24px 32px;
}

/* Jobb panel --------------------------------------------------------------- */
.reg-main {
    position: relative;
    flex: 1 0 auto;
    color: #fff;
    overflow: hidden;
    container-type: inline-size;
}
.reg-main__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bl-grad-from) 0%, var(--bl-grad-to) 100%);
    pointer-events: none;
    overflow: hidden;
}
.reg-main__scroll { position: relative; z-index: 1; }
.reg-main__content {
    max-width: 640px;
    padding: 48px 24px 64px;
}

/* Dekorációk – a PSD pozíciói alapján, jobb felső / jobb alsó sarokba kifutva */
.reg-deco { position: absolute; display: block; height: auto; user-select: none; }
.reg-deco--cross {
    top: 0; right: 0;
    width: min(24vw, 42.6vh);
    transform: translate(34%, -34%);
}
.reg-deco--globe {
    right: 0; bottom: 0;
    width: min(41.5vw, 74vh);
    transform: translate(41%, 24%);
}

/* Desktop: fix bal panel, csak a form scrolloz ------------------------------ */
@media (min-width: 992px) {
    :root { --side-w: 33.3333%; }   /* kisebb desktop / fekvő: 1/3 – 2/3 */

    .reg-layout { display: block; height: 100%; }

    .reg-side {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--side-w);
        overflow-y: auto;
        align-items: safe center;
    }
    .reg-side__inner {
        max-width: none;
        padding: 6cqi 18cqi;
        margin-block: auto;
    }

    .reg-main {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        left: var(--side-w);
    }
    .reg-main__scroll {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
    }
    .reg-main__content {
        width: 100%;
        max-width: calc(580px + 2 * 9cqi);
        padding: clamp(48px, 10vh, 120px) 9cqi clamp(48px, 10vh, 120px);
        margin-block: auto;      /* rövid tartalomnál függőlegesen középre */
    }
}

@media (min-width: 1200px) {
    :root { --side-w: 25%; --k: 1.22; }   /* nagy desktop: 1/4, keskenyebb panel → szélesebb tartalom */
    .reg-side__inner { padding: 6cqi 8cqi; }
}

/* --------------------------------------------------------------------------
   Bal panel tartalom (méretek a panel szélességéhez skálázva – cqi)
   design: panel 640px, tartalom 384px
   -------------------------------------------------------------------------- */

.reg-logo { text-align: left; }
.reg-logo__img {               /* hivatalos logó: szem + felirat egyben */
    display: block;
    width: 100%;
    max-width: 382px;
    height: auto;
}

.reg-rule {
    border: 0;
    border-top: 2px solid var(--bl-sky);
    opacity: 1;
    margin: 18% 0 9%;
}
.reg-event + .reg-rule,
.reg-date + .reg-rule { margin-top: 9%; }

.reg-event { margin: 0; color: var(--bl-navy); line-height: 1.05; font-weight: 700; }
/* design: 58.9 / 40.25 / 30 / 24 px @ 640px panel → cqi */
.reg-event__main { display: block; font-size: clamp(1.75rem, calc(9.2cqi * var(--k)), 3.7rem); }
.reg-event__sub  { display: block; font-size: clamp(1.2rem, calc(6.3cqi * var(--k)), 2.55rem); }

.reg-date {
    margin: 0;
    color: var(--bl-navy);
    font-size: clamp(1.05rem, calc(4.7cqi * var(--k)), 1.9rem);
    line-height: 1.1;
}
.reg-date strong { font-weight: 700; }

.reg-venue {
    display: flex;
    align-items: center;
    gap: 6%;
    margin: 0;
    font-style: normal;
    font-weight: 700;
    color: var(--bl-navy);
    font-size: clamp(.9rem, calc(3.8cqi * var(--k)), 1.55rem);
    line-height: 1.2;
    gap: 4.7%;
}
.reg-venue__icon { flex: 0 0 auto; width: 21%; max-width: 80px; height: auto; }

/* Mobilon a bal panel nem 640px-es → fix méretek */
@media (max-width: 991.98px) {
    .reg-event__main { font-size: 2.6rem; }
    .reg-event__sub  { font-size: 1.8rem; }
    .reg-date  { font-size: 1.45rem; }
    .reg-venue { font-size: 1.15rem; }
    .reg-venue__icon { width: 64px; }
}

/* Alacsony fekvő képernyők: tömörebb bal panel */
@media (min-width: 992px) and (max-height: 760px) {
    .reg-logo__img { width: 75%; }
    .reg-rule { margin: 10% 0 6%; }
    .reg-event + .reg-rule,
    .reg-date + .reg-rule { margin-top: 6%; }
}

/* Mobil: kompakt fejléc */
@media (max-width: 991.98px) {
    .reg-logo__img { width: 72%; margin: 0 auto; }
    .reg-rule { margin: 28px 0 18px; }
    .reg-event + .reg-rule,
    .reg-date + .reg-rule { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.reg-title {
    color: var(--bl-teal);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 2.1vw, 2.5rem);
    line-height: 1.1;
    margin: 0 0 1.75em;
}

.reg-fieldset { margin: 0 0 2.25rem; }
.reg-legend {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bl-sky);
    margin-bottom: 1.1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(97, 197, 233, .35);
}

.reg-field { margin-bottom: 1.25rem; }

.reg-form .form-label {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .4rem;
}
.reg-req { color: var(--bl-green); }
.reg-opt { font-weight: 400; opacity: .7; }

.reg-form .form-control {
    background-color: var(--bl-field);
    border: 2px solid transparent;
    border-radius: 0;
    color: var(--bl-navy);
    font-size: 1.125rem;
    min-height: 3.25rem;          /* design: 57px */
    padding: .6rem 1rem;
    box-shadow: none;
    transition: border-color .15s, background-color .15s;
}
.reg-form .form-control::placeholder { color: #8aa3b5; }
.reg-form .form-control:focus {
    background-color: #fff;
    border-color: var(--bl-green);
    box-shadow: 0 0 0 .2rem rgba(130, 196, 149, .35);
}

/* Validáció (sötét háttéren) */
.reg-form .form-control.is-invalid,
.reg-form.was-validated .form-control:invalid {
    border-color: var(--bl-error);
    background-image: none;
    padding-right: 1rem;
}
.reg-form .form-control.is-valid,
.reg-form.was-validated .form-control:valid {
    border-color: transparent;
    background-image: none;
    padding-right: 1rem;
}
.reg-form .invalid-feedback {
    color: var(--bl-error);
    font-size: .95rem;
    font-weight: 600;
}

/* Checkboxok */
.reg-check { padding-left: 2.25rem; margin-bottom: 1rem; }
.reg-check .form-check-input {
    width: 1.4rem; height: 1.4rem;
    margin-left: -2.25rem;
    margin-top: .05rem;
    border-radius: 0;
    border: 2px solid var(--bl-field);
    background-color: var(--bl-field);
    cursor: pointer;
}
.reg-check .form-check-input:checked {
    background-color: var(--bl-green);
    border-color: var(--bl-green);
}
.reg-check .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(130, 196, 149, .45);
}
.reg-check .form-check-label { color: #fff; font-size: 1.05rem; line-height: 1.4; cursor: pointer; }
.reg-check .form-check-label a { color: var(--bl-sky); text-underline-offset: 2px; }
.reg-check .form-check-label a:hover { color: #fff; }
.reg-check .form-check-input.is-invalid,
.reg-form.was-validated .reg-check .form-check-input:invalid { border-color: var(--bl-error); }
.reg-form.was-validated .reg-check .form-check-input:valid { border-color: var(--bl-green); }
.reg-check .form-check-input.is-invalid ~ .form-check-label,
.reg-form.was-validated .reg-check .form-check-input:invalid ~ .form-check-label,
.reg-form.was-validated .reg-check .form-check-input:valid ~ .form-check-label { color: #fff; }

.reg-note { font-size: .9rem; opacity: .75; margin: -.75rem 0 1.75rem; }

/* Gomb */
.reg-btn {
    --bs-btn-padding-x: 2.75rem;
    --bs-btn-padding-y: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--bl-green);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: clamp(1.15rem, 1.4vw, 1.5rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    transition: background-color .15s, transform .15s;
}
.reg-btn:hover, .reg-btn:focus-visible { background: var(--bl-green-dark); color: #fff; }
.reg-btn:active { transform: translateY(1px); background: var(--bl-green-dark) !important; color: #fff !important; }
.reg-btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .4); }
.reg-btn:disabled { background: var(--bl-green); color: #fff; opacity: .7; }

/* Üzenetek */
.reg-alert {
    background: rgba(255, 180, 168, .15);
    border-left: 4px solid var(--bl-error);
    color: #fff;
    padding: .85rem 1rem;
    margin-bottom: 1.75rem;
    font-weight: 600;
}
.reg-success { font-size: 1.15rem; outline: none; }
.reg-success__lead { font-size: 1.75rem; font-weight: 700; color: var(--bl-green); margin-bottom: .5rem; }

/* Honeypot */
.reg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}