/* styles/registracija-simtmetis.css
   Link-only centennial-events registration page. Photo hero (same pattern
   as apie.php/privatumas.php) + a two-column form/photos layout. */

/* Every other page-specific stylesheet (apie.css, jubiliejus.css,
   privatumas.css, ...) carries this same base-reset block — it was missing
   here, which is why body's default 8px UA-stylesheet margin was showing
   up as visible white space around the full-bleed hero. */
*{box-sizing:border-box}

/* Google's reCAPTCHA terms require showing the corner badge OR a text
   disclosure wherever v3 (invisible) reCAPTCHA runs — main.css hides the
   badge sitewide (opacity:0) and Kontaktai's modal only reveals it
   (.captcha-visible) for as long as that modal is open. This page has no
   modal to key off of and needs the badge visible for the whole visit, so
   <body> gets its own class here rather than reusing .captcha-visible —
   that class gets silently stripped by main.js's closeAllModals() on
   Escape/backdrop-click/any .modal-close (sitewide listeners that fire
   regardless of whether a modal is actually open on this page), which
   would otherwise re-hide the badge the first time someone hits Escape. */
body.reg-captcha-visible .grecaptcha-badge {
    opacity: 1 !important;
    transform: translateY(8px);
    pointer-events: auto;
    visibility: visible !important;
}

html{
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

body{
    display: flex;
    flex-direction: column;
    min-height:100vh;
    overflow-x: hidden;
    margin:0;
}

main{
    flex:1;
}

/* main.css's global `input, textarea { border: 1px solid var(--bg); }` is
   effectively invisible here — var(--bg) is white, same as this page's
   background (it only shows up faintly on the contact modal's grey
   background). Scoped to this page rather than editing main.css, so the
   modal/other forms sitewide are unaffected. */
/* ── First 4 fields (Vardas/Pavardė/Email/Telefonas) — half width ──────────
   Adjust the 50% below (or list fewer/more of the four IDs) to change how
   much of the available row width these particular fields take up. */
#first_name, #last_name, #email, #phone {
    max-width: 70%;
}

.reg-form input[type="text"],
.reg-form input[type="email"],
.reg-form input[type="tel"],
.reg-form input[type="number"],
.reg-form textarea {
    border: 1px solid #000;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 6px 0 0;
}

/*----------- HERO ----------------- */
.main{
    padding:0;
}

.hero-s {
    /* Replace with your actual image path */
    background-image: url('../assets/registracija/dainu-svente-vyrai.webp');
    background-size: cover;
    background-position-y: 52%;
    height: 150px; /* Adjust height as needed */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: left;
    margin-top:120px;
}

/* Dark overlay to ensure text readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: left;
}

.hero-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The Gradient Logic */
    background: linear-gradient(
        to right, 
        rgba(0, 0, 0, 1) 0%,     /* Black at top (70% opacity) */
        rgba(0, 0, 0, 0.5) 30%,      /* Becomes transparent at 30% */
        rgba(0, 0, 0, 0.5) 70%,      /* Stays transparent until 70% */
        rgba(0, 0, 0, 1) 100%    /* Black at bottom (70% opacity) */
    );
    
    pointer-events: none; /* Allows clicks to pass through to the image */
}

.hero-content {
    z-index: 1;
    padding:0px 5vw;
}

.hero-logo img {
    max-width: 120px; /* Adjust based on your logo size */
    margin-bottom: 15px;
}

.hero-title {
    font-size: 2rem; /* Large, bold heading */
    font-weight: 700;
    text-transform: none; /* Matches the "ist chorą" style */
    margin: 0;
    letter-spacing: 1px;
    line-height:40px;
}

.hero-s span{
    font-size: 1rem;
    letter-spacing: normal;
}

.reg-s { padding: 60px 20px; }

.reg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 36px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 950px) {
    .reg-layout { grid-template-columns: 1fr; }
}

.reg-form { gap: 0; }

/* The intro paragraphs/list had no styling of their own, so two things from
   main.css leaked in: 1) being flex children of .reg-form, <p>'s default UA
   margins don't collapse the way they would in a normal block layout, so
   the spacing looked arbitrary/cramped next to the deliberately-set 22px
   .f-group rhythm below; 2) main.css's sitewide `ul { list-style:none;
   display:flex; flex-wrap:nowrap; white-space:nowrap; }` (written for the
   nav menus) is a bare-tag selector that matches every <ul> on the site —
   it was turning this list into a single no-wrap flex row with no bullets
   instead of a normal stacked list. Both are overridden below, scoped to
   this block only. */
.reg-intro-text { margin-bottom: 30px; }
.reg-intro-text p { margin: 0 0 16px; line-height: 1.6; }
.reg-intro-text p:last-child { margin-bottom: 0; }
.reg-intro-text .reg-intro {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
}
.reg-intro-text ul {
    display: block;
    list-style: disc;
    flex-wrap: wrap;
    white-space: normal;
    margin: 0 0 16px;
    padding-left: 22px;
}
.reg-intro-text li {
    display: list-item;
    white-space: normal;
    margin-bottom: 8px;
    line-height: 1.6;
}
.reg-intro-text li:last-child { margin-bottom: 0; }

/* main.css's sitewide `form { display: flex; }` is an AUTHOR-origin rule,
   so it beats the UA stylesheet's `[hidden] { display: none }` regardless
   of specificity (origin is checked before specificity in the cascade) —
   plain `form.hidden = true` from JS silently does nothing visually. Same
   bug class as .f-sub/[hidden] elsewhere on this page; fixed the same way,
   with a page-scoped class instead of touching the sitewide form rule. */
.reg-form.is-hidden { display: none; }

.f-group { margin-bottom: 22px; }
.f-group > label,
.f-fieldset > legend {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0;
    border: none;
}
.req { color: var(--accent); margin-left: 2px; }

.f-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 22px;
}

/* Matches the mockup: "Kada dainavote..." (years) and "Kokiu balsu
   dainavote?" (voice) sit side by side as two sub-columns, not stacked. */
.years-voice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 22px;
}
.years-voice-row .f-fieldset { margin-bottom: 0; }
@media (max-width: 600px) {
    .years-voice-row { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .hero-title {
    font-size: 1.5rem;
    }
}

.years-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}
.year-field { display: flex; flex-direction: column; }
.year-field label { font-weight: 400; font-size: 0.85rem; margin-bottom: 2px; }
.year-field input { width: 100%; max-width: 120px; margin: 4px 0 0; }

/* Higher specificity than ".f-group > label" — "Neprisimenu" and
   "Ar šimtmečio..." are direct children of a .f-group, so that rule's
   display:block would otherwise win and break the centered checkbox
   alignment (very visible once the label text wraps to two lines). */
.reg-form label.check-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    margin: 6px 0;
    cursor: pointer;
}

.check-inline.dont {
    padding-top:10px;
}

/* Single column, matching the mockup. */
.voice-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Higher specificity than ".f-group > label" (which the fieldset also
   matches, since it carries both f-group and f-fieldset) — otherwise that
   rule's display:block wins and stacks the checkbox above the text instead
   of beside it. */
.reg-form label.event-check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    cursor: pointer;
}
.event-check input { flex-shrink: 0; }
.event-check span { display: flex; flex-direction: column; gap: 2px; }
.event-check strong { font-weight: 600; line-height: 1.35; }
.event-check small { color: #5a5a5a; font-size: 0.85rem; }
.event-check a { color: var(--accent); }

/* All checkboxes on this page sized to match the text inputs' visual
   weight instead of the browser's tiny native default. */
.reg-form input[type="checkbox"] {
    width: 25px;
    height: 25px;
    min-width: 25px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* :not([hidden]) — otherwise this always-on display:flex would override
   the browser's default [hidden]{display:none} and defeat the JS toggle
   that shows this only once "Ar šimtmečio koncerte..." is checked. */
.f-sub:not([hidden]) {
    margin: 8px 0 0 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.f-sub label { font-weight: 600; font-size: 1rem; margin-bottom: 0; }
.f-sub input { width: 100px; max-width: 100px; margin: 6px 0 0; }

.vakarone-price {
    font-weight: 600;
    font-size: 1rem;
}

/* Small "i" info icon with a CSS-only tooltip — :hover for mouse,
   :focus-visible (via tabindex="0" on the icon) for keyboard, so the
   "Gali keistis" note reaches keyboard users too, not just mouse hover. */
.info-tip {
    position: relative;
    display: inline-flex;
    margin-left: 6px;
    vertical-align: middle;
}
.info-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--black, #333);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: help;
}
.info-tip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #000;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
}
.info-tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #000;
}
.info-tip:hover .info-tip-bubble,
.info-tip:focus .info-tip-bubble,
.info-tip:focus-visible .info-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
}
.privacy-consent input { margin-top: 4px; width: auto; border:solid 1px #ccc; }
.privacy-consent label { font-size: 0.88rem; line-height: 1.4; font-weight: 400; }
.privacy-consent a { color: var(--accent); }

/* main.css's .field-error uses margin:-10px top, tuned for the contact
   modal's inputs (which keep the global 15px bottom margin). This page's
   inputs override that to margin:6px 0 0 (no bottom margin), so that -10px
   pull had nothing to absorb it and dragged the error text up into the
   field's own border instead of sitting cleanly below it. */
.reg-form .field-error {
    margin: 6px 0 12px;
}

.reg-status {
    min-height: 1.4em;
    margin: 4px 0 14px;
    font-size: 0.9rem;
    font-weight: 600;
}
.reg-status--ok { color: var(--accent); }
.reg-status--err { color: #b3261e; }

/* #regSuccess is a sibling of <form id="regForm"> inside .reg-layout's
   2-column grid — without an explicit column it would auto-place into the
   form's grid-template-columns second slot (grid auto-flow just fills the
   next open cell in source order) and push .reg-photos onto its own new
   row instead of staying beside whichever of the two (form/success) is
   currently visible. */
#regSuccess {
    grid-column: 1;
}
.reg-success-msg {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 24px;
}
.reg-success-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
/* main.css's .btn-2 carries its own margin-top:10px (tuned for stacking
   under other content elsewhere) — inside this flex row it just pushes the
   "Registruoti dar kartą" button down relative to the .btn-1 next to it. */
.reg-success-actions .btn-2 {
    margin-top: 0;
}

.reg-photos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 140px;
}
.reg-photos img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    max-height: 320px;
}
@media (max-width: 950px) {
    .reg-photos { position: static; flex-direction: row; flex-wrap: wrap; }
    .reg-photos img { max-height: 200px; flex: 1 1 240px; }
}