@charset "UTF-8";
/* Must be the literal first thing in the file (no comment/whitespace
   before it) — without it, the generated content string in the
   "(opcionális)" rule below rendered as "opcionális" in some browsers:
   the file is genuinely UTF-8 on disk, but a stylesheet loaded via <link>
   with no explicit charset falls back to the page's own charset detection,
   which doesn't always agree with the file's actual encoding for content
   the browser only ever sees inside a CSS string (as opposed to text
   already present in the page's own HTML/DOM). */

/* ==========================================================================
   SAFE LASER — GRAVITY FORMS BRAND THEME
   ==========================================================================
   Re-skins Gravity Forms' own stable, documented markup (.gform_wrapper,
   .gfield, .gfield_label, .ginput_container, .gform_footer, .gform_button,
   .gform_confirmation_message, .validation_message/.gfield_error,
   .gsection_title, and the built-in "Ready Class" layout hooks
   gf_left_half/gf_right_half) rather than any theme-specific field
   templates — GF's own default CSS is disabled entirely (gform_disable_css,
   inc/gravity-forms.php) so this file is the only source of truth, matching
   this theme's general preference for owning its own styles outright
   instead of fighting a plugin's defaults with !important everywhere.

   Ported to match Keszulek regisztracio.dc.html (device registration
   prototype) — the reference form for field/label/button sizing — but
   written generically so it applies to any Gravity Forms form on the site,
   not just that one.

   Gravity Forms is not installed on this site as of when this file was
   written (see inc/gravity-forms.php) — every selector here is written
   against GF's long-documented public markup, but hasn't been visually
   verified against a live form. Re-check once the plugin is installed; if
   an installed version's markup differs from what's assumed here (e.g.
   legacy vs. new/2.5+ markup for checkbox/radio choices), adjust the
   selectors flagged below rather than the overall approach.
   ========================================================================== */

.gform_wrapper {
    font-family: var(--font-sans);
    color: var(--sl-text-primary);
}

.gform_wrapper .gform_heading {
    margin-bottom: 20px;
}

.gform_wrapper .gform_title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
}

.gform_wrapper .gform_description {
    margin: 0;
    font-size: 14px;
    color: var(--sl-text-secondary);
}

/* --- Section field ("Az Ön adatai" / "A készülék adatai" in the
   prototype) — a GF admin creates a "Section" field with this title, no
   custom HTML needed, and gets the same look as the sitewide
   ".sl-eyebrow-label" utility (design-tokens.css). --- */
.gform_wrapper .gsection {
    border: none;
    margin: 28px 0 0;
    padding: 0;
}

.gform_wrapper .gsection:first-child {
    margin-top: 0;
}

.gform_wrapper .gsection_title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    margin: 12px 0 0 0;
    border: none;
    padding: 0;
}

.gform_wrapper .gsection_description {
    display: none;
}

/* --- Field grid: 2 columns by default (matches the prototype's
   "grid-template-columns:1fr 1fr; gap:16px"), each field spanning both
   columns unless it carries GF's own built-in "Ready Class" for a half-
   width field (ticked in the field's Appearance settings in the form
   editor) — no custom field templates required to reproduce the
   prototype's 2-up rows (Név/Telefonszám, device fields). --- */
.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gform_wrapper .gfield {
    grid-column: 1 / -1;
    margin: 0;
}

/* Two ways GF marks a field for half-width placement, depending on
   version/markup: the classic "Ready Class" an admin types into the
   field's CSS Class Name setting (gf_left_half/gf_right_half — also still
   offered for thirds), and the newer (2.5+) Appearance-tab "Column Span"
   control, which instead adds a "--width-*" BEM modifier straight to the
   .gfield wrapper with no admin typing required. Both need to actually
   span 1 of the 2 grid columns here, or a field configured either way
   would silently fall through to the default full-width span. */
.gform_wrapper .gfield.gf_left_half,
.gform_wrapper .gfield.gf_right_half,
.gform_wrapper .gfield.gf_left_third,
.gform_wrapper .gfield.gf_middle_third,
.gform_wrapper .gfield.gf_right_third,
.gform_wrapper .gfield--width-half,
.gform_wrapper .gfield--width-third,
.gform_wrapper .gfield--width-two-thirds,
.gform_wrapper .gfield--width-quarter {
    grid-column: span 1;
}

.gform_wrapper .gfield--width-full {
    grid-column: 1 / -1;
}

/* Standard visually-hidden utility — GF's own base CSS (disabled here via
   gform_disable_css) normally defines this exact class itself and applies
   it to a field's <label> when that field's "Label Visibility" is set to
   Hidden in the form editor, so screen readers still get it even though
   sighted users don't. Redefined here since disabling GF's CSS removes its
   utility classes along with everything else. */
.gform-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Only GF's own explicit per-field "Label Visibility: Hidden" setting
   suppresses a label entirely — required vs. optional no longer factors
   into whether the label itself shows, only into what's added on top of
   it (see below). Same visually-hidden technique as the checkout/profile
   pages' own placeholder-only fields (design-tokens.css). ".hidden_label"
   (on the .gfield wrapper itself) is confirmed against a live install's
   markup; ".gfield--label-hidden" is kept alongside it as an unconfirmed
   belt-and-braces guess from before GF was installed. */
.gform_wrapper .hidden_label .gfield_label,
.gform_wrapper .gfield--label-hidden .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Every other field's label displays normally — required fields included.
   Checkbox/radio/consent fields are excluded here (and given no
   ":not(...)" escape hatch on the hide rule further below, so there's no
   specificity contest between the two): their field-level label/legend is
   always hidden regardless of this setting, since Kapcsolat.dc.html's
   consent row has no separate heading above the checkbox text — see the
   checkbox/radio/consent section below. ".gfield--type-consent" is the
   confirmed real field-type class (corrected from an earlier,
   pre-installation guess of ".gfield_consent"). */
.gform_wrapper .gfield:not(.hidden_label):not(.gfield--label-hidden):not(.gfield_checkbox):not(.gfield_radio):not(.gfield--type-consent) .gfield_label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--sl-text-primary);
    margin: 0 0 7px;
}

/* Required fields get no marking of any kind (no asterisk) — GF's own
   ".gfield_required" indicator is suppressed outright (also covers the
   duplicate "(Kötelező)" marker GF renders a second time inside a required
   Consent field's own choice label, since that carries the same class).
   Optional fields instead get a small muted "(opcionális)" suffix, the
   same way Kapcsolat.dc.html's own optional phone field is annotated —
   this isn't conditioned on the label-visibility rule above: if a field's
   label ends up hidden some other way, the whole label box (this
   generated suffix included) is clipped invisible right along with it, so
   there's no case where the suffix would leak out on its own. Consent is
   excluded here too — its own optional-only suffix is handled separately
   below, attached to its (permanently visible) choice text instead of its
   (permanently hidden) field label. */
.gform_wrapper .gfield:not(.gfield_contains_required):not(.gfield_checkbox):not(.gfield_radio):not(.gfield--type-consent) .gfield_label::after {
    content: " (opcionális)";
    font-weight: 400;
    color: var(--sl-text-muted);
}

.gform_wrapper .gfield_required {
    display: none;
}

/* No gap at all between label and description — it should read as one
   continuous caption block — only below the description (before whatever
   follows, typically the input). !important: the generic visible-label
   rule above (".gfield:not()×4 .gfield_label") is 7 classes of specificity
   vs. this selector's 4 (":has(+ X)" only counts as its argument's own
   specificity, here 2), so without it that rule's "margin: 0 0 7px" wins
   outright regardless of source order and this never actually applied. */
.gform_wrapper .gfield_label:has(+ .gfield_description:not(.validation_message)) {
    margin: 0 !important;
}

.gform_wrapper .gfield_description:not(.validation_message) {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sl-text-muted);
}

/* --- Text-like inputs, select, textarea --- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 50px !important;
    padding: 0 15px !important;
    border: 1px solid var(--sl-border-medium) !important;
    border-radius: var(--sl-radius-md) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    color: var(--sl-text-primary) !important;
    background: var(--sl-bg-white) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color var(--sl-duration-base) var(--sl-ease-standard);
}

.gform_wrapper textarea {
    height: auto !important;
    min-height: 110px;
    padding: 15px !important;
    resize: vertical;
}

.gform_wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    border-color: var(--sl-red) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* GF renders the "group" field types (Checkbox, Radio, and — confirmed via
   a live screenshot, unlike the other assumptions in this file — Consent)
   with a real <fieldset>/<legend> pair for accessibility rather than a
   <label for="...">, since one label can't correctly associate with more
   than one input. A bare <fieldset> carries its own default browser
   border/padding/min-width — reset unconditionally for every fieldset
   inside a form, regardless of which field type produced it, rather than
   just the specific classes assumed elsewhere in this file, so a markup
   difference here can't silently reopen the same "boxed legend" bug seen
   on the Consent field. */
.gform_wrapper fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* --- Checkbox / radio choice rows (marketing opt-in in the prototype). GF
   wraps each choice in <li> (legacy markup) or a ".gchoice" element
   (new/2.5+ markup) — both covered here since the installed version wasn't
   known at the time this was written. --- */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A GF admin can set a choice-type field's "Choice Layout" to horizontal
   (Appearance settings) — confirmed present on a live form
   (sl.plemomix.hu/kerdoiv/, "Hallottál már a Safe Laser-ről?" etc.), class
   "gfield--choice-align-horizontal" on the .gfield wrapper. Only the
   stacking direction changes here; each choice row's own layout (checkbox/
   radio + label) is unaffected. */
.gform_wrapper .gfield--choice-align-horizontal .gfield_checkbox,
.gform_wrapper .gfield--choice-align-horizontal .gfield_radio {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
}

/* Kapcsolat.dc.html's consent/checkbox rows have no separate heading above
   the checkbox — the choice text sitting next to the checkbox IS the whole
   field. GF still renders a field-level label/legend (the question/
   instruction typed into the field's own "Label" setting in the form
   editor) above the choice(s); hidden here unconditionally (overriding the
   required/optional label rules above, which don't know about these
   field-type-specific cases) so only the per-choice text shows. */
.gform_wrapper .gfield_checkbox .gfield_label,
.gform_wrapper .gfield_radio .gfield_label,
.gform_wrapper .gfield--type-consent .gfield_label {
    display: none;
}

.gform_wrapper .gfield_checkbox li,
.gform_wrapper .gfield_radio li,
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sl-text-secondary);
    cursor: pointer;
    /* A flex item's default min-width is "auto", not 0 — it refuses to
       shrink below its own unwrapped content width, which is why the
       choice label text wasn't wrapping (it just kept pushing the row
       wider instead). Needed on the row itself for the horizontal-choice
       layout (.gfield--choice-align-horizontal below), where each .gchoice
       is itself a flex item of its wrapping parent. */
    min-width: 0;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--sl-red);
    flex: none;
}

/* Same min-width:auto flex issue, one level deeper — the per-choice
   <label> itself is also a flex child (of .gchoice/li above), alongside
   the checkbox/radio input. */
.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield_checkbox li label,
.gform_wrapper .gfield_radio li label {
    flex: 1;
    min-width: 0;
}

/* --- Consent field (a single always-one-checkbox field type, distinct
   from the multi-choice Checkbox field above) — same inline "checkbox next
   to its own text" row, via GF's own ".ginput_container_consent"/
   ".gfield_consent_label" markup. --- */
.gform_wrapper .ginput_container_consent {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Same flex min-width:auto wrapping issue as the checkbox/radio choice
   labels above — the consent text is a flex child of .ginput_container_consent,
   alongside the checkbox input, and needs explicit min-width:0 to wrap
   instead of pushing the row wider. */
.gform_wrapper .gfield_consent_label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sl-text-secondary);
    cursor: pointer;
}

/* An optional Consent field has nowhere else to show "(opcionális)" — its
   own field-level label/legend is always hidden (above) — so it's appended
   straight after the visible choice text instead. Only relevant when GF
   hasn't already rendered its own "(Kötelező)"/required marker in this
   same label for a required field; that marker is a ".gfield_required"
   span (hidden sitewide, see above) and only exists in the DOM at all when
   the field actually is required, so there's no case where both markers
   could appear together. */
.gform_wrapper .gfield--type-consent:not(.gfield_contains_required) .gfield_consent_label::after {
    content: " (opcionális)";
    font-weight: 400;
    color: var(--sl-text-muted);
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--sl-red);
    flex: none;
}

/* --- Compound fields (Name, Address) — several sub-inputs in one row,
   each with its own small "sub-label" above it. Confirmed on a live form's
   Name field (sl.plemomix.hu/kerdoiv/): GF 2.5+ lays these out with
   ".gform-grid-row"/".gform-grid-col" — the same grid classes GF's Address
   field uses too, so this covers both field types with no field-specific
   selectors needed. The sub-inputs themselves are plain
   <input type="text">/<select> elements already covered by the rules
   above — only the row layout and sub-label text need styling here. */
.gform_wrapper .gform-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.gform_wrapper .gform-grid-col {
    flex: 1;
    min-width: 160px;
}

.gform_wrapper .gform-field-label--type-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--sl-text-muted);
    margin: 0 0 6px;
}

/* GF's own leftover clearfix element from the old float-based compound-
   field layout (a trailing empty <div class="gf_clear gf_clear_complex">
   after .gform-grid-row) — meaningless now that ".gform-grid-row" above is
   flex, not floats, but still prints as a blank block taking up space. */
.gform_wrapper .gf_clear.gf_clear_complex {
    display: none;
}

/* --- Date / Time fields — 2-3 separate day/month/year or hour/minute/am-
   pm sub-inputs (selects or text, both already styled above) in one row;
   only the row layout and narrower sub-input width need their own rule.
   Not present on the one live form checked for this pass — baseline
   styling only, re-verify once seen on a real Date/Time field. --- */
.gform_wrapper .ginput_container_date,
.gform_wrapper .ginput_container_time {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gform_wrapper .ginput_container_date select,
.gform_wrapper .ginput_container_date input[type="text"],
.gform_wrapper .ginput_container_time select,
.gform_wrapper .ginput_container_time input[type="text"] {
    width: auto !important;
    min-width: 64px;
    flex: 1;
}

/* --- List field — a dynamic add/remove-row table. Not present on the one
   live form checked for this pass — baseline styling only, re-verify once
   seen on a real List field. --- */
.gform_wrapper .gfield_list {
    width: 100%;
    border-collapse: collapse;
}

.gform_wrapper .gfield_list td {
    padding: 0 8px 8px 0;
}

.gform_wrapper .gfield_list_icons {
    white-space: nowrap;
    vertical-align: middle;
}

.gform_wrapper .add_list_item,
.gform_wrapper .delete_list_item {
    cursor: pointer;
}

/* --- File upload — native chooser plus, when the enhanced multi-file UI
   is enabled, a drag-drop zone and its own "Select Files" button. Not
   present on the one live form checked for this pass — baseline styling
   only, re-verify once seen on a real File Upload field. --- */
.gform_wrapper input[type="file"] {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--sl-text-secondary);
}

.gform_wrapper .gform_drop_area {
    border: 1.5px dashed var(--sl-border-medium);
    border-radius: var(--sl-radius-md);
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--sl-text-muted);
}

.gform_wrapper .gform_button_select_files {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-bg-white);
    border: 1.5px solid var(--sl-border-medium);
    border-radius: var(--sl-radius-md);
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    color: var(--sl-text-primary);
    cursor: pointer;
}

.gform_wrapper .gform_button_select_files:hover,
.gform_wrapper .gform_button_select_files:focus {
    border-color: var(--sl-red) !important;
    color: var(--sl-red) !important;
}

/* --- Validation states --- */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="url"],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: var(--sl-red) !important;
}

/* Choice-type fields (Checkbox/Radio/Consent) have no bordered input of
   their own for the rule above to recolor — a required-but-unanswered
   group would otherwise show no visible error at all (the top-of-form
   summary is itself hidden, see .gform_validation_errors below). Outline
   the fieldset itself instead. */
.gform_wrapper fieldset.gfield_error {
    border: 1.5px solid var(--sl-red) !important;
    border-radius: var(--sl-radius-md) !important;
    padding: 0 12px 12px 12px !important;
}

/* Consent's own field-level label/legend is always hidden (unconditionally,
   see the checkbox/radio/consent label rules above) — with no label text
   sitting at the fieldset's top edge, 0 top padding leaves the choice row
   flush against the border with no breathing room. Every other choice-type
   field DOES show its legend there, so 0 is correct for those. */
.gform_wrapper fieldset.gfield--type-consent.gfield_error {
    padding-top: 12px !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding-bottom: 12px;
    color: var(--sl-red-deep);
}

.gform_wrapper .gform_validation_errors {
    display: none;
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
    margin: 0 0 6px;
    font-weight: 600;
}

/* --- Submit button --- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
    margin: 24px 0 0;
    padding: 0;
}

.gform_wrapper .gform_button {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 54px !important;
    background: var(--sl-red) !important;
    color: var(--sl-bg-white) !important;
    border-radius: var(--sl-radius-md) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-shadow: none !important;
}

/* !important — same reset.css tie every other type="button"/type="submit"
   element on this site has to guard against (see design-tokens.css). */
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus,
.gform_wrapper .gform_button:active {
    background: var(--sl-red-hover) !important;
    color: var(--sl-bg-white) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Confirmation message (success state) --- */
.gform_wrapper .gform_confirmation_message {
    position: relative;
    text-align: center;
    padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 40px);
    background: var(--sl-bg-white);
    border-radius: var(--sl-radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    font-size: 16px;
    color: var(--sl-text-secondary);
}

.gform_wrapper .gform_confirmation_message::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: rgba(47, 158, 107, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
    }
    .gform_wrapper .gfield.gf_left_half,
    .gform_wrapper .gfield.gf_right_half,
    .gform_wrapper .gfield.gf_left_third,
    .gform_wrapper .gfield.gf_middle_third,
    .gform_wrapper .gfield.gf_right_third,
    .gform_wrapper .gfield--width-half,
    .gform_wrapper .gfield--width-third,
    .gform_wrapper .gfield--width-two-thirds,
    .gform_wrapper .gfield--width-quarter {
        grid-column: 1 / -1;
    }
}