.plus_symbol {
    visibility: hidden;
}

body:not(.elementor-editor-active) .jet-form-builder-progress-pages {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    transform: translateY(-10px);
}

body:not(.elementor-editor-active) .jet-form-builder-progress-pages.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.fa-solid.fa-circle-info:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05a";
    font-style: normal;
}

/* Tooltip icon styles */
.tooltip-icon {
    margin-left: 6px;
    font-size: 16px;
    color: var(--e-global-color-primary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.tooltip-icon:hover {
    color: var(--e-global-color-secondary);
}

/* Hide description fields that have tooltips */
.jet-form-builder__desc.tooltip-hidden {
    display: none !important;
}

/* Custom Tippy.js tooltip theme */
.tippy-box[data-theme~='woop-tooltip'] {
    background-color: var(--e-global-color-secondary);
    color: white;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.tippy-box[data-theme~='woop-tooltip'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--e-global-color-secondary);
}

.tippy-box[data-theme~='woop-tooltip'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--e-global-color-secondary);
}

.tippy-box[data-theme~='woop-tooltip'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--e-global-color-secondary);
}

.tippy-box[data-theme~='woop-tooltip'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--e-global-color-secondary);
}

/* Fallback for default Tippy.js tooltip (if theme is not specified) */
.tippy-box {
    background-color: var(--e-global-color-secondary);
    color: white;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
}

.tippy-arrow {
    color: var(--e-global-color-secondary);
}
ul.jet-form-builder-choice.kolik_mate_pater_wrapper li,
ul.jet-form-builder-choice.typ_projektu_wrapper li {
    background-color: white;
    border: 2px solid var(--e-global-color-primary);
    border-radius: 6px;
    width: 344px;
    padding: 30px;
    color: var(--e-global-color-primary);
    flex-direction: row;
    align-content: flex-end;
    justify-content: center;
}

ul.jet-form-builder-choice.kolik_mate_pater_wrapper li{
    width: 180px;
    height: 200px;
}

.jet-form-builder__next-page-wrap,
.jet-form-builder__submit-wrap{
    text-align: center;
    justify-content: center;
    padding-top: 2em;
}
.jet-form-builder__next-page-wrap button:hover,
.jet-form-builder__submit-wrap button:hover,
ul.jet-form-builder-choice li:hover{
    box-shadow: 10px 10px 20px 0px #00000040;
}

ul.jet-form-builder-choice li.is-checked {
    background: color-mix(in srgb, var(--e-global-color-primary) 10%, transparent);
}

.jet-form-builder__next-page-wrap button.jet-form-builder__next-page,
.jet-form-builder__submit-wrap button.jet-form-builder__submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jet-form-builder__next-page-wrap button.jet-form-builder__next-page:after,
.jet-form-builder__submit-wrap button.jet-form-builder__submit:after{

    content: "\e87d";
    font-family: "eicons";
    font-weight: 900;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

.jet-form-builder__next-page-wrap button.jet-form-builder__next-page,
.jet-form-builder__next-page-wrap button.jet-form-builder__next-page:hover,
.jet-form-builder__submit-wrap button.jet-form-builder__submit,
.jet-form-builder__submit-wrap button.jet-form-builder__submit:hover{

    background-color: var(--e-global-color-secondary);
    color: white;
    border-color: var(--e-global-color-secondary);
}

.jet-form-builder__next-page-wrap button.jet-form-builder__prev-page,
.jet-form-builder__submit-wrap button.jet-form-builder__prev-page{
    background-color: white;
    color:var(--e-global-color-primary);
    margin-right: 10px;
}

/* ============================================
   DISABLED BUTTON FEATURE
   Button is always visible but disabled until selection is made
   Improves UX by showing the button but indicating it's not yet active
   ============================================ */

/* Disabled state styling for next page button */
button.jet-form-builder__next-page.is-disabled,
button.jet-form-builder__next-page:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
    box-shadow: none !important;
    transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Enabled state with smooth transition */
button.jet-form-builder__next-page:not(.is-disabled):not(:disabled) {
    transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Keep hidden class for backward compatibility */
button.jet-form-builder__next-page.hidden,
button.jet-form-builder__prev-page.hidden {
    visibility: hidden;
}


ul.jet-form-builder-choice.kolik_mate_pater_wrapper li p {
    font-family: Barlow;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
}

ul.jet-form-builder-choice.typ_projektu_wrapper li p {
    font-family: Barlow;
    font-weight: 700;
    font-size: 26px;
    line-height: 58px;
    text-align: center;
    text-transform: uppercase;
}

.jet-form-builder__field-wrap input[type=number],
.jet-form-builder__field-wrap input[type=number]:focus,
.jet-form-builder__field-wrap input:focus,
.jet-form-builder__field-wrap input[type=number]:focus-visible{
    border-radius: 6px;
}


.jet-form-builder__field-wrap:has(.input-with-m2-suffix) {
    position: relative;
    text-align: right;
}


.jet-form-builder__field-wrap:has(.input-with-m2-suffix)::after {
    content: "m²";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--e-global-color-text);
}


.layout-column .jet-form-builder__field.input-with-m2-suffix,
.input-with-m2-suffix[type=number] {
    border: 2px solid var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    max-width: 100px;
    padding-right: 30px; 
    position: relative;


    outline: none !important;
    box-shadow: none !important;
}


.input-with-m2-suffix:focus,
.input-with-m2-suffix[type=number]:focus,
.input-with-m2-suffix[type=number]:focus-visible {


    border-color: var(--e-global-color-secondary);
}

.dve_patra_wrapper figure{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.dve_patra_wrapper .plocha_total{
    justify-content: center;
    font-weight: 600;
}

.jet-form-builder-page .field-type-switcher input.jet-form-builder__field:checked{
    border-radius: var(--c-track-size, var(--track-size));
}

.jet-form-builder-page .field-type-switcher input.jet-form-builder__field:checked{
    background: var(--e-global-color-primary);
}

/* ============================================
   ANIMATED GRADIENT PROGRESSION
   Gradient moves right and intensifies through form steps
   Using CSS custom properties for smooth animation
   ============================================ */

/* Základní styl pro element s gradientem - používá CSS proměnné */
#formrekuwrapper::before {
    --gradient-x: 0%;
    --gradient-y: 100%;
    --gradient-opacity: 0.2;
    --gradient-size: 20%;
    
    background-image: radial-gradient(
        at var(--gradient-x) var(--gradient-y), 
        rgba(241, 167, 0, var(--gradient-opacity)) 0%, 
        rgba(241, 167, 0, 0) var(--gradient-size)
    ) !important;
    
    transition: --gradient-x 0.8s ease-in-out, 
                --gradient-y 0.8s ease-in-out, 
                --gradient-opacity 0.8s ease-in-out,
                --gradient-size 0.8s ease-in-out;
}

/* Podpora pro starší prohlížeče - plynulá změna pomocí @property */
@property --gradient-x {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

@property --gradient-y {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}

@property --gradient-opacity {
    syntax: '<number>';
    initial-value: 0.2;
    inherits: false;
}

@property --gradient-size {
    syntax: '<percentage>';
    initial-value: 20%;
    inherits: false;
}

/* Krok 1 - Začátek (vlevo dole, 20% opacity) */
body.form-step-1 #formrekuwrapper::before {
    --gradient-x: 0%;
    --gradient-y: 100%;
    --gradient-opacity: 0.2;
    --gradient-size: 20%;
}

/* Krok 2 - Mírný posun doprava (25% opacity) */
body.form-step-2 #formrekuwrapper::before {
    --gradient-x: 30%;
    --gradient-y: 100%;
    --gradient-opacity: 0.25;
    --gradient-size: 30%;
}

/* Krok 3 - Střed (33% opacity) */
body.form-step-3 #formrekuwrapper::before {
    --gradient-x: 50%;
    --gradient-y: 100%;
    --gradient-opacity: 0.33;
    --gradient-size: 40%;
}

/* Krok 4 - Posun více doprava (42% opacity) */
body.form-step-4 #formrekuwrapper::before {
    --gradient-x: 70%;
    --gradient-y: 100%;
    --gradient-opacity: 0.42;
    --gradient-size: 40%;
}

/* Krok 5 - Konec (vpravo dole, 50% opacity) */
body.form-step-5 #formrekuwrapper::before {
    --gradient-x: 100%;
    --gradient-y: 100%;
    --gradient-opacity: 0.5;
    --gradient-size: 40%;
}