/* --- WooCommerce My Account Page Tab Styling --- */

/* Initially hide the default WooCommerce columns. JS will reveal them in tabs. */
/* If you use the PHP hook to add inline <style>, this CSS rule can be a fallback or removed,
   but having it here ensures they are hidden even if JS is slow or PHP hook isn't used. */
body.woocommerce-account #customer_login {
    display: none; /* Hidden by default, JS will manage visibility within tabs */
}

/* Tab Navigation */
.my-account-tabs-container {
    max-width: 700px; /* Adjust as needed */
    margin: 20px auto; /* Center the tabs */
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden; /* Contains floats and rounded corners */
}

ul.my-account-tabs-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 1px solid #ddd;
}

ul.my-account-tabs-nav li {
    flex-grow: 1;
    margin: 0;
}

ul.my-account-tabs-nav li a.tab-nav-link {
    display: block;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    color: #333;
    background-color: #f9f9f9;
    border-right: 1px solid #ddd;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

ul.my-account-tabs-nav li:last-child a.tab-nav-link {
    border-right: none;
}

ul.my-account-tabs-nav li a.tab-nav-link:hover {
    background-color: #f0f0f0;
}

ul.my-account-tabs-nav li a.tab-nav-link.active-tab {
    background-color: #fff;
    color: #063E70; /* Active tab color */
    border-bottom-color: #fff; /* Makes it look like tab is part of content */
    position: relative;
    top: 1px; /* Slight lift to blend with content area */
    margin-bottom: -1px; /* Pulls content border up */
}

/* Tab Content Panes */
.my-account-tabs-content {
    padding: 25px;
}

.my-account-tab-pane {
    display: none; /* Hidden by default */
}

.my-account-tab-pane.active-tab-content {
    display: block; /* Show active tab content */
}

/* --- Styling WooCommerce Forms (Login & Register) --- */

/* General Form Styling within tabs */
.my-account-tab-pane .woocommerce-form h2 {
    font-size: 1.8em;
    color: #1A5991;
    margin-bottom: 20px;
    text-align: left; /* Or center if you prefer */
}

.my-account-tab-pane .woocommerce-form p.form-row,
.my-account-tab-pane .woocommerce-form p.woocommerce-form-row {
    margin-bottom: 18px;
    padding: 0; /* Reset default WC padding if any */
}

.my-account-tab-pane .woocommerce-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    color: #333;
}

.my-account-tab-pane .woocommerce-form .required {
    color: red;
}

/* Input fields, textarea, select */
.my-account-tab-pane .woocommerce-form .woocommerce-Input,
.my-account-tab-pane .woocommerce-form .input-text, /* Generic WC class */
.my-account-tab-pane .woocommerce-form input[type="text"],
.my-account-tab-pane .woocommerce-form input[type="email"],
.my-account-tab-pane .woocommerce-form input[type="password"],
.my-account-tab-pane .woocommerce-form input[type="tel"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    height: auto; /* Override WC sometimes fixed height */
}

/* Checkbox styling */
.my-account-tab-pane .woocommerce-form .form-row label.woocommerce-form__label-for-checkbox {
    display: inline-flex; /* Align checkbox and text nicely */
    align-items: center;
    font-weight: normal;
}
.my-account-tab-pane .woocommerce-form .form-row input[type="checkbox"].woocommerce-form__input-checkbox {
    width: auto; /* Don't make checkbox full width */
    margin-right: 8px;
}

/* Submit Buttons */
.my-account-tab-pane .woocommerce-form .woocommerce-Button,
.my-account-tab-pane .woocommerce-form button[type="submit"] {
    /* Using similar styles to .button-def from main-logged-out.css */
    appearance: none;
    background-color: #1a5991;
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    font-size: 16px; /* Increased font size */
    font-weight: 600;
    line-height: 20px;
    padding: 10px 20px; /* Adjusted padding */
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    width: auto; /* Don't make button full width by default, unless specifically needed */
}

.my-account-tab-pane .woocommerce-form .woocommerce-Button:hover,
.my-account-tab-pane .woocommerce-form button[type="submit"]:hover {
    background-color: #333;
}

/* Lost password link */
.my-account-tab-pane .woocommerce-form .woocommerce-LostPassword {
    margin-top: 15px;
    font-size: 0.9em;
}

/* Approval note */
.my-account-tab-pane .woocommerce-form .woocommerce-register-approval-note {
    font-size: 0.9em;
    color: #555;
    border: 1px dashed #ddd;
    padding: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}