/* Styles for the get-quote page */

/* Variables */
:root {
    --color--main-blue: #172FAE;
    --color--mid-blue: #1E4E79;
    --color--dark-blue: #0B1E83;
    --color--dark-grey: #2E2E2E;
    --color--white: #ffffff;
    --color--main-blue-alpha07: rgba(23, 47, 174, 0.07);
    --color--main-blue-alpha40: rgba(23, 47, 174, 0.40);
    --typography--font-size--heading1: 36px;
    --typography--font-size--heading2: 20px;
    --typography--font-size--heading3: 24px;
    --typography--font-size--paragraph: 16px;
    --typography--font-size--paragraphSml: 13px;
    --typography--font-size--ctaText: 16px;
    --typography--line-height--heading1: 48px;
    --typography--line-height--heading2: 28px;
    --typography--line-height--heading3: 32px;
    --typography--line-height--paragraph: 30px;
    --typography--line-height--paragraphSml: 18px;
    --typography--line-height--ctaText: 16px;
}

/* Get a quote/Return CTA */
.main-nav>li.get-quote-cta>a, #gform_confirmation_message_6 .button-return {
    display: flex;
    min-width: 180px;
    padding: 14px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--color--main-blue);
    transition: 0.2s all linear;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    border-radius: 0;
}

.main-nav>li.get-quote-cta>a:hover, .main-nav>li.get-quote-cta>a:focus, #gform_confirmation_message_6 .button-return:hover, #gform_confirmation_message_6 .button-return:focus {
    background: var(--color--dark-blue);
    text-decoration: none;
}

.main-nav>li.get-quote-cta>a .menu-item-text:before {
    display: none;
}

.main-nav>li.get-quote-cta>a .menu-text, #gform_confirmation_message_6 .button-return {
    font-size: var(--typography--font-size--ctaText);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--ctaText);
    text-transform: uppercase;
    text-align: center;
    color: var(--color--white) !important;
    text-decoration: none;
}

#gform_confirmation_message_6 .button-return {
    max-width: 210px;
}


/** Quote page **/

.page-id-1737 .page-title {
    background-color: transparent !important;
}

.page-id-1737 #main {
    padding: 0 !important;
}

#gform_wrapper_6, #gform_confirmation_wrapper_6 {
    margin: 0px 0px 70px;
}

#gform_6, #gform_confirmation_wrapper_6 {
    background-color: var(--color--main-blue-alpha07);
    padding: 40px 30px;
}

#gform_6 .gfield_required {
    color: var(--color--main-blue) !important;
}

/* Typography */

.page-id-1737 .page-title h1,
#gform_6 h2,
#gform_6 h3,
#gform_6 p,
#gform_6 label,
#gform_6 span,
#gform_6 input,
#gform_6 div {
    -webkit-font-smoothing: antialiased;
}

.page-id-1737 .page-title h1 {
    font-family: 'Geomanist', Helvetica, sans-serif;
    font-size: var(--typography--font-size--heading1);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--heading1);
    text-align: left;
    text-transform: none;
    color: var(--color--dark-grey);
    margin-top: 70px !important;
    margin-bottom: 30px !important;
}

#gform_6 h3 {
    font-family: 'Geomanist', Helvetica, sans-serif;
    font-size: var(--typography--font-size--heading3);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--heading3);
    text-align: left;
    text-transform: none;
    color: var(--color--main-blue);
    margin: 0;
    padding: 0;
}

#gform_6 label,
#gform_6 h2,
#gform_confirmation_message_6 h2 {
    font-family: 'Geomanist', Helvetica, sans-serif;
    font-size: var(--typography--font-size--heading2);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--heading2);
    text-align: left;
    text-transform: none;
    color: var(--color--dark-grey);
    margin: 0;
    padding: 0;
}

#gform_6 p,
#gform_6 p.small,
#gform_6 label~div label,
#gform_confirmation_message_6 {
    font-family: 'Geomanist', Helvetica, sans-serif;
    font-size: var(--typography--font-size--paragraph);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--paragraph);
    text-align: left;
    text-transform: none;
    color: var(--color--dark-grey);
    margin: 0;
    padding: 0;
}

#gform_6 p.small {
    font-size: var(--typography--font-size--paragraphSml);
    line-height: var(--typography--line-height--paragraphSml);
}

/* Form */

#gform_6 .gform_heading {
    display: none;
}

#gform_6 .gfield {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

#gform_6 .gform_page_fields,
#gform_6 .gform_fields {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

#gform_6 .gfield_label {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: var(--color--dark-grey);
}

#gform_6 .ginput_container {
    margin: 0;
    padding: 0;
}

#gform_6 .gfield_radio li, #gform_6 .gfield_checkbox li {
    position: relative;
    margin: 0;
    padding: 0;
}

#gform_6 input[type="radio"],
#gform_6 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    bottom: 0;
}

#gform_6 .gfield_radio {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

#gform_6 .gfield_radio li label,
#gform_6 .options-container-size .gfield_radio li label .card-select {
    display: inline-flex;
    min-width: 120px;
    max-width: 100%;
    padding: 14px 45px 12px 15px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid var(--color--main-blue);
    background: var(--color--white);
    color: var(--color--main-blue);
    font-family: 'Geomanist', Helvetica, sans-serif;
    font-size: var(--typography--font-size--ctaText);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--ctaText);
    text-transform: uppercase;
}

#gform_6 .options-container-size .gfield_radio li label .card-select {
    padding: 14px 15px 12px 15px;
}

#gform_6 .gfield_radio li label:hover,
#gform_6 .options-container-size .gfield_radio li label .card-select:hover,
#gform_6 .gfield_radio li label:focus,
#gform_6 .options-container-size .gfield_radio li label .card-select:focus {
    border: 1px solid var(--color--main-blue);
    background: var(--color--main-blue);
    color: var(--color--white);
}

#gform_6 .gfield_radio li input:checked+label,
#gform_6 .options-container-size .gfield_radio li input:checked+label .card-select {
    border: 1px solid var(--color--main-blue);
    background: var(--color--main-blue);
    color: var(--color--white);
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none' %3E%3Cpath d='M13.5867 0.194137C14.0336 0.519137 14.1336 1.14414 13.8086 1.59101L5.80859 12.591C5.63672 12.8285 5.37109 12.9754 5.07734 13.0004C4.78359 13.0254 4.49922 12.916 4.29297 12.7098L0.292969 8.70976C-0.0976562 8.31914 -0.0976562 7.68476 0.292969 7.29414C0.683594 6.90351 1.31797 6.90351 1.70859 7.29414L4.88047 10.466L12.193 0.412887C12.518 -0.033988 13.143 -0.133988 13.5898 0.191012L13.5867 0.194137Z' fill='white' /%3E%3C/svg%3E");
    background-size: 15px auto;
    background-position: right 15px center;
    background-repeat: no-repeat;
}



#gform_6 .options-container-size .gfield_radio li label {
    display: flex;
    width: 400px;
    height: auto;
    padding: 20px 15px;
    gap: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 10px;
    border: 1px solid var(--color--main-blue);
    background-color: var(--color--white);
}

#gform_6 .options-container-size .gfield_radio li label:hover,
#gform_6 .options-container-size .gfield_radio li label:focus {
    border: 1px solid var(--color--main-blue);
    background: var(--color--white);
    color: var(--color--main-blue);
}

#gform_6 .options-container-size .gfield_radio li input:checked+label {
    border: 1px solid var(--color--main-blue);
    background: var(--color--white);
    color: var(--color--main-blue);
}

#gform_6 .options-container-size .gfield_radio li label .card-select {
    justify-content: center;
    align-self: center;
    min-width: 180px;
}

#gform_6 .options-container-size.single-option .gfield_radio li label .card-select {
    display: none;
}

#gform_6 .options-container-size.single-option .gfield_radio li label {
    cursor: default;
    flex-direction: row;
    width: auto;
    max-width: 850px;
    gap: 50px;
    align-items: center;
}

#gform_6 .options-container-size .gfield_radio li label .card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#gform_6 .options-container-size.container-bulker p:first-of-type {
    font-size: var(--typography--font-size--paragraphSml);
    line-height: var(--typography--line-height--paragraphSml);
}

/* Glass and container option cards */
#gform_6 .options-collection-type .gfield_radio .gchoice,
#gform_6 .options-container-type .gchoice {
    position: relative;
}

#gform_6 .options-collection-type .gfield_radio input[type="radio"],
#gform_6 .options-container-type input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
}

#gform_6 .options-collection-type .gfield_radio,
#gform_6 .options-container-type .gfield_radio {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
}

/* --- Row 1: icon toggle cards --- */
#gform_6 .options-collection-type .gfield_radio label, #gform_6 .options-container-type .gfield_radio label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 160px;
    min-width: 120px;
    height: 180px;
    background: var(--color--white);
    border: 1px solid var(--color--white);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    padding: 20px 15px;
    color: var(--color--dark-grey);
    text-transform: none;
}

#gform_6 .options-collection-type .gfield_radio label:hover, #gform_6 .options-container-type .gfield_radio label:hover {
    background: var(--color--white);
    border: 1px solid var(--color--main-blue);
    color: var(--color--main-blue);
}

#gform_6 .options-collection-type .gfield_radio label.is-selected, #gform_6 .options-container-type .gfield_radio label.is-selected {
    background: var(--color--main-blue);
    border-color: var(--color--main-blue);
    color: var(--color--white);
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none' %3E%3Cpath d='M13.5867 0.194137C14.0336 0.519137 14.1336 1.14414 13.8086 1.59101L5.80859 12.591C5.63672 12.8285 5.37109 12.9754 5.07734 13.0004C4.78359 13.0254 4.49922 12.916 4.29297 12.7098L0.292969 8.70976C-0.0976562 8.31914 -0.0976562 7.68476 0.292969 7.29414C0.683594 6.90351 1.31797 6.90351 1.70859 7.29414L4.88047 10.466L12.193 0.412887C12.518 -0.033988 13.143 -0.133988 13.5898 0.191012L13.5867 0.194137Z' fill='white' /%3E%3C/svg%3E");
    background-size: 15px auto;
    background-position: right 15px bottom 25px;
    background-repeat: no-repeat;
}

#gform_6 .options-container-type .gfield_radio .container-img-wrap {
    display: flex;
    width: 100%;
    height: 130px;
    background: var(--color--white);
    flex-direction: column;
    justify-content: center;
    padding: 0px 10px;
    border-radius: 10px;
}

#gform_6 .options-container-type .gfield_radio .container-image {
    width: auto;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}






#gform_6 .gform_page_footer {
    border: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 30px;
    padding: 45px 0px 0px;
}

#gform_6 .button {
    display: flex;
    width: 130px;
    max-width: 100%;
    padding: 14px 45px 13px 15px;
    justify-content: space-between;
    align-items: center;
    background: var(--color--main-blue);
    border: 1px solid var(--color--main-blue);
    color: var(--color--white);
    font-family: 'Geomanist', Helvetica, sans-serif;
    font-size: var(--typography--font-size--ctaText);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography--line-height--ctaText);
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    cursor: pointer;
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none' %3E%3Cpath d='M15.7062 6.70859C16.0969 6.31797 16.0969 5.68359 15.7062 5.29297L10.7063 0.292969C10.3156 -0.0976562 9.68125 -0.0976562 9.29062 0.292969C8.9 0.683594 8.9 1.31797 9.29062 1.70859L12.5844 5.00234H1C0.446875 5.00234 0 5.44922 0 6.00234C0 6.55547 0.446875 7.00234 1 7.00234H12.5844L9.29062 10.2961C8.9 10.6867 8.9 11.3211 9.29062 11.7117C9.68125 12.1023 10.3156 12.1023 10.7063 11.7117L15.7062 6.71172V6.70859Z' fill='white' /%3E%3C/svg%3E");
    background-size: 16px 12px;
    background-position: right 15px center;
    background-repeat: no-repeat;
    border-radius: 0;
}

#gform_6 .button:hover,
#gform_6 .button:focus {
    border: 1px solid var(--color--dark-blue);
    background: var(--color--dark-blue) !important;
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none' %3E%3Cpath d='M15.7062 6.70859C16.0969 6.31797 16.0969 5.68359 15.7062 5.29297L10.7063 0.292969C10.3156 -0.0976562 9.68125 -0.0976562 9.29062 0.292969C8.9 0.683594 8.9 1.31797 9.29062 1.70859L12.5844 5.00234H1C0.446875 5.00234 0 5.44922 0 6.00234C0 6.55547 0.446875 7.00234 1 7.00234H12.5844L9.29062 10.2961C8.9 10.6867 8.9 11.3211 9.29062 11.7117C9.68125 12.1023 10.3156 12.1023 10.7063 11.7117L15.7062 6.71172V6.70859Z' fill='white' /%3E%3C/svg%3E") !important;
    background-size: 16px 12px !important;
    background-position: right 15px center !important;
    background-repeat: no-repeat !important;
}

#gform_6 .gform_previous_button {
    border: 1px solid var(--color--main-blue);
    background: var(--color--white);
    color: var(--color--main-blue);
    text-align: right;
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none' %3E%3Cpath d='M0.293018 6.70859C-0.0976067 6.31797 -0.0976067 5.68359 0.293018 5.29297L5.29302 0.292969C5.68364 -0.0976562 6.31802 -0.0976562 6.70864 0.292969C7.09927 0.683594 7.09927 1.31797 6.70864 1.70859L3.41489 5.00234H14.9993C15.5524 5.00234 15.9993 5.44922 15.9993 6.00234C15.9993 6.55547 15.5524 7.00234 14.9993 7.00234H3.41489L6.70864 10.2961C7.09927 10.6867 7.09927 11.3211 6.70864 11.7117C6.31802 12.1023 5.68364 12.1023 5.29302 11.7117L0.293018 6.71172V6.70859Z' fill='%23172FAE' /%3E%3C/svg%3E");
    background-size: 16px 12px;
    background-position: left 15px center;
    background-repeat: no-repeat;
    border-radius: 0;
}

#gform_6 .gform_previous_button:hover,
#gform_6 .gform_previous_button:focus {
    border: 1px solid var(--color--dark-blue);
    background: var(--color--dark-blue) !important;
    color: var(--color--white);
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none' %3E%3Cpath d='M0.293018 6.70859C-0.0976067 6.31797 -0.0976067 5.68359 0.293018 5.29297L5.29302 0.292969C5.68364 -0.0976562 6.31802 -0.0976562 6.70864 0.292969C7.09927 0.683594 7.09927 1.31797 6.70864 1.70859L3.41489 5.00234H14.9993C15.5524 5.00234 15.9993 5.44922 15.9993 6.00234C15.9993 6.55547 15.5524 7.00234 14.9993 7.00234H3.41489L6.70864 10.2961C7.09927 10.6867 7.09927 11.3211 6.70864 11.7117C6.31802 12.1023 5.68364 12.1023 5.29302 11.7117L0.293018 6.71172V6.70859Z' fill='white' /%3E%3C/svg%3E") !important;
    background-size: 16px 12px !important;
    background-position: left 15px center !important;
    background-repeat: no-repeat !important;
}

/* Contact slide */
#gform_6 .contact-info .gform_fields {
    gap: 30px;
}

#gform_6 .contact-info .gfield {
    gap: 10px;
}

#gform_6 .contact-info span label {
    font-size: var(--typography--font-size--paragraph);
    line-height: var(--typography--line-height--paragraph);
}

#gform_6 .contact-info .contact-details-container, #gform_6 .contact-info .ginput_container_name, #gform_6 .account-details-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: flex-start;
    width: 100%;
}

#gform_6 .contact-info .ginput_container_address .address_line_1 input, #gform_6 .collection-address .ginput_container_address .address_line_1 input {
    margin-bottom: 15px;
}

#gform_6 .contact-info .ginput_container_name span {
    padding: 0;
    margin: 0;
}

#gform_6 .contact-info .contact-details-container li {
    flex-grow: 1;
}

#gform_6 .contact-info .contact-details-container li .ginput_container, #gform_6 .contact-info .contact-details-container li .ginput_container input {
    width: 100%;
}

#page #gform_6 input[type="text"],
#gform_6 .contact-info input[type="text"], 
#gform_6 .contact-info input[type="email"], 
#gform_6 .contact-info input[type="tel"], 
#gform_6 .collection-address input[type="text"],
#gform_6 .collection-address input[type="email"],
#gform_6 .collection-address input[type="tel"],
#gform_6 .account-details-container input[type="text"],
#page #gform_6 textarea,
#page #gform_6 select {
    display: flex;
    height: 45px;
    min-width: 200px;
    padding: 0 15px !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    border: 1px solid var(--color--main-blue-alpha40);
    background: var(--color--white);
    font-size: 16px;
    line-height: 30px;
    font-style: normal;
    font-weight: 400;
    color: var(--color--dark-grey);
    transition: 0.2s all linear;
}

#page #gform_6 input[type="text"]:hover,
#gform_6 .contact-info input[type="text"]:hover,
#gform_6 .contact-info input[type="email"]:hover,
#gform_6 .contact-info input[type="tel"]:hover,
#page #gform_6 textarea:hover,
#page #gform_6 select:hover,
#page #gform_6 input[type="text"],
#gform_6 .contact-info input[type="text"]:focus,
#gform_6 .contact-info input[type="email"]:focus,
#gform_6 .contact-info input[type="tel"]:focus,
#page #gform_6 textarea:focus,
#page #gform_6 select:focus {
    border: 1px solid var(--color--main-blue);
}

#gform_6 .account-details-container input[type="text"], #page #gform_6 .input-amount input[type="text"] {
    margin: 0;
}

#page #gform_6 textarea {
    height: 150px;
    min-height: 150px;
    width: 100%;
    min-width: 100%;
    font-size: 16px;
    line-height: 24px;
    padding: 15px 15px !important;
}

#page #gform_6 select {
    background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' %3E%3Cpath d='M6.29609 7.70859C6.68672 8.09922 7.32109 8.09922 7.71172 7.70859L13.7117 1.70859C14.1023 1.31797 14.1023 0.683594 13.7117 0.292969C13.3211 -0.0976562 12.6867 -0.0976562 12.2961 0.292969L7.00234 5.58672L1.70859 0.296093C1.31797 -0.0945315 0.683594 -0.0945315 0.292969 0.296093C-0.0976562 0.686718 -0.0976562 1.32109 0.292969 1.71172L6.29297 7.71172L6.29609 7.70859Z' fill='%23172FAE' /%3E%3C/svg%3E");
    background-size: 14px 8px;
    background-position: right 15px center;
    background-repeat: no-repeat;
}

/* Form complete page */
#gform_confirmation_message_6 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}