/**
 * GTPlay - Search Bar Component
 *
 * Responsive search interface with integrated action buttons.
 * Used for filtering dynamic content and tables.
 *
 * @package GTPlay Astra Child
 */

.gtplay-search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--gtplay-bg-surface);
    border: 1px solid var(--gtplay-border-subtle);
    border-radius: var(--gtplay-border-radius);
}

.gtplay-search-input-wrapper {
    flex: 1;
    min-width: 200px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.gtplay-search-bar .gtplay-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
}

.gtplay-search-bar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gtplay-search-input-wrapper input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 1rem;
    min-height: 38px;
    background-color: var(--gtplay-bg-element);
    border: 1px solid var(--gtplay-border-light);
    border-radius: var(--gtplay-border-radius-sm);
    color: var(--gtplay-text-primary) !important;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.gtplay-search-input-wrapper input[type="text"]::placeholder {
    color: var(--gtplay-text-placeholder) !important;
}

.gtplay-search-input-wrapper input[type="text"]:focus {
    outline: none;
    border-color: var(--gtplay-border-focus);
    background-color: var(--gtplay-bg-element-hover);
}

/* --- Responsive Adaptations --- */
@media (max-width: 768px) {
    .gtplay-search-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .gtplay-search-input-wrapper {
        width: 100%;
        flex-wrap: nowrap;
    }

    .gtplay-search-bar .gtplay-filter-group {
        flex-direction: column;
    }
}