/**
 * Clinic Management Button Styles
 * Pill-shaped buttons with customizable color
 */

/* Get button color from WordPress option via inline style */
.clinic-button-primary,
#search-btn,
.clinic-shortcode-submit-btn,
.clinic-search-shortcode-form button[type="submit"] {
    background: var(--clinic-button-color, #21b695) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.clinic-button-primary:hover,
#search-btn:hover,
.clinic-shortcode-submit-btn:hover,
.clinic-search-shortcode-form button[type="submit"]:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.clinic-button-primary:active,
#search-btn:active,
.clinic-shortcode-submit-btn:active,
.clinic-search-shortcode-form button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Geolocation button - keep teal color but apply pill shape */
#geo-location-btn,
.clinic-shortcode-geo-btn {
    background: #008080 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
}

#geo-location-btn:hover,
.clinic-shortcode-geo-btn:hover {
    background: #006666 !important;
    transform: translateY(-1px) !important;
}

/* Advanced filters toggle - secondary button style */
#advanced-filters-toggle {
    background: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#advanced-filters-toggle:hover {
    background: #e0e0e0 !important;
    border-color: #bbb !important;
}