/*==============================================================================
  16. WOOCOMMERCE
==============================================================================*/
.woocommerce {
    max-width: var(--content-width);
    margin-inline: auto;
}

.woocommerce form {
    max-width: 100%;
}

.pink-wine-list,
.pink-wine-cart-container,
.woocommerce-message,
.woocommerce-cart-form,
.cart-collaterals {
    max-width: var(--content-width);
    margin-inline: auto;
}

/* Messages */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border: none;
    border-radius: 3px;
    list-style: none;
    color: var(--text-light);
}

body .woocommerce-message {
    background-color: var(--white-wine);
}

body .woocommerce-info {
    background-color: var(--pink-dark);
}

body .woocommerce-error {
    background-color: var(--red-wine);
}

body .woocommerce-message a,
body .woocommerce-error a {
    color: var(--text-light);
    text-decoration: underline 0.3em;
    padding: .6em .2em;
}
body .woocommerce-info a {
    text-decoration: underline 0.3em;
    padding: .6em .2em;
    font-weight: bold;
    color: var(--text-light);
}
body .woocommerce-info a:hover {
    background-color: var(--text-light);
    color: var(--text);
}

/* Product List */
.pink-wine-list .woocommerce-loop-product__link img {
    display: none;
}

.pink-wine-list .product {
    text-align: left;
    border-bottom: 1px solid #ddd;
    padding: .25rem 0;
    overflow: hidden;
}

.pink-wine-list .button {
    float: right;
}

/* Cart */
.pink-wine-cart-container .coupon,
.pink-wine-cart-container .woocommerce-shipping-calculator,
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
    display: none;
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form select {
    width: 100%;
    padding: 0.75rem 0.625rem;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    box-sizing: border-box;
    transition: var(--transition-std);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: #333;
    outline: none;
}

.woocommerce form .form-row label {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

.woocommerce form .form-row .required {
    color: #a31912;
    text-decoration: none;
}

.order_comments {
    display: block;
}

/* Buttons - Editorial Style */
body .woocommerce .wc-proceed-to-checkout a.checkout-button,
body .pink-empty-cart-actions a.button,
body .pink-checkout-back a.button,
body .checkout_coupon button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit {
    background: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    color: var(--gray);
    font-weight: normal;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline 0.3em var(--pink-semi);
    text-underline-offset: 0.1em;
    padding: 0.6em 0.2em;
    width: auto;
    display: inline-block;
    transition: var(--transition-std);
    overflow-wrap: break-word;
}

body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body .pink-empty-cart-actions a.button:hover,
body .pink-checkout-back a.button:hover,
body .checkout_coupon button:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover {
    background-color: var(--pink);
    color: var(--gray);
    text-decoration-color: var(--pink);
}

/* Place Order Button */
body .woocommerce #place_order {
    text-decoration: none;
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 1.25rem;
    -webkit-appearance: button;
    border: var(--border-std);
    border-radius: 3px;
    background: var(--pink-trans);
    color: var(--gray);
    line-height: 1;
    padding: 1rem;
    cursor: pointer;
    transition: var(--transition-std);
}

body .woocommerce #place_order:hover {
    border-color: var(--pink);
    background-color: var(--pink);
    color: var(--gray);
}

body .pink-empty-cart-actions {
    text-align: center;
}

/* Quantity Inputs */
.woocommerce .quantity .input-text {
    width: 3rem;
    padding: 0.3125rem;
    text-align: center;
    border: 1px solid #ccc;
    background: transparent;
    -moz-appearance: textfield;
}

.woocommerce .quantity .input-text::-webkit-outer-spin-button,
.woocommerce .quantity .input-text::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce-checkout-review-order-table {
    text-align: left;
}

.checkout p {
    margin-block-start: 0;
    margin-block-end: 2rem;
    padding-top: 0;
    padding-bottom: 1rem;
}

/* Branding */
body .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--pink-very);
    font-weight: bold;
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--pink-darkest);
    background-color: var(--pink-trans);
}

body .woocommerce ul.products li.product .price, 
body .woocommerce div.product p.price, 
body .woocommerce div.product span.price {
    color: var(--gray);
    font-family: var(--font-display);
}

body .woocommerce-page .entry-content a,
body .woocommerce-page .woocommerce-message a {
    color: var(--pink-very);
    text-decoration-color: var(--pink-semi);
}

.woocommerce h2 {
    font-size: 1.75rem;
}

.wc_payment_methods {
    list-style: none;
}

.wc_payment_methods p {
    padding: 0;
    margin: auto;
}

/* Checkout Recap */
.pink-checkout-recap {
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    border-left: 5px solid var(--pink);
    padding: 20px;
    margin-bottom: 25px;
}

.pink-checkout-recap h3.recap-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

table.pink-recap-table {
    width: 100%;
    border: none;
    margin: 0;
}

table.pink-recap-table td {
    padding: 8px 0;
    vertical-align: top;
    border: none;
}

.recap-name {
    color: #333;
    font-weight: 500;
}

.recap-qty {
    color: #888;
    font-size: 0.9em;
    margin-left: 5px;
}

.recap-price, .recap-total-price {
    text-align: right;
    white-space: nowrap;
}

.recap-total-row th, 
.recap-total-row td {
    padding-top: 15px;
    border-top: 1px solid #eee !important;
    font-weight: 700;
    color: var(--gray);
    font-size: 1.1em;
}

.recap-total-row th {
    text-align: left;
}

.woocommerce-MyAccount-navigation {
    position: initial;
}

.woocommerce-MyAccount-navigation ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.woocommerce-orders-table .woocommerce-button {
    margin-right: 1rem;
}

/* ============================================================
   FIX: VAT COMPLIANCE RADIO BUTTONS
   Undo global label styling for this specific section so
   radio buttons sit next to their text.
   ============================================================ */

/* 1. Reset the Labels inside the VAT wrapper */
#woocommerce_eu_vat_compliance_self_certify label.radio {
    display: inline-block !important; /* Stop them from being 100% width blocks */
    width: auto !important;           /* Let them shrink to fit the text */
    margin-left: 5px !important;      /* Small gap between dot and text */
    margin-right: 20px !important;    /* Gap before the next option */
    margin-bottom: .5rem !important;      /* Align nicely with the dot */
    font-weight: normal !important;
}

/* 2. Reset the Radio Inputs */
#woocommerce_eu_vat_compliance_self_certify input[type="radio"] {
    display: inline-block !important;
    width: auto !important;           /* Stop them from stretching */
    margin: .5rem;
    vertical-align: middle;           /* Align center with text */
}

/* 3. Ensure the container flows horizontally */
#woocommerce_eu_vat_compliance_self_certify .woocommerce-input-wrapper {
    display: block;
    margin-top: 5px;
}

/* Responsive */
@media screen and (max-width: 600px) {
    .pink-empty-cart-actions a.button,
    .pink-checkout-back a.button {
        display: block;
        width: 100%;
        margin-bottom: 0.625rem;
    }

    .pink-wine-list .product {
        padding: 1rem 0;
    }

    .pink-wine-list .button {
        float: none;
        display: block;
        margin-top: 0.5rem;
    }
}

/* ============================================================
   FIX: SELECT2 (Country Dropdown) STYLING
   Forces the country dropdown to match the height/padding 
   of standard text inputs.
   ============================================================ */

/* 1. The Main Box (Mimic text input styles) */
body .woocommerce .select2-container .select2-selection--single {
    height: auto !important;           /* Let padding define the height */
    padding: 12px 10px !important;     /* Match your input.input-text padding */
    border: 1px solid #ddd !important; /* Match input border */
    border-radius: 0 !important;       /* Match input sharp edges */
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. The Text Inside */
body .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;             /* Remove default select2 padding */
    color: #666 !important;            /* Match your input text color */
}

/* 3. The Arrow Icon (Centering) */
body .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;           /* Full height of the box */
    top: 0 !important;
    right: 10px !important;            /* Align with padding */
    display: flex !important;
    align-items: center !important;
}

/* 4. Focus State (When clicked) */
body .woocommerce .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #333 !important;     /* Match input focus color */
}

/* Fix 'Show Password' Button */
.woocommerce .password-input {
    position: relative; /* Anchor for the button */
    display: block;
}

.woocommerce .password-input .show-password-input {
    /* 1. Reset your Global Button Styles */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.2rem 0.3rem 0.4rem;
    box-shadow: none ;
    width: auto;
    
    /* 2. Position it inside the input box */
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    height: 1.5em; /* Height of the text */
    
    /* 3. Style it as a link */
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline .3em;
}
.woocommerce .password-input .show-password-input:hover {
    color: var(--text-light);
    background: var(--text);
}

/* 4. Add the text (Since the HTML is empty) */
.woocommerce .password-input .show-password-input::after {
    content: "Show";
}
.woocommerce .password-input .show-password-input.display-password::after {
    content: "Hide"; /* Woo toggles this class when clicked */
}

/* Hide the "View Basket" link that appears after adding an item */
.woocommerce a.added_to_cart {
    display: none !important;
}

.woocommerce-billing-fields p {
    margin-bottom: 0;
}