/* /css/woocommerce.css */
/* ProductTickler Pro - WooCommerce Integration Styles v5 (FINAL & COMPLETE) */

/* --- General & Forms --- */
.woocommerce form .form-row label { color: var(--color-text-muted); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container--default .select2-selection--single { background-color: var(--color-bg-secondary) !important; border: 1px solid var(--color-border) !important; border-radius: 8px !important; color: var(--color-text) !important; padding: 12px 16px; height: auto !important; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.2) !important; }

/* --- Buttons --- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--wc-button-primary-bg) !important; color: var(--wc-button-primary-text) !important; padding: 12px 28px; border: none; border-radius: 12px; font-weight: 600; transition: all 0.3s ease !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { transform: translateY(-2px); filter: brightness(1.1); color: var(--wc-button-primary-text) !important; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--wc-button-secondary-bg) !important; color: var(--wc-button-secondary-text) !important; }

/* --- Shop & Archive --- */
.woocommerce ul.products { grid-template-columns: repeat(var(--shop-columns, 3), 1fr); gap: 30px; }
.woocommerce ul.products li.product { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 20px; transition: all 0.4s ease; }
.woocommerce ul.products li.product:hover { transform: translateY(-10px); border-color: var(--color-primary); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--color-text); }
.woocommerce ul.products li.product .price { color: var(--color-secondary); font-weight: 700; }
.woocommerce span.onsale { background-color: var(--sale-badge-bg-color) !important; color: var(--sale-badge-text-color) !important; border-radius: 50%; min-width: 50px; min-height: 50px; line-height: 50px; }

/* --- Single Product Page Styling --- */
.single-product div.product { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; align-items: flex-start; }
.single-product .summary.entry-summary { background: var(--wc-panel-bg); border: 1px solid var(--wc-panel-border); border-radius: 20px; padding: 40px; }
.single-product .woocommerce-product-gallery { border-radius: 20px; overflow: hidden; }
.single-product h1.product_title { font-size: 2.8rem; font-weight: 800; color: var(--color-text); line-height: 1.2; margin-bottom: 20px; }
.single-product p.price { font-size: 2.5rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 25px; }
.single-product .woocommerce-product-details__short-description { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.7; margin-bottom: 30px; }
.single-product form.cart { display: flex; align-items: center; gap: 15px; background-color: var(--color-bg-secondary); padding: 10px; border-radius: 12px; }
.single-product .quantity .qty { background-color: transparent !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; border-radius: 8px !important; max-width: 70px; }
.single-product .single_add_to_cart_button { flex-grow: 1; font-size: 1rem !important; }
.single-product .product_meta { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.single-product .product_meta a { color: var(--color-secondary); }

/* 
=================================================================
    NEW ---> State-of-the-Art Cart Page <--- NEW
=================================================================
*/
.woocommerce-cart .entry-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 40px;
}
.woocommerce-cart-form {
    background: var(--wc-panel-bg);
    border: 1px solid var(--wc-panel-border);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    backdrop-filter: blur(15px);
}
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--wc-panel-bg);
    border: 1px solid var(--wc-panel-border);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(15px);
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
    color: var(--color-text);
    font-size: 1.8rem;
    margin-bottom: 20px;
}
.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
    font-size: 1.2rem !important;
    padding: 18px 30px !important;
    display: block;
    text-align: center;
}

/* --- Cart & Checkout Panels --- */
.woocommerce-account .woocommerce, .woocommerce-checkout #customer_details {
    background: var(--wc-panel-bg);
    border: 1px solid var(--wc-panel-border);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    backdrop-filter: blur(15px);
}
.woocommerce-checkout #order_review { background: var(--color-bg-secondary); border: 1px solid var(--wc-panel-border); border-radius: 20px; padding: 30px; }
.woocommerce table.shop_table { border: none; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--wc-panel-border); color: var(--color-text-muted); }
.woocommerce table.shop_table th { color: var(--color-text); }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout h3 { color: var(--color-text); font-size: 1.8rem; padding-bottom: 15px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
#add_payment_method #payment, .woocommerce-checkout #payment { background: transparent; }
#add_payment_method #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { padding: 0; border: none; }
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important; font-size: 1.2rem !important; padding: 18px 30px !important; }

/* --- Checkout Header --- */
.checkout-header { text-align: center; margin-bottom: 40px; }
.checkout-header .icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); border-radius: 16px; margin-bottom: 20px; }
.checkout-header .icon svg { color: white; width: 32px; height: 32px; }
.checkout-header h2 { font-size: 2.5rem; color: var(--color-text); margin-bottom: 10px; }
.checkout-header p { font-size: 1.1rem; color: var(--color-text-muted); max-width: 500px; margin: 0 auto; }
.woocommerce-account-fields .create-account { border-top: 1px solid var(--wc-panel-border); margin-top: 30px; padding-top: 25px; }

/*
=================================================================
    NEW ---> Add Borders to Checkout Page Fields
=================================================================
*/

/*
 * This targets the input fields on the checkout page to give them
 * the same clear, visible border as the login/password pages.
*/
.woocommerce-checkout #customer_details .input-text {
    border-color: rgba(255, 255, 255, 0.2) !important; /* A subtle, semi-transparent white border */
}

/*
 * Note: The focus style (changing the border to the primary color)
 * should already be handled by the general rule at the top of your
 * CSS file, but we can re-state it here to be certain.
*/
.woocommerce-checkout #customer_details .input-text:focus {
    border-color: var(--color-primary) !important;
}

/*
=================================================================
    FINAL ---> Style "Update Cart" Button with Hex Code
=================================================================
*/

/*
 * This targets the "Update Cart" button and applies a full set of
 * styles using a direct hex code to match other primary buttons.
*/
.woocommerce-cart .actions button[name="update_cart"] {
    background: #C4622D !important; /* <-- PASTE YOUR HEX CODE HERE */
    color: #FFFFFF !important;      /* Assuming white text */
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    line-height: inherit !important; /* Prevents text alignment issues */
}

/* Adding the hover effect to match other primary buttons */
.woocommerce-cart .actions button[name="update_cart"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
    background: #C4622D !important; /* <-- USE THE SAME HEX CODE HERE */
    color: #FFFFFF !important;
}


/* --- My Account Page --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 15px 20px; display: block; color: var(--color-text-muted); border-left: 3px solid transparent; transition: all 0.3s ease; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--color-bg-secondary); }

/*
=================================================================
    Login and Lost Password Field Borders
=================================================================
*/

/*
 * This targets the input fields on both the login form and the
 * lost password form to give them a clear, visible border.
*/
.woocommerce-account .login .form-row input.input-text,
.woocommerce-account .lost_reset_password .form-row input.input-text {
    border-color: rgba(255, 255, 255, 0.2) !important; /* A subtle, semi-transparent white border */
}

/*
 * This ensures the border becomes the primary brand color when a
 * user clicks into the field, matching your site's aesthetic.
*/
.woocommerce-account .login .form-row input.input-text:focus,
.woocommerce-account .lost_reset_password .form-row input.input-text:focus {
    border-color: var(--color-primary) !important;
}

/*
=================================================================
    My Account Login Button Styling
=================================================================
*/

/*
 * This uses a high-specificity selector and a direct hex color code
 * to force the login button to match the primary header button.
*/
.woocommerce-account .woocommerce-form-login button.woocommerce-button[name="login"] {
    background: #C4622D !important; /* DIRECT HEX CODE for the primary background */
    color: #FFFFFF !important; /* Assuming the text color is white */
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

/* Hover state aligns the button with the rest of the primary actions. */
.woocommerce-account .woocommerce-form-login button.woocommerce-button[name="login"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
    background: #C4622D !important; /* Ensure background stays the same on hover */
    color: #FFFFFF !important;
}

/* Responsive */
@media (max-width: 768px) {
    .single-product div.product { grid-template-columns: 1fr; }
    .woocommerce-message, .woocommerce-info { flex-direction: column; text-align: center; gap: 15px; }
}

/* 
=================================================================
    NEW ---> State-of-the-Art Pricing Page (Aanmelden) <--- NEW
=================================================================
*/
.pricing-page-container {
    max-width: 600px;
    margin: 60px auto;
    padding: 0 20px;
}
.pricing-header {
    text-align: center;
    margin-bottom: 40px;
}
.pricing-header h1 {
    font-size: 2.8rem;
    color: var(--color-text);
    margin-bottom: 10px;
}
.pricing-header p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}
.plan-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    color: var(--color-text);
    font-weight: 500;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}
.yearly-savings {
    flex-basis: 100%;
    text-align: center;
}
.plan-toggle {
    position: relative;
    width: 56px;
    height: 30px;
    background: var(--color-card-bg);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}
.plan-toggle.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}
.toggle-slider {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: var(--color-text);
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.plan-toggle.active .toggle-slider {
    transform: translateX(25px);
}
.plan-toggle-wrapper > .yearly-savings {
    background: rgba(196, 154, 45, 0.15);
    color: var(--color-secondary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(196, 154, 45, 0.3);
}
.pricing-card {
    background: var(--wc-panel-bg);
    border: 1px solid var(--wc-panel-border);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(15px);
    text-align: left;
    position: relative;
}
.plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}
.plan-title {
    font-size: 1.8rem;
    color: var(--color-text);
    font-weight: 700;
}
.plan-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 24px;
}
.plan-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 24px;
}
.plan-price .woocommerce-Price-amount {
    color: var(--color-text);
}
.plan-price .woocommerce-Price-currencySymbol {
    color: var(--color-text);
}
.plan-features ul {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}
.plan-features ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-muted);
}
.plan-features ul li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: rgba(196, 98, 45, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238444F9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    border-radius: 50%;
}
.pricing-card .btn.btn-full {
    width: auto !important;
    display: inline-flex !important;
    font-size: 1.1rem !important;
    padding: 16px 48px !important;
    align-self: center;
}



/*
=================================================================
    Reset Password Button Styling
=================================================================
*/

/*
 * This uses a MAXIMUM specificity selector to force the styling
 * onto the "Reset Password" button, overriding any theme styles.
*/
body.woocommerce-lost-password form.lost_reset_password button[type="submit"] {
    background: #C4622D !important; /* Matches the primary accent */
    color: #FFFFFF !important;      /* High contrast text */
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

body.woocommerce-lost-password form.lost_reset_password button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
    background: #C4622D !important; /* Retain brand color on hover */
    color: #FFFFFF !important;
}

/*
=================================================================
    Footer Heading Alignment on WooCommerce Pages
=================================================================
*/

/*
 * This uses a stronger selector to target footer headings ONLY
 * on WooCommerce pages and resets all possible spacing properties.
*/
body.woocommerce-page .site-footer .footer-section h3 {
    font-size: 1rem !important;      /* Reset font size for consistency */
    line-height: 1.2 !important;    /* Reset line height */
    margin-top: 0 !important;       /* Prevent extra spacing */
    margin-bottom: 20px !important; /* Set a consistent bottom margin */
    padding-top: 0 !important;      /* Prevent padding from pushing content down */
}
/*
=================================================================
    NEW ---> Styling for Pricing Widget Footnote
=================================================================
*/
.pricing-card .pricing-footnote {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 40px !important;
    opacity: 0.8;
}
/*
=================================================================
    FINAL v3 ---> Styling for Cart/Checkout "Includes BTW" Notice
=================================================================
*/

/* Styles the asterisk (*) next to the total price on both pages */
.order-total .btw-asterisk {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    font-weight: 400;
    vertical-align: super;
    margin-left: 1px;
}

/* Styles the footnote on the CHECKOUT page (now BELOW the button) */
.btw-footnote {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 35px 0 0 0; /* Adds spacing above the note */
    opacity: 0.8;
    width: 100%;
    clear: both; /* Prevents alignment issues with floated elements */
}

/* Styles the footnote on the cart page (below the box). */
.btw-footnote-cart {
    text-align: center !important; /* Forces the centering */
    font-size: 0.9rem !important;  /* Makes the text smaller to match the widget */
    color: var(--color-text-muted);
    margin: 10px auto 0; /* Adds space above and centers the block itself */
    opacity: 0.8;
    width: 100%;
    clear: both; /* Prevents alignment issues with floated elements */
}
/*
=================================================================
    Pricing Widget Asterisk Styling
=================================================================
*/
.pricing-card .pricing-asterisk {
    display: inline !important;
    font-size: 1rem !important;
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
    margin-left: 1px;
    vertical-align: baseline !important;
}

/*
=================================================================
    Checkout Country Selector Styling
=================================================================
*/

/* --- 1. The main dropdown box (with correct border) --- */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: #231c3d rgb(35, 28, 61) !important; /* Solid color matching your theme's panels */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Matches panel border */
    border-radius: 8px !important;
    height: auto !important;
    padding: 12px 16px !important;
    Font-size: 0.95rem !important;	
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text) !important;
    line-height: 1.5;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-muted) transparent transparent transparent !important;
}

/* --- 2. The dropdown panel that opens --- */
body .select2-container.select2-container--default.select2-container--open .select2-dropdown {
    background-color: #1C1D1F !important; /* Solid opaque background */
    border: 1px solid var(--color-primary) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* --- 3. Search box inside the panel --- */
/* Replaced the jarring "black" with a color that matches the panel for a seamless look. */
body .select2-search--dropdown .select2-search__field {
    background-color: #1C1D1F !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Same border as main field */
    border-radius: 6px !important;
    color: var(--color-text) !important;
    margin: 8px;
    width: calc(100% - 16px);
}

/* --- 4. The list of countries --- */
body .select2-results__options {
    background-color: #1C1D1F !important;
}
body .select2-results__option {
    color: var(--color-text-muted) !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease;
}

/* --- 5. Hover and selected states --- */

/* Hover state remains the vibrant brand color, which is correct. */
body .select2-results__option--highlighted {
    background-color: #C4622D !important; /* Your theme's --color-primary */
    color: #FFFFFF !important;
}

/* Replaced the jarring "white" with a subtle, dark, on-brand color to show the current selection. */
body .select2-results__option[aria-selected="true"] {
    background-color: #C4622D !important; /* A subtle, dark, desaturated accent */
    color: var(--color-text) !important;
}

/*
=================================================================
    PART 2 ---> My Account Page Styling ("Accountgegevens")
=================================================================
*/

/* 1. Style the main form container for better layout */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* 2. Style the fieldsets (e.g., "Wachtwoord wijzigen") for clarity */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--color-border);
    padding: 25px;
    border-radius: 16px;
    margin: 0;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    padding: 0 15px;
    font-weight: 600;
    color: var(--color-text);
    font-size: 1.1rem;
}

/* 3. Style the address section that we merged */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
    border: 1px solid var(--color-border);
    padding: 25px;
    border-radius: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address header.woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address header.woocommerce-Address-title h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address header.woocommerce-Address-title .edit {
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address header.woocommerce-Address-title .edit:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: white;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    color: var(--color-text-muted);
    font-style: normal;
    line-height: 1.7;
}

/* 4. Ensure the save button has the correct primary styling */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button {
    background: var(--wc-button-primary-bg) !important;
    color: var(--wc-button-primary-text) !important;
    width: auto;
    justify-self: start; /* Align button to the left */
}

/*
=================================================================
    Remove Redundant "Nog geen account?" Paragraph for Logged-In Users
=================================================================
*/

/*
 * Hide the trailing paragraph on the My Account page when a user is logged in.
 * The paragraph duplicates the account prompt and should only be shown to guests.
 */
body.logged-in.woocommerce-account .entry-content > p:last-child {
    display: none !important;
}

/*
=================================================================
    FEATURE ---> Dismissible WooCommerce Notices
=================================================================
*/

/* 1. Make the notice a positioning container and add space for the button */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    position: relative;
    padding-right: 60px !important; /* Increased padding for a safe zone */
}

/* 2. Style the new close button */
.pt-notice-close-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: all 0.2s ease;
}

.pt-notice-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    opacity: 1;
    transform: translateY(-50%) rotate(90deg);
}

.pt-notice-close-btn .lucide {
    width: 22px;
    height: 22px;
}

/*
=================================================================
    AUTH-05 ---> Overhauled Login Form UI/UX (Styling Fixes)
=================================================================
*/

/* 0. Center Login Title */
.custom-login-form-wrapper .custom-account-form-title {
    text-align: center;
}

/* 1. New Options Row Container */
.custom-login-form .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

/* 2. Full-width Login Button */
.custom-login-form .form-actions {
    width: 100%;
	margin: 0 auto;
}
.custom-login-form .form-actions .button {
    width: 100%;
    text-align: center;
}

/* 3. Custom Checkbox Styling */
.custom-login-form .form-row.woocommerce-form-login__rememberme {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-login-form .woocommerce-form-login__rememberme input[type="checkbox"] {
    display: none;
}

.custom-login-form .woocommerce-form-login__rememberme label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-bg-secondary);
    margin-right: 12px;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.custom-login-form .woocommerce-form-login__rememberme input[type="checkbox"]:checked + label::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

.custom-login-form .woocommerce-form-login__rememberme label {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted) !important;
    font-size: 0.95rem;
    cursor: pointer;
}

/* 4. Lost Password Link */
.woocommerce-account .custom-login-form .lost_password a {
    color: var(--color-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.woocommerce-account .custom-login-form .lost_password a:hover {
    text-decoration: underline !important;
}

/* 5. Style Password Toggle */
/* Note: Input field borders are now handled by the general form styles at the top of this file. */

.woocommerce-form.woocommerce-form-login.login {
	border: none;
}

/* Password input wrapper for visibility toggle positioning */
.password-input {
    position: relative;
    display: block;
    width: 100%;
}

/* Custom Password Visibility Toggle Button */
.pt-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.pt-password-toggle:hover {
    opacity: 0.8;
}

.pt-password-toggle i,
.pt-password-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
    stroke: var(--color-secondary);
}

/* Ensure password input has padding for the toggle button */
.password-input input[type="password"],
.password-input input[type="text"] {
    padding-right: 45px !important;
}

/* Modal field password inputs also need the wrapper to be relative */
.modal-field .password-input {
    position: relative;
    display: block;
    width: 100%;
}

/* Password visibility toggle - teal green color for all instances */
.woocommerce-account .custom-login-form .password-input .show-password-input,
.show-password-input,
.password-input .show-password-input,
button.show-password-button,
.show-password-button {
    color: var(--color-secondary) !important;
    opacity: 1.0 !important;
	right: 15px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

/* Additional targeting for WooCommerce password visibility toggle */
.woocommerce .show-password-input::before,
.woocommerce-password-input .show-password-input::before {
    color: var(--color-secondary) !important;
}


/*
=================================================================
    INTERACTIVE CHECKOUT STYLING (v8 - Pure Custom HTML)
=================================================================
*/

/* --- Style the Registration Form Fields (Step 1) --- */
#pt-checkout-registration-form .form-field {
    margin-bottom: 20px;
}
#pt-checkout-registration-form .form-field label {
    display: block;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    font-size: 0.95rem;
}
#pt-checkout-registration-form .form-field input[type="text"],
#pt-checkout-registration-form .form-field input[type="email"],
#pt-checkout-registration-form .form-field input[type="password"],
#pt-checkout-registration-form .form-field select {
    width: 100%;
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    color: var(--color-text) !important;
    padding: 12px 16px !important;
    height: auto !important;
    transition: all 0.3s ease;
    -webkit-appearance: none; /* Removes default OS styling for select */
    -moz-appearance: none;
    appearance: none;
}

/* Custom dropdown arrow for select */
#pt-checkout-registration-form .form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A9A5B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px !important;
}

#pt-checkout-registration-form .form-field input:focus,
#pt-checkout-registration-form .form-field select:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.2) !important;
}

/* --- The Rest of the Layout Styling (Locking, etc.) --- */
/* This part is correct and remains the same */

#pt-checkout-payment-column #customer_details {
    display: none !important;
}

#pt-checkout-registration-column {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 24px;
    padding: 40px 50px;
    transition: opacity 0.5s ease, filter 0.5s ease;
}

#pt-checkout-registration-column.is-complete {
    opacity: 0.6;
    filter: grayscale(50%);
    pointer-events: none;
}

#pt-checkout-payment-column {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
}

.payment-locked-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    backdrop-filter: blur(8px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: var(--color-text);
    transition: opacity 0.5s ease, visibility 0s 0s;
    opacity: 1;
    visibility: visible;
}

.is-unlocked .payment-locked-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

#woocommerce-checkout-payment-wrapper {
    transition: opacity 0.5s ease 0.2s;
}

.is-locked #woocommerce-checkout-payment-wrapper {
    opacity: 0;
    visibility: hidden;
}

#pt-checkout-payment-column #order_review {
    background: transparent;
    border: none;
    padding: 40px 50px;
    position: static;
}

/*
=================================================================
    FEATURE ---> Standardized & Dismissible Notices
=================================================================
*/

/* 1. Base notice container */
.pt-custom-notice {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 60px 20px 25px !important;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.pt-custom-notice-icon-wrapper {
    flex-shrink: 0;
}

.pt-custom-notice-icon-wrapper .lucide {
    width: 28px;
    height: 28px;
    stroke-width: 2.5px;
}

.pt-custom-notice-message {
    font-weight: 500;
    color: var(--color-text);
}
.pt-custom-notice-message a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* 2. Style per notice type */
.pt-notice--success {
    background-color: rgba(196, 154, 45, 0.1);
    border: 1px solid rgba(196, 154, 45, 0.3);
}
.pt-notice--success .pt-custom-notice-icon-wrapper {
    color: var(--color-secondary);
}

.pt-notice--error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.pt-notice--error .pt-custom-notice-icon-wrapper {
    color: var(--color-error, #ef4444);
}

.pt-notice--info {
    background-color: rgba(196, 98, 45, 0.1);
    border: 1px solid rgba(196, 98, 45, 0.3);
}
.pt-notice--info .pt-custom-notice-icon-wrapper {
    color: var(--color-primary);
}

/* 3. Style the close button ("Twirly X") */
.pt-notice-close-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.pt-notice-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    opacity: 1;
    transform: translateY(-50%) rotate(90deg); /* The "twirly" effect */
}

.pt-notice-close-btn .lucide {
    width: 22px;
    height: 22px;
}