/* =========================================================================
Konfigurátor plachtovej haly – štýly nad markupom Fluent Forms
-------------------------------------------------------------------------
Vychádza z vizuálnej predlohy (konfigurator_predloha/static/konfigurator.css),
selektory sú prepísané na triedy, ktoré reálne generuje Fluent Forms:
.hgr-konf__stepper       ->  .ff-step-header .ff-step-titles
.hgr-konf__step          ->  .fluentform-step
.hgr-konf__card          ->  .hgr-konf__choices--card .ff-el-form-check-label
.is-selected             ->  .ff_item_selected
.hgr-konf__btn--primary  ->  .ff-btn-next, .ff-btn-submit
.hgr-konf__btn--back     ->  .ff-btn-prev
.hgr-konf__success       ->  .ff-message-success
POZOR na špecificitu: fluent-forms-public.css používa selektory tvaru
`.fluentform .ff-*` (dve triedy) a načítava sa až PO tomto súbore, lebo
Fluent Forms si štýly enqueue-uje počas renderu obsahu. Pri zhodnej
špecificite by teda vždy vyhral. Preto sú tu všetky pravidlá mieriace na
FF triedy prefixované `.hgr-konf .fluentform` (tri triedy) – deterministické
riešenie nezávislé od poradia načítania a bez !important.
Všetko je scopované pod .hgr-konf, takže sa nebije s témou Impreza.
========================================================================= */
.hgr-konf {
/* --- Design tokeny --- */
--hgr-radius: 0.625rem;
--hgr-background: oklch(1 0 0);
--hgr-foreground: oklch(0.129 0.042 264.695);
--hgr-card: oklch(1 0 0);
--hgr-muted: oklch(0.968 0.007 247.896);
--hgr-muted-foreground: oklch(0.554 0.046 257.417);
--hgr-border: oklch(0.929 0.013 255.508);
--hgr-brand: oklch(0.545 0.115 152);
--hgr-brand-foreground: oklch(1 0 0);
--hgr-brand-subtle: oklch(0.975 0.015 152);
--hgr-brand-hover: oklch(0.545 0.115 152 / 40%);
--hgr-cta: oklch(0.55 0.203 26);
--hgr-cta-hover: oklch(0.5 0.19 26);
--hgr-cta-foreground: oklch(1 0 0);
--hgr-required: oklch(0.68 0.17 20);
--hgr-star: #fbc02d;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--hgr-foreground);
background-color: var(--hgr-background);
padding: 3rem 1.5rem;
}
/* Lokálny box-sizing reset – platí len vnútri konfigurátora. */
.hgr-konf,
.hgr-konf *,
.hgr-konf *::before,
.hgr-konf *::after {
box-sizing: border-box;
}
.hgr-konf__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
/* Neutralizácia obalov, ktoré okolo formulára pridáva FF a téma. */
.hgr-konf .fluentform,
.hgr-konf .fluentform .frm-fluent-form,
.hgr-konf .fluentform .ff-step-container,
.hgr-konf .fluentform .ff-step-body {
margin: 0;
padding: 0;
background: none;
border: 0;
box-shadow: none;
}
/* --- Hlavička ---------------------------------------------------------- */
.hgr-konf__title {
margin: 0;
text-align: center;
font-size: 31px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--hgr-foreground);
}
.hgr-konf__subtitle {
margin: 0.75rem 0 0;
text-align: center;
font-size: 1rem;
color: var(--hgr-muted-foreground);
}
/* --- Stepper ------------------------------------------------------------
FF renderuje <ul class="ff-step-titles"><li [ff_active|ff_completed]>
<span>Názov</span></li>…</ul> a v základnom CSS z toho robí `display:table`
s 20px hranatými odrážkami. Prestavujeme to na flex s 3rem kolieskami:
číslo kroku robí ::before (CSS counter), spojovaciu čiaru ::after.
--------------------------------------------------------------------- */
.hgr-konf .fluentform .ff-step-header {
margin: 2.5rem auto 0;
max-width: 42rem;
padding: 0;
background: none;
border: 0;
}
.hgr-konf .fluentform .ff-step-titles {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
counter-reset: hgr-step;
background: none;
table-layout: auto;
text-align: center;
overflow: visible;
}
.hgr-konf .fluentform .ff-step-titles li {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: auto;
margin: 0;
padding: 0;
list-style: none;
background: none;
counter-increment: hgr-step;
text-align: center;
font-size: 0.875rem;
color: var(--hgr-foreground);
vertical-align: top;
}
/* Koliesko s číslom kroku. */
.hgr-konf .fluentform .ff-step-titles li::before {
content: counter(hgr-step);
counter-increment: none;
position: static;
display: flex;
height: 3rem;
width: 3rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
margin: 0;
border: 0;
border-radius: 9999px;
background-color: var(--hgr-muted);
color: var(--hgr-foreground);
font-size: 1.125rem;
font-weight: 500;
line-height: 1;
z-index: 2;
}
.hgr-konf .fluentform .ff-step-titles li.ff_active::before,
.hgr-konf .fluentform .ff-step-titles li.ff_completed::before {
background-color: var(--hgr-brand);
color: var(--hgr-brand-foreground);
border: 0;
}
/* Dokončený krok má namiesto čísla fajku. */
.hgr-konf .fluentform .ff-step-titles li.ff_completed::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 1.25rem 1.25rem;
}
/* Spojovacia čiara od stredu tohto kolieska k stredu nasledujúceho. */
.hgr-konf .fluentform .ff-step-titles li::after {
content: "";
position: absolute;
top: 1.5rem;
left: calc(50% + 5.25rem);
right: calc(-50% + 5.25rem);
width: auto;
height: 1px;
background-color: var(--hgr-border);
z-index: 1;
}
.hgr-konf .fluentform .ff-step-titles li:first-child::after,
.hgr-konf .fluentform .ff-step-titles li.ff_active::after {
left: calc(50% + 5.25rem);
right: calc(-50% + 5.25rem);
}
.hgr-konf .fluentform .ff-step-titles li:last-child::after {
display: none;
}
.hgr-konf .fluentform .ff-step-titles li > span {
display: block;
font-size: 0.875rem;
}
/* FF farbí aktívny a dokončený krok na modro (.fluentform .ff-step-titles
li.ff_active) – rovnaká špecificita ako naše pravidlo pre li, takže vyhráva
poradím. Prebíjame explicitne; v predlohe je aktívny popisok len tučný. */
.hgr-konf .fluentform .ff-step-titles li.ff_active,
.hgr-konf .fluentform .ff-step-titles li.ff_completed {
color: var(--hgr-foreground);
}
.hgr-konf .fluentform .ff-step-titles li.ff_active > span {
font-weight: 700;
}
/* --- Kroky -------------------------------------------------------------- */
.hgr-konf .fluentform .fluentform-step {
margin-top: 3.5rem;
}
/* --- Popisky polí -------------------------------------------------------- */
.hgr-konf .fluentform .ff-el-input--label label,
.hgr-konf__group-title {
display: block;
margin-bottom: 0.5rem;
font-size: 1rem;
font-weight: 700;
color: var(--hgr-foreground);
}
.hgr-konf .fluentform .ff-el-input--label label strong {
font-weight: 700;
}
.hgr-konf .fluentform .ff-el-is-required.asterisk-right label::after {
color: var(--hgr-required);
}
.hgr-konf .fluentform .ff-el-help-message {
margin: 0;
font-size: 1rem;
/* FF dáva nápovedám kurzívu, predloha ich má bežným rezom. */
font-style: normal;
color: var(--hgr-foreground);
}
.hgr-konf .fluentform .ff-el-group {
margin-bottom: 2.5rem;
}
/* --- Výber: spoločné pre karty aj dlaždice ------------------------------ */
.hgr-konf .fluentform .hgr-konf__choices .ff-el-input--content {
display: grid;
gap: 1.5rem;
margin-top: 1rem;
}
/* position: relative je tu nutné, nie kozmetické. Skrytý radio input nižšie
má position: absolute; bez pozicovaného rodiča by sa vymkol z karty až na
začiatok stránky. Kliknutie na kartu input zafokusuje a prehliadač k nemu
odroluje – stránka by pri každom výbere skočila hore. */
.hgr-konf .fluentform .hgr-konf__choices .ff-el-form-check {
position: relative;
margin: 0;
padding: 0;
}
/* Skutočný radio input zostáva v DOM (validácia aj odoslanie FF na ňom stoja),
len je vizuálne skrytý – klikacia plocha je celá karta. */
.hgr-konf .fluentform .hgr-konf__choices .ff-el-form-check input[type="radio"] {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
/* Bez záporného marginu – input má zostať presne v ploche karty, inak by
ho prehliadač pri fokuse rolovaním doťahoval do zobrazenia. */
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
}
/* Klávesnicová dostupnosť: fokus na skrytom inpute podsvieti kartu.
Vybraná možnosť outline nedostáva – sčítal by sa s jej vlastným zeleným
rámikom a karta by mala dvojité orámovanie. Rozlíšená je aj bez neho
(rámik aj podfarbenie), a keďže výber radia fokus vždy sprevádza, týka sa
to rovnako kliknutia myšou ako prechodu šípkami. */
.hgr-konf
.fluentform
.hgr-konf__choices
.ff-el-form-check:focus-within:not(.ff_item_selected)
.ff-el-form-check-label {
outline: 2px solid var(--hgr-brand);
outline-offset: 3px;
}
/* Možnosť, ktorá pre zvolený typ haly nedáva zmysel (napr. biela plachta na
prístrešku pre zvieratá). Skrýva ju JS podľa Config::options_by_type();
input pritom ostáva v DOM, len vypnutý. */
.hgr-konf .fluentform .hgr-konf__choices .hgr-konf__choice--hidden {
display: none;
}
/* --- Karta výberu (typ haly / farba) ----------------------------------- */
.hgr-konf .fluentform .hgr-konf__choices--card .ff-el-form-check-label {
display: flex;
height: 100%;
flex-direction: column;
border: 1px solid var(--hgr-border);
border-radius: 0.75rem;
background-color: var(--hgr-card);
padding: 1.5rem;
margin: 0;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease,
box-shadow 0.15s ease;
}
.hgr-konf .fluentform .hgr-konf__choices--card .ff-el-form-check-label:hover {
border-color: var(--hgr-brand-hover);
}
.hgr-konf
.fluentform
.hgr-konf__choices--card
.ff_item_selected
.ff-el-form-check-label {
border-color: var(--hgr-brand);
box-shadow: 0 0 0 1px var(--hgr-brand);
background-color: var(--hgr-brand-subtle);
}
/* Popis možnosti = nadpis karty. */
.hgr-konf
.fluentform
.hgr-konf__choices--card
.ff-el-form-check-label
> span:first-of-type {
display: block;
margin: 0;
text-align: center;
font-size: 1.25rem;
font-weight: 700;
}
.hgr-konf .hgr-konf__card-media {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
}
.hgr-konf .hgr-konf__card-media img {
object-fit: cover;
width: 70%;
max-height: 6rem;
}
.hgr-konf .hgr-konf__benefits {
display: block;
margin: 0;
padding: 0;
}
.hgr-konf .hgr-konf__benefit {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 1rem;
font-weight: 400;
}
.hgr-konf .hgr-konf__benefit + .hgr-konf__benefit {
margin-top: 0.75rem;
}
.hgr-konf .hgr-konf__check {
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
color: var(--hgr-brand);
}
/* --- Karta bez výhod (čelné steny, montáž) -------------------------------
Tá istá karta ako typ haly, len bez zoznamu výhod a v polovičnom stĺpci po
troch vedľa seba: obrázok je nad popisom (v DOM je až za ním, preto order)
a popis je menší, lebo znenia možností sú dlhé vety.
------------------------------------------------------------------------ */
.hgr-konf .fluentform .hgr-konf__choices--stena .ff-el-input--content,
.hgr-konf .fluentform .hgr-konf__choices--montaz .ff-el-input--content {
gap: 1rem;
}
.hgr-konf .fluentform .hgr-konf__choices--stena .ff-el-form-check-label,
.hgr-konf .fluentform .hgr-konf__choices--montaz .ff-el-form-check-label {
padding: 1rem;
text-align: center;
}
.hgr-konf
.fluentform
.hgr-konf__choices--stena
.ff-el-form-check-label
> span:first-of-type,
.hgr-konf
.fluentform
.hgr-konf__choices--montaz
.ff-el-form-check-label
> span:first-of-type {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
}
.hgr-konf .fluentform .hgr-konf__choices--stena .hgr-konf__card-media,
.hgr-konf .fluentform .hgr-konf__choices--montaz .hgr-konf__card-media {
margin: 0 0 0.75rem;
/* Obrázok patrí nad popis. */
order: -1;
}
/* height: auto je tu nutné – `width`/`height` v markupe sú pre karty typu haly
a bez neho by prehliadač vzal výšku z atribútu a obrázok by sa roztiahol. */
.hgr-konf .fluentform .hgr-konf__choices--stena .hgr-konf__card-media img {
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
}
/* Montáž má na rozdiel od čelných stien obrázok na výšku (stojaca postava),
takže sa neťahá na šírku karty, ale drží sa pevnej výšky – inak by karta na
mobile, kde sú pod sebou, narástla do pol obrazovky. Všetky tri obrázky majú
rovnaké rozmery, takže sú postavy na kartách rovnako veľké.
Výška je `height`, nie `max-height`: nenačítaný obrázok by inak mal nulovú
výšku a karta by po dotiahnutí lazy zdroja poskočila.
`aspect-ratio` je tu natvrdo, lebo `width`/`height` v markupe (800×600) sú
pre karty typu haly – bez neho by z nich prehliadač odvodil širší box, než
obrázok potrebuje. Všetky tri sú 640×725. */
.hgr-konf .fluentform .hgr-konf__choices--montaz .hgr-konf__card-media img {
width: auto;
height: 7rem;
aspect-ratio: 640 / 725;
max-width: 100%;
/* Zhora platí spoločné `max-height: 6rem` pre karty typu haly – tu prekáža. */
max-height: none;
object-fit: contain;
}
/* --- Rozmerové selecty --------------------------------------------------- */
.hgr-konf .fluentform .ff-el-group.hgr-konf-range {
max-width: 36rem;
margin-bottom: 1.5rem;
}
.hgr-konf .fluentform select.ff-el-form-control {
width: 100%;
height: auto;
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--hgr-border);
border-radius: 0.75rem;
background-color: var(--hgr-background);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.25rem 1.25rem;
padding: 0.875rem 2.75rem 0.875rem 1rem;
font: inherit;
font-size: 1rem;
color: var(--hgr-foreground);
outline: none;
cursor: pointer;
box-shadow: none;
transition: border-color 0.15s ease;
}
.hgr-konf .fluentform select.ff-el-form-control:focus {
border-color: var(--hgr-brand);
box-shadow: none;
}
/* --- Celková plocha ------------------------------------------------------ */
.hgr-konf .hgr-konf__area {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid oklch(0.545 0.115 152 / 30%);
border-radius: var(--hgr-radius);
background-color: var(--hgr-brand-subtle);
padding: 1rem 1.25rem;
}
.hgr-konf .hgr-konf__area-label {
font-weight: 500;
}
.hgr-konf .hgr-konf__area-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--hgr-brand);
}
/* --- Textové polia (krok 3) ---------------------------------------------- */
.hgr-konf .fluentform input.ff-el-form-control,
.hgr-konf .fluentform textarea.ff-el-form-control {
width: 100%;
border: 1px solid var(--hgr-border);
border-radius: var(--hgr-radius);
background-color: var(--hgr-background);
padding: 0.75rem 1rem;
font: inherit;
font-size: 1rem;
color: var(--hgr-foreground);
outline: none;
box-shadow: none;
transition: border-color 0.15s ease;
}
.hgr-konf .fluentform input.ff-el-form-control:focus,
.hgr-konf .fluentform textarea.ff-el-form-control:focus {
border-color: var(--hgr-brand);
box-shadow: none;
}
.hgr-konf .fluentform input.ff-el-form-control::placeholder,
.hgr-konf .fluentform textarea.ff-el-form-control::placeholder {
color: var(--hgr-muted-foreground);
}
.hgr-konf .fluentform textarea.ff-el-form-control {
resize: vertical;
min-height: 9rem;
}
/* Pole + nápoveda vedľa seba (predloha: .hgr-konf__field-row).
flex-wrap kvôli inline chybovej hláške, ktorá sa pridáva do toho istého
kontajnera a musí padnúť na samostatný riadok. */
.hgr-konf
.fluentform
.ff-el-group:not(.hgr-konf__choices)
.ff-el-input--content {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0.75rem;
margin-left: 0;
}
/* Telefónne pole si intl-tel-input pridáva vlastný obal. */
.hgr-konf .fluentform .iti {
width: 100%;
}
/* --- Zhrnutie ------------------------------------------------------------ */
.hgr-konf .hgr-konf__summary {
border: 1px solid var(--hgr-border);
border-radius: 0.5rem;
background-color: var(--hgr-card);
padding: 1.5rem;
}
.hgr-konf .hgr-konf__summary-title {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
}
/* Render čelných stien je orezaný na obsah (žiadny priehľadný okraj), preto tu
nie sú záporné marginy, ktorými sa sťahovali pôvodné štvorcové obrázky. */
.hgr-konf .hgr-konf__summary-img {
display: block;
margin: 0.75rem auto 0;
width: 100%;
height: auto;
max-height: 12rem;
object-fit: contain;
padding: 5% 0;
}
.hgr-konf .hgr-konf__summary-img[hidden] {
display: none;
}
.hgr-konf .hgr-konf__summary-list {
margin: 1.25rem 0 0;
}
.hgr-konf .hgr-konf__summary-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 0.625rem 0;
}
.hgr-konf .hgr-konf__summary-row + .hgr-konf__summary-row {
border-top: 1px solid var(--hgr-border);
}
.hgr-konf .hgr-konf__summary-row dt {
font-size: 0.875rem;
color: var(--hgr-muted-foreground);
}
.hgr-konf .hgr-konf__summary-row dd {
margin: 0;
text-align: right;
font-size: 0.875rem;
font-weight: 600;
}
.hgr-konf .hgr-konf__summary-note {
margin: 1rem 0 0;
font-size: 0.75rem;
color: var(--hgr-muted-foreground);
}
/* --- Social proof (krok 1) ---------------------------------------------- */
.hgr-konf .hgr-konf__step-foot {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
margin-top: 3rem;
}
.hgr-konf .hgr-konf__social {
width: 100%;
max-width: 36rem;
}
.hgr-konf .hgr-konf__social-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.hgr-konf .hgr-konf__social-row {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1.5rem;
}
.hgr-konf .hgr-konf__rating {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hgr-konf .hgr-konf__stars {
display: flex;
gap: 0.125rem;
}
.hgr-konf .hgr-konf__stars svg {
height: 1.25rem;
width: 1.25rem;
fill: var(--hgr-star);
}
.hgr-konf .hgr-konf__rating-score {
font-size: 1.125rem;
font-weight: 700;
/* „5 z 5“ je jeden údaj – zalomené na „5 z“ / „5“ sa číta ako preklep.
Priestor je úzky, lebo vedľa stojí päť hviezdičiek. */
white-space: nowrap;
}
.hgr-konf .hgr-konf__rating-note {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: var(--hgr-muted-foreground);
}
.hgr-konf .hgr-konf__quote {
display: flex;
/* Na mobile sú avatary nad citátom. Vedľa seba by textu zostalo len ~20
znakov na riadok, čo pri citáte z Google recenzie (Reviews::MAX_TEXT)
už nie je čitateľné. Od 640 px sa vracia pôvodný riadok. */
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.hgr-konf .hgr-konf__avatars {
display: flex;
flex-shrink: 0;
}
.hgr-konf .hgr-konf__avatars img {
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
object-fit: cover;
box-shadow: 0 0 0 2px var(--hgr-background);
}
.hgr-konf .hgr-konf__avatars img + img {
margin-left: -0.5rem;
}
/* --- Slider recenzií ----------------------------------------------------- */
/* Ako ovládanie sa fotky neprekrývajú – prekryté kolieska sa zle klikajú
a nie je z nich zrejmé, že sú tri samostatné. */
.hgr-konf .hgr-konf__avatars--controls {
gap: 0.275rem;
}
.hgr-konf .hgr-konf__avatar-btn {
padding: 0;
border: 0;
background: none;
line-height: 0;
cursor: pointer;
border-radius: 9999px;
margin-left: -.5rem;
transition: all .15s ease;
}
.hgr-konf .hgr-konf__avatar-btn:hover img,
.hgr-konf .hgr-konf__avatar-btn:focus-visible img{
box-shadow: 0 0 0 2px var(--hgr-brand);
}
.hgr-konf .hgr-konf__avatar-btn.is-active {
transform: scale(1.1);
}
.hgr-konf .hgr-konf__avatar-btn img {
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
object-fit: cover;
display: block;
transition: all .15s ease;
}
/* Všetky citáty ležia v tej istej bunke mriežky, takže výšku určuje ten
najvyšší a blok pri prepnutí neposkakuje. `visibility` (nie `display`)
preto, že skrytý prvok musí bunku ďalej vypĺňať. */
.hgr-konf .hgr-konf__slides {
display: grid;
}
.hgr-konf .hgr-konf__slide {
grid-area: 1 / 1;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s ease;
}
.hgr-konf .hgr-konf__slide.is-active {
visibility: visible;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.hgr-konf .hgr-konf__avatar-btn,
.hgr-konf .hgr-konf__slide {
transition: none;
}
}
.hgr-konf .hgr-konf__quote-text {
margin: 0;
font-size: 0.875rem;
font-style: italic;
/* Citát sa ťahá z Google recenzií (Reviews::MAX_TEXT = 160 znakov), takže je
dlhší než pôvodný jednoriadkový text. Bez stropu by roztlačil flexový riadok
a stlačil hodnotenie vedľa; takto sa zalomí do troch riadkov. */
max-width: 22rem;
}
.hgr-konf .hgr-konf__quote-author {
margin: 0.125rem 0 0;
font-size: 0.875rem;
color: var(--hgr-muted-foreground);
}
/* --- Tlačidlá a navigácia ------------------------------------------------ */
.hgr-konf .hgr-konf__cta-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
}
.hgr-konf .hgr-konf__consent {
margin: 0;
text-align: right;
font-size: 0.875rem;
color: var(--hgr-muted-foreground);
}
/* Text súhlasu je WYSIWYG pole, takže prichádza zabalený v <p>. */
.hgr-konf .hgr-konf__consent p {
margin: 0;
}
.hgr-konf .hgr-konf__consent a {
color: inherit;
text-decoration: underline;
}
.hgr-konf .fluentform .ff-btn,
.hgr-konf .fluentform .ff-btn-submit {
float: none;
width: auto;
border: 1px solid transparent;
border-radius: var(--hgr-radius);
padding: 0.75rem 2rem;
font: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
cursor: pointer;
box-shadow: none;
text-transform: none;
transition: background-color 0.15s ease, opacity 0.15s ease;
}
.hgr-konf .fluentform .ff-btn-next,
.hgr-konf .fluentform .ff-btn-submit {
background-color: var(--hgr-cta);
color: var(--hgr-cta-foreground);
}
.hgr-konf .fluentform .ff-btn-next:hover:not(:disabled),
.hgr-konf .fluentform .ff-btn-submit:hover:not(:disabled) {
background-color: var(--hgr-cta-hover);
color: var(--hgr-cta-foreground);
}
.hgr-konf .fluentform .ff-btn-next:disabled,
.hgr-konf .fluentform .ff-btn-submit:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.hgr-konf .fluentform .ff-btn-prev {
border-color: var(--hgr-border);
background-color: var(--hgr-background);
color: var(--hgr-brand);
font-weight: 400;
}
.hgr-konf .fluentform .ff-btn-prev:hover {
background-color: var(--hgr-brand-subtle);
color: var(--hgr-brand);
}
/* Riadok s navigáciou v kroku 2 (FF: .step-nav). */
.hgr-konf .fluentform .step-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
}
/* V kroku 1 je navigácia presunutá do .hgr-konf__nav-slot, kde je len
jedno tlačidlo – zarovnáme ho doprava. */
.hgr-konf .fluentform .hgr-konf__nav-slot .step-nav {
margin-top: 0;
justify-content: flex-end;
}
/* Posledný krok: FF renderuje späť/odoslať vo vlastnej dvojstĺpcovej mriežke. */
.hgr-konf .fluentform .ff-step-t-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-top: 3rem;
}
.hgr-konf .fluentform .ff-step-t-container .ff-t-cell {
width: auto;
padding: 0;
}
.hgr-konf .fluentform .ff-step-t-container .ff-t-column-2 {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
text-align: right;
}
/* Nápoveda pod submitom je text súhlasu – patrí pod tlačidlo. */
.hgr-konf .fluentform .ff-step-t-container .ff-t-column-2 .ff-el-group {
margin-bottom: 0;
}
.hgr-konf .fluentform .ff-step-t-container .ff-el-help-message {
font-size: 0.875rem;
color: var(--hgr-muted-foreground);
}
/* --- Chyby --------------------------------------------------------------- */
.hgr-konf .fluentform .error.text-danger,
.hgr-konf .fluentform .ff-el-is-error .error {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--hgr-required);
}
.hgr-konf .fluentform .ff-el-is-error input.ff-el-form-control,
.hgr-konf .fluentform .ff-el-is-error select.ff-el-form-control,
.hgr-konf .fluentform .ff-el-is-error textarea.ff-el-form-control {
border-color: var(--hgr-required);
}
.fluentform .ff-step-titles li.ff_active::after, .fluentform .ff-step-titles li.ff_completed::after{
background: #31834D !important;
}
/* --- Stav po odoslaní ----------------------------------------------------
FF vloží .ff-message-success až po potvrdenej odpovedi servera, takže
poďakovanie sa nemôže zobraziť skôr než sa dopyt naozaj uloží.
------------------------------------------------------------------------ */
.hgr-konf .ff-message-success {
margin: 0;
padding: 0;
border: none;
box-shadow: none;
}
.hgr-konf .ff-message-success .hgr-konf__success_wrapper {
margin-top: 4rem;
border: 1px solid var(--hgr-border);
border-radius: 0.75rem;
padding: 2.5rem;
text-align: center;
background: none;
color: var(--hgr-foreground);
}
.hgr-konf .hgr-konf__success-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.hgr-konf .hgr-konf__success-text {
margin: 0.75rem 0 0;
font-size: 1rem;
color: var(--hgr-muted-foreground);
}
.hgr-konf .hgr-konf__success-email {
font-weight: 600;
color: var(--hgr-foreground);
}
/* Keď je formulár odoslaný, stepper aj kroky sú skryté spolu s ním. */
.hgr-konf .fluentform .frm-fluent-form.ff_force_hide {
display: none;
}
/* =========================================================================
Responzívne varianty (rovnaké breakpointy ako predloha)
========================================================================= */
@media (min-width: 640px) {
.hgr-konf .fluentform .ff-step-titles li > span {
font-size: 1rem;
}
.hgr-konf .fluentform .hgr-konf__choices--typ_haly .ff-el-input--content,
.hgr-konf .fluentform .hgr-konf__choices--farba .ff-el-input--content {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hgr-konf .fluentform .hgr-konf__choices--stena .ff-el-input--content,
.hgr-konf .fluentform .hgr-konf__choices--montaz .ff-el-input--content {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hgr-konf .hgr-konf__social-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.hgr-konf .hgr-konf__quote {
flex-direction: row;
align-items: center;
gap: 0.75rem;
}
/* Nápoveda vedľa poľa. */
.hgr-konf
.fluentform
.ff-el-group:not(.hgr-konf__choices)
.ff-el-input--content {
flex-direction: row;
align-items: center;
}
.hgr-konf
.fluentform
.ff-el-group:not(.hgr-konf__choices)
.ff-el-input--content
> .error {
flex-basis: 100%;
}
.hgr-konf .fluentform .hgr-konf-cols select.ff-el-form-control {
max-width: 20rem;
}
.hgr-konf .fluentform .hgr-konf-cols input.ff-el-form-control {
max-width: 28rem;
}
}
@media (min-width: 768px) {
.hgr-konf {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.hgr-konf__title {
font-size: 41px;
}
.hgr-konf .hgr-konf__social-title {
font-size: 1.875rem;
}
}
@media (min-width: 1024px) {
/* Krok 2 aj 3 sú dvojstĺpcové – FF container mriežku vytvára sám, tu len
dolaďujeme medzery. Cielíme na .ff-t-container, aby sa to netýkalo
.ff-step-t-container, čo je riadok so Späť/Odoslať. */
.hgr-konf .fluentform .ff-t-container > .ff-t-cell {
padding-right: 1.75rem;
}
.hgr-konf .fluentform .ff-t-container > .ff-t-cell:last-child {
padding-right: 0;
padding-left: 1.75rem;
}
.hgr-konf .hgr-konf__summary {
position: sticky;
top: 2rem;
}
.hgr-konf .hgr-konf__step-foot {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 1280px) {
.hgr-konf .fluentform .hgr-konf__choices--typ_haly .ff-el-input--content {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}