/* ==================================================
   GRAVITY FORMS - VYBER TVARU HALY A / B / Q / S
   Form ID: 1
   Field ID: 20
   ================================================== */


/* CELÁ ŘADA - 4 STEJNĚ ŠIROKÉ SLOUPCE */
#field_1_20 .gfield_radio {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* JEDNOTLIVÁ VOLBA */
#field_1_20 .gchoice {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* SCHOVÁNÍ PŮVODNÍHO RADIO KOLEČKA */
#field_1_20 .gchoice input[type="radio"] {
    position: absolute !important;

    opacity: 0 !important;

    width: 1px !important;
    height: 1px !important;

    pointer-events: none !important;
}


/* ==================================================
   ČTVEREC
   ================================================== */

#field_1_20 .gchoice label {
    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    aspect-ratio: 1 / 1 !important;

    box-sizing: border-box !important;

    padding: 15px !important;

    margin: 0 !important;

    border: 2px solid #dddddd !important;
    border-radius: 10px !important;

    background-color: #ffffff !important;

    cursor: pointer !important;

    text-align: center !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ==================================================
   PROSTOR PRO OBRÁZEK
   ================================================== */

#field_1_20 .gchoice label::before {
    content: "" !important;

    display: block !important;

    flex-grow: 1 !important;
    flex-shrink: 1 !important;

    width: 100% !important;
    min-height: 0 !important;

    margin-bottom: 10px !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}


/* ==================================================
   OBRÁZKY
   ================================================== */

#field_1_20 .gchoice:nth-child(1) label::before {
    background-image: url("https://hall-factory.com/wp-content/uploads/2026/08/tvar-A.gif") !important;
}

#field_1_20 .gchoice:nth-child(2) label::before {
    background-image: url("https://hall-factory.com/wp-content/uploads/2026/08/tvar-B.gif") !important;
}

#field_1_20 .gchoice:nth-child(3) label::before {
    background-image: url("https://hall-factory.com/wp-content/uploads/2026/08/tvar-Q.gif") !important;
}

#field_1_20 .gchoice:nth-child(4) label::before {
    background-image: url("https://hall-factory.com/wp-content/uploads/2026/08/tvar-S.gif") !important;
}


/* ==================================================
   ROZSAH ŠÍŘEK POD NÁZVEM TVARU
   ================================================== */

#field_1_20 .gchoice:nth-child(1) label::after {
    content: "Width: 5,9 - 15,7 m";
}

#field_1_20 .gchoice:nth-child(2) label::after {
    content: "Width: 6,8 - 17,4 m";
}

#field_1_20 .gchoice:nth-child(3) label::after {
    content: "Width: 7 - 22 m";
}

#field_1_20 .gchoice:nth-child(4) label::after {
    content: "Width: 10 - 25 m";
}


/* VZHLED ROZSAHU ŠÍŘEK */
#field_1_20 .gchoice label::after {
    display: block !important;

    margin-top: 4px !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    color: #666666 !important;

    text-align: center !important;
}


/* ==================================================
   HOVER
   ================================================== */

#field_1_20 .gchoice label:hover {
    border-color: #777777 !important;
}


/* ==================================================
   VYBRANÝ TVAR
   ================================================== */

#field_1_20 .gchoice input[type="radio"]:checked + label {
    border-color: #2457e6 !important;

    background-color: #f3f6ff !important;

    box-shadow: 0 0 0 2px #2457e6 !important;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 900px) {

    #field_1_20 .gfield_radio {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

}


/* ==================================================
   MOBIL
   ================================================== */

@media (max-width: 500px) {

    #field_1_20 .gfield_radio {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

}


/* ==================================================
   VÝŠKA SHAPE Q - AUTOMATICKÁ HODNOTA
   ================================================== */

#field_1_27 input {
    background-color: #eeeeee !important;
    color: #666666 !important;
    cursor: not-allowed !important;
}


/* ==================================================
   CUSTOM SOLUTION
   Form ID: 1
   Field ID: 41
   ================================================== */


/* MENŠÍ MEZERA NAD CUSTOM SOLUTION */
#field_1_41 {
    margin-top: -20px !important;
}


/* Schová nadpis Untitled */
#field_1_41 .gfield_label {
    display: none !important;
}


/* Celý seznam - karta přesně doprostřed */
#field_1_41 .gfield_radio {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Jedna karta */
#field_1_41 .gfield_radio .gchoice {
    position: relative !important;

    display: block !important;

    width: 46% !important;
    max-width: 46% !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* Schová radio kolečko */
#field_1_41 .gchoice input[type="radio"] {
    position: absolute !important;

    opacity: 0 !important;

    width: 1px !important;
    height: 1px !important;

    pointer-events: none !important;
}


/* ==================================================
   CUSTOM SOLUTION KARTA
   ================================================== */

#field_1_41 .gchoice label {
    display: grid !important;

    grid-template-columns: 150px auto !important;
    grid-template-rows: min-content min-content !important;

    column-gap: 18px !important;

    /* STEJNÁ MEZERA JAKO U SHAPE Q */
    row-gap: 4px !important;

    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 112px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    /*
       TEXTOVÝ BLOK JE O NĚCO NÍŽ
    */
    padding: 14px 20px 2px 20px !important;

    border: 2px solid #dddddd !important;
    border-radius: 10px !important;

    background-color: #ffffff !important;

    cursor: pointer !important;

    text-align: center !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    color: #111111 !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ==================================================
   VELKÁ IKONA VLEVO
   ================================================== */

#field_1_41 .gchoice label::before {
    content: "" !important;

    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    align-self: center !important;

    display: block !important;

    width: 150px !important;
    height: 95px !important;

    /*
       IKONU VRÁTÍME TROCHU NAHORU,
       ABY SE POSUNUL HLAVNĚ TEXT
    */
    transform: translateY(-6px) !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image: url("https://hall-factory.com/wp-content/uploads/2026/09/Custom-solution_2.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}


/* ==================================================
   3 - 35 m
   PŘÍMO POD "I WANT A CUSTOM SOLUTION"
   ================================================== */

#field_1_41 .gchoice label::after {
    content: "Width: 3 - 35 m" !important;

    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: start !important;

    display: block !important;

    margin: 0 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;

    color: #666666 !important;

    text-align: center !important;
}


/* Hover */
#field_1_41 .gchoice label:hover {
    border-color: #777777 !important;
}


/* Vybraná možnost */
#field_1_41 .gchoice input[type="radio"]:checked + label {
    border-color: #2457e6 !important;

    background-color: #f3f6ff !important;

    box-shadow: 0 0 0 2px #2457e6 !important;
}


/* ==================================================
   FIELD 41 - MOBIL
   ================================================== */

@media (max-width: 768px) {

    #field_1_41 {
        margin-top: -10px !important;
    }

    #field_1_41 .gfield_radio .gchoice {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
    }

    #field_1_41 .gchoice label {
        grid-template-columns: 120px auto !important;
        grid-template-rows: min-content min-content !important;

        column-gap: 14px !important;
        row-gap: 4px !important;

        align-content: center !important;

        min-height: 108px !important;

        padding: 13px 14px 3px 14px !important;

        font-size: 16px !important;
    }

    #field_1_41 .gchoice label::before {
        width: 120px !important;
        height: 82px !important;

        transform: translateY(-5px) !important;
    }

    #field_1_41 .gchoice label::after {
        margin: 0 !important;

        font-size: 14px !important;
    }

}


/* ==================================================
   CUSTOM SHAPES
   Form ID: 1
   Field ID: 47
   11 TVARŮ V JEDNOM ŘÁDKU
   ================================================== */


#field_1_47 .gfield_radio {
    display: grid !important;
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#field_1_47 .gchoice {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer !important;
}


#field_1_47 .gchoice label {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    cursor: pointer !important;
}


#field_1_47 .gchoice img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    cursor: pointer !important;
}


/* ==================================================
   FIELD 47 - TABLET
   ================================================== */

@media (max-width: 1000px) {

    #field_1_47 .gfield_radio {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

}


/* ==================================================
   FIELD 47 - MOBIL
   ================================================== */

@media (max-width: 600px) {

    #field_1_47 .gfield_radio {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #field_1_47 .gchoice:nth-child(11) {
        grid-column: 1 !important;
    }

}


/* ==================================================
   NOVÁ SPECIÁLNÍ VOLBA
   Form ID: 1
   Field ID: 50
   ================================================== */


#field_1_50 .gfield_label {
    display: none !important;
}


#field_1_50 .gfield_radio {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#field_1_50 .gfield_radio .gchoice {
    position: relative !important;

    display: block !important;

    width: 25% !important;
    max-width: 25% !important;

    margin: 0 !important;
    padding: 0 !important;
}


#field_1_50 .gchoice input[type="radio"] {
    position: absolute !important;

    opacity: 0 !important;

    width: 1px !important;
    height: 1px !important;

    pointer-events: none !important;
}


#field_1_50 .gchoice label {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 75px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 15px 20px !important;

    border: 2px solid #dddddd !important;
    border-radius: 10px !important;

    background-color: #ffffff !important;

    cursor: pointer !important;

    text-align: center !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


#field_1_50 .gchoice label:hover {
    border-color: #777777 !important;
}


#field_1_50 .gchoice input[type="radio"]:checked + label {
    border-color: #2457e6 !important;

    background-color: #f3f6ff !important;

    box-shadow: 0 0 0 2px #2457e6 !important;
}


@media (max-width: 768px) {

    #field_1_50 .gfield_radio .gchoice {
        width: 100% !important;
        max-width: 100% !important;
    }

}


/* ==================================================
   SELECTED HALL TYPE - SKRYTÉ TECHNICKÉ POLE
   Form ID: 1
   Field ID: 99
   ================================================== */

#field_1_99 {
    display: none !important;
}


/* ==================================================
   CHOOSE STEEL TYPE - DOPLŇUJÍCÍ TEXTY
   ================================================== */


/* MAGNELIS */

#field_1_48 .gchoice:nth-child(1) label::after,
#field_1_63 .gchoice:nth-child(1) label::after,
#field_1_76 .gchoice:nth-child(1) label::after,
#field_1_39 .gchoice:nth-child(1) label::after,
#field_1_91 .gchoice:nth-child(1) label::after {
    content:
        "• S350GD + ZM310\A"
        "• Zn + Al + Mg\A"
        "• Zinc appearance";
}


/* GREY - RAL 7035 */

#field_1_48 .gchoice:nth-child(2) label::after,
#field_1_63 .gchoice:nth-child(2) label::after,
#field_1_76 .gchoice:nth-child(2) label::after,
#field_1_39 .gchoice:nth-child(2) label::after,
#field_1_91 .gchoice:nth-child(2) label::after {
    content:
        "• S320GD + Z275\A"
        "• Zn + Color coating\A"
        "• Color appearance";
}


/* GREEN - RAL 6011 */

#field_1_48 .gchoice:nth-child(3) label::after,
#field_1_63 .gchoice:nth-child(3) label::after,
#field_1_76 .gchoice:nth-child(3) label::after,
#field_1_39 .gchoice:nth-child(3) label::after,
#field_1_91 .gchoice:nth-child(3) label::after {
    content:
        "• S320GD + Z275\A"
        "• Zn + Color coating\A"
        "• Color appearance";
}


/* ON DEMAND */

#field_1_48 .gchoice:nth-child(4) label::after,
#field_1_63 .gchoice:nth-child(4) label::after,
#field_1_76 .gchoice:nth-child(4) label::after,
#field_1_39 .gchoice:nth-child(4) label::after,
#field_1_91 .gchoice:nth-child(4) label::after {
    content:
        "• Custom steel\A"
        "• Custom coating\A"
        "• Custom look";
}


/* VZHLED DOPLŇUJÍCÍHO TEXTU */

#field_1_48 .gchoice label::after,
#field_1_63 .gchoice label::after,
#field_1_76 .gchoice label::after,
#field_1_39 .gchoice label::after,
#field_1_91 .gchoice label::after {

    display: block !important;

    width: 100% !important;

    margin-top: 8px !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    color: #666666 !important;

    white-space: pre-line !important;

    text-align: left !important;

    box-sizing: border-box !important;
}