/* Styling for Notifications Tab */

.ebs-notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ebs-announcements-list {
    list-style: none;
    /* Remove default list style */
    padding: 0;
}

.ebs-announcement {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.ebs-announcement-wrapper {
    display: flex;
    justify-content: space-between;
    /* Pushes the title/date and button to opposite ends */
    align-items: center;
    width: 100%;
}

.ebs-announcement-title {
    margin: 0;
    font-weight: normal;
    flex-grow: 1;
    /* Allows the title to take up remaining space */
    line-height: 1.2;
}

/* Color for UNREAD titles (Blue link) */
.ebs-unread-title {
    color: #0073aa;
    /* Default WordPress blue */
    font-weight: bold;
}

.ebs-unread-title:hover {
    color: #005177;
}

/* Color for READ titles (Gray link) */
.ebs-read-title {
    color: #777;
    /* Gray */
    font-weight: normal;
}

.ebs-read-title:hover {
    color: #555;
}

.ebs-new-label {
    background: #dc3232;
    /* Red badge */
    color: #fff;
    font-size: 0.7em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}

.ebs-announcement-date {
    font-size: 0.8em;
    color: #999;
    margin-left: 10px;
}

.ebs-announcement-actions {
    flex-shrink: 0;
    /* Prevents the button from being compressed */
}

/* -------------------------------------------------------------------------
 * CRITICAL FIX: Ensure custom checkboxes are visible and file inputs are clean
 * ------------------------------------------------------------------------- */

/* This rule hides WooCommerce-generated checkboxes like 'terms' or those for vendor registration. 
   We explicitly exclude our custom one using the ID selector. */
.woocommerce-account input[type="checkbox"]:not(#apply_for_vendor):not(#terms):not(#ebs_no_business_info_set) {
    position: absolute;
    z-index: -1000;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

/* -------------------------------------------------------------------------
 * 2. Progress Bar Styling (Dashboard)
 * ------------------------------------------------------------------------- */
.ebs-progress-bar-container {
    background-color: #E0E0E0;
    border-radius: 5px;
    height: 10px;
    margin: 15px 0;
    overflow: hidden;
}
.ebs-progress-bar {
    background-color: #0073AA; /* WordPress Blue */
    height: 100%;
    transition: width 0.5s ease;
    border-radius: 5px;
}

/* Enhanced style for the completed state (UX Polish) */
.ebs-progress-complete {
    text-align: center;
    padding: 30px;
    background-color: #e6f7ff; /* Light Blue background for contrast */
    border: 1px solid #0073aa; /* Blue border */
    border-radius: 5px;
    margin-top: 20px;
    color: #004d66; 
}
.ebs-progress-complete h3 {
    color: #004d66; 
}

.ebs-progress-callout {
    font-weight: bold;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.ebs-missing-fields-list {
    list-style: none;
    padding: 0;
    margin-left: 0;
}
.ebs-missing-fields-list li a {
    display: block;
    padding: 5px 0;
    color: #dc3232; /* Red for missing items */
    text-decoration: none;
}
.ebs-missing-fields-list li a:hover {
    color: #d64a4a;
    text-decoration: underline;
}
.ebs-missing-fields-list .dashicons {
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * 3. Sidebar Icons (Fixing and Completing the Menu)
 * ------------------------------------------------------------------------- */

/* Ensure the dashicons font family is used for all menu items */
.woocommerce-MyAccount-navigation-link a::before {
    font-family: dashicons;
    text-decoration: inherit;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle; /* Align icons nicely with text */
}

/* Active link color */
.woocommerce-MyAccount-navigation-link.is-active a {
    color: #0073aa; 
}

/* Default WooCommerce Links */
.woocommerce-MyAccount-navigation-link.dashboard a::before { content: "\f223"; } /* Dashboard (gauge) */
.woocommerce-MyAccount-navigation-link.orders a::before { content: "\f307"; } /* Orders (calendar-alt) */
.woocommerce-MyAccount-navigation-link.downloads a::before { content: "\f316"; } /* Downloads (download) */
.woocommerce-MyAccount-navigation-link.edit-address a::before { content: "\f321"; } /* Addresses (location-alt) */
.woocommerce-MyAccount-navigation-link.payment-methods a::before { content: "\f107"; } /* Payment methods (credit-card) */
.woocommerce-MyAccount-navigation-link.edit-account a::before { content: "\f302"; } /* Account details (admin-users) */
.woocommerce-MyAccount-navigation-link.customer-logout a::before { content: "\f182"; } /* Log out (log-out) */

/* Custom EBS Plugin Links (Matching Dashboard Icons) */
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--notifications a::before {
    content: "\f0f3"; /* dashicons-bell */
}
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--business-details a::before {
    content: "\f15c"; /* dashicons-store */
}


/* -------------------------------------------------------------------------
 * 4. Dashboard Quick-Access Cards Styling (Polished UX)
 * ------------------------------------------------------------------------- */
.ebs-dashboard-cards {
    display: grid;
    /* Create a responsive grid: 2 columns on desktop, 1 on mobile */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.ebs-dashboard-card {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Slightly rounder corners */
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Better initial shadow */
}

.ebs-dashboard-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* More pronounced hover shadow */
    transform: translateY(-4px); /* Lift the card more */
}

/* Specific Hover Colors for Visual Distinction */
.ebs-dashboard-card.notifications:hover { border-color: #0073aa; }
.ebs-dashboard-card.orders:hover { border-color: #82a840; } /* WooCommerce Green */
.ebs-dashboard-card.business-details:hover { border-color: #0073AA; } 
.ebs-dashboard-card.account:hover { border-color: #632e8f; } /* Purple */

.ebs-dashboard-card .card-icon {
    font-size: 2.5em;
    color: #0073AA;
    margin-right: 15px;
    line-height: 1;
    transition: color 0.2s; /* Transition icon color */
}

.ebs-dashboard-card:hover .card-icon {
    color: #333; /* Darker color on hover */
}

/* Explicitly style the inner Dashicon span */
.ebs-dashboard-card .card-icon .dashicons {
    width: auto;
    height: auto;
}

.ebs-dashboard-card .card-content {
    flex-grow: 1;
}

.ebs-dashboard-card h4 {
    font-size: 1.1em;
    font-weight: 600; /* Slightly heavier font */
    margin: 0 0 5px 0;
    color: #333;
}

.ebs-dashboard-card p {
    font-size: 0.85em;
    margin: 0;
    color: #777;
    line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * 5. Registration Form Polishing (Targeting ebs_woocommerce_register shortcode)
 * ------------------------------------------------------------------------- */

/* Override the main form styling since the sections now provide the box look */
.woocommerce .woocommerce-form.register,
.woocommerce-account .woocommerce-form-register {
    border: none;
    padding: 0; /* Remove padding from the main form container */
    background-color: transparent;
    box-shadow: none;
}

/* Input styling for all WooCommerce Input--text fields */
.woocommerce-Input--text, 
.woocommerce-Input--file,
.woocommerce-input-wrapper input[type="text"],
.woocommerce-input-wrapper input[type="email"],
.woocommerce-input-wrapper input[type="password"] {
    width: 100% !important;
    padding: 10px 12px !important;
    margin-top: 5px;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 1em;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* CRITICAL FIX: File input specific override to fix wonky look */
.woocommerce-Input--file {
    height: auto !important;
    border: 1px solid #ccc !important;
    background-color: #f7f7f7; /* Slightly darker background for file input */
}

/* CRITICAL FIX: Target the Select2 wrapper to enforce 100% width on the dropdowns */
.woocommerce-form-row select.input-text,
.woocommerce-form-register .form-row .select2-container {
    /* Use !important to override the inline/core width set by Select2 */
    width: 100% !important; 
    display: block !important; 
}
.woocommerce-form-register .select2-container .select2-selection--single {
     height: 40px !important; /* Match the height of text inputs */
     padding: 5px 12px !important;
     border: 1px solid #ccc !important;
     border-radius: 4px !important;
}
/* Adjust Select2 dropdown icon to look clean */
.woocommerce-form-register .select2-container .select2-selection__arrow {
    height: 38px;
    width: 30px;
    right: 0;
}
/* End CRITICAL FIX */


/* Input Focus Effect */
.woocommerce-Input--text:focus,
.woocommerce-Input--file:focus,
.woocommerce-input-wrapper input[type="text"]:focus,
.woocommerce-input-wrapper input[type="email"]:focus,
.woocommerce-input-wrapper input[type="password"]:focus {
    border-color: #0073AA !important; /* WordPress Blue on focus */
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
    outline: none;
}

/* Custom button styling (Copy from Billing Address button) */
#ebs-copy-billing-address {
    background-color: #222222 !important; /* Darker background for the button */
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: normal !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    width: auto !important;
    display: inline-block;
}
#ebs-copy-billing-address:hover {
    background-color: #444 !important;
    color: #fff !important;
}

/* Registration submit button styling */
.woocommerce-form-register__submit {
    background-color: #0073AA !important; /* WordPress Blue */
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 25px !important;
    font-weight: bold !important;
    font-size: 1em !important;
    transition: background-color 0.2s;
}
.woocommerce-form-register__submit:hover {
    background-color: #005177 !important;
}

/* Small text/hints below fields */
.form-text.text-muted {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
    color: #888;
}

/* Ensures the required star is red */
.required {
    color: #dc3232;
}

/* Clearfix for half-width fields */
.clear {
    clear: both;
}

/* -------------------------------------------------------------------------
 * 6. Address Fields Inline Fix (Registration Form)
 * ------------------------------------------------------------------------- */

/* CRITICAL: Force form-row-first and form-row-last to be 50% width and float */
/* This overrides common theme or core WooCommerce styles that might break the columns */
.woocommerce-form-register .form-row-first, 
.woocommerce-form-register .form-row-last {
    float: left;
    width: 48%; 
    padding-right: 2%; 
    box-sizing: border-box;
}

.woocommerce-form-register .form-row-last {
    padding-left: 2%; 
    padding-right: 0;
}

/* Ensure the wrapper respects the floats */
.ebs-form-billing-wrapper,
.ebs-form-shipping-wrapper {
    overflow: hidden;
    /* This is an alternative to using a clearfix element */
}

/* Ensure full-width fields take up 100% space (e.g., street address 1, address 2) */
.woocommerce-form-register .form-row-wide {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CRITICAL FIX: Ensure the Country/State and City/Postcode pairs stay side-by-side */
/* These rules target the entire form row div, which must be 48% wide. */
.woocommerce-form-register #billing_country_field,
.woocommerce-form-register #shipping_country_field,
.woocommerce-form-register #billing_city_field,
.woocommerce-form-register #shipping_city_field {
     /* These fields are designated form-row-first in PHP */
    width: 48% !important;
    padding-right: 2% !important;
}
.woocommerce-form-register #billing_state_field,
.woocommerce-form-register #shipping_state_field,
.woocommerce-form-register #billing_postcode_field,
.woocommerce-form-register #shipping_postcode_field {
    /* These fields are designated form-row-last in PHP */
    width: 48% !important;
    padding-left: 2% !important;
    padding-right: 0 !important;
}

/* -------------------------------------------------------------------------
 * 7. Form Section Styling (Adding Prominent Boxes)
 * ------------------------------------------------------------------------- */

.woocommerce-form-register .ebs-form-section {
    background-color: #ffffff !important; /* Ensure background is white */
    border: 1px solid #c9c9c9 !important; /* FORCE the border */
    border-radius: 8px;
    padding: 25px 35px; /* Slightly more padding for better spacing */
    margin-bottom: 30px; /* Increased spacing between sections */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Stronger shadow */
}

/* Ensure the header inside the section is well-spaced */
.woocommerce-form-register .ebs-form-section h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Remove any top spacing that might push the header out of the box */
}

/* Keep the required fields within the section styling */
.ebs-form-section .form-row {
    padding: 0;
    margin-bottom: 15px; /* Adjust spacing between fields */
}