/* =================================================================
   UX Checkout CSS - Cross-browser compatible
   Supports: Chrome, Firefox, Safari, Edge, Opera
   ================================================================= */

/* CSS Variables */
.ux-checkout {
    --ux-primary-color: 142, 206, 96;
    --ux-secondary-color: 1, 78, 255;
    --ux-border-radius: 2px;
    --section-gap: 1.25rem;
    --gap: 0.5rem;
    --button-inline-padding: 20px;
    --button-block-padding: 5px;
    --button-padding: var(--button-block-padding) var(--button-inline-padding);
    --section-inline-padding: 10px;
    --section-block-padding: 20px;
    --section-padding: var(--section-block-padding) var(--section-inline-padding);
    --light-gray-color: #b8b8b8;
    --dark-gray-color: #777777;
    --base-color: #242424;
}

/* =================================================================
   Base Styles
   ================================================================= */

.ux-checkout p:empty {
    display: none;
}

.ux-checkout .woocommerce-form__label-for-checkbox br,
.ux-checkout .ux-checkout__back-link br {
    display: none;
}

.ux-checkout p {
    margin-bottom: 1em;
    color: var(--base-color);
}

.ux-checkout input {
    accent-color: rgba(var(--ux-primary-color), 1);
}

.ux-checkout label.checkbox {
    cursor: pointer;
}

.ux-checkout h3 {
    font-size: 1.25rem;
    text-transform: uppercase;
}

/* =================================================================
   Back to Cart Link
   ================================================================= */

.ux-checkout__back-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--gap);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: var(--section-gap);
}

/* =================================================================
   Account Fields
   ================================================================= */

.ux-checkout .woocommerce-account-fields {
    padding: var(--section-padding);
    border-radius: var(--ux-border-radius);
    border: 1px solid rgba(var(--ux-primary-color), 1);
    border-top: 0;
    background-color: rgba(var(--ux-primary-color), 0.2);
}

.ux-checkout .woocommerce-account-fields label {
    background-color: transparent !important;
}

/* =================================================================
   Section Numbering with CSS Counters
   ================================================================= */

.ux-checkout__customer-wrapper {
    counter-reset: checkout-step 1;
}

.ux-checkout__section-title:before {
    counter-increment: checkout-step;
    content: counter(checkout-step) ". ";
}

/* =================================================================
   Layout Structure
   ================================================================= */

.ux-checkout #customer_details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--section-gap);
}

.ux-checkout .ux-checkout__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--section-gap);
}

@media screen and (min-width: 768px) {
    .ux-checkout .ux-checkout__form {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: calc(var(--section-gap) * 2);
    }
}

.ux-checkout #customer-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--section-gap);
}

@media screen and (min-width: 768px) {
    .ux-checkout #customer-wrapper {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 60%;
        flex: 0 1 60%;
    }
}

/* =================================================================
   Form Fields Container
   ================================================================= */

.ux-checkout .woocommerce-billing-fields__field-wrapper,
.ux-checkout .woocommerce-shipping-fields__field-wrapper {
    border: 1px solid rgba(var(--ux-primary-color), 1);
    border-radius: var(--ux-border-radius);
    padding: var(--section-padding);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--gap);
}

/* =================================================================
   Form Row Styles
   ================================================================= */

.ux-checkout .form-row {
    width: 100%;
    padding: var(--button-block-padding);
    margin-bottom: 0;
    position: relative;
}

.ux-checkout .form-row label:not(.ux-payment__place-order label) {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    background-color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 0.825rem;
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 1;
    -webkit-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    transform: translateY(-30%);
}

.ux-checkout .form-row label.checkbox {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    white-space: normal;
    display: inline;
    margin-left: 0;
    margin-right: 0;
}

.ux-checkout .form-row .select2-selection__arrow {
    color: var(--dark-gray-color);
    margin-right: var(--gap);
}

.ux-checkout .form-row .input-text,
.ux-checkout .form-row .select2-selection__rendered {
    border: 1px solid var(--light-gray-color);
    border-radius: var(--ux-border-radius);
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.ux-checkout .form-row .input-text::-webkit-input-placeholder {
    color: #8e8d8d;
}

.ux-checkout .form-row .input-text::-moz-placeholder {
    color: #8e8d8d;
}

.ux-checkout .form-row .input-text:-ms-input-placeholder {
    color: #8e8d8d;
}

.ux-checkout .form-row .input-text::placeholder {
    color: #8e8d8d;
}

.ux-checkout .form-row.woocommerce-invalid .input-text,
.ux-checkout .form-row.woocommerce-invalid .select2-selection__rendered {
    border: 1px solid red;
}

.ux-checkout .form-row#billing_faktura_field {
    margin-bottom: var(--gap);
}

/* =================================================================
   Responsive Field Widths
   ================================================================= */

@media screen and (min-width: 768px) {
    #billing_email_field,
    #billing_phone_field,
    #billing_first_name_field,
    #billing_last_name_field,
    #shipping_first_name_field,
    #shipping_last_name_field {
        width: -webkit-calc(50% - var(--gap) / 2);
        width: calc(50% - var(--gap) / 2);
    }

    #billing_postcode_field,
    #shipping_postcode_field {
        width: -webkit-calc(30% - var(--gap) / 2);
        width: calc(30% - var(--gap) / 2);
    }

    #billing_city_field,
    #shipping_city_field {
        width: -webkit-calc(70% - var(--gap) / 2);
        width: calc(70% - var(--gap) / 2);
    }
}

/* =================================================================
   Shipping Section
   ================================================================= */

.ux-checkout .ux-checkout__shipping-details {
    border: 1px solid rgba(var(--ux-primary-color), 1);
    border-radius: var(--ux-border-radius);
    padding: var(--section-padding);
}

.ux-checkout #ship-to-different-address {
    font-family: var(--wd-title-font);
}

.ux-checkout #shipping_method {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--section-gap);
}

.ux-checkout #shipping_method li input.shipping_method {
    display: none;
}

.ux-checkout #shipping_method li input.shipping_method:checked + label {
    border: 2px solid rgba(var(--ux-primary-color), 1);
}

.ux-checkout #shipping_method li label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: var(--section-inline-padding);
    border: 1px solid var(--light-gray-color);
    border-radius: var(--ux-border-radius);
    cursor: pointer;
}

.ux-checkout #shipping_method li label > img {
    width: 50px;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}

.ux-checkout #shipping_method li label .shipment-title {
    width: -webkit-calc(100% - 52px);
    width: calc(100% - 52px);
    font-weight: 500;
}

.ux-checkout #shipping_method li label .shipment-meta {
    font-size: 0.875rem;
    color: var(--dark-gray-color);
}

.ux-checkout #shipping_method li label .shipment-price {
    margin-left: auto;
    font-size: 1.125rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    color: rgba(var(--ux-primary-color), 1);
}

/* =================================================================
   Paczkomat (InPost) Styles
   ================================================================= */

#paczkomat_id_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: var(--section-inline-padding);
    border: 1px solid rgba(var(--ux-primary-color), 0.3);
    background-color: rgba(var(--ux-primary-color), 0.2);
}

@media screen and (min-width: 768px) {
    #paczkomat_id_wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

#paczkomat_id_wrapper label {
    background-color: transparent;
}

#paczkomat_id_wrapper #select2-paczkomat_id-container {
    background-color: #ffffff;
}

#paczkomat_id_wrapper .select2-container--default {
    width: 100% !important;
}

#paczkomat_id_wrapper #open-geowidget {
    color: #ffffff;
    border: 1px solid #ffffff;
    white-space: nowrap;
    height: 42px;
    background-color: rgba(var(--ux-secondary-color), 0.9);
    margin-top: 5px;
}

#paczkomat_id_wrapper #open-geowidget:hover {
    background-color: rgba(var(--ux-secondary-color), 1);
}

/* =================================================================
   Payment Methods
   ================================================================= */

.ux-checkout .ux-checkout__payment-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.ux-checkout .ux-checkout__payment-list li {
    padding: var(--section-inline-padding);
    border: 1px solid var(--light-gray-color);
    border-radius: var(--ux-border-radius);
    cursor: pointer;
}

.ux-checkout .ux-checkout__payment-list li input.input-radio {
    display: none;
}

.ux-checkout .ux-checkout__payment-list li:has(input[checked]) {
    border: 2px solid rgba(var(--ux-primary-color), 1);
}

.ux-checkout .ux-checkout__payment-list li label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.ux-checkout .ux-checkout__payment-list li label > img {
    width: 50px;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}

.ux-checkout .ux-checkout__payment-list li label > img:first-child {
    margin-left: auto;
}

.ux-checkout .payment_methods .payment_box {
    padding: 0;
}

.ux-checkout .ux-checkout__payment-list .payu-list-banks {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.5rem;
}

.ux-checkout .ux-checkout__payment-list .payu-list-banks li {
    padding: 0;
    margin: 0;
    border: 0;
}

.ux-checkout .ux-checkout__payment-list .payu-list-banks li label {
    margin-bottom: 1rem;
}

.ux-checkout .ux-checkout__payment-list .payu-list-banks li label.active {
    background-color: #ffffff;
    border: 2px solid rgba(var(--ux-primary-color), 1);
}

.ux-checkout .ux-checkout__payment-list .payu-list-banks li:last-child {
    margin-right: auto;
}

.ux-checkout .payment_method_ppcp-gateway img:first-child {
    width: 30px !important;
}

/* =================================================================
   Order Details Section
   ================================================================= */

.ux-checkout__form .ux-checkout__order-details-wrapper {
    width: 100vw !important;
    margin-left: -15px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2000px;
}

@media screen and (min-width: 768px) {
    .ux-checkout__form .ux-checkout__order-details-wrapper {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 calc(40% - (var(--section-gap) * 2));
        flex: 0 1 calc(40% - (var(--section-gap) * 2));
        margin-left: 0;
    }
}

.ux-checkout__form .ux-checkout__order-details-wrapper #order_details {
    border-radius: var(--ux-border-radius);
    background-color: rgba(225, 225, 225, 0.4);
    padding: var(--section-padding);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
}

.ux-checkout__form .ux-checkout__order-details-wrapper #order_details .ux-order-review.shop_table {
    background-color: #ffffff;
    padding: var(--section-inline-padding);
    border-radius: var(--ux-border-radius);
}

.ux-checkout__form .ux-checkout__order-details-wrapper #order_details .wd-checkout-prod-cont,
.ux-checkout__form .ux-checkout__order-details-wrapper #order_details .wd-checkout-prod-cont bdi,
.ux-checkout__form .ux-checkout__order-details-wrapper #order_details .ux-order-review__free-shipping {
    color: var(--base-color);
}

.ux-checkout__form .ux-checkout__order-details-wrapper #order_details .wd-checkout-prod-total {
    text-align: end !important;
}

.ux-checkout .ux-payment__submit-button {
    margin-top: var(--section-gap);
}

/* =================================================================
   Validation Styles
   ================================================================= */

.ux-field-valid input,
.ux-field-valid select,
.ux-field-valid textarea {
    border-color: #28a745 !important;
}

.ux-field-invalid input,
.ux-field-invalid select,
.ux-field-invalid textarea {
    border-color: #dc3545 !important;
}

.ux-validation-message {
    font-size: 0.875rem;
    padding-left: 6px;
}

.ux-validation-invalid {
    color: #dc3545;
}

.ux-validation-valid {
    color: #28a745;
}