/**
 * Abhol-Auskunft auf der Produktseite.
 *
 * Fügt sich in die bestehende Shop-Sprache ein (weiche Radien, ruhige Flächen,
 * Markenton Teal) statt eine eigene Optik mitzubringen. Farben kommen aus
 * Variablen, damit sich der Ton an einer Stelle nachziehen lässt.
 */

.aromas-cc {
    --cc-brand: #85c2bd;
    --cc-ink: #1c1917;
    --cc-muted: #78716c;
    --cc-line: #e7e5e4;
    --cc-ok: #15803d;
    --cc-low: #b45309;
    --cc-off: #a8a29e;

    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    background: #fff;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cc-ink);
}

/* Die Antwort führt: eine Zeile, lesbar aus dem Augenwinkel. */
.aromas-cc__answer {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cc-muted);
}

.aromas-cc__mark {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--cc-line);
    transform: translateY(-1px);
    transition: background-color .2s ease;
}

.aromas-cc__text {
    min-width: 0;
}

/* Zustände. Der Punkt ist Beiwerk – die Aussage steht immer im Text. */
.aromas-cc__answer[data-state="in-stock"] { color: var(--cc-ok); }
.aromas-cc__answer[data-state="in-stock"] .aromas-cc__mark { background: var(--cc-ok); }

.aromas-cc__answer[data-state="low"] { color: var(--cc-low); }
.aromas-cc__answer[data-state="low"] .aromas-cc__mark { background: var(--cc-low); }

.aromas-cc__answer[data-state="out-of-stock"],
.aromas-cc__answer[data-state="not-offered"],
.aromas-cc__answer[data-state="untracked"],
.aromas-cc__answer[data-state="unknown"] {
    color: var(--cc-muted);
    font-weight: 500;
}

.aromas-cc__answer[data-state="out-of-stock"] .aromas-cc__mark,
.aromas-cc__answer[data-state="not-offered"] .aromas-cc__mark,
.aromas-cc__answer[data-state="untracked"] .aromas-cc__mark,
.aromas-cc__answer[data-state="unknown"] .aromas-cc__mark {
    background: var(--cc-off);
}

.aromas-cc__answer[data-state="loading"] {
    color: var(--cc-muted);
    font-weight: 500;
}

.aromas-cc__answer[data-state="loading"] .aromas-cc__mark {
    background: var(--cc-brand);
    animation: aromas-cc-pulse 1.1s ease-in-out infinite;
}

@keyframes aromas-cc-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

/* Das Bedienelement ist zweite Ebene. */
.aromas-cc__control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cc-line);
}

.aromas-cc__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-muted);
    white-space: nowrap;
}

.aromas-cc__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Eigener Pfeil, damit das Feld in beiden Systemen gleich aussieht. */
.aromas-cc__field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.5px solid var(--cc-muted);
    border-bottom: 1.5px solid var(--cc-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

.aromas-cc__select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    /* 44px hoch: Mindestgröße für Tippziele */
    min-height: 44px;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    background: #fafaf9;
    font: inherit;
    font-size: 15px;
    color: var(--cc-ink);
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.aromas-cc__select:hover {
    border-color: var(--cc-brand);
    background: #fff;
}

.aromas-cc__select:focus-visible {
    outline: 2px solid var(--cc-brand);
    outline-offset: 2px;
    border-color: var(--cc-brand);
}

.aromas-cc__note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cc-muted);
}

.aromas-cc__note[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .aromas-cc__control {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .aromas-cc__label {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aromas-cc__mark,
    .aromas-cc__select {
        transition: none;
    }

    .aromas-cc__answer[data-state="loading"] .aromas-cc__mark {
        animation: none;
        opacity: .6;
    }
}

/* ---- Abholfeld an der Kasse ---- */

.aromas-cc-checkout__select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #e7e5e4;
    border-radius: 12px;
    background: #fafaf9;
    font: inherit;
    color: #1c1917;
    cursor: pointer;
}

.aromas-cc-checkout__select:focus-visible {
    outline: 2px solid #85c2bd;
    outline-offset: 2px;
}

.aromas-cc-checkout__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #78716c;
}

.aromas-cc-pickup {
    margin-top: 24px;
}