/* --- BASE iOS THEME --- */
:root {
    --ios-bg: #f2f2f7;
    --ios-blue: #007aff;
    --ios-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --ios-radius: 18px;
}

/* --- 1. Main Search Card --- */
form.etn_event_inline_form {
    display: block !important; /* Block ensures vertical stacking for Advanced Search */
    background: #ffffff !important;
    padding: 24px !important;
    border-radius: var(--ios-radius) !important;
    box-shadow: var(--ios-shadow) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
}

/* --- 2. Top Bar (Inputs & Search Button) --- */
.etn-event-search-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 3. The Pill Inputs --- */
.etn-event-search-wrapper .input-group {
    background: var(--ios-bg) !important;
    border: none !important;
    border-radius: 12px !important;
    height: 48px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

/* Icons and Text styling */
.etn_event_inline_form .input-group-text, 
.etn_event_inline_form .input-group-prepend {
    background: transparent !important;
    border: none !important;
    color: #8e8e93 !important;
    padding-right: 8px !important;
}

.etn_event_inline_form .form-control,
.etn_event_inline_form select {
    background: transparent !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    color: #1c1c1e !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- 4. Advanced Search (The Expansion) --- */
.etn_event_inline_form_bottom {
    display: none; /* JS Toggle */
    width: 100% !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #efeff4 !important; /* Clean separator line */
    clear: both !important;
}

.etn_event_inline_form_bottom.active,
.etn_event_inline_form_bottom[style*="display: block"] {
    display: block !important;
}

/* Advanced Search Title */
.etn_event_form_title {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    color: #1c1c1e !important;
}

/* --- 5. Buttons --- */
.search-button-wrapper {
    display: flex !important;
    gap: 10px !important;
}

.etn-btn.etn-btn-primary {
    background: var(--ios-blue) !important;
    color: #fff !important;
    border-radius: 12px !important;
    height: 48px !important;
    padding: 0 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2) !important;
}

.etn-btn.etn-filter-icon {
    background: var(--ios-bg) !important;
    color: var(--ios-blue) !important;
    border-radius: 12px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

/* --- 6. Mobile Responsiveness --- */
@media (max-width: 767px) {
    .etn-event-search-wrapper {
        grid-template-columns: 1fr !important;
    }
    .search-button-wrapper {
        flex-direction: row !important;
        margin-top: 5px !important;
    }
    .search-button-wrapper .etn-btn-primary {
        flex-grow: 1 !important;
    }
}
/* --- 1. Fix the Small Icon --- */
.etn-btn.etn-filter-icon svg.feather {
    width: 20px !important;  /* Forced size for the icon */
    height: 20px !important;
    display: block !important;
    margin: 0 auto !important; /* Center the icon */
}

/* Ensure the button itself is a clean square with no interior padding */
.etn-btn.etn-filter-icon {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important; /* Ensure it stays square */
    width: 48px !important;
    height: 48px !important;
}

/* --- 2. Fix the "Search Now" Button Wrapping --- */
.etn-btn.etn-btn-primary {
    white-space: nowrap !important; /* Prevents "Search Now" from splitting into two lines */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 28px !important; /* More generous padding for a premium look */
    width: auto !important;      /* Allow it to fit the text content */
    min-width: fit-content !important;
}

/* --- 3. Grid Refinement --- */
/* We adjust the grid so the buttons don't get squished */
.etn-event-search-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto !important; 
    /* The 'auto' at the end ensures the buttons only take the space they need */
    align-items: center !important;
}

/* --- 4. Search Button Wrapper --- */
.search-button-wrapper {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important; /* Keep icon and search button on the same line */
    align-items: center !important;
}

/* Add space below the entire search section */
.etn-advanced-search-form {
    margin-bottom: 20px !important; /* Adjust 40px to your preference */
}

/* Optional: If you want to refine the spacing of the form itself */
form.etn_event_inline_form {
    margin-bottom: 0 !important; /* Keep the margin on the outer container for cleaner layout */
}

/* --- EVENT CARDS: PERMANENT LIFTED STYLE --- */
.etn-event-item, 
.etn-single-event {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13) !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: none !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

select.etn_event_select2.etn_event_select[name="etn_event_date_range"]{
  border:1.5px solid #d1d1d6 !important;
  border-radius:10px !important;
  padding:6px 32px 6px 12px !important;
}