/* ==========================================================================
   COMPONENTS – Buttons, Cards, Form Controls
   ========================================================================== */

/* Allgemeiner, eckiger Button-Stil */
button{
    font: inherit;
    color: inherit;
}

/* Pill/Option-Buttons = rechteckig mit klarer Border */
.pill,
.option-btn{
    --swatch: var(--neutral-400);      /* Defaultwert für Farbswatch */
    border: 1px solid var(--hairline);
    border-radius: 4px;                 /* eckig */
    background: var(--glass-layer);
    color: var(--paper);                /* gute Lesbarkeit auf dunklem Stream */
    padding: 10px 14px;
    cursor: pointer;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    display: inline-flex;               /* Inhalte (Swatch + Label) nebeneinander */
    align-items: center;                /* vertikal zentrieren */
    gap: 8px;                           /* Abstand zwischen Swatch und Text */
    white-space: nowrap;                /* kein Zeilenumbruch bei langen Namen */
}

/* Stabiler Farbswatch über Pseudo-Element (nutzt CSS-Var --swatch) */
.option-btn.has-swatch::before{
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--swatch, var(--neutral-400));
    border: 1px solid var(--swatch-border);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), 0.06);
}

.pill:hover,
.option-btn:hover{
    transform: translateY(-1px);
    border-color: var(--primary);
    background: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

.pill:active,
.option-btn:active{
    transform: translateY(0);
}

/* Ausgewählt */
.option-btn.selected,
.pill.selected{
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 10px 26px var(--glow-primary-strong);
}

/* Deaktiviert sichtbar machen */
.is-disabled,
button[disabled],
[aria-disabled="true"] {
    opacity: .2;
    pointer-events: none;
    filter: grayscale(20%);
}

/* Cards (Produkt-Karten) – eckigerer Look */
.card-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 1rem;
}
.card-grid.col-3{
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

.card{
    display:flex; flex-direction:column; gap:.5rem;
    background: var(--glass-layer);
    border:1px solid var(--hairline);
    border-radius: 8px;               /* leicht eckig */
    overflow:hidden;
    text-align:left;
    cursor:pointer;
    transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.card img{ width:100%; height:130px; object-fit:cover; background: var(--card-fallback); }
.card span{ padding:10px 12px; color: var(--paper); }
.card .card-label{ display:flex; flex-direction:column; gap:4px; }
.card .card-label strong{ font-weight:600; color: var(--paper); }
.card .card-label small{ color: var(--ink-2); font-size:.85rem; font-weight:500; }

.card:hover{
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    background: var(--primary-hover);
}
.card.selected{
    border-color: var(--primary);
    box-shadow: 0 12px 32px var(--glow-primary-strong);
}

/* Form */
.form .control{ margin-bottom:14px; }
.form label{
    display:flex; justify-content:space-between; gap:10px; margin-bottom:6px;
    color: var(--paper);
}
.form .value{ color: var(--ink-2); }
.form input[type="range"]{ width:100%; }

.form input[type="range"],
#panel-interaction input[type="range"]{
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: var(--glow-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), 0.18);
}

.form input[type="range"]::-webkit-slider-runnable-track,
#panel-interaction input[type="range"]::-webkit-slider-runnable-track{
    height: 4px;
    border-radius: 999px;
    background: var(--glow-primary-soft);
}

.form input[type="range"]::-webkit-slider-thumb,
#panel-interaction input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--outline-contrast);
    box-shadow: 0 4px 12px var(--glow-primary-medium);
    margin-top: -7px;
    transition: transform .15s ease;
}

.form input[type="range"]::-webkit-slider-thumb:active,
#panel-interaction input[type="range"]::-webkit-slider-thumb:active{
    transform: scale(0.94);
}

.form input[type="range"]::-moz-range-track,
#panel-interaction input[type="range"]::-moz-range-track{
    height: 4px;
    border-radius: 999px;
    background: var(--glow-primary-soft);
}

.form input[type="range"]::-moz-range-thumb,
#panel-interaction input[type="range"]::-moz-range-thumb{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--outline-contrast);
    box-shadow: 0 4px 12px var(--glow-primary-medium);
    transition: transform .15s ease;
}

.form input[type="range"]::-moz-range-thumb:active,
#panel-interaction input[type="range"]::-moz-range-thumb:active{
    transform: scale(0.94);
}

/* Dropdowns & Zahleneingaben im Interaktions-Panel: dunklere Flächen für Kontrast */
#panel-interaction select.pill,
#panel-interaction input.pill,
select.pill{
    background: var(--control-surface);
    color: var(--ink);
    border-color: var(--outline-contrast);
    box-shadow: inset 0 0 0 1px var(--glass-divider);
}

#panel-interaction input.pill::placeholder{
    color: var(--ink-2);
}

select.pill{
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(-45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(90deg, transparent 50%, var(--control-surface) 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%, 100% 0;
    background-size: 6px 6px, 6px 6px, 2.5rem 100%;
    background-repeat: no-repeat;
    padding-right: 2.75rem;
}

#panel-interaction select.pill:focus,
select.pill:focus{
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--glow-primary-strong), 0 10px 26px var(--glow-primary-medium);
}

select.pill option,
select.pill optgroup{
    background-color: var(--control-surface-strong) !important;
    color: var(--ink);
}

select.pill option:hover,
select.pill option:focus {
    background-color: var(--primary-hover) !important;
    color: var(--ink) !important;
}

select.pill option:checked,
select.pill option:checked:hover,
select.pill option:checked:focus {
    background-color: var(--primary) !important;
    color: var(--paper) !important;
}

select.pill option:is(:hover, :focus)::selection {
    background: var(--primary-hover);
    color: var(--ink);
}

.measures-section .measure-label{
    font-weight: 600;
    color: var(--paper);
}

.measures-section .measure-value{
    color: var(--paper);
    font-weight: 500;
}

/* Reusable rows */
.row{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.row.wrap{ flex-wrap:wrap; }
.row.spaced{ justify-content:space-between; }
.row-label{
    display:flex;
    align-items:center;
    gap:20px;
}

/* Cost tables in Panels */
.cost .row{ justify-content:space-between; color: var(--paper); }
.cost .total{ border-top:1px solid var(--hairline); padding-top:8px; }
.cost .grand{ font-size:20px; margin-top:16px; }

@media (max-width: 540px){
    .pill,
    .option-btn{
        white-space: normal;
        line-height: 1.3;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
    }

    .card-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px){
    #panel-unit .card-grid{
        grid-template-columns: 1fr;
    }
}

#panel-unit .card-grid{
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 45%), 1fr));
}

#panel-unit .card{
    display:grid;
    grid-template-rows: minmax(0, 1fr) auto;
    aspect-ratio: 1 / 1;
    gap: 0;
}

#panel-unit .card img{
    height: 100%;
}

#panel-unit .card .card-label{
    padding: 12px;
}

#panel-unit .section[data-section="addons"] .card{
    display:flex;
    flex-direction:column;
    aspect-ratio: auto;
}

#panel-unit .section[data-section="addons"] .card img{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
}