/*
 * Dream Booking - verejny wizard [dream_booking].
 *
 * Kostra pre Task 6: tokeny, mriezka wizardu, progres krokov, hidden
 * handling, skrytie honeypotu, reduced-motion. Komponenty jednotlivych
 * krokov (vyber sluzby, kalendar, formular, suhrn) pribudaju v
 * Taskoch 7 az 10.
 *
 * Prefix vsetkych tried "dgb-". Tokeny su tokeny webu (dreamgarage.sk)
 * s fallbackom na pripad, ze wizard bezi na stranke bez nich.
 */

/* Baza. Hodnoty su fallbacky pre pripad, ze plugin bezi na stranke bez
   tokenov webu - na dreamgarage.sk sa pouziju tokeny. */
.dgb{
	--dgb-surface: var(--surface-2, #101D2E);
	--dgb-brand: var(--brand, #124278);
	--dgb-lift: var(--brand-lift, #7E9DBE);
	--dgb-text: var(--specular, #EDEAE4);
	--dgb-muted: var(--muted, #8792A1);
	--dgb-hair: var(--hairline, rgba(237,234,228,.10));
	--dgb-ease: var(--e-damp, cubic-bezier(.16,1,.3,1));
	/* Chybovy stav poli Kroku 3 - webu (dreamgarage.sk) ziadny "danger"
	   token nedefinuje, tento fallback preto nie je nikdy prepisany. Meria
	   ~6,4:1 na --dgb-surface aj --void, spĺňa AA. */
	--dgb-danger: var(--danger, #E2867A);

	max-width: 46rem;
	margin-inline: auto;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	color: var(--dgb-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dgb-mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Uvodny text nad prvym krokom (Dream_Settings::get('intro_text')). Navy
   nikdy nenesie text, preto tu nesie plochu iba spodna hairline linka. */
.dgb-intro{
	margin: 0 0 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--dgb-hair);
	color: var(--dgb-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* Fallback pre pripad bez JS - pri zapnutom skriptovani prehliadac
   obsah <noscript> vobec nevytvori v DOMe, ziadne dalsie skrytie
   netreba. */
.dgb-noscript{
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dgb-hair);
	background: var(--dgb-surface);
	color: var(--dgb-text);
	font-size: .95rem;
	line-height: 1.6;
}

/* Zdielany kontaktny fallback - FAIL-OPEN: v markupe je viditelny hned
   (ziadny [hidden]), dream-booking.js ho skryje az po overeni, ze
   window.dreamBooking.restUrl naozaj existuje. Ak sa externy skript
   vobec nenacita (blok siete/CSP), ostava viditelny - presne to je
   jeho ucel. [hidden] handling je tu preto poistka rovnaka ako pri
   .dgb-step, nie zdroj skrytia pri prvom vykresleni. */
.dgb-error{
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dgb-hair);
	border-left: 3px solid var(--dgb-brand);
	background: var(--dgb-surface);
	color: var(--dgb-text);
	font-size: .95rem;
	line-height: 1.6;
}
.dgb-error[hidden]{
	display: none;
}
.dgb-error__message{
	margin: 0 0 .375rem;
	font-weight: 600;
}
.dgb-error__contact{
	margin: 0;
	color: var(--dgb-muted);
}

/* Odkazy vo fallbackoch - bez tohto pravidla by prehliadac pouzil svoju
   predvolenu modru (rgb(40,114,250)), lebo komponent inak nikde farbu
   odkazu nenastavuje. Wizard sa nesmie spoliehat na ambientne CSS
   hostitelskej stranky (napr. .pa :where(a) na webe) - ma vyzerat
   spravne aj sam o sebe. --dgb-lift na --dgb-surface ma kontrast
   ~6:1, spĺňa AA (min. 4,5:1). */
.dgb-error a,
.dgb-noscript a{
	color: var(--dgb-lift);
}

/* Progres krokov - hairline riadok, ziadne karty, ziadne tiene. */
.dgb-steps{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--dgb-hair);
}

.dgb-steps__item{
	display: flex;
	align-items: baseline;
	gap: .5rem;
	color: var(--dgb-muted);
	transition: color .3s var(--dgb-ease);
}

.dgb-steps__num{
	font-size: .8125rem;
	color: var(--dgb-muted);
	transition: color .3s var(--dgb-ease);
}

.dgb-steps__label{
	font-size: .9375rem;
}

/* Aktivny krok: cislo dostane brand-lift (mono mikro-znacka, pod 1%
   plochy) a text sa rozjasni na plny --dgb-text. Nikdy naopak - navy
   plocha nenesie text. */
.dgb-steps__item[aria-current="step"] .dgb-steps__num{
	color: var(--dgb-lift);
}
.dgb-steps__item[aria-current="step"] .dgb-steps__label{
	color: var(--dgb-text);
}

/* Krok. [hidden] je nativny atribut - explicitne pravidlo je poistka
   proti resetom, ktore v tejto teme prepisu UA stylesheet display. */
.dgb-step{
	display: block;
}
.dgb-step[hidden]{
	display: none;
}

.dgb-step__title,
.dgb-cat__name{
	font-family: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.dgb-step__title{
	margin: 0 0 1.5rem;
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--dgb-text);
}
/* Focus po prepnuti kroku (JS posiela fokus na nadpis) - viditelny
   obrys namiesto potlaceneho outline:none. */
.dgb-step__title:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 4px;
}

/* Honeypot - anti-spam pole, cielovo mimo viditelnej oblasti aj mimo
   tabovania. display:none by casti botov preskocilo, preto poloha. */
.dgb-hp{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Live region pre oznamovanie zmeny kroku citackam obrazovky - vizualne
   skryta rovnakou technikou ako honeypot, ale BEZ aria-hidden, takze
   ostava v pristupnostnom strome a aria-live sa realne ohlasi. */
.dgb-live{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 480px){
	.dgb-steps{
		gap: .875rem 1.25rem;
	}
}

/* Krok 1 - cely dynamicky obsah (fieldset triedy vozidla, oznam, kategorie,
   trvanie, CTA) sa pri zlyhani GET /services schova naraz (dream-booking.js).
   [hidden] handling je tu poistka rovnaka a z rovnakeho dovodu ako pri
   .dgb-step/.dgb-error/.dgb-notice/.dgb-duration vyssie/nizsie - bez nej by
   akakolvek buduca "display" deklarácia na .dgb-step1-body ticho vratila
   presne ten mrtvy zvysok kroku, kvoli ktoremu wrapper vznikol (nalez N3
   re-recenzie Tasku 7). */
.dgb-step1-body[hidden]{
	display: none;
}

/* Krok 1 - trieda vozidla. Realny <fieldset>, ziadny vlastny widget - natívne
   radio prepinanie sipkami funguje bez dalsieho JS. Rovnaky vzor zdiela
   .dgb-pickup (Krok 3, sposob odovzdania vozidla) - preto su pravidla
   zoskupene, nie kopirovane druhykrat. */
.dgb-vehicle,
.dgb-pickup{
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}
/* font-family: trieda .dgb-mono v markupe (viz dream-booking.js) - rovnaky
   mono stack ako pri cenach, netreba ho tu opakovat (M5 recenzie Tasku 7). */
.dgb-vehicle legend,
.dgb-pickup legend{
	padding: 0 0 .75rem;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dgb-muted);
}
.dgb-vehicle__options,
.dgb-pickup__options{
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
}
/* min-height 2.75rem (44px) - Task 11 audit, namerane na 375px sirku:
   samotny <label> (klikacia plocha radia/checkboxu) bol nizsi (~25-33px). */
.dgb-vehicle__opt,
.dgb-pickup__opt{
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	color: var(--dgb-text);
	font-size: .9375rem;
	cursor: pointer;
}
/* .dgb-check input (Krok 3, suhlas) zdiela ten isty vzhlad - tretia kopia
   tej istej deklaracie by bola presne to, co M1 recenzie Tasku 9 nasla. */
.dgb-vehicle__opt input,
.dgb-pickup__opt input,
.dgb-check input{
	accent-color: var(--dgb-lift);
	width: 1.05rem;
	height: 1.05rem;
	cursor: pointer;
}
.dgb-vehicle__opt input:focus-visible,
.dgb-pickup__opt input:focus-visible,
.dgb-check input:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
}
/* Text pod .dgb-pickup, ked cfg.texts.pickupNote nie je prazdny - popisna
   veta, nie oznam o zmene stavu (preto nezdiela vzhlad s .dgb-notice). Ma
   vlastne id, na ktore mieria aria-describedby oboch radio poli vyssie
   (M4 recenzie Tasku 9) - bez toho citacka precita obe moznosti bez
   podmienok vyzdvihnutia. */
.dgb-pickup-note{
	margin: .75rem 0 0;
	font-size: .875rem;
	color: var(--dgb-muted);
}

/* Kategorie - mono index cez CSS counter (01, 02…), ziadna mriezka/karty. */
.dgb-categories{
	counter-reset: dgb-cat;
}
.dgb-cat{
	counter-increment: dgb-cat;
	margin-bottom: 2.25rem;
}
.dgb-cat:last-child{
	margin-bottom: 0;
}
.dgb-cat__head{
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin: 0 0 .5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--dgb-hair);
}
.dgb-cat__index{
	color: var(--dgb-lift);
	font-size: .8125rem;
}
.dgb-cat__index::before{
	content: counter(dgb-cat, decimal-leading-zero);
}
/* font-family zdielany s .dgb-step__title (pravidlo pri nom vyssie) - M5
   recenzie Tasku 7, jeden Archivo stack namiesto dvoch kopii. */
.dgb-cat__name{
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--dgb-text);
}

/* Sluzby - hairline riadky, ziadne karty/tiene. Cely riadok je jedno
   klikatelne/fokusovatelne tlacidlo, nazov vlavo, cena vpravo (mono,
   tabular-nums cez zdielanu .dgb-mono). */
.dgb-services{
	list-style: none;
	margin: 0;
	padding: 0;
}
.dgb-svc-row{
	border-bottom: 1px solid var(--dgb-hair);
}
.dgb-svc{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1rem;
	width: 100%;
	padding: .875rem 0;
	border: 0;
	border-left: 2px solid transparent;
	background: none;
	color: var(--dgb-text);
	font: inherit;
	font-size: .9375rem;
	text-align: left;
	cursor: pointer;
	transition: color .3s var(--dgb-ease), border-color .3s var(--dgb-ease), padding-left .3s var(--dgb-ease);
}
.dgb-svc:hover:not([aria-disabled="true"]),
.dgb-svc.is-selected{
	padding-left: .625rem;
	border-left-color: var(--dgb-lift);
}
.dgb-svc:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
}
.dgb-svc.is-selected .dgb-svc__name{
	font-weight: 600;
}
.dgb-svc.is-selected .dgb-svc__price{
	color: var(--dgb-lift);
}
/*
 * Nedostupny riadok (aria-disabled="true", viz renderServiceRow() v JS) sa
 * stlmuje ADRESNE - len nazov prejde na --dgb-muted. Predtym stlmoval cely
 * button cez opacity:.5, co zrazilo aj .dgb-svc__note (uz aj tak
 * --dgb-muted) na nameraný kontrast ~2,3:1 voci podkladu - zakaznik mal
 * cez lupu lustit presne ten text, ktory mu ma vysvetlit, preco sluzbu
 * nevidi. --dgb-muted #8792A1 na --void #070B12 sam o sebe meria ~6,2:1
 * (nad AA 4,5:1 pre bezny text), takze .dgb-svc__note v plnej sile staci
 * (nalez I3 recenzie Tasku 7).
 */
.dgb-svc[aria-disabled="true"]{
	cursor: not-allowed;
}
.dgb-svc[aria-disabled="true"] .dgb-svc__name{
	color: var(--dgb-muted);
}
.dgb-svc__name{
	flex: 1 1 auto;
}
.dgb-svc__price{
	flex: 0 0 auto;
	color: var(--dgb-muted);
}
.dgb-svc__note{
	flex: 0 0 100%;
	margin-top: .25rem;
	font-size: .8125rem;
	color: var(--dgb-muted);
}

/*
 * Informativny hairline box (--dgb-lift akcent) - zdielany viacerymi
 * situaciami naprieč krokmi: oznam pri zruseni vyberu (Krok 1), vysvetlenie
 * prazdneho dna / priebezny stav nacitavania / veta dennej zakazky (Krok 2).
 * Predtym boli tri az na `margin` bajtovo identicke kopie tej istej
 * deklaracie (M1 recenzie Tasku 8) - teraz jedno pravidlo. `.dgb-error` ma
 * vlastnu, zamerne odlisnu farbu akcentu (--dgb-brand - poruchovy stav,
 * nie informativny) a mierne inu velkost/padding z Tasku 6; necha sa
 * samostatny, aby sa touto konsolidaciou nezmenil uz naziveho overeny
 * fail-open kontaktny box.
 */
.dgb-notice,
.dgb-slots__empty,
.dgb-slots__loading,
.dgb-daymode{
	margin: 0 0 1.5rem;
	padding: .75rem 1rem;
	border: 1px solid var(--dgb-hair);
	border-left: 3px solid var(--dgb-lift);
	background: var(--dgb-surface);
	color: var(--dgb-text);
	font-size: .9375rem;
	line-height: 1.5;
}
.dgb-notice[hidden]{
	display: none;
}

/* Trvanie zvolenej sluzby - hodinovy rezim ukazuje presne cislo zo servera
   (Dream_Slots::effective_minutes()), len denny rezim ostava "približne"
   (effective_days() pozna pocet pracovnych dni, ale konkretny DATUM
   odovzdania cez vikendy/sviatky zavisi od zaciatocneho datumu, ktory sa
   zvoli az v Kroku 2, viz .dgb-daymode nizsie). */
.dgb-duration{
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--dgb-hair);
	color: var(--dgb-muted);
	font-size: .9375rem;
}
.dgb-duration[hidden]{
	display: none;
}
.dgb-duration strong{
	color: var(--dgb-text);
	font-weight: 600;
}

.dgb-step1-actions{
	margin-top: 2rem;
	display: flex;
	justify-content: flex-end;
}

/* Tlacidlo Dalej - CTA je vzdy inverzia svojho podkladu (navy plocha na
   tmavom podklade), navy nikdy nenesie text, biele pismo nesie svetlo. */
.dgb-btn{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .875rem 1.75rem;
	border: 1px solid var(--dgb-hair);
	background: var(--dgb-brand);
	color: var(--dgb-text);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .3s var(--dgb-ease);
}
.dgb-btn:hover:not(:disabled){
	opacity: .85;
}
.dgb-btn:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 3px;
}
/*
 * Vypnuty stav CTA - Task 11 audit (namerane naziveho cez playwright-worker):
 * opacity:.35 na CELOM tlacidle (pozadie AJ text) davala na --dgb-brand
 * pozadi kontrast textu len ~2,4:1 a pozadia tlacidla voci strance len
 * ~1,2:1 - na screenshote z Kroku 2 bolo "Pokracovat" prakticky neviditelne.
 * Formalne WCAG 1.4.3/1.4.11 vypnute prvky vynima, ale zadanie ma vlastnu,
 * prisnejsiu hranicu ("vypnute prvky smu byt tlmene, ale nie neviditelne").
 * Explicitne farby namiesto opacity: --dgb-surface pozadie + --dgb-muted
 * text merajú ~5,4:1 (nad AA 4,5:1), stale citatelne odlisne od aktivneho
 * (--dgb-brand/--dgb-text) stavu. Vyssia specificita (0,2,0) korektne
 * prebije aj .dgb-btn--ghost (0,1,0), takze "Spat" pocas odosielania
 * (Krok 4) dostane ten isty, jeden konzistentny vzhlad vypnutia.
 */
.dgb-btn:disabled{
	background: var(--dgb-surface);
	color: var(--dgb-muted);
	border-color: var(--dgb-hair);
	cursor: not-allowed;
}
/*
 * "Odosielamˮ stav (I1 recenzie Tasku 10) - MUSI prist AZ PO `:disabled`
 * vyssie, aby ju pri rovnakej specificite (0,2,0 vs 0,1,1 - [aria-busy]
 * pocita ako triedu) prebila. `.dgb-submit` je pocas letu POST /bookings
 * aj `disabled` (ochrana proti dvojitemu odoslaniu) aj `aria-busy="true"`
 * naraz - bez tohto pravidla bol jediny viditelny signal `opacity:.35`
 * vyssie, ktore cita ako "tlacidlo je vypnuteˮ, nie "prave sa nieco
 * odosielaˮ (naziveho namerane recenziou, rovnaky vzor uz pouziva Krok 2
 * pri nacitavani slotov cez text "Načítavam dostupné termíny…").
 *
 * REGRESIA z re-recenzie Tasku 11: ked .dgb-btn:disabled prestal byt
 * opacity a zacal nastavovat VLASTNE background/color (--dgb-surface/
 * --dgb-muted), toto pravidlo sa uz nesklada s "aktivnym" vzhladom (bolo
 * puha opacity na zdedenych --dgb-brand/--dgb-text), ale s tymito nizko-
 * kontrastnymi disabled farbami - namerane 3,42:1 pocas skutocneho letu
 * POST /bookings, POD AA, a navyse tmavsie nez samotny vypnuty stav
 * (5,38:1), takze signal "prave sa odosiela" posobil slabsie nez "vypnute".
 * Oprava: background/color explicitne prepisane spat na --dgb-brand/
 * --dgb-text (vyssia specificita, prichadza neskor v subore, teda vyhrava
 * nad :disabled), opacity:.7 sa aplikuje na TIETO farby, nie na zdedene
 * muted. Namerane po oprave: ~5,49:1 (nad AA), viditelne odlisne od
 * vypnuteho stavu (poloprehladna navy plocha vs. plny matny sivy box).
 */
.dgb-btn[aria-busy="true"]{
	background: var(--dgb-brand);
	color: var(--dgb-text);
	opacity: .7;
	cursor: progress;
}

/*
 * Krok 2 - kalendar terminu (Task 8). Realna <table> namiesto vlastneho
 * "grid" widgetu (zadanie ponuka obe moznosti) - <th scope="col"> pre dni
 * tyzdna, realne <button> v bunkach. Nedostupny den je VYPNUTY (aria-
 * disabled, rovnaky vzor ako nedostupna sluzba v Kroku 1), nie skryty -
 * zakaznik ma vidiet, ze den existuje.
 */
.dgb-cal{
	margin: 0 0 2rem;
}
.dgb-cal__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
}
.dgb-cal__title{
	margin: 0;
	font-size: .9375rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--dgb-text);
}
/* 2.25rem (36px) -> 2.75rem (44px) - Task 11 audit, namerane na 375px
   sirku: klikacia plocha sipiek mesiaca bola pod cielovymi 44x44px. */
.dgb-cal__nav{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--dgb-hair);
	background: none;
	color: var(--dgb-text);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color .3s var(--dgb-ease), opacity .3s var(--dgb-ease);
}
.dgb-cal__nav:hover:not(:disabled){
	border-color: var(--dgb-lift);
}
.dgb-cal__nav:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
}
/* '‹' v aktualnom mesiaci - nativny disabled je tu spravne (nenesie
   vysvetlenie, na rozdiel od nedostupneho dna nizsie), ziadna citacka sa
   oň nepotrebuje opriet. Farba namiesto opacity - re-recenzia Tasku 11:
   opacity:.3 na symbole na priehladnom pozadi merala len ~2,36:1 (a obrys
   ~1,05:1), presne ten isty defekt, ktory bol opraveny na .dgb-btn:disabled
   nizsie, len tu ostal nedotknuty. --dgb-muted priamo (bez opacity) na
   podklade strany meria ~6,25:1. */
.dgb-cal__nav:disabled{
	color: var(--dgb-muted);
	cursor: not-allowed;
}

.dgb-cal__table{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.dgb-cal__table th{
	padding: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--dgb-muted);
}
.dgb-cal__table td{
	padding: .1875rem;
	text-align: center;
}
/* re-recenzia Tasku 11 - .dgb-cal__day bunka bola na 375px sirke 41,88px
   (pod cielom 44x44), lebo .1875rem (3px) padding na td z kazdej strany
   uberal z inak dost sirokeho stlpca (table-layout:fixed, 7 stlpcov,
   nameranych 48,88px na stlpec). Vynulovanie paddingu LEN na uzsich
   sirkach necha bunku vyplnit cely stlpec (~47,9px), bez zmeny sirky
   .dgb-cal (kontajner sa nemeni) a bez horizontalneho scrollu (overene
   naziveho: scrollWidth===clientWidth aj po tejto zmene). */
@media (max-width: 480px){
	.dgb-cal__table td{
		padding: 0;
	}
}
/* font-family/font-variant-numeric: cisla dni boli jedine cisla v celom
   wizarde bez mono/tabular-nums (M4 recenzie Tasku 8) - rovnaky stack ako
   .dgb-mono (ceny, casy, datumy). */
.dgb-cal__day{
	width: 100%;
	aspect-ratio: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	background: none;
	color: var(--dgb-text);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: .875rem;
	cursor: pointer;
	transition: border-color .3s var(--dgb-ease), background-color .3s var(--dgb-ease), color .3s var(--dgb-ease);
}
.dgb-cal__day:hover:not([aria-disabled="true"]){
	border-color: var(--dgb-lift);
}
.dgb-cal__day:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
}
/* Dnesok - jemna znacka, mono index rovnakeho ducha ako .dgb-cat__index. */
.dgb-cal__day[aria-current="date"]{
	font-weight: 700;
}
/* Zvoleny den - CTA vzor: navy plocha nesie biele pismo (rovnaka dvojica
   ako .dgb-btn/.dgb-svc.is-selected), nikdy naopak. */
.dgb-cal__day.is-selected{
	border-color: var(--dgb-brand);
	background: var(--dgb-brand);
	color: var(--dgb-text);
}
/* Nedostupny den sa stlmuje ADRESNE cez farbu (--dgb-muted na --void meria
   ~6,2:1, AA), nie cez opacity na celom prvku - rovnake poucenie ako pri
   nedostupnej sluzbe v Kroku 1 (I3 recenzie Tasku 7). */
.dgb-cal__day[aria-disabled="true"]{
	color: var(--dgb-muted);
	cursor: not-allowed;
}

/* Sloty (casy pri hodinovej sluzbe, veta pri dennej) pod kalendarom. */
.dgb-slots{
	margin-top: 1.5rem;
}
.dgb-slots__label{
	margin: 0 0 .75rem;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dgb-muted);
}
/* 4 stlpce na sirsich obrazovkach, na 390px 2 stlpce - NIKDY horizontalny
   scroll (zadanie Tasku 8, Step 4). */
.dgb-slots__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .625rem;
}
@media (max-width: 480px){
	.dgb-slots__grid{
		grid-template-columns: repeat(2, 1fr);
	}
}
.dgb-slot{
	padding: .625rem .5rem;
	border: 1px solid var(--dgb-hair);
	background: none;
	color: var(--dgb-text);
	font-size: .875rem;
	cursor: pointer;
	transition: border-color .3s var(--dgb-ease), background-color .3s var(--dgb-ease);
}
.dgb-slot:hover{
	border-color: var(--dgb-lift);
}
.dgb-slot.is-selected{
	border-color: var(--dgb-brand);
	background: var(--dgb-brand);
}
.dgb-slot:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
}

/* Vysvetlenie prazdneho dna, priebezny stav nacitavania a veta dennej
   zakazky - vzhlad zdielany s .dgb-notice (vid pravidlo vyssie, M1
   recenzie Tasku 8). */
.dgb-daymode .dgb-mono{
	color: var(--dgb-lift);
}

/* Stavovy riadok pod kalendarom (nacitavanie mesiaca / mesiac bez volneho
   terminu) - rovnaky box, len ine umiestnenie potrebuje vlastny horny
   odstup namiesto zdedeneho margin-top:0 (I1+I2 recenzie Tasku 8). [hidden]
   poistka z rovnakeho dovodu ako .dgb-notice/.dgb-step1-body vyssie. */
.dgb-cal__status{
	margin-top: 1rem;
}
.dgb-cal__status[hidden]{
	display: none;
}

/* Dynamicky obsah Kroku 2 (kalendar, sloty) sa pri zlyhani GET
   /available-dates schova naraz - rovnaky vzor a rovnaky dovod ako
   .dgb-step1-body[hidden] vyssie (I4 recenzie Tasku 8). "Spat"/"Pokracovat"
   (.dgb-step2-actions) su ZAMERNE MIMO tohto bloku a pri zlyhani ostavaju
   viditelne (R2 re-recenzie Tasku 8) - predtym tento komentar tvrdil, ze sa
   schovaju aj "akcie", co uz nesedelo s markupom nizsie. */
.dgb-step2-body[hidden]{
	display: none;
}

/* Navigacia Kroku 2 - "Spat" vlavo, "Pokracovat" vpravo (C1 recenzie
   Tasku 8, rovnaky vzor ako .dgb-step1-actions, len obojstranne). Krok 3
   aj Krok 4 (.dgb-step3-actions/.dgb-step4-actions) zdielaju ten isty
   vzor - preto zoskupene (I2 recenzie Tasku 10 - .dgb-step4-actions bola
   bajtovo identicka kopia tohto pravidla, presne ta duplicita, ktoru v
   tomto subore uz raz konsolidoval M1 recenzie Tasku 8). */
.dgb-step2-actions,
.dgb-step3-actions,
.dgb-step4-actions{
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* "Spat" je vedlajsia akcia, nie CTA - len jedno tlacidlo na krok smie byt
   "navy plocha + biele pismo" (pravidlo "CTA je vzdy inverzia podkladu"),
   inak by si dve tlacidla konkurovali o pozornost. Obrys namiesto vyplne. */
.dgb-btn--ghost{
	background: none;
	color: var(--dgb-text);
	border-color: var(--dgb-hair);
}
.dgb-btn--ghost:hover:not(:disabled){
	border-color: var(--dgb-lift);
	opacity: 1;
}

/*
 * Krok 3 - kontaktne polia (Task 9). Rovnaky hairline duch ako zvysok
 * wizardu, ziadne vyplnene karty. Label je mono-kapitalkovy popisok (rovnaky
 * vzor ako .dgb-vehicle legend/.dgb-slots__label), vstup ma vlastny hairline
 * ramik namiesto UA vzhladu.
 */
.dgb-field{
	margin: 0 0 1.5rem;
}
.dgb-field label{
	display: block;
	margin: 0 0 .5rem;
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dgb-muted);
}
/* min-height 2.75rem (44px) - Task 11 audit, namerane na 375px sirku: riadkove
   polia mali len ~40px. Textarea si drzi vlastnych 5rem (nizsie), toto ju
   neorezáva. */
.dgb-field input[type="text"],
.dgb-field input[type="tel"],
.dgb-field input[type="email"],
.dgb-field textarea{
	width: 100%;
	min-height: 2.75rem;
	padding: .75rem .875rem;
	border: 1px solid var(--dgb-hair);
	background: var(--dgb-surface);
	color: var(--dgb-text);
	font: inherit;
	font-size: .9375rem;
	transition: border-color .3s var(--dgb-ease);
}
.dgb-field textarea{
	resize: vertical;
	min-height: 5rem;
}
/* ".dgb" pred selektorom zvysuje specificitu na (0,3,1) - bez neho tuto
   deklaraciu ticho prebijala tema (Blocksy) rovnakou specificitou (0,2,1)
   nacitanou neskor, takze fokus na textovych poliach bol jej modra
   #2872FA namiesto brandu (M5 recenzie Tasku 9). */
.dgb .dgb-field input:focus-visible,
.dgb .dgb-field textarea:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
	border-color: var(--dgb-lift);
}
/* Chybny stav sa stlmuje/zvyrazuje ADRESNE (ramik + text chyby), nie cez
   opacity na celom poli - rovnake poucenie ako pri nedostupnej sluzbe v
   Kroku 1 (I3 recenzie Tasku 7) a nedostupnom dni v Kroku 2. */
.dgb-field input[aria-invalid="true"],
.dgb-field textarea[aria-invalid="true"]{
	border-color: var(--dgb-danger);
}
.dgb-field-error{
	margin: .5rem 0 0;
	font-size: .8125rem;
	color: var(--dgb-danger);
}
.dgb-field-error[hidden]{
	display: none;
}

/*
 * Suhlas so spracovanim udajov - checkbox + text v jednom klikatelnom
 * labeli, rovnaky vzor ako .dgb-vehicle__opt/.dgb-pickup__opt (input samotny
 * zdiela s nimi aj CSS, viz zoskupene pravidlo vyssie). Selektor je
 * ZAMERNE ".dgb-field--check .dgb-check", nie holé ".dgb-check" - C1
 * recenzie Tasku 9: ".dgb-check" je <label> vnutri ".dgb-field", takze ho
 * .dgb-field label{...} (0,1,1) ticho prebijalo (holé ".dgb-check" ma len
 * 0,1,0) - text suhlasu sa lial ako maly kapitalkovy popisok pod checkbox
 * namiesto plnej vety vedla neho. Tento selektor ma dve triedy (0,2,0),
 * co vyhrava bez ohladu na typove selektory na druhej strane, a explicitne
 * resetuje vsetko, co .dgb-field label nastavuje (text-transform, margin,
 * letter-spacing).
 */
/* min-height 2.75rem (44px) - Task 11 audit, namerane na 375px sirku: cely
   klikatelny label (text suhlasu + checkbox) bol nizsi (~22.5px), pod
   cielovymi 44x44px. align-items zostava flex-start (viacriadkovy text so
   suhlasom sa zarovnava k hornemu okraju checkboxu), prazdny priestor pod
   kratkym textom je stale sucastou toho isteho klikatelneho <label>. */
.dgb-field--check .dgb-check{
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	min-height: 2.75rem;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	color: var(--dgb-text);
	font-size: .9375rem;
	line-height: 1.5;
	cursor: pointer;
}
.dgb-check input{
	flex: 0 0 auto;
	margin-top: .2rem;
}
/* text-decoration - farba samotna (WCAG 1.4.1, I1 recenzie Tasku 9): odkaz
   (--dgb-lift) a okolity text suhlasu (--dgb-text) maju kontrast len
   ~2,4:1 medzi sebou, co je pre "rozlisenie vyhradne farbou" nedostatocne.
   Podciarknutie robi odkaz rozpoznatelny aj bez farby. */
.dgb-check a{
	color: var(--dgb-lift);
	text-decoration: underline;
}

/*
 * Krok 4 - suhrn, odoslanie, potvrdenie (Task 10). Rovnaky hairline duch ako
 * zvysok wizardu - kazda skupina suhrnu je <dl> riadkov (popisok vlavo,
 * hodnota vpravo mono/tabular-nums pri cislach/casoch), ziadne karty/tiene.
 */
.dgb-summary__group{
	margin: 0 0 2rem;
}
.dgb-summary__group:last-child{
	margin-bottom: 0;
}
.dgb-summary__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--dgb-hair);
}
/* font-family zdielany s .dgb-step__title/.dgb-cat__name (pravidlo pri nich
   vyssie) - rovnaky Archivo stack, jeden bod pravdy namiesto tretej kopie. */
.dgb-summary__title{
	margin: 0;
	font-family: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--dgb-text);
}
/* "Upravit" je vedlajsia akcia (odkazovy vzhlad, nie tlacidlo-plocha) -
   podciarknutie namiesto farby ako jediny signal (rovnake poucenie ako
   .dgb-check a, I1 recenzie Tasku 9 - farba samotna nestaci na WCAG 1.4.1). */
/* display/align-items/min-height - Task 11 audit, namerane na 375px sirku:
   klikatelna plocha bola len ~22px vysoka (pod cielovymi 44x44px). Baseline
   zarovnanie so susednym .dgb-summary__title (rodic ma align-items:baseline)
   ostava zachovane - flex algoritmus zarovnava baseline TEXTU vo vnutri
   tohto boxu, nie jeho okraje. */
.dgb-summary__edit{
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dgb-lift);
	font: inherit;
	font-size: .8125rem;
	text-decoration: underline;
	cursor: pointer;
}
.dgb-summary__edit:hover{
	color: var(--dgb-text);
}
.dgb-summary__edit:focus-visible{
	outline: 2px solid var(--dgb-lift);
	outline-offset: 2px;
}
/* Pocas odosielania (setStep4Busy(), C1 recenzie Tasku 10) - rovnaky
   vizualny jazyk ako .dgb-btn:disabled, len adresne pre tento odkazovy
   tvar tlacidla (nededuje z .dgb-btn). Farba namiesto opacity - Task 11
   audit, rovnaky dovod ako .dgb-btn:disabled vyssie (opacity:.35 na --dgb-lift
   voci --void merala hlboko pod AA). --dgb-muted priamo dava ~6,25:1. */
.dgb-summary__edit:disabled{
	color: var(--dgb-muted);
	text-decoration: none;
	cursor: not-allowed;
}
.dgb-summary__rows{
	margin: 0;
}
.dgb-summary__row{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--dgb-hair);
}
.dgb-summary__row:last-child{
	border-bottom: 0;
}
.dgb-summary__row dt{
	color: var(--dgb-muted);
	font-size: .875rem;
}
/* white-space:pre-line - M2 recenzie Tasku 10. Viacriadkova "Poznámka"
   (textarea Kroku 3) sa predtym lepila do jedneho riadku - escHtml()
   znaky '<>&"\'' escapuje, ale novy riadok NIE JE spomedzi nich, takze v
   HTML prezil ako obycajny whitespace a prehliadac ho (predvoleny
   white-space:normal) skolaboval na jednu medzeru. pre-line zachova
   zalomenia z hodnoty a naďalej normalne zalamuje dlhy riadok - bezpecne
   aj pre ostatne (jednoriadkove) polia v tomto <dd>, kde ziadny '\n'
   nie je. */
.dgb-summary__row dd{
	margin: 0;
	color: var(--dgb-text);
	font-size: .9375rem;
	text-align: right;
	white-space: pre-line;
}

/*
 * Potvrdenie po odoslani - .dgb-confirm nahradza .dgb-summary v tom istom
 * .dgb-step4-body (renderConfirmation()). Rekapitulacia zdiela .dgb-summary__rows
 * (rovnaky <dl> vzhlad), uz bez skupin/"Upravit" tlacidiel - hotova
 * rezervacia sa uz neda z tejto obrazovky menit.
 */
.dgb-confirm__lead,
.dgb-confirm__status{
	margin: 0 0 .5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dgb-text);
}
/* white-space:pre-line - M2 recenzie Tasku 10, rovnaky dovod ako
   .dgb-summary__row dd vyssie: cfg.texts.success (nastavenie
   success_text) je viacriadkovy <textarea>, escHtml() novy riadok
   nedotkne. */
.dgb-confirm__lead{
	white-space: pre-line;
}
.dgb-confirm__status{
	margin-bottom: 1.5rem;
	font-weight: 600;
}
.dgb-confirm .dgb-summary__rows{
	margin-bottom: 1.5rem;
}
.dgb-confirm__manage{
	margin: 1.5rem 0 .5rem;
}
.dgb-confirm__manage a{
	color: var(--dgb-lift);
	font-weight: 600;
	text-decoration: underline;
}
.dgb-confirm__manage-url{
	margin: 0;
	color: var(--dgb-muted);
	font-size: .8125rem;
	line-height: 1.6;
	word-break: break-all;
}

@media (prefers-reduced-motion: reduce){
	.dgb *{ transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Editorial Checkout (PLAN rev. 4). */
.dgb{
	max-width: none;
}
.dgb-sr-only{
	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;
}
.dgb-checkout{
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.dgb-main{ min-width: 0; }
.dgb-order-summary{ order: -1; min-width: 0; }
.dgb-order-summary[hidden]{ display: none; }
.dgb-order-summary details{
	border-block: 1px solid var(--dgb-hair);
	background: var(--dgb-surface);
}
.dgb-order-summary summary{
	min-height: 3.25rem;
	display: flex;
	align-items: center;
	padding: .75rem 1rem;
	color: var(--dgb-text);
	font-weight: 600;
	cursor: pointer;
}
.dgb-order-summary summary:focus-visible{ outline: 2px solid var(--dgb-lift); outline-offset: 2px; }
.dgb-order-summary__compact{ min-width: 0; overflow-wrap: anywhere; }
.dgb-order-summary__body{ padding: 0 1rem 1rem; }
.dgb-order-summary__empty{ margin: 0; color: var(--dgb-muted); font-size: .875rem; }
.dgb-order-summary dl{ margin: 0; }
.dgb-order-summary dl > div{
	display: grid;
	grid-template-columns: minmax(5rem,.7fr) minmax(0,1.3fr);
	gap: .75rem;
	padding: .625rem 0;
	border-top: 1px solid var(--dgb-hair);
}
.dgb-order-summary dt{ color: var(--dgb-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.dgb-order-summary dd{ margin: 0; color: var(--dgb-text); font-size: .875rem; text-align: right; overflow-wrap: anywhere; }

.dgb-steps{ position: relative; gap: 0; justify-content: space-between; }
.dgb-steps__item{ position: relative; flex: 1 1 0; gap: .4rem; }
.dgb-steps__item:not(:last-child)::after{
	content: '';
	position: absolute;
	left: calc(1.5rem + 100% / 2);
	right: .75rem;
	top: .7rem;
	height: 1px;
	background: var(--dgb-hair);
}
.dgb-steps__item[data-complete="true"] .dgb-steps__num{ color: var(--dgb-lift); }

.dgb-vehicle__options{ gap: 0; }
.dgb-vehicle__opt{ position: relative; min-height: 2.75rem; border: 1px solid var(--dgb-hair); margin-right: -1px; }
.dgb-vehicle__opt input{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0,0,0,0);
	overflow: hidden;
}
.dgb-vehicle__opt span{ display: flex; align-items: center; min-height: 2.75rem; padding: .65rem 1rem; color: var(--dgb-muted); }
.dgb-vehicle__opt input:checked + span{ background: var(--dgb-surface); color: var(--dgb-text); box-shadow: inset 0 -2px var(--dgb-lift); }
.dgb-vehicle__opt:focus-within{ z-index: 1; outline: 2px solid var(--dgb-lift); outline-offset: 2px; }
.dgb-vehicle__opt:has(input:focus-visible){ z-index: 1; outline: 2px solid var(--dgb-lift); outline-offset: 2px; }

.dgb-svc{ transform: translateX(0); border-left-width: 3px; }
.dgb-svc:hover:not([aria-disabled="true"]){ transform: translateX(.3rem); border-left-color: var(--dgb-brand); }
.dgb-svc.is-selected::after{ content: '✓'; color: var(--dgb-lift); font-family: 'JetBrains Mono', monospace; }
.dgb-svc.is-selected{ border-left-color: var(--dgb-brand); color: var(--dgb-text); }

/* Blocksy kresli border na kazdy table/th/td (main.min.css) - kalendar sa
   musi mriezky temy zbavit sam, plugin nesmie stavat na ambientnom CSS. */
.dgb-cal__table,
.dgb-cal__table th,
.dgb-cal__table td{ border: 0; }
.dgb-cal__table th{ font-family: 'JetBrains Mono', ui-monospace, monospace; }
.dgb-cal__day:not([aria-disabled="true"]){ border-color: var(--dgb-hair); }
.dgb-cal__day:hover:not([aria-disabled="true"]){ background: var(--dgb-surface); }
.dgb-cal__day[aria-disabled="true"]{ color: #8792A1; border-color: transparent; cursor: default; }
.dgb-cal__day[aria-current="date"]::after{
	content: '';
	position: absolute;
	bottom: .3rem;
	width: .25rem;
	height: .25rem;
	border-radius: 50%;
	background: var(--dgb-lift);
}
.dgb-cal__day[aria-current="date"]{ position: relative; }
.dgb-cal__day[aria-current="date"].is-selected::after{ background: #fff; }
.dgb-cal__day[aria-current="date"][aria-disabled="true"]::after{ background: #8792A1; }
.dgb-cal__day.is-selected{ color: #fff; }
.dgb-cal__day.is-selected:focus-visible,
.dgb-slot.is-selected:focus-visible{ outline-color: var(--dgb-lift); outline-offset: 2px; }
.dgb-slot.is-selected{ color: #fff; }

.dgb-btn{ color: #fff; clip-path: polygon(0 0,calc(100% - .65rem) 0,100% .65rem,100% 100%,.65rem 100%,0 calc(100% - .65rem)); }
.dgb-btn--ghost{ clip-path: none; }
.dgb-field label{ font-family: 'JetBrains Mono', ui-monospace, monospace; }
#dgb-phone,#dgb-vehicle-plate{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.dgb-summary__group{ border-top: 1px solid var(--dgb-hair); padding-top: .75rem; }
.dgb-summary__row dd{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.dgb-confirm{ position: relative; padding-top: 1rem; }
.dgb-confirm__mark{ display: block; color: var(--dgb-lift); font-family: 'JetBrains Mono', monospace; font-size: 2rem; margin-bottom: .75rem; }
.dgb-confirm__delivery{ margin-bottom: .5rem; color: var(--dgb-text); }
.dgb-confirm__contact{ margin-top: 0; padding-top: 1rem; border-top: 1px solid var(--dgb-hair); color: var(--dgb-muted); }
.dgb-confirm__contact a{ color: var(--dgb-lift); }

@media (min-width: 960px){
	.dgb-checkout{ grid-template-columns: minmax(0,1fr) 19rem; }
	.dgb-order-summary{ order: 0; align-self: start; position: sticky; top: 6.5rem; }
	.dgb-order-summary summary{ list-style: none; cursor: default; pointer-events: none; }
	.dgb-order-summary summary::-webkit-details-marker{ display: none; }
}

@media (prefers-reduced-motion: no-preference){
	.dgb-step:not([hidden]) > :not(.dgb-step__title){ animation: dgb-content-in .3s var(--dgb-ease) both; }
	.dgb-svc-row{ animation: dgb-row-in .3s var(--dgb-ease) both; }
	.dgb-svc-row:nth-child(2){animation-delay:40ms}.dgb-svc-row:nth-child(3){animation-delay:80ms}
	.dgb-svc-row:nth-child(4){animation-delay:120ms}.dgb-svc-row:nth-child(5){animation-delay:160ms}
	.dgb-svc-row:nth-child(6){animation-delay:200ms}.dgb-svc-row:nth-child(7){animation-delay:240ms}
	.dgb-svc-row:nth-child(8){animation-delay:280ms}.dgb-svc-row:nth-child(9){animation-delay:320ms}
	.dgb-svc-row:nth-child(10){animation-delay:360ms}.dgb-svc-row:nth-child(11){animation-delay:400ms}
	.dgb-svc-row:nth-child(12){animation-delay:440ms}
	@keyframes dgb-content-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
	@keyframes dgb-row-in{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:none}}
}

@media (forced-colors: active){
	.dgb-vehicle__opt input{ position: static; width: 1rem; height: 1rem; margin: .5rem; clip: auto; overflow: visible; }
	.dgb-vehicle__opt input:checked + span{ background: Canvas; color: CanvasText; box-shadow: none; font-weight: 700; }
	.dgb-cal__day{ color: CanvasText; border-color: ButtonText; }
	.dgb-cal__day[aria-disabled="true"]{ color: GrayText; border-color: transparent; }
	.dgb-cal__day.is-selected,.dgb-slot.is-selected{ background: Canvas; color: CanvasText; border: 2px solid Highlight; font-weight: 700; }
	.dgb-btn{ clip-path: none; border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
}