/**
 * ZS Vendors - Frontend Styles
 */

.woocommerce-MyAccount-content .zs-vendors-dashboard form.zs-vendors-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allows filters to stack on very small screens */
    align-items: flex-end; /* Aligns items nicely if they have different heights */
    gap: 15px; /* Controls the space between the filter elements */
    margin-bottom: 2em; /* Adds space between the filters and the table */
}

/* Override theme styles that might force inputs to be 100% width */
.zs-vendors-filters input[type="date"],
.zs-vendors-filters button {
    width: auto; /* Allow the element to size based on content/flex rules */
    flex-grow: 1; /* Allow fields to grow and fill available space */
    flex-basis: 180px; /* Give each a minimum base width before growing */
    margin: 0; /* Remove any default margins */
}

/* Dark theme styling for the date inputs */
.zs-vendors-filters input[type="date"] {
    background-color: #222; /* Dark background */
    border: 1px solid #444;  /* Lighter border */
    color: #eee;             /* Light text */
    padding: 8px 10px;
    border-radius: 30px;
    color-scheme: dark;     /* Crucial hint for the browser to style the calendar icon for dark mode */
}

.zs-vendors-filters button.button {
    flex-grow: 0;
    padding: 10px 25px;
    background-color: #EF5C72; /* Pink color similar to the screenshot */
    border: none;             /* Remove the default border */
    color: #fff;
    border-radius: 25px;      /* Creates the rounded corners */
    cursor: pointer;
    font-size: 1em;
    line-height: normal;      /* Ensure consistent height */
    transition: background-color 0.2s ease;
}

.zs-vendors-filters button.button:hover {
    background-color: #ED455D; /* Slightly darker pink on hover */
}

.zs-vendors-dashboard table th {
    vertical-align: top;
}

.zs-vendors-dashboard table td {
    vertical-align: top;
}

/* Summary Boxes for Vendor Dashboard */
.zs-vendors-summary-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 2em;
}

.zs-vendors-summary-boxes .summary-box {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.zs-vendors-summary-boxes .summary-box .label {
    display: block;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}

.zs-vendors-summary-boxes .summary-box .amount {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.zs-vendors-payout-notice {
    background: #1d1d1d;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.zs-vendors-payout-notice p {
    display: block !important;
    margin-bottom: 10px !important;
}