/**
 * File: woocommerce-pages.css
 * Description: Custom styles for WooCommerce pages (cart, checkout, account).
 * Version: 1.1.8
 * Last Modified: 2025-06-26
 
 * ===========================================
 * Table of Contents:
 * ===========================================
 * 1. Global Button Styles
 *    - All WooCommerce Buttons: Rounded Corners & Hover Effects
 *    - Proceed to Checkout & Place Order: Font Size & Padding
 *
 * 2. Cart Page Styles
 *    - Proceed to Checkout Button
 *    - Apply Coupon Button
 *    - Update Cart Button
 *
 * 3. Account Page Styles
 *    - Login & Register Buttons
 *
 * 4. Checkout Page Styles
 *    - Headings & Labels
 *    - Checkout Fields
 *    - Buttons
 *    - Table & Layout
 *    - Payment Section
 */

/* ===========================================
 * 1. Global Button Styles
 * =========================================== */

/**
 * Apply rounded corners and hover effect to all WooCommerce buttons
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .woocommerce-Button.button,
.woocommerce .woocommerce-Button {
    border-radius: 6px !important; /* Apply rounded corners */
    background-color: var(--base) !important;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover state: Change background color to --base */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .woocommerce-Button.button:hover,
.woocommerce .woocommerce-Button:hover {
   background-color: var(--contrast) !important; /* Change to --base color on hover */
   color: #fff !important; /* Ensure text color remains white on hover */
}

/*
 * Increase font size & padding for BOTH Proceed to Checkout (Cart) AND Place Order (Checkout)
 */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order.button.alt {
    font-size: 1.5em !important;  /* Larger text with !important override */
    padding: 0.5em !important;    /* Increase overall button size */
}

/* ===========================================
 * 2. Cart Page Styles
 * =========================================== */

/* CSS to make the "Proceed to checkout" button have rounded corners */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    border-radius: 12px; /* Adjust the px value for more or less roundness */
}

/* CSS to style the "Apply coupon" button with reversed global colors and rounded corners */
.woocommerce-cart .coupon .button {
    background-color: var(--contrast) !important; /* Set the background to the global --contrast color */
    color: #fff; /* Set the text color to white for better contrast */
    border-radius: 6px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    padding: 10px 20px; /* Add some padding for better button size */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer for button */
}

.woocommerce-cart .coupon .button:hover {
    background-color: var(--base) !important; /* Set the background color to global --base color on hover */
    color: #fff; /* Keep the text color white on hover */
}

/* Style for "Update cart" button with reversed colors and white initial text */
.woocommerce-cart .button[name="update_cart"] {
    background-color: var(--contrast); /* Reversed to use --contrast as default background */
    color: #fff; /* Ensure text is white for good contrast */
    border-radius: 6px; /* Rounded corners */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover and opacity */
    padding: 10px 20px; /* Adjust padding for better size */
    border: none; /* Remove border */
    cursor: pointer; /* Pointer for button */
    opacity: 0.6; /* Default opacity when no updates are needed */
}

.woocommerce-cart .button[name="update_cart"]:hover {
    background-color: var(--base); /* Hover state: use --base color for background */
    color: #fff; /* Ensure text remains white on hover */
    opacity: 1; /* Remove opacity on hover */
}

/* Ensure the text is always white initially */
.woocommerce-cart .button[name="update_cart"]:disabled {
    color: #fff; /* Text remains white even when disabled */
}

/* Remove opacity when there is something to update */
.woocommerce-cart .button[name="update_cart"]:enabled {
    opacity: 1; /* Full opacity when updates are needed */
}

/* ===========================================
 * 3. Account Page Styles
 * =========================================== */

/* CSS to style the login and register buttons with rounded corners */
.woocommerce-form-login .button.woocommerce-button,
.woocommerce-form-register .button.woocommerce-button {
    background-color: var(--contrast); /* Set initial background to --contrast */
    color: #fff; /* Text color set to white */
    border-radius: 6px; /* Rounded corners */
    padding: 10px 20px; /* Adjust padding for a better button size */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer for button */
}

.woocommerce-form-login .button.woocommerce-button:hover,
.woocommerce-form-register .button.woocommerce-button:hover {
    background-color: var(--base); /* Hover state: change background to --base */
    color: #fff; /* Keep text color white on hover */
}

/* ===========================================
 * 4. Checkout Page Styles
 * =========================================== */

/**
 * Headings & Labels
 */
 
/**
 * Heading (h3) Styling
 */
h3 {
    font-weight: 500 !important; /* Set font weight */
    font-size: 26px !important; /* Set font size */
}

/**
 * Field Label/Title Styling
 */
.woocommerce form .form-row label {
    line-height: 2.2; /* Increase line height for better spacing */
    font-size: 17px; /* Adjust font size */
    font-weight: 700; /* Make field titles bold */
    color: #333; /* Adjust color to match design */
}

/**
 * Buttons
 */

/**
 * Place Order Button Styling
 */
 
.woocommerce-page #place_order.button.alt {
    border-radius: 12px; /* Adjust the px value for more or less roundness */
}

/**
 * Province Dropdown Field Styling
 */

.woocommerce-checkout .select2-container .select2-selection--single {
    height: 48px !important; /* Match the height of other input fields */
    line-height: 48px !important; /* Vertically align the placeholder text */
    padding: 0 10px !important; /* Ensure proper padding */
    display: flex !important; /* Ensure proper alignment */
    align-items: center !important; /* Center the placeholder text vertically */
    box-sizing: border-box; /* Ensure consistent sizing */
}

.woocommerce-checkout .select2-container .select2-selection__rendered {
    padding-left: 10px !important; /* Ensure proper padding for the placeholder */
    line-height: 48px !important; /* Ensure the text is vertically centered */
    color: #999 !important; /* Color for the placeholder */
    white-space: nowrap !important; /* Prevent text wrapping */
}

.woocommerce-checkout .select2-container .select2-selection__arrow {
    height: 48px !important; /* Ensure the arrow matches the height */
    top: 10px !important; /* Adjust arrow positioning */
}

/**
 * Checkout Fields
 */

/**
 * Fields Styling (Inputs, Textareas, Selects)
 */

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1px solid #dedee5; /* Apply 1px border to all input fields */
    padding: 12px 15px; /* Add padding for a clean look */
    border-radius: 4px; /* Add rounded corners */
    width: 100%; /* Make the inputs full width */
    box-sizing: border-box; /* Ensure padding doesn't affect total width */
    background-color: #fff; /* Background color */
    font-size: 16px; /* Font size for consistency */
    color: #333; /* Input text color */
}

/**
 * Input Hover & Focus State
 */

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #0066cc; /* Change border color on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.5); /* Add a subtle glow effect */
}

/**
 * Placeholder Styling
 */

.woocommerce-checkout input[type="text"]::placeholder,
.woocommerce-checkout input[type="email"]::placeholder,
.woocommerce-checkout input[type="tel"]::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: #999; /* Lighter color for placeholders */
    font-size: 14px; /* Font size for placeholders */
}

/**
 * Error State for Fields
 */
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid textarea {
    border-color: tomato; /* Red border on error */
}

/**
 * Table & Layout
 */

/**
 * Table Borders
 */
.woocommerce-checkout #order_review table {
    border: 1px solid #dedee5; /* Border for the order review table */
    width: 100%; /* Full width table */
    border-collapse: collapse; /* Remove gaps between cells */
}

.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td {
    border: 1px solid #dedee5; /* Border for each cell */
    padding: 10px; /* Add padding for a clean look */
}

.woocommerce-checkout #order_review table th {
    background-color: #f9f9f9; /* Light background for table header */
}

/**
 * Checkout Button Styling
 */
.woocommerce-checkout #place_order {
    background-color: #0071a1; /* Button background color */
    color: #fff; /* White text on the button */
    border: none; /* Remove border */
    border-radius: 4px; /* Rounded corners */
    padding: 15px 30px; /* Add padding to the button */
    cursor: pointer; /* Pointer cursor */
    font-size: 18px; /* Font size for the button */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.woocommerce-checkout #place_order:hover {
    background-color: #005a80; /* Darker background on hover */
}

/**
 * Payment Section
 */

/**
 * Payment Methods Container
 */
.wc_payment_methods.payment_methods.methods {
    border: 1px solid #dedee5 !important; /* Apply a border around payment methods section */
    padding: 20px !important; /* Add padding inside the section */
    padding-bottom: 20px !important; /* Add space below the payment methods section */
    border-radius: 4px; /* Rounded corners */
    background-color: #f7f7f7 !important; /* Light grey background for the entire section */
    margin-bottom: 20px !important; /* Add margin below the section to ensure spacing */
}

/**
 * Inactive Payment Method Styling
 */
#payment .payment_methods>.wc_payment_method>label {
    background-color: #f7f7f7 !important; /* Light grey background for inactive methods */
    padding: 15px !important; /* Ensure consistent padding for each method */
    border-radius: 4px; /* Rounded corners */
    border: 1px solid transparent; /* No visible border for inactive methods */
}

/**
 * Active Payment Method Styling
 */
.wc_payment_method input[type="radio"]:checked + label {
    background-color: #e0e0e0 !important; /* Darker grey background for the active payment method */
    border: 1px solid #0066cc !important; /* Blue border for the active method */
    padding: 15px !important; /* Padding for active method */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for the active method */
}

/**
 * Payment Box (Additional Info)
 */
.woocommerce-checkout-payment .payment_box {
    margin-top: 10px; /* Add space above the payment box */
    padding: 10px 15px !important; /* Add padding inside the payment box */
    border: 1px solid #dedee5 !important; /* Restore border for the payment box */
    background-color: #ffffff !important; /* White background for the payment box */
    border-radius: 4px; /* Rounded corners for the payment box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Add subtle shadow to make it stand out */
}

/* Remove Borders and Background for Place Order Section */
.woocommerce-checkout .form-row.place-order {
    background: none !important; /* Remove background */
    border: none !important; /* Remove any borders */
    padding: 0; /* Remove extra padding */
}

/**
 * Terms and Conditions Wrapper
 */
.woocommerce-terms-and-conditions-wrapper {
    padding: 15px 0; /* Padding for top and bottom */
}

/**
 * Remove Borders/Background for Place Order Section
 */
.woocommerce-checkout .form-row.place-order {
    background: none !important; /* Remove background */
    border: none !important; /* Remove borders */
    padding: 0; /* Remove extra padding */
}

/**
 * Custom Checkout Layout Styles (from hook-custom-checkout-layout.php)
 */

 /* Style for the custom payment method titles */
 .custom-payment-title {
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 10px;
 }

 /* Style for the horizontal line divider between payment groups */
 .payment-divider {
     margin: 20px 0;
     border: 0;
     height: 1px;
     background-color: #ddd;
 }

 /**
 * Privacy Policy Text Removal
 */
  div.woocommerce-privacy-policy-text {
     display: none !important;
  }