/**
 * hero_configurator.css
 *
 * Grundgerüst-Styling für den Hero-Konfigurator.
 * Nutzt bestehende Klassennamen-Konvention (snake_case für IDs, kebab-case für Klassen)
 * analog zu vorhandenen Styles (z.B. pill-option, dimension-grid in product_info_layout.php).
 */

.hero-konfigurator-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.hero-konfigurator {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    padding: 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.hero-konfigurator-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 140px;
}

.hero-konfigurator-feld label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.hero-konfigurator-feld select,
.hero-konfigurator-feld input[type="number"] {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* Größenfelder werden per AJAX aus groessenauswahl_templates.php nachgeladen
   und nutzen dort bereits vorhandene .dimension-grid / .dimension-item Klassen */
#hero_groesse_felder {
    flex-basis: 100%;
}

.hero-konfigurator-preis {
    font-size: 1.4rem;
    font-weight: bold;
    color: #3f7154;
    white-space: nowrap;
}

#hero_zum_produkt {
    padding: 0.75rem 1.5rem;
    background: #3f7154;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

#hero_zum_produkt:hover:not(:disabled) {
    background: #345c46;
}

#hero_zum_produkt:disabled {
    background: #999;
    cursor: not-allowed;
}

.hero-konfigurator-fehler {
    color: #b00020;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .hero-konfigurator {
        flex-direction: column;
        align-items: stretch;
    }
}