/* Universal Font Application */
body,
.b2b-auth-container,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    font-family: 'Gotham WOFF2', sans-serif;
    color: #333; /* Default text color */
}

/* Main container for the forms & My Account */
.b2b-auth-container,
.woocommerce-MyAccount-wrapper { /* Add this class here for consistent styling */
    max-width: 1440px; /* **Increased width for a wider view** */
    margin: 30px auto; /* Centers the container */
    padding: 30px; /* Increased padding */
    border: none; /* No default border */
    box-shadow: 0 0 75px 5px rgba(0,0,0,.1); /* Requested shadow */
    background-color: #fff;
    border-radius: 15px; /* Slightly rounded corners for the container */
    box-sizing: border-box;
}

/* Tabs for Login/Register */
.b2b-auth-tabs {
    display: flex;
    margin-bottom: 30px; /* More space */
    border-bottom: 1px solid #eee; /* Lighter separator */
}

.b2b-auth-tabs a {
    flex: 1;
    text-align: center;
    padding: 15px 20px; /* Increased padding */
    text-decoration: none;
    color: #555;
    font-weight: bold;
    border: none; /* No border for tabs */
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s, border-bottom 0.3s;
    border-radius: 0; /* No radius on tabs for clean line */
    text-transform: uppercase; /* Modern touch */
    letter-spacing: 1px;
}

.b2b-auth-tabs a:hover {
    color: #D7002E; /* Hover color */
}

.b2b-auth-tabs a.active {
    color: #232526; /* Active tab text color */
    border-bottom: 3px solid #D7002E; /* Active tab indicator */
}

/* Form Styling */
.b2b-auth-form {
    padding: 10px 0;
}

.b2b-auth-form h2 {
    text-align: center;
    color: #232526; /* Darker heading */
    margin-bottom: 30px; /* More space */
    font-size: 1.8em; /* Larger heading */
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.b2b-ajax-form p {
    margin-bottom: 20px; /* More space between fields */
}

.b2b-ajax-form label {
    display: block;
    margin-bottom: 12px; /* More space for labels */
    font-weight: normal; /* Lighter font weight */
    color: #555;
    font-size: 0.95em;
}

.checkbox-text {
    margin-bottom: 0px !important;
}

.login-remember, .checkbox-group {
    display: flex;
  justify-content: center;
  align-content: center;
}

/* Input Fields (Text, Email, Tel, Select, Textarea) - password input is handled separately below */
.b2b-ajax-form input[type="text"],
.b2b-ajax-form input[type="email"],
.b2b-ajax-form input[type="tel"],
.b2b-ajax-form input[type="password"],
.b2b-ajax-form select,
.b2b-ajax-form textarea {
    width: 100%;
    padding: 12px 20px; /* Increased padding */
    border: 1px solid #ccc; /* Default border */
    border-radius: 9999px; /* Fully rounded/pill shape */
    box-sizing: border-box;
    font-size: 1em;
    background-color: #F8F8F8; /* Light gray background */
    color: #333; /* Text color inside input */
    transition: border-color 0.3s, box-shadow 0.3s;
    -webkit-appearance: none; /* Remove default browser styling for inputs/selects */
    -moz-appearance: none;
    appearance: none;
}

/* Password field wrapper and toggle icon */
.password-field-wrapper {
    position: relative;
    display: block; /* Ensures it takes full width */
    width: 100%; /* Important for consistent width */
}

.password-field-wrapper input[type="password"],
.password-field-wrapper input[type="text"] { /* Style input within wrapper */
    width: 100%;
    padding: 12px 45px 12px 20px; /* Increased right padding for icon */
    border: 1px solid #ccc;
    border-radius: 9999px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: #F8F8F8;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #777;
    font-size: 1.2em; /* Adjust icon size */
    z-index: 2; /* Ensure it's above the input */
}

/* Specific styling for birthday select fields */
.b2b-ajax-form .birthday-selects .birthday-fields-wrapper {
    display: flex; /* Use flexbox to put selects inline */
    gap: 15px; /* Space between select boxes */
    /* Removed flex-wrap: wrap; for consistently inline on desktop, let media query handle stacking */
}
.b2b-ajax-form .birthday-selects .birthday-fields-wrapper select {
    flex: 1; /* Each select takes equal space */
    width: auto; /* Override default width for flex item */
    margin-right: 0; /* Remove old margin-right */
    /* Ensure they stay in a line for larger screens, but don't grow excessively */
    max-width: calc(33.33% - 10px); /* Approx 1/3 width minus gap */
}


/* Textarea specific styling */
.b2b-ajax-form textarea {
    border-radius: 15px; /* Rounded corners for textarea, not fully pill */
    min-height: 100px; /* Min height for message box */
    resize: vertical; /* Allow vertical resize */
}

/* Input focus state */
.b2b-ajax-form input[type="text"]:focus,
.b2b-ajax-form input[type="email"]:focus,
.b2b-ajax-form input[type="tel"]:focus,
.b2b-ajax-form .password-field-wrapper input:focus, /* Apply focus to input within wrapper */
.b2b-ajax-form select:focus,
.b2b-ajax-form textarea:focus {
    border-color: #333; /* Darker border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.2); /* Subtle glow on focus */
}

/* Checkbox specific styling (Terms & GDPR) */
.b2b-ajax-form input[type="checkbox"] {
    width: auto; /* Allow checkbox to be natural width */
    padding: 0;
    margin-right: 10px; /* Space between checkbox and label text */
    border-radius: 4px; /* Slightly rounded checkbox */
    -webkit-appearance: checkbox; /* Ensure standard checkbox appearance */
    -moz-appearance: checkbox;
    appearance: checkbox;
    vertical-align: middle; /* Align checkbox vertically with text */
    min-width: 16px; /* Ensure a minimum size */
    min-height: 16px; /* Ensure a minimum size */
}

/* Make the checkbox and its text appear inline and aligned */
.b2b-ajax-form p.checkbox-group label {
    display: flex; /* Use flexbox to align checkbox and text */
    align-items: center; /* Vertically center them */
    font-weight: normal;
    font-size: 0.9em;
    color: #555;
}

/* Adjust link styling within the checkbox text */
.b2b-ajax-form p.checkbox-group a {
    color: #D7002E; /* Link color for terms/GDPR */
    text-decoration: none;
    font-weight: bold;
    margin-left: 5px; /* Add slight space between text and link */
    margin-right: 5px; /* Add slight space between text and link */
}
.b2b-ajax-form p.checkbox-group a:hover {
    text-decoration: underline;
}

.b2b-ajax-form small {
    display: block;
    margin-top: 8px; /* More space */
    color: #777;
    font-size: 0.8em;
    line-height: 1.4;
}

/* Buttons (Submit, Send Code, Verify Code) */
.b2b-ajax-form button[type="submit"],
.b2b-ajax-form button.button,
.woocommerce-MyAccount-content .woocommerce-button { /* Apply to WC buttons too */
    background-color: #232526; /* Standard button background */
    color: #fff;
    padding: 12px 25px; /* Increased padding */
    border: none;
    border-radius: 9999px; /* Fully rounded/pill shape */
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block; /* For proper spacing */
    text-align: center;
}

/* Loading state for buttons */
.b2b-ajax-form button.loading {
    opacity: 0.7;
    cursor: wait;
}

.b2b-ajax-form button[type="submit"]:hover:not(:disabled),
.b2b-ajax-form button.button:hover:not(:disabled),
.woocommerce-MyAccount-content .woocommerce-button:hover:not(:disabled) {
    background-color: #D7002E; /* Hover color */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Subtle lift effect */
}

.b2b-ajax-form button[type="submit"]:disabled,
.b2b-ajax-form button.button:disabled,
.woocommerce-MyAccount-content .woocommerce-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* Specific button placements */
.login-submit, .register-submit, .forgot-password-submit {
    text-align: center;
    margin-top: 30px; /* More space above buttons */
}

.login-lost-password, .forgot-password-back-to-login {
    text-align: center;
    margin-top: 20px;
}

.login-lost-password a, .forgot-password-back-to-login a {
    color: #555;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s;
}
.login-lost-password a:hover, .forgot-password-back-to-login a:hover {
    color: #D7002E;
}


/* Message Boxes (Success, Error, Info) */
.b2b-auth-messages,
.email-verification-status {
    margin-bottom: 20px;
    padding: 15px 25px;
    border-radius: 9999px; /* Fully rounded/pill shape */
    display: none; /* These are controlled by JS */
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
}

/* Styles for WooCommerce's own messages (should be visible by default) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    margin-bottom: 20px;
    padding: 15px 25px;
    border-radius: 9999px; /* Fully rounded/pill shape */
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
    display: block !important; /* Ensure these are always visible unless specifically hidden by other means */
}

/* Ensure messages inside p tags don't break the border-radius */
.b2b-auth-messages p,
.email-verification-status p {
    margin: 0;
    display: inline; /* Keep text on one line with no extra margins */
}
/* Ensure p tags within WooCommerce messages don't break their parent's border-radius either */
.woocommerce-message p,
.woocommerce-error p,
.woocommerce-info p {
    margin: 0;
    display: inline;
}


.b2b-auth-messages .success,
.email-verification-status .success,
.woocommerce-message {
    background-color: #e6ffe6; /* Lighter green */
    color: #1a6d1a; /* Darker green text */
    border: 1px solid #a6e3a6; /* Green border */
}

.b2b-auth-messages .error,
.email-verification-status .error,
.woocommerce-error {
    background-color: #ffe6e6; /* Lighter red */
    color: #8c0000; /* Darker red text */
    border: 1px solid #e3a6a6; /* Red border */
}

.b2b-auth-messages .info,
.email-verification-status .info {
    background-color: #e6f7ff; /* Lighter blue */
    color: #005c99; /* Darker blue text */
    border: 1px solid #a6d9e3; /* Blue border */
}


/* Email Verification Section */
.email-verification-section {
    padding: 20px 0;
    border-top: 1px solid #eee;
    margin-top: 25px;
    text-align: center; /* Center the buttons */
}

.email-send-code button,
.email-verification-code-field button {
    margin-top: 10px; /* Space between input and button */
}

.email-verification-code-field input {
    width: 100px; /* Smaller width for code input */
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px; /* Space between input and verify button */
}

/* --- WooCommerce My Account Specific Styling --- */

/* My Account Navigation */
.woocommerce-MyAccount-navigation {
    padding: 0;
    list-style: none; /* Remove default list style */
    margin-bottom: 30px; /* Space below navigation */
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation li {
    margin-bottom: 10px; /* Space between nav items */
}

.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 12px 20px;
    background-color: #F8F8F8; /* Light background for nav items */
    border-radius: 9999px; /* Pill shape for nav items */
    text-decoration: none;
    color: #555;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.woocommerce-MyAccount-navigation a:hover {
    background-color: #ebebeb; /* Slightly darker hover */
    color: #D7002E; /* Red on hover */
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.is-active a:hover {
    background-color: #D7002E; /* Active tab background */
    color: #fff; /* Active tab text */
}

/* My Account Content Area */
.woocommerce-MyAccount-content {
    /* Styles from .b2b-auth-container apply if you wrap it in that class */
    padding: 20px 0; /* Adjust padding within content area */
}

/* General table styling within My Account */
.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    border-radius: 10px; /* Slightly rounded table corners */
    overflow: hidden; /* Ensures border-radius applies to content */
}

.woocommerce-MyAccount-content table.shop_table thead {
    background-color: #232526; /* Dark header background */
    color: #fff;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
    padding: 15px;
    border: 1px solid #eee;
    text-align: left;
}

.woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
}

.woocommerce-MyAccount-content table.shop_table tbody tr:hover {
    background-color: #f0f0f0; /* Hover row highlight */
}

/* My Account forms (e.g., Address edit, Account details) */
.woocommerce-MyAccount-content .woocommerce-form-row label {
    font-weight: normal;
    color: #555;
}

.woocommerce-MyAccount-content .woocommerce-form-row input.input-text,
.woocommerce-MyAccount-content .woocommerce-form-row select {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 9999px; /* Pill shape for WC form inputs */
    background-color: #F8F8F8;
    color: #333;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.woocommerce-MyAccount-content .woocommerce-form-row input.input-text:focus,
.woocommerce-MyAccount-content .woocommerce-form-row select:focus {
    border-color: #333;
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.2);
}

.woocommerce-MyAccount-content .form-row.form-row-first,
.woocommerce-MyAccount-content .form-row.form-row-last {
    width: calc(50% - 10px); /* For side-by-side fields */
    float: left;
    margin-right: 20px;
}
.woocommerce-MyAccount-content .form-row.form-row-last {
    margin-right: 0;
}
.woocommerce-MyAccount-content .clear {
    clear: both;
}

/* Specific styling for password change forms */
.woocommerce-MyAccount-content .woocommerce-form-row--wide {
    width: 100%;
    clear: both;
}

/* Adjust button placement for My Account forms */
.woocommerce-MyAccount-content button[type="submit"] {
    margin-top: 20px;
    display: block; /* Make submit button full width for forms */
    width: auto; /* Revert width */
    margin-left: auto;
    margin-right: auto;
}

/* Styling for messages (e.g., "Hello Israel Karapetyan...") */
.woocommerce-MyAccount-content p:first-child {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #333;
}
.woocommerce-MyAccount-content a {
    color: #D7002E; /* Consistent link color */
    text-decoration: none;
    font-weight: bold;
}
.woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* --- Addresses Tab Specific Styling --- */
/* Ensure address columns are side-by-side and well-spaced */
.woocommerce-MyAccount-content .woocommerce-Addresses.addresses {
    display: flex; /* Use flexbox for the main address container */
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 30px; /* Space between address columns */
    justify-content: space-between; /* Distribute space between columns */
    margin-top: 20px; /* Space below the "Addresses" title */
}

.woocommerce-MyAccount-content .woocommerce-Address {
    flex: 1 1 calc(50% - 15px); /* Each address column takes about half width with gap */
    box-sizing: border-box; /* Include padding/border in width calculation */
    padding: 20px; /* Add some padding around the address box */
    border: 1px solid #eee; /* Light border for definition */
    border-radius: 10px; /* Rounded corners for the address boxes */
    background-color: #fdfdfd; /* Slightly different background */
    display: flex; /* Flex container for content inside each address box */
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align content to the start */
}

.woocommerce-MyAccount-content .woocommerce-Address h3 {
    font-size: 1.3em;
    color: #232526;
    margin-bottom: 15px; /* Space below address type heading */
    width: 100%; /* Ensure heading takes full width */
    text-align: left;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
    font-style: normal; /* Remove italic from address tag */
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px; /* Space between address and edit button */
    flex-grow: 1; /* Allow address text to take available space */
}

.woocommerce-MyAccount-content .woocommerce-Address .edit {
    display: inline-block; /* Make the edit button a block */
    margin-top: auto; /* Push the button to the bottom if address content varies */
}

.woocommerce-MyAccount-content .woocommerce-Address .edit a {
    background-color: #D7002E; /* Red button for edit */
    color: #fff;
    padding: 8px 15px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s;
    font-size: 0.9em;
}

.woocommerce-MyAccount-content .woocommerce-Address .edit a:hover {
    background-color: #a30022; /* Darker red on hover */
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .b2b-auth-container,
    .woocommerce-MyAccount-wrapper {
        padding: 20px;
        margin: 15px auto;
        max-width: 95%; /* Adjust for smaller screens */
    }
    .b2b-auth-tabs a {
        padding: 12px 10px;
        font-size: 0.9em;
    }
    /* Birthday fields stack on small screens */
    .b2b-ajax-form .birthday-selects .birthday-fields-wrapper {
        flex-direction: column;
        gap: 10px;
    }
    .b2b-ajax-form .birthday-selects .birthday-fields-wrapper select {
        width: 100%;
        max-width: none; /* Remove max-width when stacking */
    }
    .woocommerce-MyAccount-content .form-row.form-row-first,
    .woocommerce-MyAccount-content .form-row.form-row-last {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    /* Addresses stack on small screens */
    .woocommerce-MyAccount-content .woocommerce-Addresses.addresses {
        flex-direction: column;
        gap: 20px;
    }
    .woocommerce-MyAccount-content .woocommerce-Address {
        flex: 1 1 100%; /* Each address takes full width */
    }
}