/*
 * 2.17.11 — cart and checkout polish, loaded after woocommerce.css on the cart and checkout only.
 * Plugin stylesheets (PayU, InPost) print after the theme, so some selectors carry an extra class.
 */

/* ---------- Progress steps: readable size, finished part of the line in green ---------- */
.gnn-commerce-progress {
    max-width: 760px;
    margin-top: 30px;
    gap: 14px;
}

.gnn-commerce-progress__step {
    gap: 12px;
}

.gnn-commerce-progress__step b {
    width: 40px;
    height: 40px;
    padding: 0 0 0 1px; /* Montserrat digits sit ~0.6px left of centre */
    border-width: 1.5px;
    font-size: 15px;
    font-weight: 600;
}

.gnn-commerce-progress__step .gnn-commerce-progress__label {
    font-size: 15px;
    font-weight: 600;
}

.gnn-commerce-progress__line {
    height: 2px;
    border-radius: 2px;
}

.gnn-commerce-progress__step.is-done + .gnn-commerce-progress__line {
    background: var(--gnn-a11y-sage, #498074);
}

.gnn-commerce-progress__step.is-active b {
    box-shadow: 0 0 0 5px rgba(86, 151, 136, 0.16);
}

/* ---------- Product thumbnails: the whole product, no cropping ---------- */
.gnn-cart-item__image > a,
.gnn-cart-item__image > img,
.gnn-checkout-item > img {
    background: #ffffff;
}

.gnn-cart-item__image img,
.gnn-checkout-item > img {
    object-fit: cover;
    object-position: center;
}

/* ---------- Coupon: button lines up with the field, also when an error shows under it ---------- */
form.checkout_coupon.woocommerce-form-coupon {
    align-items: flex-start;
}

form.checkout_coupon.woocommerce-form-coupon .input-text,
form.checkout_coupon.woocommerce-form-coupon .button {
    min-height: 54px;
}

/* Woo's own 47% column width must not apply inside the flex row (it made both halves narrow on phones). */
.woocommerce form.checkout_coupon.woocommerce-form-coupon .form-row {
    width: auto;
    float: none;
}

.woocommerce form.checkout_coupon.woocommerce-form-coupon .clear {
    display: none;
}

/* Invalid code: soft red frame on the field. */
.woocommerce form.checkout_coupon .input-text.has-error,
.woocommerce form.checkout_coupon .input-text[aria-invalid="true"],
.gnn-cart-coupon__row .input-text.has-error,
.gnn-cart-coupon__row .input-text[aria-invalid="true"] {
    border-color: rgba(179, 38, 30, 0.6);
    background: #fffafa;
}

/* Cart: the error Woo inserts into the field row drops to its own line under field and button. */
.gnn-cart-coupon__row {
    flex-wrap: wrap;
}

.gnn-cart-coupon__row .coupon-error-notice {
    flex: 0 0 100%;
    order: 3;
}

.woocommerce form.checkout_coupon .coupon-error-notice,
.woocommerce-cart .coupon-error-notice {
    display: block;
    margin: 8px 0 0 20px;
    color: #b3261e;
    font-size: 13px;
    line-height: 1.4;
}

/* ---------- Order notes: same field style as the other inputs ---------- */
.woocommerce-checkout form .form-row textarea.input-text {
    min-height: 120px;
    padding: 14px 20px;
    border: 1px solid rgba(86, 151, 136, 0.34);
    border-radius: 20px;
    background: #fffdfb;
    color: var(--gnn-brown);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
}

.woocommerce-checkout form .form-row textarea.input-text:focus {
    border-color: var(--gnn-a11y-sage, #498074);
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(86, 151, 136, 0.14);
}

/* ---------- Checkboxes (terms, ship to a different address): 20px green box, soft focus ---------- */
.woocommerce-checkout #payment #terms,
.woocommerce-checkout #payment input.input-checkbox[name="terms"],
.woocommerce-checkout #ship-to-different-address-checkbox {
    flex: 0 0 20px;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 1.5px solid var(--gnn-a11y-sage, #498074);
    border-radius: 6px;
    background-color: #ffffff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.woocommerce-checkout #payment #terms:checked,
.woocommerce-checkout #payment input.input-checkbox[name="terms"]:checked,
.woocommerce-checkout #ship-to-different-address-checkbox:checked {
    border-color: var(--gnn-a11y-sage, #498074);
    background: var(--gnn-a11y-sage, #498074) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Clicking a box leaves no ring; keyboard focus gets a thin green ring close to the box. */
.woocommerce-checkout #payment #terms:focus,
.woocommerce-checkout #ship-to-different-address-checkbox:focus {
    outline: none;
    box-shadow: none;
}

.woocommerce-checkout #payment #terms:focus-visible,
.woocommerce-checkout #ship-to-different-address-checkbox:focus-visible {
    outline: 2px solid rgba(86, 151, 136, 0.55);
    outline-offset: 2px;
}

/* Terms row: box, text and the required star sit on one centred line; the star follows the text. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.woocommerce-checkout #payment label[for="terms"] {
    align-items: center;
    gap: 0;
    padding: 14px 16px;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper #terms {
    margin-right: 12px !important;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text {
    flex: 0 1 auto;
}

/* The star is drawn right after the last word, so it stays next to the text when the line wraps;
   the original <abbr> stays for screen readers. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper abbr.required {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text::after {
    content: "\00a0*";
    color: #b3261e;
    font-weight: 600;
}

/* After a failed submit Woo marks the row invalid: a soft red frame instead of a hard outline. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-invalid .woocommerce-form__label-for-checkbox {
    border-color: rgba(179, 38, 30, 0.45);
    background: #fff8f7;
}

/* Replaces Woo's own `.woocommerce-invalid #terms { outline: 2px solid var(--wc-red) }`. */
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .woocommerce-invalid #terms {
    border-color: #b3261e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* ---------- InPost: chosen point as a card, "Zmień Paczkomat" as a quiet outline button under it ---------- */
.woocommerce-checkout #order_review table.shop_table tr.easypack-parcel-machine td.easypack-parcel-machine-select {
    display: flex;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.woocommerce-checkout #selected-parcel-machine.gnn-inpost-selected-point,
.woocommerce-checkout #order_review #selected-parcel-machine {
    position: relative;
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 14px 16px 14px 58px;
    border: 1px solid rgba(86, 151, 136, 0.35) !important;
    border-radius: 16px;
    background: #ffffff !important;
    color: #4d4744;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
    box-shadow: 0 8px 22px rgba(45, 37, 37, 0.05);
}

.woocommerce-checkout #order_review #selected-parcel-machine.hidden-paczkomat-data {
    display: none;
}

.woocommerce-checkout #order_review #selected-parcel-machine::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gnn-a11y-sage, #498074) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E") center / 17px no-repeat;
}

.woocommerce-checkout #order_review #selected-parcel-machine .easypack-visible-point-header {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    background: none;
    color: var(--gnn-a11y-sage-text, #467a6e);
    font-size: 11px;
    font-style: normal;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.woocommerce-checkout #order_review #selected-parcel-machine .easypack-visible-point-description {
    display: block;
    color: #4d4744;
}

.woocommerce-checkout #order_review #selected-parcel-machine .easypack-visible-point-description::first-line {
    color: #2d2525;
    font-size: 15px;
    font-weight: 700;
}

.woocommerce-checkout #order_review .easypack-parcel-machine-select .easypack_show_geowidget {
    order: 2;
}

.woocommerce-checkout #order_review .easypack-parcel-machine-select:has(#selected-parcel-machine:not(.hidden-paczkomat-data)) .easypack_show_geowidget {
    min-width: 0;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(86, 151, 136, 0.55) !important;
    background-color: #ffffff;
    color: var(--gnn-a11y-sage-hover, #3d7065);
}

.woocommerce-checkout #order_review .easypack-parcel-machine-select:has(#selected-parcel-machine:not(.hidden-paczkomat-data)) .easypack_show_geowidget:hover {
    background-color: var(--gnn-a11y-sage, #498074);
    color: #ffffff;
}

/* ---------- Payment methods: radio and label on one row; the label (name + logos) wraps beside it ---------- */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio {
    flex: 0 0 auto;
    margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 4px;
    margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > .payment_box {
    flex: 0 0 100%;
}

/* ---------- PayU "Rata 0%": a quiet green pill instead of the default blue link ---------- */
#installment-mini-total .payu-mini-installments-widget {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: #e8f1ed;
    color: #2d2525;
    font-size: 13px;
    line-height: 1.3;
}

#installment-mini-total a.payu-mini-installments-widget-details {
    color: var(--gnn-a11y-sage-hover, #3d7065) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#installment-mini-total a.payu-mini-installments-widget-details:hover,
#installment-mini-total a.payu-mini-installments-widget-details:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

#installment-mini-total .payu-mini-installments-widget-amount {
    font-weight: 700;
}

/* ---------- PayU row: no empty cell and no stray ":" from Woo's responsive table labels ---------- */
.woocommerce table.shop_table tr:has(#installment-mini-total) td {
    text-align: right;
}

.woocommerce table.shop_table tr:has(#installment-mini-total) td::before {
    content: none !important;
    display: none !important;
}

/* ---------- Cart totals: radio and shipping name side by side, left-aligned ---------- */
.woocommerce-cart .cart_totals #shipping_method li {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.woocommerce-cart .cart_totals #shipping_method li input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}

.woocommerce-cart .cart_totals #shipping_method li label {
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
}

@media (max-width: 767px) {
    .gnn-commerce-progress {
        margin-top: 22px;
        align-items: flex-start;
        gap: 6px;
    }

    .gnn-commerce-progress__step {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .gnn-commerce-progress__step b {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .gnn-commerce-progress__step .gnn-commerce-progress__label {
        display: block;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Woo's responsive tables stack cells; the PayU row's empty cell would add a blank line. */
    .woocommerce table.shop_table tr:has(#installment-mini-total) td:not(:has(#installment-mini-total)) {
        display: none;
    }

    /* Stacked on phones: the error sits right under the field, above the button. */
    .gnn-cart-coupon__row .coupon-error-notice {
        order: 0;
        margin-top: -2px;
    }

    .woocommerce form.checkout_coupon.woocommerce-form-coupon .form-row {
        width: 100%;
    }

    /* The coupon field kept its 260px desktop basis in the stacked layout and grew 260px tall. */
    .gnn-cart-coupon__row .input-text {
        flex: 0 0 auto;
        height: 52px;
    }

    .gnn-commerce-progress__line {
        flex: 1 1 24px;
        margin-top: 17px;
    }

    form.checkout_coupon.woocommerce-form-coupon {
        align-items: stretch;
    }
}

/* ---------- Payment method description: brand-tinted instead of Woo's grey-lilac box ---------- */
.woocommerce-checkout #payment div.payment_box {
    border-radius: 12px;
    background: #f1f6f4;
    color: #4d4744;
    font-size: 13px;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: #f1f6f4;
}