/*
 * Inflow Unified Registration Tabbed Interface Styles
 */

.inflow-registration-container {
    max-width: 1000px; /* Wider to accommodate sidebar */
    margin: 2em auto;
    padding: 2em;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 14px;
}

/* Flex Wrapper for Two-Column Layout */
.inflow-reg-flex-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.inflow-reg-form-col {
    flex: 1;
    min-width: 0; /* Prevent overflow */
}

.inflow-reg-sidebar-col {
    width: 350px;
    padding: 20px;
    background: #fdfdfd;
    border-left: 1px solid #eee;
    font-size: 0.95em;
    color: #666;
}

/* Sidebar Image Styling */
.inflow-reg-sidebar-col img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.inflow-reg-sidebar-col h1, 
.inflow-reg-sidebar-col h2, 
.inflow-reg-sidebar-col h3 {
    font-size: 1.2em;
    margin-top: 0;
    color: #333;
}

/* Tab Buttons */
.inflow-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.5em;
}

.inflow-tab-link {
    border: none;
    background: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.inflow-tab-link:hover {
    color: #000;
}

.inflow-tab-link.active {
    color: #000;
    border-bottom-color: #0056b3; /* Or your theme's primary color */
}

/* Tab Content */
.inflow-tab-content {
    display: none; /* Hide by default */
    background: #fff !important;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Ensure the WCFM registration form itself is transparent/white */
#wcfm_membership_registration_form, 
#wcfm_membership_container {
    background: #fff !important;
}

.inflow-tab-content.active {
    display: block;
}

/* General Form Styling */
.inflow-tab-content h3 {
    margin-top: 0;
    margin-bottom: 1em;
    font-weight: 600;
}

.inflow-tab-content .form-row,
.inflow-tab-content .wcfm-ele {
    padding: 0;
    margin: 0 0 16px;
}

.inflow-tab-content .form-row label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

#seller-register .wcfm_title {
    font-weight: normal; /* This will make the seller form labels normal weight */
    margin-bottom: 5px;
    display: block;
}

/* Unified Input & Select Fields Styling - 100% within the 60% column */
.inflow-tab-content .input-text,
.inflow-tab-content select,
.inflow-tab-content .wcfm-text,
.inflow-tab-content .wcfm-select {
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    border: 1px solid #ddd !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* Unified Button Styling */
.inflow-tab-content .button,
.inflow-tab-content .wcfm_submit_button {
    width: auto;
    padding: 10px 20px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hide WCFM's own header */
#wcfm_membership_registration_form .wcfm_membership_registration_head {
    display: none;
}
.wcfm_product_type { display: none !important; }

/* --- CONTAINER-BASED UNIFICATION FOR SELLER TAB --- */

/* 1. Hide Titles in Registration Container (All Tabs) */
.inflow-registration-container .inflow-tab-content h1,
.inflow-registration-container .inflow-tab-content h2, 
.inflow-registration-container .inflow-tab-content h3,
.inflow-registration-container .inflow-tab-content h4,
.inflow-registration-container .inflow-tab-content h5,
.inflow-registration-container .inflow-tab-content .wcfm_membership_registration_head,
.inflow-registration-container .inflow-tab-content .wcfm-page-headig,
.inflow-registration-container .inflow-tab-content .u-column1 h2, /* WooCommerce Login */
.inflow-registration-container .inflow-tab-content .u-column2 h2 { /* WooCommerce Register */
    display: none !important;
}

/* Ensure white background for the whole tab and its children - Super Aggressive */
#login,
#buyer-register,
#seller-register,
#seller-register .wcfm-collapse,
#seller-register .wcfm-container,
#seller-register .wcfm-content,
#wcfm_membership_container,
#wcfm_membership_registration_form,
#wcfm_membership_registration_form_wrapper {
    background-color: #fff !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* 2. Unified Labels & Inputs - 17px, Normal Weight (400), Softer Color */
.inflow-registration-container #seller-register label,
.inflow-registration-container #seller-register .wcfm_title,
.inflow-registration-container #seller-register .wcfm-text,
.inflow-registration-container #seller-register .wcfm-select,
.inflow-registration-container #seller-register input:not([type="submit"]):not([type="button"]),
.inflow-registration-container #seller-register select {
    font-size: 17px !important;
    font-weight: 400 !important; /* Standard weight */
    color: #555 !important; /* Soften the black to reduce visual heaviness */
    font-family: 'Mulish', sans-serif !important;
}

/* 3. Maintain Box Integrity & Button Spacing */
#seller-register .wcfm-text,
#seller-register .wcfm-select,
#seller-register input[type="text"],
#seller-register input[type="email"],
#seller-register input[type="password"],
#seller-register select {
    height: 40px !important;
    width: 100% !important;
    border-radius: 14px !important;
}

/* Push button down */
#seller-register .wcfm_submit_button,
#seller-register .button {
    margin-top: 20px !important;
}

/* Force Title Case for Register Buttons */
.inflow-registration-container .wcfm_submit_button,
.inflow-registration-container button[name="register"] {
    text-transform: capitalize !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .inflow-reg-flex-wrapper {
        flex-direction: column;
    }
    .inflow-reg-sidebar-col {
        width: 100%;
        border-left: none;
        border-top: 1px solid #eee;
    }
}