:root{
    /* Finomitott szinpaletta */
    --c-bg-1:#fafbfd;
    --c-bg-2:#eef2f8;
    --c-card:#ffffff;
    --c-text:#0f172a;
    --c-text-soft:#475569;
    --c-muted:#64748b;
    --c-border:#e2e8f0;
    --c-border-strong:#cbd5e1;

    --c-primary:#4f46e5;
    --c-primary-hover:#4338ca;
    --c-primary-soft:#e0e7ff;
    --c-accent:#06b6d4;

    --c-error:#dc2626;
    --c-error-bg:#fef2f2;
    --c-success:#059669;
    --c-success-bg:#ecfdf5;
    --c-warn-bg:#fffbeb;

    --shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --shadow-md:0 4px 12px rgba(15,23,42,.06);
    --shadow-lg:0 24px 48px -12px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.04);
    --shadow-button:0 6px 18px rgba(79,70,229,.28);

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:16px;
    --radius-xl:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter",Arial,sans-serif;
    color:var(--c-text);
    background:var(--c-bg-1);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(79,70,229,.08) 0%, transparent 45%),
        radial-gradient(circle at 88% 92%, rgba(6,182,212,.07) 0%, transparent 45%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f8 100%);
    background-attachment:fixed;
    min-height:100vh;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    font-size:15px;
}

.shell{
    max-width:720px;
    margin:0 auto;
    padding:56px 20px 80px;
    position:relative;
}

/* --- Logok --- */
.logos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:36px;
    margin-bottom:38px;
    flex-wrap:wrap;
}
.logos img,
.logos .logo-placeholder{
    height:64px;
    width:auto;
    max-width:220px;
    object-fit:contain;
}
.logos .logo-divider{
    width:1px;
    height:44px;
    background:linear-gradient(180deg, transparent 0%, var(--c-border-strong) 50%, transparent 100%);
}
.logo-placeholder{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    background:var(--c-card);
    color:var(--c-muted);
    border:1px dashed var(--c-border);
    border-radius:10px;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:600;
}

/* --- Fokart --- */
.card{
    background:var(--c-card);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    padding:44px 44px 38px;
    position:relative;
    overflow:hidden;
}
.card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
}

.card h1{
    margin:0 0 8px;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--c-text);
}
.card .lead{
    margin:0 0 32px;
    color:var(--c-text-soft);
    font-size:16px;
}

/* --- Esemeny info kartya --- */
.event-banner{
    background:linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color:#312e81;
    padding:20px 22px;
    border-radius:14px;
    margin-bottom:28px;
    border:1px solid #c7d2fe;
}
.event-banner .event-name{
    display:block;
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
    letter-spacing:-.005em;
    color:#312e81;
}
.event-banner .event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:14px;
    color:#4338ca;
}
.event-banner .event-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.event-banner .event-meta svg{
    width:16px;height:16px;
    flex-shrink:0;
    opacity:.85;
}
.event-banner .event-desc{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(67,56,202,.15);
    font-size:14px;
    color:#3730a3;
    line-height:1.55;
}

/* --- Kapacitas progress bar --- */
.capacity{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(67,56,202,.15);
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    color:#4338ca;
}
.capacity .label{
    font-weight:600;
    flex-shrink:0;
}
.capacity .bar{
    flex:1;
    height:6px;
    background:rgba(79,70,229,.15);
    border-radius:3px;
    overflow:hidden;
}
.capacity .bar > span{
    display:block;
    height:100%;
    background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
    border-radius:3px;
    transition:width .3s ease;
}
.capacity.warn .bar > span{
    background:linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}
.capacity.danger .bar > span{
    background:linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}
.capacity.danger,
.capacity.warn{
    color:#92400e;
}

/* --- "Nincs aktiv esemeny" notice --- */
.no-event{
    background:var(--c-warn-bg);
    color:#92400e;
    padding:16px 18px;
    border-radius:12px;
    margin-bottom:28px;
    border:1px solid #fed7aa;
    font-size:14px;
    display:flex;
    align-items:flex-start;
    gap:12px;
}
.no-event svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}

/* --- Form --- */
.form-grid{display:grid;gap:20px}

.field{position:relative}
.field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--c-text);
    letter-spacing:-.005em;
}
.field label .req{color:var(--c-error);margin-left:2px}

.field-with-icon{position:relative}
.field-with-icon > svg{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;height:18px;
    color:var(--c-muted);
    pointer-events:none;
    transition:color .15s;
}
.field-with-icon:focus-within > svg{color:var(--c-primary)}
.field-with-icon.textarea > svg{
    top:18px;
    transform:none;
}

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea{
    width:100%;
    border:1.5px solid var(--c-border);
    background:#fff;
    color:var(--c-text);
    border-radius:10px;
    padding:13px 14px;
    font-size:15px;
    font-family:inherit;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.field-with-icon input[type=text],
.field-with-icon input[type=email],
.field-with-icon input[type=tel],
.field-with-icon textarea{
    padding-left:42px;
}
.field textarea{
    min-height:92px;
    resize:vertical;
    line-height:1.5;
}
.field input::placeholder,
.field textarea::placeholder{color:#94a3b8}
.field input:hover,
.field textarea:hover{border-color:var(--c-border-strong)}
.field input:focus,
.field textarea:focus{
    outline:none;
    border-color:var(--c-primary);
    box-shadow:0 0 0 4px rgba(79,70,229,.12);
}

.field .hint{
    font-size:12px;
    color:var(--c-muted);
    margin-top:6px;
    line-height:1.4;
}
.field .err{
    font-size:13px;
    color:var(--c-error);
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:500;
}
.field.has-error input,
.field.has-error textarea{
    border-color:var(--c-error);
    background:var(--c-error-bg);
}
.field.has-error .field-with-icon > svg{color:var(--c-error)}

/* --- Custom checkbox / consent --- */
.consent{
    margin-top:8px;
    background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border:1.5px solid var(--c-border);
    border-radius:12px;
    padding:16px 18px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    transition:border-color .15s, background .15s;
}
.consent:has(input:checked){
    border-color:#a5b4fc;
    background:linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}
.consent input[type=checkbox]{
    appearance:none;
    -webkit-appearance:none;
    width:22px;height:22px;
    flex-shrink:0;
    border:2px solid var(--c-border-strong);
    border-radius:6px;
    background:#fff;
    cursor:pointer;
    position:relative;
    transition:border-color .15s, background .15s;
    margin-top:1px;
}
.consent input[type=checkbox]:hover{border-color:#94a3b8}
.consent input[type=checkbox]:checked{
    background:var(--c-primary);
    border-color:var(--c-primary);
}
.consent input[type=checkbox]:checked::after{
    content:'';
    position:absolute;
    left:6px;top:2px;
    width:6px;height:11px;
    border:solid #fff;
    border-width:0 2.5px 2.5px 0;
    transform:rotate(45deg);
}
.consent input[type=checkbox]:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(79,70,229,.18);
}
.consent label{
    font-size:14px;
    color:var(--c-text);
    margin:0;
    line-height:1.55;
    cursor:pointer;
    flex:1;
}
.consent a{
    color:var(--c-primary);
    text-decoration:underline;
    text-underline-offset:2px;
    text-decoration-thickness:1px;
    font-weight:500;
}
.consent a:hover{color:var(--c-primary-hover)}
.consent.has-error{
    border-color:var(--c-error);
    background:var(--c-error-bg);
}

/* --- CTA gomb --- */
.btn-primary{
    width:100%;
    margin-top:28px;
    background:linear-gradient(135deg, var(--c-primary) 0%, #4338ca 100%);
    color:#fff;
    border:none;
    border-radius:12px;
    padding:16px 22px;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.005em;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s, opacity .15s;
    box-shadow:var(--shadow-button);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.btn-primary:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(79,70,229,.36);
}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-primary svg{width:18px;height:18px}

/* --- Notices --- */
.notice{
    padding:14px 16px;
    border-radius:10px;
    margin-bottom:24px;
    font-size:14px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.5;
}
.notice svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.notice.error{
    background:var(--c-error-bg);
    color:#991b1b;
    border:1px solid #fecaca;
}
.notice.success{
    background:var(--c-success-bg);
    color:#065f46;
    border:1px solid #a7f3d0;
}

.footer-text{
    text-align:center;
    color:var(--c-muted);
    font-size:13px;
    margin-top:28px;
}

/* --- Thanks oldal --- */
.thanks-icon{
    width:88px;height:88px;
    margin:0 auto 20px;
    background:linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color:var(--c-success);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(5,150,105,.18);
    animation:pop .5s cubic-bezier(.34,1.56,.64,1);
}
.thanks-icon svg{width:48px;height:48px;stroke-dasharray:36;stroke-dashoffset:0;animation:draw .6s ease-out .15s backwards}
@keyframes pop{
    0%{transform:scale(0);opacity:0}
    60%{transform:scale(1.1)}
    100%{transform:scale(1);opacity:1}
}
@keyframes draw{
    from{stroke-dashoffset:36}
    to{stroke-dashoffset:0}
}

/* --- Adatkezelesi tajekoztato --- */
.doc-shell{max-width:780px}
.doc h2{
    font-size:18px;
    margin-top:28px;
    margin-bottom:10px;
    color:var(--c-text);
    letter-spacing:-.005em;
}
.doc h2:first-of-type{margin-top:0}
.doc ul{padding-left:22px;margin:8px 0}
.doc li{margin-bottom:5px;color:var(--c-text-soft)}
.doc p{color:var(--c-text-soft)}
.doc table{
    width:100%;
    border-collapse:collapse;
    margin:14px 0;
    font-size:14px;
    border:1px solid var(--c-border);
    border-radius:8px;
    overflow:hidden;
}
.doc th,.doc td{
    border-bottom:1px solid var(--c-border);
    padding:10px 14px;
    text-align:left;
    vertical-align:top;
}
.doc tr:last-child th,
.doc tr:last-child td{border-bottom:none}
.doc th{
    background:#f9fafb;
    font-weight:600;
    color:var(--c-text);
    font-size:13px;
}
.doc-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:32px;
    color:var(--c-primary);
    text-decoration:none;
    font-weight:500;
    font-size:14px;
}
.doc-back:hover{color:var(--c-primary-hover);text-decoration:underline}
.doc-back svg{width:16px;height:16px}

/* --- Mobil --- */
@media (max-width:540px){
    .shell{padding:32px 16px 56px}
    .logos{gap:20px;margin-bottom:28px}
    .logos img,.logos .logo-placeholder{height:50px}
    .logos .logo-divider{display:none}
    .card{padding:28px 22px 24px;border-radius:16px}
    .card h1{font-size:24px}
    .card .lead{font-size:15px;margin-bottom:24px}
    .event-banner{padding:16px 18px}
    .event-banner .event-meta{gap:10px;flex-direction:column}
}