/* =============================================================================
 * portal-login.css — A belépő (login.html) SÖTÉT-ÜVEG belépő-választó (C opció).
 *
 * Felül kétnyelvű, pulzáló tesztüzem-sáv → glass navbar (menü + hamburger) → hero (szlogen) →
 * két belépés (Ügyfélkapu/Szakember) → kártyára kattintva a VALÓDI belépő-űrlap. A form/CSRF/route
 * és a login.js által várt id-k (loginForm, username, password, togglePassword, passwordResetForm…)
 * VÁLTOZATLANOK. A tokeneket a portal-theme.css adja.
 * doc: docs/webshop-megrendeles/22-webes-market-es-portal-android-harmonizacio-terv-2026-08-19.md §1a
 * ============================================================================= */

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.login-page a { text-decoration: none; }

/* ⭐ 2026-08-19: a TESZTÜZEM-SÁV + FELSŐ MENÜ közös lett — a `fragments/public-shell.html` fragmentet és a
 * `portal-public.css`-t használjuk (pill-gombok + Belépés), mint a Market/Szakemberek oldalakon. A korábbi
 * (pill nélküli) másolat innen KIKERÜLT, hogy a publikus oldalak fejléce EGYSÉGES legyen. */

/* ── HERO / SZLOGEN ── */
.hero { text-align: center; padding: 52px 0 26px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--brand-light);
    background: rgba(11, 95, 255, .14); border: 1px solid rgba(157, 187, 255, .3);
    padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(1.8rem, 4.6vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 12px; text-wrap: balance; }
.hero p { color: var(--glass-on-muted); font-size: 1.02rem; max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* ── BELÉPŐ-VÁLASZTÓ (két kártya) ── */
.picker { max-width: 640px; margin: 6px auto 0; padding-bottom: 20px; }
.picker .lead { text-align: center; color: var(--glass-on-muted); font-size: .9rem; margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcard {
    position: relative; overflow: hidden; text-align: center; color: var(--glass-on); cursor: pointer;
    background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
    padding: 24px 20px; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 16px 40px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .16s ease, border-color .16s ease;
}
.pcard:hover { transform: translateY(-3px); }
.pcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.pcard.client::before { background: var(--brand); }
.pcard.worker::before { background: var(--action); }
.pcard.client:hover { border-color: rgba(11, 95, 255, .5); }
.pcard.worker:hover { border-color: rgba(232, 89, 12, .5); }
.pcard .ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.pcard.client .ic { background: rgba(11, 95, 255, .16); color: var(--brand-light); }
.pcard.worker .ic { background: rgba(232, 89, 12, .16); color: var(--action-light); }
.pcard h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 5px; }
.pcard p { color: var(--glass-on-muted); font-size: .85rem; margin: 0 0 16px; line-height: 1.45; }
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border-radius: var(--r-md); padding: 10px 16px; font-weight: 700; font-size: .92rem; }
.pcard.client .cbtn { background: var(--brand); color: #fff; }
.pcard.worker .cbtn { background: var(--action); color: #fff; }

/* ⭐ Ügyfél-önregisztráció belépő-terelő (a két kártya alatt). */
.reg-cta { text-align: center; margin: 18px 0 0; font-size: .92rem; color: var(--glass-on-muted); }
.reg-cta a { color: var(--brand-light); font-weight: 700; text-decoration: none; }
.reg-cta a:hover { text-decoration: underline; }

/* ── BELÉPŐ ŰRLAP (kártya kattintásra) ── */
.loginbox {
    display: none; max-width: 400px; margin: 6px auto 0; padding: 26px 26px 24px;
    background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--r-xl);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 20px 50px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.loginbox.on { display: block; }
.lb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lb-badge { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.lb-badge.client { background: rgba(11, 95, 255, .18); color: var(--brand-light); }
.lb-badge.worker { background: rgba(232, 89, 12, .18); color: var(--action-light); }
.lb-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--glass-on); }
.lb-head .sub { font-size: .78rem; color: var(--glass-on-muted); }

.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; color: var(--glass-on); }
.fld .pw-wrap { position: relative; display: flex; align-items: center; }
.fld input {
    width: 100%; padding: 11px 13px; border-radius: var(--r-md); color: var(--glass-on); font-size: .95rem;
    background: var(--glass-fill-strong); border: 1px solid var(--glass-border); outline: none;
}
.fld .pw-wrap input { padding-right: 44px; }
.fld input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 95, 255, .25); }
.fld input::placeholder { color: var(--glass-on-muted); }
.pw-eye { position: absolute; right: 4px; background: none; border: none; color: var(--glass-on-muted); padding: 8px 10px; cursor: pointer; }
.pw-eye:hover { color: var(--glass-on); }

.submit {
    width: 100%; margin-top: 6px; background: var(--action); color: #fff; border: none;
    border-radius: var(--r-md); padding: 13px; font-weight: 700; font-size: 1rem; cursor: pointer;
    box-shadow: 0 8px 24px rgba(232, 89, 12, .35);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.submit:hover { background: var(--action-pressed); }
.lb-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: .82rem; }
.lb-foot a, .lb-foot .back { color: var(--brand-light); cursor: pointer; background: none; border: none; font-size: .82rem; padding: 0; }
.lb-foot a:hover, .lb-foot .back:hover { text-decoration: underline; }

/* ── PARAM-ALERTEK (rendszerüzenetek) ── */
.lw-alert {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 11px 38px 11px 13px; margin-bottom: 12px; border-radius: var(--r-md); font-size: .87rem;
    border: 1px solid var(--glass-border); background: var(--glass-fill-strong); color: var(--glass-on);
}
.lw-alert-danger  { border-color: rgba(198, 40, 40, .5);  background: rgba(198, 40, 40, .16);  color: #FFC1C1; }
.lw-alert-info    { border-color: rgba(21, 101, 192, .5); background: rgba(21, 101, 192, .16); color: #BBD6FF; }
.lw-alert-success { border-color: rgba(46, 125, 50, .5);  background: rgba(46, 125, 50, .18);  color: #B7EBBB; }
.lw-alert-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; opacity: .7; cursor: pointer; }
.lw-alert-close:hover { opacity: 1; }

/* ── FOOTER ── */
.login-footer { text-align: center; color: var(--glass-on-muted); padding: 26px 0 40px; margin-top: 26px; border-top: 1px solid var(--glass-border); font-size: .85rem; }
.login-footer a { color: var(--brand-light); }
.login-footer .sep { margin: 0 6px; opacity: .5; }

/* ── MODÁLOK (jelszó-visszaállítás, biztonsági) ── */
.lw-modal { background: #0B1224; border: 1px solid var(--glass-border); border-radius: var(--r-lg); color: var(--glass-on); }
.lw-modal-header { border-bottom: 1px solid var(--glass-border); }
.lw-modal-header .modal-title { color: var(--glass-on); }
.lw-modal-body p { color: var(--glass-on); }
.lw-modal-footer { border-top: 1px solid var(--glass-border); }
.lw-modal .lw-field { margin-bottom: 12px; }
.lw-modal .lw-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--glass-on); }
.lw-modal .lw-input-group { display: flex; align-items: center; background: var(--glass-fill-strong); border: 1px solid var(--glass-border); border-radius: var(--r-md); }
.lw-modal .lw-input-icon { padding: 0 4px 0 12px; color: var(--glass-on-muted); }
.lw-modal .lw-input { flex: 1; background: transparent; border: none; outline: none; padding: 11px 12px; color: var(--glass-on); }
.lw-info-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(21, 101, 192, .16); color: #BBD6FF; font-size: .84rem; margin-top: var(--sp-md); }
.btn-primary-lw { background: var(--action); color: #fff; border: none; border-radius: var(--r-md); padding: 10px 18px; font-weight: 700; }
.btn-primary-lw:hover { background: var(--action-pressed); color: #fff; }
.btn-secondary-lw { background: transparent; color: var(--brand-light); border: 1.5px solid rgba(157, 187, 255, .5); border-radius: var(--r-md); padding: 10px 18px; font-weight: 600; }
.btn-secondary-lw:hover { background: rgba(157, 187, 255, .12); }

/* ── MOBILBARÁT (a nav mobil-viselkedése a portal-public.css-ben van) ── */
@media (max-width: 720px) {
    .cards { grid-template-columns: 1fr; }
}