:root {
/* --- Colors (from vwfstokens.css) --- */
--c-surface: #FFFFFF;
--c-bg: #F2F2F2;
--c-sunken: #E9E9E9;
--c-brand: #004666;
--c-brand-hover: #00344D;
--c-accent: #66E4EE;
--c-accent-hover: #94ecf3;
--c-focus: #006384;
--c-ink: #4C5356;
--c-ink-2: #6B7276;
--c-border: #E4E4E4;
/* adjusted for this page's caption spec */
--c-border-strong: #A8ADB3;
--c-error: #A21E4D;
--c-error-bg: #FFF0F2;
--c-success: #95A844;
--c-teal: #00a887;
--c-success-bg: #E9FAF4;
--c-brand-tint: #E4F0F5;
--c-brand-tint-2: #F4F9FB;
--c-warn: #D8AA00;
--c-overlay-hover: #F2F2F2;
--yellow-bright: #F5E850;
--red-bright: #FF4963;
--petrol-light: #C6DFE7;
/* --- Typography --- */
--font-family: 'VWAG', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-family-bold: 'VWAG-bold', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-family-light: 'VWAG-light', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-family-italic: 'VWAG-italic', , -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--fs-display: 700 30px/40px var(--font-family);
--fs-display-pad-mobile: 700 30px/38px var(--font-family);
--fs-h1: 700 30px/40px var(--font-family);
--fs-h1-pad-mobile: 700 1rem/25px var(--font-family);
--fs-h2: 700 24px/32px var(--font-family-bold);
--fs-h3: 600 18px/26px var(--font-family-light);
--fs-body: 400 15px/24px var(--font-family);
--fs-label: 600 13px/18px var(--font-family-light);
--fs-help: 400 13px/18px var(--font-family-light);
--fs-micro: 500 12px/16px var(--font-family);
--fs-eyebrow: 700 12px/16px var(--font-family);
--ls-eyebrow: 1.6px;
/* --- Radius (adjusted: this composed page is rounded, not sharp) --- */
/* inputs, selects, chips container */
/* preference tiles */
--r-pill: 999px;
/* tags, toggle, radio dots */
/* --- Spacing (adjusted per this page's caption note) --- */
--sp-container-pad-desktop: 64px;
--sp-container-pad-mobile: 32px;
--sp-between-fields: 20px;
--sp-between-fields-mobile: 10px;
/* "Mezera mezi poli 20px" */
--sp-between-groups: 20px;
/* "mezera mezi skupinami 20px" */
--sp-label-to-field: 8px;
/* "popisek→pole 8px" */
--sp-field-to-help: 6px;
/* "pole→nápověda 6px" */
--field-height: 40px;
--field-padding-y: 13px;
--field-padding-x: 16px;
--field-value-size: 15px;
--field-help-min-height: 18px;
--form-max-width: 720px;
/* "max. šířka 720px" */
/* --- Shadows / focus (from token file) --- */
--sh-1: 0 1px 2px rgba(16, 24, 40, 0.09);
--sh-2: 0 2px 5px rgba(0, 0, 0, .3);
--focus-ring: 0 0 0 3px rgba(0, 99, 132, .22);
--focus-border-color: #006384;
--focus-border-width: 2px;
--dur-fast: 120ms;
--dur-med: 160ms;
--ease-out: ease-out;
--ease-switch: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
:root {
--c-surface: #1B1F21;
--c-bg: #101314;
--c-sunken: #262B2D;
--c-brand: #4FB8DC;
--c-brand-hover: #7ED0EA;
--c-accent: #66E4EE;
--c-focus: #66E4EE;
--c-ink: #F2F3F4;
--c-ink-2: #C7CCCF;
--c-ink-2: #8C9296;
--c-border: #3A4043;
--c-border-strong: #565D61;
--c-error: #FF7A8E;
--c-error-bg: #3A1620;
--c-success: #3FD9AE;
--c-success-bg: #0F2E27;
--c-brand-tint: #1C2E36;
--c-brand-tint-2: #16262C;
--c-warn: #E8C34D;
--c-overlay-hover: #24292B;
--focus-ring: 0 0 0 3px rgba(102, 228, 238, .28);
--focus-border-color: #66E4EE;
}
}
/* ---- Reset & base ---- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font: var(--fs-body);
color: var(--c-ink-2);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
font-family: inherit;
}
a {
color: var(--c-focus);
}
svg {
display: block;
flex: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---- Typography utilities ---- */
.hero-title-box {
display: inline-block;
background-color: var(--c-brand);
color: #ffffff;
font: var(--fs-h1);
font-weight: 700;
padding: 12px 20px;
margin-bottom: 8px;
clear: both;
}
.hero-subtitle-box {
display: inline-block;
background-color: var(--c-accent);
color: var(--c-brand);
font: var(--fs-body);
font-weight: 600;
padding: 8px 16px;
}
.text-display {
font: var(--fs-display);
color: var(--c-ink);
margin: 0;
}
@media (max-width: 600px) {
.hero-subtitle-box {
font: var(--fs-label);
}
.text-display {
font: var(--fs-display-pad-mobile);
}
.hero-title-box {
font: var(--fs-h1-pad-mobile);
}
}
.text-h2 {
font: var(--fs-h2);
color: var(--c-ink);
margin: 0;
}
.text-h3 {
font: var(--fs-h3);
color: var(--c-ink);
margin: 0;
}
.text-body {
font: var(--fs-body);
color: var(--c-ink-2);
}
.text-label {
font: var(--fs-label);
color: var(--c-ink);
}
.text-help {
font: var(--fs-help);
color: var(--c-ink-2);
}
.text-micro {
font: var(--fs-micro);
color: var(--c-ink-2);
}
.text-eyebrow {
font: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-focus);
}
.text-center {
text-align: center;
}
.form-title {
font-size: var(--fs-h2);
font-weight: 700;
text-transform: uppercase;
color: var(--c-brand);
padding-bottom: 12px;
}
.showcase {
max-width: 1120px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.main-container .form-card {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
padding: 20px 40px;
}
.form-card {
max-width: var(--form-max-width);
margin: 0 auto;
background: var(--c-surface);
border: 1px solid var(--c-border);
box-shadow: var(--sh-1);
padding: var(--sp-container-pad-desktop);
}
/* ---- Card header / masthead ---- */
.brand-badge {
display: inline-flex;
flex-direction: column;
gap: 1px;
background: var(--c-brand);
color: var(--c-surface);
padding: 10px 14px;
border-radius: 4px;
margin-bottom: 24px;
}
.brand-badge__line {
font: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.3px;
line-height: 14px;
text-transform: uppercase;
}
.form-card__title {
margin-bottom: 10px;
}
.form-card__subtitle {
max-width: 560px;
margin-bottom: 28px;
}
.form-card__divider {
border: none;
border-top: 2px solid var(--c-ink);
margin: 0 0 32px;
}
.form-card__divider-light {
border: none;
border-top: 1px solid var(--c-border);
margin: 0 0 15px;
}
.form-banner {
font: var(--fs-body);
padding: 14px 16px;
margin-bottom: 24px;
border: 1px solid transparent;
}
.form-banner--success {
background: var(--c-success-bg);
border-color: var(--c-success);
color: var(--c-ink);
}
.form-banner--error {
background: var(--c-error-bg);
border-color: var(--c-error);
color: var(--c-error);
}
/* ---- Section headers ("01 — VAŠE ÚDAJE" etc.) ---- */
.form-section {
margin-bottom: var(--sp-between-groups);
}
.form-section:last-of-type {
margin-bottom: 0;
}
.form-section__title {
font: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--c-focus);
margin: 0 0 20px;
}
.img_brand {
height: 100px;
}
.container {
width: 100%;
max-width: 820px;
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.main-container {
max-width: 760px;
width: 100%;
margin: -60px auto 40px auto;
padding: 0 20px;
position: relative;
z-index: 10;
}
@media (max-width: 600px) {
.main-container{ 
padding: 0 10px;
}
.form-card, .main-container .form-card {
padding: var(--sp-container-pad-mobile);
border-radius: 0;
}
}
/* ==========================================================================
FIELD ANATOMY (adapted: 20px gap between fields, 8px label→field,
6px field→help)
========================================================================== */
.field {
display: flex;
flex-direction: column;
margin-bottom: var(--sp-between-fields);
}
.field__label {
font: var(--fs-label);
color: var(--c-ink);
margin-bottom: var(--sp-label-to-field);
gap: 4px;
}
.field__required {
color: var(--c-error);
font: var(--font-family-light);
}
.field__control {
position: relative;
}
.field__help,
.field__error {
min-height: var(--field-help-min-height);
margin-top: var(--sp-field-to-help);
font: var(--fs-help);
display: flex;
align-items: center;
gap: 6px;
}
.field__help {
color: var(--c-ink-2);
}
.field__error {
color: var(--c-error);
display: none;
}
.field--invalid .field__error {
display: flex;
}
.field--invalid .field__help {
display: none;
}
.form-row {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.form-row--2col {
grid-template-columns: 1fr 1fr;
gap: var(--sp-between-fields);
}
.form-row--2col > .field {
min-width: 0;
}
.form-row--3col {
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-between-fields);
}
}
/* ==========================================================================
TEXT INPUT — state matrix (rounded per this page's spec)
========================================================================== */
.input,
.textarea,
.select__trigger {
width: 100%;
height: var(--field-height);
padding: var(--field-padding-y) var(--field-padding-x);
font-size: var(--field-value-size);
color: var(--c-ink);
background: var(--c-surface);
border: 1px solid var(--c-border);
box-shadow: var(--sh-1);
outline: none;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
.field-control {
border: 1px solid var(--c-border-strong);
border-radius: 4px;
background-color: var(--c-success);
overflow: hidden;
/* Keeps border-radius crisp */
transition: border-color 0.2s ease;
box-shadow: var(--sh-1);
}
.input::placeholder,
.textarea::placeholder {
color: var(--c-ink-2);
}
.input:hover,
.textarea:hover,
.select__trigger:hover {
border-color: var(--c-border-strong);
cursor: text;
}
.input:focus,
.textarea:focus,
.select__trigger:focus {
border-color: var(--focus-border-color);
border-width: var(--focus-border-width);
box-shadow: var(--focus-ring);
}
.input:disabled,
.input[readonly] {
background: var(--c-sunken);
color: var(--c-ink);
cursor: no-drop;
border: 0px;
box-shadow: none;
}
.input.clickable-input[readonly] {
background: var(--c-surface);
border: 1px solid var(--c-border);
box-shadow: var(--sh-1);
}
.input.clickable-input[readonly]:hover {
border-color: var(--c-border-strong);
}
.field--invalid .input, .field--invalid .textarea,.field--invalid button {
border-color: var(--c-error)!important;
background: var(--c-error-bg)!important;
padding-right: 44px!important;
}
.field__readonly-icon,
.field__error-status-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--c-ink-2);
pointer-events: none;
}
.field__chip-icon {
position: absolute;
width: 10px;
height: 10px;
color: var(--c-ink-2);
pointer-events: none;
}
.field--invalid .field__error-status-icon {
color: var(--c-error);
}
/* Email icon prefix */
.input-icon-wrap {
position: relative;
}
.input-icon-wrap .input {
padding-left: 45px;
}
.input-icon-wrap__icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--c-ink-2);
pointer-events: none;
}
/* Phone: country code + number */
.phone-group {
display: flex;
gap: 8px;
}
.phone-group--error .input,
.phone-group--error .phone-group__code {
border-color: var(--c-error);
}
.phone-group--error .input {
background: var(--c-error-bg);
padding-right: 44px;
}
.phone-group__number-wrap {
position: relative;
flex: 1;
}
.phone-group__code {
flex: none;
width: 104px;
height: var(--field-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 0 12px;
border: 1px solid var(--c-border);
background: var(--c-surface);
font-size: var(--field-value-size);
color: var(--c-ink);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out);
}
.phone-group__code:hover {
border-color: var(--c-border-strong);
}
.phone-group__code:focus {
border-color: var(--focus-border-color);
border-width: var(--focus-border-width);
box-shadow: var(--focus-ring);
outline: none;
}
.phone-group__caret {
width: 10px;
height: 10px;
color: var(--c-ink-2);
}
.phone-group__number {
flex: 1;
}
/* Readonly prefilled */
.field__readonly-icon {
color: var(--c-ink-2);
}
/* Textarea + counter */
.textarea {
height: auto;
min-height: 100px;
resize: vertical;
line-height: 24px;
padding-bottom: 0px;
}
.textarea-counter-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--sp-field-to-help);
min-height: var(--field-help-min-height);
padding: 0px 10px;
}
.textarea-counter {
font: var(--fs-micro);
color: var(--c-ink-2);
font-variant-numeric: tabular-nums;
}
.tile-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-between-fields);
margin-bottom: var(--sp-between-fields);
}
.tile-group__3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-between-fields);
margin-bottom: var(--sp-between-fields);
}
@media (max-width: 480px) {
.tile-group {
grid-template-columns: 1fr;
}
.tile-group__3 {
grid-template-columns: 1fr 1fr;
}
}
.tile {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
padding: 15px;
border: 1px solid var(--c-border);
background: var(--c-surface);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tile:hover {
border-color: var(--c-border-strong);
box-shadow: var(--sh-2);
}
.tile--selected {
border: 2px solid var(--c-brand);
background: var(--c-brand-tint-2);
padding: 13px;
}
.tile__icon {
width: 26px;
height: 26px;
color: var(--c-ink-2);
}
.tile__radio {
position: absolute;
top: 18px;
right: 18px;
width: 20px;
height: 20px;
border-radius: 999px;
border: 1px solid var(--c-border-strong);
display: flex;
align-items: center;
justify-content: center;
}
.tile--selected .tile__radio {
border: 2px solid var(--c-brand);
}
.tile--selected .tile__radio::after {
content: "";
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--c-brand);
}
.tile__title {
font: var(--fs-h3);
font-size: 16px;
color: var(--c-ink);
margin: 0;
}
.tile__desc {
font: var(--fs-help);
color: var(--c-ink-2);
margin: 0;
}
/* ==========================================================================
CUSTOM RADIO BUTTONS (20px)
========================================================================== */
/* Kontejner pro skupinu tlačítek (výchozí: v sloupci) */
.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
/* Řádkové zobrazení (v 1 řádku) */
.radio-group--inline {
flex-direction: row;
flex-wrap: wrap;
gap: var(--sp-between-fields)
}
@media (max-width:639px) {
.radio-group--inline,
.radio-group {
flex-direction: column;
gap: var(--sp-between-fields-mobile);
}
}
/* Jednotlivá položka (label + radio) */
.radio-option {
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
padding: 4px 8px 4px 4px;
border-radius: 4px;
transition: background-color var(--dur-fast) var(--ease-out);
}
/* Skrytý nativní input */
.radio-option__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Vlastní kroužek přepínače (20px x 20px) */
.radio-option__control {
width: 20px;
height: 20px;
flex: none;
border-radius: 50%;
border: 1px solid var(--c-border-strong);
background: var(--c-surface);
display: flex;
align-items: center;
justify-content: center;
transition: border-color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
.radio-option__control::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-brand);
/* Vnitřní tečka 10px */
opacity: 0;
transform: scale(0);
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* ==========================================================================
INLINE RADIO INPUT (Konkrétní částka vedle tlačítka)
========================================================================== */
/* Obalovač pro radio button + číselné pole na 1 řádku */
.radio-option-inline-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Obal pro inline vstup a příponu "Kč" */
.inline-amount-input-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
animation: fadeIn 0.2s ease-out;
}
/* Kompaktní číselný input */
.input--inline-amount {
width: 80px;
height: 36px;
padding: 4px 8px;
text-align: right;
font-size: 14px;
border: 0px;
border-bottom: 1px solid;
}
/* Text přípony (Kč) */
.inline-amount-suffix {
font-size: 14px;
font-weight: 500;
color: var(--c-ink-1);
}
/* Animace postupné zobrazení */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Skrytí šipek pro input type="number" */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* --- STAVY (STATES) --- */
/* Hover stav */
.radio-option:hover:not(.radio-option--disabled) .radio-option__control {
border-color: var(--c-border-strong);
}
/* Vybráno (Checked) */
.radio-option__input:checked+.radio-option__control {
border: 2px solid var(--c-brand);
}
.radio-option__input:checked+.radio-option__control::after {
opacity: 1;
transform: scale(1);
}
/* Viditelné zaměření (Focus) */
.radio-option:has(.radio-option__input:focus-visible),
.radio-option--focused {
background-color: var(--c-brand-tint);
/* Světle modré pozadí zaměření */
}
.radio-option__input:focus-visible+.radio-option__control {
border-color: var(--c-brand);
box-shadow: 0 0 0 2px var(--c-brand-tint);
}
/* Neaktivní (Disabled) */
.radio-option--disabled,
.radio-option:has(.radio-option__input:disabled) {
cursor: not-allowed;
color: var(--c-ink-2);
opacity: 0.6;
}
.radio-option__input:disabled+.radio-option__control {
background: var(--c-sunken);
border-color: var(--c-border);
}
/* Chybový stav (Skupina je povinná) */
.field--invalid .radio-option__control {
border-color: var(--c-error);
}
.field--invalid .radio-option__label {
color: var(--c-error);
}
/* ==========================================================================
MULTI-SELECT CHIPS ("Služby, o které máte zájem")
========================================================================== */
.chip-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-height: var(--field-height);
padding: 8px 40px 8px 10px;
border: 1px solid var(--c-border);
background: var(--c-surface);
box-shadow: var(--sh-1);
position: relative;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 30px;
padding: 0 6px 0 12px;
background: var(--c-brand-tint);
color: var(--c-brand);
font: var(--fs-micro);
font-weight: 600;
}
.chip__remove {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: none;
background: transparent;
color: var(--c-brand);
cursor: pointer;
font-size: 13px;
line-height: 1;
}
.chip-field__input {
flex: 1;
min-width: 120px;
border: none;
outline: none;
background: transparent;
font-size: var(--field-value-size);
color: var(--c-ink);
}
.chip-field:has(.chip-field__input:focus) {
border-color: var(--focus-border-color);
border-width: var(--focus-border-width);
box-shadow: var(--focus-ring);
padding-left: calc(var(--field-padding-x) - 1px);
}
.chip-field__input::placeholder {
color: var(--c-ink-2);
}
.chip-field__caret {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
color: var(--c-ink-2);
}
/* Force hidden attribute to work in browsers where a lower-specificity rule
(e.g. `display: flex` on .dropdown-menu) would otherwise win */
[hidden] {
display: none !important;
}
.custom-dropdown {
position: relative;
width: 100%;
cursor: pointer;
}
/* Trigger Box — button trigger for the brand dropdown */
.dropdown-trigger {
width: 100%;
max-width: 100%;
padding: 7px 16px;
border: 1px solid var(--c-border);
background-color: white;
font: inherit;
color: inherit;
cursor: pointer;
display: block;
align-items: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 26.914L.793 9.707l1.414-1.414L18 24.086 33.793 8.293l1.414 1.414z' stroke='currentColor' stroke-width='3' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 13px;
transition: border-color 0.2s;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 640px) {
.dropdown-trigger {
white-space: nowrap;
}
}
.dropdown-trigger:hover {
border-color: var(--c-border-strong);
}
.dropdown-trigger:focus {
border-color: var(--focus-border-color);
border-width: var(--focus-border-width);
box-shadow: var(--focus-ring);
outline: none;
}
/* When the menu is open, flip the arrow upside down */
.dropdown-trigger[aria-expanded="true"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M33.793 27.707L18 11.914 2.207 27.707.793 26.293 18 9.086l17.207 17.207z' stroke='currentColor' stroke-width='3' fill='currentColor'/%3E%3C/svg%3E");
}
.dropdown-wrapper {
position: relative;
}
.dropdown-list {
padding: 10px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--c-surface);
/* Matches your surface color */
border: 1px solid var(--c-border-strong);
box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
z-index: 1000;
margin: 4px 0 0 0;
padding: 0;
list-style: none;
animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1);
max-height: 300px;
overflow: scroll;
}
.dropdown-item,
.dropdown-menu li {
padding: 8px 10px;
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
user-select: none;
list-style: none;
outline: none;
}
/* Inline vstup pro vlastní možnost "Jiné" */
/* ==========================================================================
FIX & STYLES FOR "JINÉ" INLINE INPUT
========================================================================== */
/* ==========================================================================
VLASTNÍ MOŽNOST "JINÉ" - STYLY
========================================================================== */
.dropdown-item--other {
flex-direction: column;
align-items: flex-start !important;
gap: 8px;
padding: 8px 12px;
}
.other-input-container {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
margin-top: 4px;
}
/* Skrytí kontejneru, pokud má atribut hidden */
.other-input-container[hidden] {
display: none !important;
}
.other-input {
flex: 1;
height: 34px;
padding: 4px 10px;
font-size: 13px;
border: 1px solid var(--c-border-strong, var(--c-border-strong));
border-radius: 4px;
background: var(--c-surface);
color: var(--c-ink-0, #111111);
}
.other-input:focus {
outline: none;
border-color: var(--c-brand, #0056b3);
}
.other-input-container .field__error {
margin: 0;
min-height: 0;
}
.other-input-container.field--invalid .other-input {
border-color: var(--c-error);
background: var(--c-error-bg);
}
.dropdown-menu li[data-value=""] {
color: var(--c-border-strong)
}
.dropdown-item:hover,
.dropdown-menu li:hover {
background: var(--c-bg);
}
/* Keyboard focus state for accessibility */
.dropdown-item:focus,
.dropdown-menu li:focus {
background: var(--c-bg);
;
outline: 2px solid var(--focus-border-color);
outline-offset: -2px;
}
.dropdown-item[aria-disabled="true"],
.dropdown-menu li[aria-disabled="true"] {
color: var(--c-border-strong);
cursor: not-allowed;
opacity: 0.6;
}
.dropdown-item[role="heading"],
.dropdown-menu li[role="heading"] {
padding: 8px 16px;
font-size: 14px;
color: var(--c-border-strong);
text-transform: uppercase;
font-weight: 600;
cursor: default;
}
.dropdown-item[role="heading"]:hover {
background: transparent;
}
.dropdown-item input {
pointer-events: none;
}
/* The "Jiné" free-text field isn't part of the label-driven checkbox
toggle above, so it needs pointer events to be clickable/focusable. */
.dropdown-item--other .other-input {
pointer-events: auto;
}
/* Prevents conflict */
.dropdown-header {
padding: 8px 16px;
font-size: 12px;
color: var(--c-border-strong);
text-transform: uppercase;
font-weight: 600;
}
.dropdown-footer {
padding: 12px 16px;
border-top: 1px solid var(--c-border);
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--c-border-strong);
}
.btn-link {
border: none;
color: var(--c-brand);
font-weight: 600;
cursor: pointer;
text-decoration: none;
/* Layout & Spacing */
display: inline-flex;
align-items: center;
padding-left: 22px;
/* 15px icon width + ~7px gap */
/* Background Icon */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M9.707 35.207l-1.414-1.414L24.086 18 8.293 2.207 9.707.793 26.914 18z' fill='%23004666' stroke='%23004666' stroke-width='3' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
}
.btn-link:hover {
text-decoration: underline;
}
.actions {
display: flex;
gap: 16px;
justify-content: center;
width: 100%;
border-bottom: 1px solid var(--c-ink);
padding-bottom: 40px;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
width: 100%;
}
/* The Box */
.checkbox-wrapper input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
flex-shrink: 0;
/* Custom styling */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 2px solid var(--c-border-strong);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
position: relative;
cursor: pointer;
}
/* Checked state */
.checkbox-wrapper input[type="checkbox"]:checked {
background-color: var(--c-brand);
border-color: var(--c-brand);
}
.checkbox-wrapper input[type="checkbox"]:checked::after {
content: "";
width: 12px;
height: 12px;
background: no-repeat center/contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M9.5 30.19l-8.34-8.34.7-.7 7.67 7.66L34.17 6.13l.68.74z' stroke='white' stroke-width='3' fill='white'/%3E%3C/svg%3E");
}
.checkbox-wrapper input[type="checkbox"]:focus {
outline: 2px solid var(--focus-border-color);
outline-offset: 2px;
}
/* Hover State (var(--c-bg);) */
.dropdown-item:hover:not(.disabled) {
background: var(--c-bg);
;
}
/* Selected State (#E4F0F5) */
.dropdown-item.selected,
.dropdown-menu li[aria-selected="true"] {
background: var(--c-brand-tint)
}
/* Disabled State */
.dropdown-item.disabled {
color: var(--c-border-strong);
cursor: not-allowed;
}
/* ==========================================================================
RANGE SLIDER ("Roční nájezd")
========================================================================== */
.range-field {
padding-top: 4px;
}
.range-field__bubble-row {
display: flex;
justify-content: center;
position: relative;
height: 30px;
}
.range-field__bubble {
position: absolute;
transform: translateX(-50%);
left: var(--bubble-pos, 50%);
background: var(--c-brand);
color: var(--c-surface);
font: var(--fs-micro);
font-weight: 700;
padding: 6px 12px;
white-space: nowrap;
}
.range-field__bubble::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 6px solid var(--c-brand);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
.range {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 6px;
/* Define track height here */
background: transparent;
/* Remove background from the main element */
margin: 10px 0;
cursor: pointer;
}
.range::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
border-radius: var(--r-pill);
background: linear-gradient(to right,
var(--c-brand) 0%,
var(--c-brand) var(--range-fill, 34%),
var(--c-border) var(--range-fill, 34%),
var(--c-border) 100%);
}
.range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: -8px;
/* Centers thumb on the track */
border-radius: 999px;
background: var(--c-surface);
border: 2px solid var(--c-brand);
box-shadow: var(--sh-1);
cursor: pointer;
}
/* Firefox */
.range::-moz-range-track {
width: 100%;
height: 6px;
border-radius: var(--r-pill);
background: linear-gradient(to right,
var(--c-brand) 0%,
var(--c-brand) var(--range-fill, 34%),
var(--c-border) var(--range-fill, 34%),
var(--c-border) 100%);
}
.range::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--c-surface);
border: 2px solid var(--c-brand);
box-shadow: var(--sh-1);
cursor: pointer;
}
.range-field__scale-row {
display: flex;
justify-content: space-between;
font: var(--fs-micro);
color: var(--c-ink-2);
}

.range-field--unset .range-field__bubble {
background: var(--c-ink-2);
font-style: italic;
font-weight: 500;
}
.range-field--unset .range-field__bubble::after {
border-top-color: var(--c-ink-2);
}
.range-field--unset .range::-webkit-slider-runnable-track {
background: var(--c-border);
}
.range-field--unset .range::-moz-range-track {
background: var(--c-border);
}
.range-field--unset .range::-webkit-slider-thumb {
border-color: var(--c-border-strong);
}
.range-field--unset .range::-moz-range-thumb {
border-color: var(--c-border-strong);
}
.range-field-text{
display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    gap: var(--sp-between-fields);
align-items: center
}
/* ==========================================================================
FILE UPLOAD DROPZONE
========================================================================== */
.file-dropzone {
width: 100%;
min-height: 100px;
border: 2px dashed var(--c-border-strong);
background: var(--c-surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.file-dropzone:hover {
border-color: var(--c-brand);
background-color: var(--c-brand-tint-2);
}
.file-dropzone__link {
color: var(--c-brand);
text-decoration: underline;
}
.file-dropzone.is-dragover {
border-color: var(--c-brand);
background: var(--c-brand-tint);
}
.file-dropzone__icon {
width: 30px;
height: 30px;
color: var(--c-ink-2);
}
.file-dropzone__title {
font: var(--fs-body);
font-weight: 600;
color: var(--c-ink);
margin: 0;
}
.file-dropzone__hint {
font: var(--fs-help);
color: var(--c-ink-2);
margin: 0;
}
/* ==========================================================================
CHECKBOX / TOGGLE (Section 04)
========================================================================== */
/* Wraps a .consent-row + its .field__error so the required-checkbox rule
has somewhere to render a message, without altering the row's own spacing. */
.consent-field {
display: flex;
flex-direction: column;
}
.consent-field .consent-row {
margin-bottom: 0;
}
.consent-field .field__error {
margin-top: var(--sp-field-to-help);
margin-bottom: 20px;
}
.consent-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.consent-row:last-of-type {
margin-bottom: 24px;
}
.consent-row__label {
font: var(--fs-body);
font-size: 14px;
color: var(--c-ink-2);
}
.consent-row__label small {
display: block;
color: var(--c-ink-2);
font-size: 12px;
margin-top: 2px;
}
.checkbox {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
flex: none;
margin-top: 2px;
border: 1px solid var(--c-border-strong);
background: var(--c-surface);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.checkbox:checked {
background: var(--c-brand);
border-color: var(--c-brand);
}
.checkbox:checked::after {
content: "";
width: 12px;
height: 12px;
background: no-repeat center/contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M9.5 30.19l-8.34-8.34.7-.7 7.67 7.66L34.17 6.13l.68.74z' stroke='white' stroke-width='3' fill='white'/%3E%3C/svg%3E");
}
.toggle {
position: relative;
display: inline-flex;
align-items: center;
width: 44px;
height: 24px;
flex: none;
margin-top: 2px;
}
.toggle input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
z-index: 1;
}
.toggle__track {
position: absolute;
inset: 0;
background: var(--c-border-strong);
border-radius: var(--r-pill);
transition: background-color var(--dur-med) var(--ease-out);
}
.toggle__knob {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--c-surface);
box-shadow: var(--sh-1);
transition: transform var(--dur-med) var(--ease-switch);
}
.toggle input:checked~.toggle__track {
background: var(--c-brand);
}
.toggle input:checked~.toggle__knob {
transform: translateX(20px);
}
/* ==========================================================================
RECAPTCHA WIDGET (verified state)
========================================================================== */
.recaptcha-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.recaptcha-box {
display: flex;
align-items: center;
gap: 14px;
width: 300px;
max-width: 100%;
padding: 14px 16px;
border: 1px solid var(--c-border);
}
.recaptcha-box__check {
width: 22px;
height: 22px;
color: var(--c-success);
flex: none;
}
.recaptcha-box__label {
font-size: 15px;
color: var(--c-ink);
flex: 1;
}
.recaptcha-box__badge {
text-align: center;
}
.recaptcha-box__badge-icon {
width: 26px;
height: 26px;
margin: 0 auto 2px;
color: var(--c-ink-2);
}
.recaptcha-box__badge-text {
font: var(--fs-micro);
color: var(--c-ink-2);
line-height: 12px;
}
.recaptcha-note {
font: var(--fs-help);
color: var(--c-ink-2);
max-width: 220px;
}
/* ==========================================================================
BUTTONS
========================================================================== */
.form-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
min-width: 200px;
padding: 0 24px;
font-size: 15px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn--primary {
background: var(--c-accent);
color: var(--c-brand);
}
.btn--primary:hover {
background: var(--c-accent-hover);
box-shadow: var(--sh-2)
}
.btn--primary:focus,
.btn--primary:focus-visible {
outline: 2px solid var(--c-focus);
outline-offset: 2px;
}
.btn--ghost {
background: transparent;
color: var(--c-ink-2);
min-width: 0;
padding: 0 8px;
}
.btn--ghost:hover {
text-decoration: underline;
}
.btn--secondary {
background-color: var(--c-brand);
color: var(--c-surface);
border: 2px solid var(--vwfs-blue);
text-decoration: none;
}
.btn--secondary:hover {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
outline: none;
}

.btn:disabled,
.btn[disabled] {
    background-color: var(--c-sunken);
    color: var(--c-ink-2);
    border: 1px solid var(--c-border);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}



.legal-note {
font: var(--fs-micro);
color: var(--c-ink-2);
max-width: 100%;
margin-bottom: 32px;
text-align: justify;
}
.legal-note a {
color: var(--c-focus);
text-decoration: underline;
}
.legal-note a:focus {
outline: 1px solid var(--c-focus);
}


/*  Footer */
.brand-footer {
border-top: 1px solid var(--c-border);
padding-top: 24px;
}
.brand-footer__row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.mainform .footer-field{
max-width: 760px;
width: 100%;
margin: 10px auto 40px auto;
padding: 0 20px;
position: relative;
}
.brand-footer__name {
font: var(--fs-label);
font-size: 14px;
letter-spacing: 0.4px;
color: var(--c-ink);
text-transform: uppercase;
margin: 0 0 4px;
}
.brand-footer__tagline {
font: var(--fs-help);
color: var(--c-ink-2);
margin: 0;
}
.brand-footer__socials {
display: flex;
gap: 10px;
}
.social-icon {
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid var(--c-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-ink-2);
background-color: var(--c-accent);
}
.social-icon svg {
width: 20px;
height: 20px;
color: var(--c-brand);
border: none;
}
.brand-footer__legal {
font: var(--fs-micro);
color: var(--c-ink-2);
}
.brand-footer__legal a {
color: var(--c-ink-2);
text-decoration: underline;
}
/*  FLATPICKR THEME OVERRIDES — match brand colors instead of Flatpickr's
default red/blue theme.  */
.flatpickr-day {
border-radius: 0px !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: var(--c-error) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--c-brand) !important;
border-color: var(--c-brand) !important;
color: var(--c-bg) !important;
}
.flatpickr-day.today {
border: 2px solid var(--c-brand) !important;
}
.flatpickr-day:hover {
background: var(--c-bg) !important;
;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
color: var(--c-ink) !important;
;
}
.flatpickr-weekdays,
span.flatpickr-weekday {
background: var(--c-surface) !important;
color: var(--c-ink-2) !important;
}
/*  TIME SLOT POPUP */
.timeslot-popup {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 1050;
width: 100%;
max-width: 100vw;
padding: 24px 0;
background: var(--c-surface);
border: 1px solid var(--c-border);
box-shadow: var(--sh-2);
display: flex;
flex-direction: column;
user-select: none;
animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1);
}
.timeslots-section-title {
padding: 0 20px 8px 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--c-ink-2);
text-transform: uppercase;
}
.timeslots-list {
max-height: 330px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* Custom Scrollbar */
.timeslots-list::-webkit-scrollbar {
width: 5px;
}
.timeslots-list::-webkit-scrollbar-track {
background: transparent;
}
.timeslots-list::-webkit-scrollbar-thumb {
background: var(--c-border-strong);
border-radius: 4px;
}
.timeslot-item {
height: 30px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 15px;
color: var(--c-ink);
cursor: pointer;
transition: background-color var(--dur-fast);
}
.timeslot-item:hover:not(.disabled):not(.selected) {
background: var(--c-bg);
}
.timeslot-item.selected {
background: var(--c-brand);
color: var(--c-surface);
font-weight: 700;
}
.timeslot-item.disabled {
color: var(--c-ink-2);
cursor: not-allowed;
background-color: var(--c-brand-tint-2);
}
.timeslot-status {
font-size: 13px;
color: var(--c-ink-2);
font-weight: 400;
}
.iframe-modal-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
background-color: transparent;
}
.iframe-modal {
width: 100%;
height: 100%;
border: none;
background-color: transparent;
}
.thankyou-icon {
width: 20px;
height: 20px;
stroke: var(--c-surface);
stroke-width: 3px;
}
/* Success Icon */
.icon-circle {
width: 56px;
height: 56px;
background-color: #d1f2eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.icon-circle-inner {
width: 42px;
height: 42px;
background-color: var(--c-teal);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-surface);
}
/* Summary Box */
.summary-card {
width: 100%;
background-color: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 2px;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 20px 24px;
box-sizing: border-box;
margin-bottom: 32px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.summary-col {
padding: 0 16px;
border-right: 2px solid var(--c-brand);
}
.summary-col:first-child {
padding-left: 15%;
}
.summary-col:last-child {
padding-right: 0;
border-right: none;
}
.summary-value {
font-size: 15px;
font-weight: 700;
color: var(--c-brand);
line-height: 1.3;
}
/* Hero Image */
.hero-image-wrapper {
width: 100%;
overflow: hidden;
box-shadow: 0 8px 24px #10182874;
margin-bottom: 24px;
}
.hero-image-wrapper img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
}
/* Hero Banner Section */
.hero-banner {
position: relative;
width: 100%;
height: 300px;
background-image: url('https://image.email.vwfs.cz/lib/fe4211717564047d741575/m/1/3002x2000shutterstock_2057548130.jpg?auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
}
.hero-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 53, 77, 0.5);
}
.hero-content {
position: relative;
max-width: 1100px;
margin: 0 auto;
padding: 24px 20px 0 20px;
}
/* Summary Box */
.summary-card {
width: 100%;
background-color: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 2px;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 20px 24px;
box-sizing: border-box;
margin-bottom: 32px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.summary-label {
font-size: 11px;
font-weight: 700;
color: var(--c-ink-2);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 6px;
}
.summary-value {
font-size: 15px;
font-weight: 700;
color: var(--c-brand);
line-height: 1.3;
}
/* Responsive styling */
@media (max-width: 640px) {
.summary-card {
grid-template-columns: 1fr;
gap: 16px;
}
.summary-col {
border-right: none;
border-bottom: 1px solid var(--c-border);
padding: 0 0 12px 0;
}
.summary-col:first-child {
padding-left: 0;
}
.actions {
flex-direction: column;
width: 100%;
}
.summary-col:last-child {
border-bottom: none;
padding-bottom: 0;
}
.hero-image-wrapper img {
height: 240px;
}
}
.field__prefix{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
font-weight:600;
font-size:.9rem;
color:#555;
pointer-events:none;
}
.field__input--prefixed{
padding-left:45px !important;
}


.field__control--suffix .input{
      padding-right:40px !important;
    }
    .field__caret-btn{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      width:26px;
      height:26px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:none;
      border:0;
      padding:0;
      cursor:pointer;
      color:#555;
    }
    .field__caret{
      width:10px;
      height:6px;
      pointer-events:none;
    }


.dropdown-menu[role="listbox"] [role="option"]:hover,
    .dropdown-menu[role="listbox"] [role="option"].is-active{
      background:rgba(11,102,255,.10);
      cursor:pointer;
    }
    .field__suffix-text{
      position:absolute;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      font-weight:600;
      font-size:.9rem;
      color:#555;
      pointer-events:none;
    }




.form-section.is-hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    pointer-events: none; 
transition:
opacity 0.3s ease,
transform 0.3s ease,
max-height 0.3s ease;
}

.form-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
opacity 0.3s ease,
transform 0.3s ease,
max-height 0.3s ease;
}