@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* =========================
   Base Form/Layout
   ========================= */
#main:has(#gform_wrapper_32) > div.wf-wrap {
    padding: 10px !important;
}

img.product-image {
    max-height: 70px;
}

.gform_required_legend {
    display: none;
}

#gform_fields_32 {
    position: relative;
    left: -10px;
    grid-column-gap: 0;
}

.welcome-message {
    justify-self: center;
}

.existing-description {
    padding-top: 2%;
    padding-left: 3%;
    padding-right: 3%;
    border: 2px solid lightgrey;
    border-radius: 20px 0 0 20px; /* rounded left only */
    border-right: none;
}

.existing-quantity {
    display: flex;
    align-items: center;
    padding: 2%;
    border: 2px solid lightgrey;
    border-radius: 0 20px 20px 0; /* rounded right only */
    border-left: none;
}

.existing-quantity .ginput_container_select {
    width: 100%;
    display: grid;
}

.existing-quantity .ginput_container.ginput_container_select select {
    justify-self: center;
}

.section-hidden {
    position: absolute !important;
    left: -99999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.selectable-dropdown,
.selectable-dropdown-arrow {
    border: 2px solid lightgrey;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-height: 80px;
}

.selectable-dropdown {
    border-radius: 20px 0 0 20px;
    border-right: none;
    grid-column-start: 1 !important;
    grid-column-end: 10 !important;
    padding: 4px 7px 4px 3%;
}

.selectable-dropdown .gfield_checkbox {
    width: 100%;
}

.selectable-dropdown .ginput_container_checkbox label.gform-field-label {
    font-size: clamp(10px, 2.5vw, 18px);
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: normal;
    color: #636468;
    cursor: pointer;
}

.selectable-dropdown .ginput_container_checkbox .gfield-choice-input {
    display: none;
}

.selectable-dropdown .gfield_description {
    color: black;
    font-size: large;
}

.selectable-dropdown .ginput_container_checkbox {
    color: #ffffff;
    width: auto;
    display: flex;
    justify-content: center;
    background-color: transparent;
    padding: 4px;
    border-radius: 10px 0 0 10px; /* rounded left only */
}

.selectable-dropdown-arrow {
    border-radius: 0 20px 20px 0;
    border-left: none;
    background-color: transparent;
    color: #ffffff;
    justify-content: right;
    grid-column: span 3 !important;
    padding: 4px 2px 4px 0;
}

.selectable-dropdown-arrow .product-image {
    padding-right: 10px;
}

.dropdown-desc {
    font-size: 8px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 7px;
}

.gform_fields > fieldset.trt-initial {
    border: 2px solid lightgrey;
    border-radius: 10px;
    margin-top: 5px;
    cursor: pointer;
}

.trt-initial .gfield_radio {
    display: flex;
}

.trt-initial .gfield_radio .gchoice {
    width: 50%;
    justify-content: center;
    display: flex;
}

.trt-initial .gfield_radio > .gchoice:first-child {
    border-right: 2px solid lightgrey;
}

.trt-initial .gfield_radio .gchoice:has(input:checked) {
    background-color: #10203b;
    color: #ffffff;
    font-weight: 700;
}

.trt-initial .gfield_radio .gchoice:first-child:has(input:checked) {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.trt-initial .gfield_radio .gchoice:nth-child(2):has(input:checked) {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.trt-initial .gfield_radio .gchoice label {
    cursor: pointer;
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    height: 100%;
    padding: 12px 14px; /* optional */
    box-sizing: border-box;
}

.trt-initial .gfield_radio .gchoice input {
    display: none;
}

.trt-options .gform-field-label > div,
.trt-options .gfield_description > div {
    justify-content: space-between;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 20px;
    margin-bottom: 10px;
}

.trt-options .gform-field-label {
    width: 100%;
}

.trt-options .gform-field-label .gfp_name,
.trt-options .gfield_description .gfp_name {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.trt-choice-desc {
    padding:0 5px 0 5px;
    display:flex;
    align-items: flex-start;
    gap: 16px;
}

.existing-skip-button {
    justify-self: center;
}

.existing-skip-button input {
    font-size: small;
    padding-top: 5px;
    padding-bottom: 5px;
}

.gfield_radio input:checked ~ .gform-field-label > div {
    border-color: #5593ff;
}

/* All GF wrappers except form 32 */
.gform_wrapper:not(#gform_wrapper_32) :is(.gform-field-label > div, .gfield_description > div) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #ccc;
    border-radius: 20px;
    background: #fff;
    font-family: "Montserrat", serif;
    filter: drop-shadow(2px 2px 2px #555);
}

.gform_wrapper:not(#gform_wrapper_32) .gfield_description > div,
.gform_wrapper:not(#gform_wrapper_32) .gform-field-label > div:hover {
    border-color: #5593ff;
}

.gform_wrapper:not(#gform_wrapper_32) :is(.gform-field-label .gfp_name,
.gfield_description .gfp_name) {
    font-size: 22px;
    font-weight: 600;
    color: #E7A923;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.gform-field-label .gfp_price,
.gfield_description .gfp_price {
    font-size: 50px;
    font-weight: bold;
    color: #10203b;
    line-height: 25px;
}

.gform-field-label .gfp_price > small,
.gfield_description .gfp_price > small {
    font-size: 30%;
    font-weight: 600;
}

.gform-field-label .gfp_month,
.gfield_description .gfp_month {
    font-size: 10px;
    color: #aaa;
    font-weight: normal;
    width: 75%;
}

.gform_wrapper:not(#gform_wrapper_32) :is(.gform-field-label .gfp_info,
.gfield_description .gfp_info) {
    color: #777;
    font-weight: normal;
    padding-top: 10px;
}

.gform-field-label .gfp_rpad,
.gfield_description .gfp_rpad {
    display: inline-block;
    width:279px;
}

.gform_wrapper:not(#gform_wrapper_32) :is(.gform-field-label > div img,
.gfield_description > div img) {
    position:absolute;
}

@media (min-width: 455px) {
    .gform_wrapper:not(#gform_wrapper_32) :is(.gform-field-label > div img,
    .gfield_description > div img) {
        top: 10px;
        right: 5%;
    }
}

@media (max-width: 454px) {
    .gform_wrapper:not(#gform_wrapper_32) :is(.gform-field-label > div img,
    .gfield_description > div img) {
        top: 40px;
        right: 10%;
    }
}

.gform_wrapper:not(#gform_wrapper_32) .gform_page_fields {
    position: relative;
}

.clear_select_txt {
    display: none;
    position: absolute;
    right: 10%;
    bottom: 35px;
    color: var(--the7-links-color);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.clear_select_txt:hover {
    text-decoration: none;
}

#gform_33 .hidden-until-state-selected .gchoice:last-child,
.gform-hidden-price .ginput_container {
    display: none;
}

/* =========================
   Sticky Cart Total
   ========================= */
#field_32_20 {
    margin-top: 30px;
}

#field_32_37 {
    padding-left: 10px;
    display: flex;
    align-items: center;
}

#field_32_37-placeholder {
    display: none;
}

#field_32_37.is-fixed-bottom + #field_32_37-placeholder {
    display: block;
}

#field_32_37.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff; /* important to prevent transparency */
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
}

/* =========================
   Cart Minimum Modal
   ========================= */
.ui-dialog.cart-minimum-modal {
    padding: 0;
    background: none;
    border: none;
    width: 300px;
    color: #ffffff;
    font-family: Poppins, Helvetica, Arial, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    word-spacing: normal;
    border-radius: 10px;
}

.cart-minimum-modal .ui-dialog-titlebar {
    display: none;
}

.cart-minimum-overlay,
.ui-widget-overlay {
    opacity: .50;
    filter: Alpha(Opacity=50);
    background: rgb(50, 50, 50);
    backdrop-filter: blur(10px);
}

.cart-minimum-close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #ffffff;
    background: none;
    border: none;
    padding: 5px 10px;
}

.ui-dialog.cart-minimum-modal .ui-dialog-content {
    background-color: rgba(15, 15, 15, .9);
    color: #ffffff;
    padding: 30px 20px;
    border-radius: 10px;
}

/* Submission Modal */
.no-close .ui-dialog-titlebar-close,
.no-close .ui-dialog-titlebar {
    display: none;
}

.ui-dialog-payment-submission {
    background-color: rgba(15, 15, 15, 0);
    border: none !important;
}

.ui-dialog-payment-submission .progress-bar {
    height: 20px;
    background: #d4c6a1;
    box-shadow: 2px 14px 15px -7px rgba(212, 198, 161, 0.36);
    border-radius: 50px;
    transition: all 0.5s;
    backdrop-filter: blur(3px);
}

.ui-dialog-payment-submission .progress-bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 50px;
    background-image: linear-gradient(to right, #f5d539, #ff822f);
    animation: animatebar 10s linear forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

#processing:after {
	content: "";
	animation: changetext 10s linear forwards;
}

@keyframes changetext {
  0% { content:"One moment..."; }
  25% { content:"Establishing secure connection..."; }
  50% { content:"Sending information..."; }
  100% { content:"Finalizing transaction..."; }
}

@keyframes animatebar {
    0% { width: 0%; }
    100% { width: 100%; }
}

.ui-dialog-payment-submission .progress-bar span:after {
    content: '';
}

#payment_submission_dialog {
    background-color: rgba(15, 15, 15, .7);
    padding-bottom: 20px;
    padding-top: 30px;
    width: 300px;
    color: #ffffff;
    font-family: Poppins, Helvetica, Arial, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    word-spacing: normal;
}

/* Shared text formatting */
:is(.gform-field-label, .gfield_description) .gfp_info {
    font-weight: normal;
}

/* blue price */
.ginput_container > .ginput_product_price_wrapper > input.ginput_product_price {
    color: #1877f2;
}

/* =========================
   Product State Styling
   ========================= */
.gf_disabled,
.gform_wrapper .gf_disabled .ginput_product_price,
.gform_legacy_markup_wrapper .gf_disabled input.ginput_product_price {
    color: #AAA;
}

.existing-quantity:has(select[disabled="disabled"]) {
    background-color: rgba(230, 230, 230, 0.7);
}

.existing-description:has(+ .existing-quantity select[disabled="disabled"]) {
    background-color: rgba(230, 230, 230, 0.7);
}

.existing-description:has(+ .existing-quantity select[disabled="disabled"]) input.ginput_product_price {
    color: #AAA;
}

.gfield_description:has(> span.gf_disabled_only) {
    width: fit-content !important;
}

.gf_disabled_only {
    display: none;
}

.gf_disabled .gf_disabled_only {
    display: block;
}

/* =========================
   Mobile Overrides
   ========================= */
@media (max-width: 640px) {
    .existing-description {
        border-right: 2px solid lightgrey; /* restore right border */
        border-bottom: none; /* remove bottom instead */
        border-radius: 20px 20px 0 0; /* rounded top only */
        flex-direction: column;
        justify-content: center;
        margin-top: 2%;
        padding-top: 5px;
    }

    #main .existing-description .gfield_label {
        font-size: clamp(10px, 2vw, 18px);
    }

    .existing-quantity {
        border-left: 2px solid lightgrey; /* restore left border */
        border-top: none; /* remove top instead */
        border-radius: 0 0 20px 20px; /* rounded bottom only */
        justify-content: normal;
    }

    .existing-quantity .ginput_container_select {
        padding: 4%;
        justify-content: normal;
    }

    .existing-quantity .ginput_container_select select {
        width: 100%;
    }

    #gform_fields_32 {
        row-gap: 0;
    }

    .vc_row.wpb_row.vc_row-fluid.vc_custom_1639773906655 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .welcome-message {
        padding-bottom: 5px;
    }
}

@media (max-width: 375px) {
    .vc_column_container > .vc_column-inner {
        padding: 0 0 0 10px;
    }
}