/* Gutschein einlösen — Warenkorb + Kasse (23.09.2026, brand_config §8).
   Markup: custom/components/rh_promo_redeem.tpl. Werte aus der Kasse
   (checkout-refinement.css): Text #172638, Felder 9 px Radius / Rand #cfdae5 /
   Fokus #126db1, Karte #f8fafc. Gedämpfter Text #5b6b7d statt #68788a, weil
   13 px auf #f8fafc sonst unter 4,5 : 1 fällt. Zwei Zeilen, feste Höhe. */

.rh-coupon {
    container-type: inline-size;
    margin: 0 0 16px;
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
}
.rh-coupon__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    color: #5b6b7d;
    font-size: 13px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.rh-coupon__offer { min-width: 0; }
.rh-coupon__offer strong { color: #172638; font-weight: 700; }
.rh-coupon__count { flex: 0 0 auto; white-space: nowrap; }
.rh-coupon__count b { color: #172638; font-weight: 600; }
/* Schmale Spalte (Warenkorb-Seitenleiste, kleine Handys): "noch" entfällt, damit die Kopfzeile einzeilig bleibt */
@container (max-width: 310px) {
    .rh-coupon__count-pre { display: none; }
}

.rh-coupon__form { display: flex; margin: 0; }
.rh-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #cfdae5;
    border-right: 0;
    border-radius: 9px 0 0 9px;
    background: #fff;
    color: #172638;
    font: 600 16px/1 var(--font-body, 'IBM Plex Sans', sans-serif); /* 16 px: iOS zoomt sonst beim Fokus */
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: none;
}
.rh-coupon__input::placeholder { color: #8795a5; font-weight: 400; letter-spacing: 0; text-transform: none; }
.rh-coupon__input:focus { position: relative; z-index: 1; border-color: #126db1; outline: none; box-shadow: 0 0 0 3px #1673b518; }
.rh-coupon__input[aria-invalid="true"] { border-color: #b42318; }
.rh-coupon__apply {
    flex: 0 0 auto;
    min-width: 96px;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #126db1;
    border-radius: 0 9px 9px 0;
    background: #fff;
    color: #126db1;
    font: 700 14px/1 var(--font-body, 'IBM Plex Sans', sans-serif);
    cursor: pointer;
    transition: background .15s ease;
}
.rh-coupon__apply:hover { background: #f0f7fc; }
.rh-coupon__apply:focus-visible { position: relative; z-index: 1; outline: 2px solid #126db1; outline-offset: 2px; }
.rh-coupon__apply[disabled] { opacity: .6; cursor: progress; }
.rh-coupon__error { margin: 6px 0 0; color: #b42318; font-size: 12.5px; line-height: 1.4; }
.rh-coupon__error[hidden] { display: none; }

/* Kasse ohne laufende Aktion: zugeklapptes Feld als Textlink */
.rh-coupon--closed { margin: 0; }
.rh-coupon__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    list-style: none;
    color: #126db1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.rh-coupon__toggle::-webkit-details-marker { display: none; }
.rh-coupon__toggle svg { flex: 0 0 auto; transition: transform .2s; }
.rh-coupon--closed[open] .rh-coupon__toggle svg { transform: rotate(180deg); }
.rh-coupon--closed[open] .rh-coupon__form { margin-bottom: 4px; }

/* Kasse: im Kopf der Bestellübersicht, gleiche Innenabstände wie die Karte */
.rh-checkout-coupon { padding: 0 20px 16px; }
.rh-checkout-coupon:empty { display: none; }
.rh-checkout-coupon .rh-coupon { margin: 0; }
@media (max-width: 1023px) {
    .rh-checkout-coupon { padding: 0 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .rh-coupon__apply, .rh-coupon__toggle svg { transition: none; }
}