/* drx: Styling der "Meine Abos"-Karte im Kundencenter (Phase 2, read-only).
   Bewusst dezent, lehnt sich an die bestehenden Konto-Karten (.account-data-item) an. */

.account-data-item-drx-abos .drx-abos-table td {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.drx-abo-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}

.drx-abo-number {
    font-weight: 600;
    font-size: 1.02rem;
}

.drx-abo-status {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 1rem;
    font-size: .8rem;
    line-height: 1.4;
}

.drx-abo-status-active {
    background: #e3f1e1;
    color: #2f6b2a;
}

.drx-abo-status-paused {
    background: #fbf0d6;
    color: #8a6d1a;
}

.drx-abo-status-ended {
    background: #eee;
    color: #777;
}

/* drx: eine Zeile je Position — links Name+Intervall, rechts der eigene Liefertermin,
   darunter (eingeklappt) der Bearbeiten-Bereich. */
.drx-abo-position {
    padding: .5rem 0;
}

.drx-abo-position + .drx-abo-position {
    border-top: 1px solid rgba(0, 0, 0, .05);
}

.drx-abo-pos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .15rem .9rem;
}

.drx-abo-pos-edit-toggle {
    padding: 0;
    font-size: .88rem;
    white-space: nowrap;
}

/* drx: Bearbeiten-Bereich (Menge/Intervall + Termin verschieben), standardmaessig eingeklappt. */
.drx-abo-pos-edit {
    margin-top: .6rem;
    padding: .8rem;
    background: #f7f8f9;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .4rem;
}

.drx-abo-edit-grid,
.drx-abo-shift {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.drx-abo-shift {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.drx-abo-edit-free {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}

.drx-abo-edit-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    font-size: .82rem;
    color: #555;
}

.drx-abo-edit-field .form-control {
    max-width: 12rem;
}

.drx-abo-edit-qty,
.drx-abo-edit-count {
    max-width: 6rem !important;
}

.drx-abo-pos-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .6rem;
}

.drx-abo-pos-name {
    font-weight: 500;
}

.drx-abo-pos-meta {
    color: #666;
    font-size: .9rem;
}

.drx-abo-pos-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .9rem;
    font-size: .9rem;
    text-align: right;
}

.drx-abo-pos-next {
    color: #333;
}

/* drx: Hinweistext statt konkretem Termin (pausiert / Parkdatum wie 2090). */
.drx-abo-pos-note {
    color: #8a6d1a;
    font-style: italic;
}

.drx-abo-pos-last {
    color: #888;
}

/* drx: 1.3.6 Bestpreis mit Deckel — drei Preisangaben je Position. Mobil je Angabe eine Zeile
   (Bezeichnung links, Preis rechts), ab md (768 px) drei gleich breite Spalten. */
.drx-abo-pos-price {
    margin-top: .5rem;
    font-size: .9rem;
}

.drx-abo-price-list {
    display: grid;
    gap: .15rem .9rem;
    margin: 0;
}

.drx-abo-price-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    min-width: 0;
}

.drx-abo-price-item dt {
    min-width: 0;
    color: #666;
    font-weight: 400;
}

.drx-abo-price-item dd {
    margin: 0;
    white-space: nowrap;
}

.drx-abo-price-next dt,
.drx-abo-price-next dd {
    color: #333;
    font-weight: 600;
}

/* drx: 1.3.6 — Trennlinie + Abstand teilt der Hinweis mit der Zahlart-Zeile (.drx-abo-facts, gemeinsame
   Regel unten), sonst liest er sich als Teil der letzten Position. */
.drx-abo-price-note {
    margin-bottom: 0;
    color: #666;
    font-size: .88rem;
}

@media (min-width: 768px) {
    .drx-abo-price-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* drx: 1.3.6 (768-Abnahme) — Subgrid: die drei Angaben teilen sich ZWEI Zeilen (Bezeichnung / Preis).
       Bricht eine Bezeichnung zweizeilig um (bei 768 "Preis nächste Lieferung (−5 % Abo-Rabatt)"), wächst
       die Bezeichnungszeile fuer alle drei mit, die Preise bleiben auf einer Grundlinie. Ohne Fallback:
       subgrid koennen alle aktuellen Browser (Chrome/Edge 117+, Safari 16+, Firefox 71+), die Kundschaft
       kommt ueber aktuelle Mobil- und Desktop-Browser. */
    .drx-abo-price-list {
        grid-template-rows: auto auto;
    }

    /* drx: justify-content/gap aus der Mobilregel zuruecksetzen — space-between liesse die einzige
       Spalte nicht strecken, gap ueberschriebe die Zeilenluecke des Subgrids. */
    .drx-abo-price-item {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        justify-content: normal;
        gap: 0;
    }

    /* drx: 1.3.6 (Abnahme) — einzeilige Bezeichnungen sitzen direkt ueber ihrem Preis, nicht oben in der
       Bezeichnungszeile, die eine zweizeilige Nachbarin hochzieht. */
    .drx-abo-price-item dt {
        align-self: end;
    }
}

/* drx: Abo-weiter Hinweis (pausiert/beendet), damit Kunden nicht durch Parkdaten verwirrt werden. */
.drx-abo-note {
    margin: .6rem 0 .2rem;
    padding: .6rem .8rem;
    border-radius: .4rem;
    font-size: .92rem;
    line-height: 1.4;
}

.drx-abo-note-paused {
    background: #fbf0d6;
    color: #7a5c12;
}

.drx-abo-note-ended {
    background: #eee;
    color: #666;
}

/* drx: 1.3.6 — Trennlinie + Abstand gemeinsam fuer Zahlart-Zeile und Bestpreis-Hinweis. */
.drx-abo-facts,
.drx-abo-price-note {
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.drx-abo-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.4rem;
    color: #555;
    font-size: .88rem;
}

/* drx: Kompakte Kurzuebersicht im Dashboard (my_abos_summary.tpl). Eine Zeile pro Abo,
   Details/Positionen auf der dedizierten Seite. */
.drx-abo-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drx-abo-summary-intro {
    color: #666;
    font-size: .9rem;
    margin-bottom: .75rem;
}

.drx-abo-summary-item {
    padding: .6rem 0;
}

.drx-abo-summary-item + .drx-abo-summary-item {
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.drx-abo-summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.drx-abo-summary-dates {
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.4rem;
    color: #555;
    font-size: .9rem;
}

.drx-abo-summary-actions {
    margin-top: 1rem;
}

/* drx: Dedizierte Seite "Meine Abos" (meineabos.tpl) + Leerzustand. */
.drx-abo-page-intro {
    color: #666;
    margin-bottom: 1.2rem;
}

.drx-abo-empty {
    color: #666;
    margin: 1rem 0;
}

/* drx: Aktions-Leiste je Abo auf der dedizierten Seite (Phase 3). */
.drx-abo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.drx-abo-pause-field {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.drx-abo-pause-field label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .88rem;
    color: #555;
}

.drx-abo-pause-until {
    max-width: 11rem;
}

.drx-abo-action-status {
    font-size: .9rem;
    margin-left: .25rem;
}

.drx-abo-action-status.is-info {
    color: #555;
}

.drx-abo-action-status.is-done {
    color: #2f6b2a;
}

.drx-abo-action-status.is-error {
    color: #b3261e;
}

/* drx: Konto-Dropdown-Eintrag (ins #account-dropdown-menu injiziert). Erbt .dropdown-item vom
   Theme, hier nur ein dezentes Abo-Icon davor. */
.drx-abo-menu-link::before {
    content: "\f2f2"; /* fa-redo (Abo/Wiederkehr) */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    margin-right: .5rem;
    opacity: .7;
}

/* drx: Abo-Option auf der Produktseite (Phase 4, Baustein 2). Dezente CI-gruene Radio-Cards,
   injiziert in #add-to-cart vor der Mengen/Kaufen-Reihe (Bootstrap::injectAboProductOption).
   CI-Gruen #40561d wie im uebrigen Drexel-Theme. */
.drx-abo-option {
    margin: .9rem 0;
    padding-top: .9rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.drx-abo-option-head {
    font-weight: 600;
    color: #40561d;
    margin-bottom: .55rem;
}

.drx-abo-option-head .fas {
    margin-right: .4rem;
    opacity: .8;
}

.drx-abo-choices {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.drx-abo-choice {
    flex: 1 1 0;
    min-width: 9rem;
    position: relative;
    display: flex;
    margin: 0;
    padding: .7rem .85rem;
    border: 2px solid #e0e0e0;
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}

.drx-abo-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.drx-abo-choice:hover {
    border-color: #b7c39a;
}

.drx-abo-choice.is-active {
    border-color: #40561d;
    background: #eef3e6;
}

.drx-abo-choice-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.drx-abo-choice-title {
    font-weight: 600;
    color: #333;
}

.drx-abo-choice.is-active .drx-abo-choice-title,
.drx-abo-choice-offer .drx-abo-choice-title {
    color: #40561d;
}

.drx-abo-choice-sub {
    font-size: .82rem;
    color: #666;
}

/* drx: 1.3.7 Sonderpreis-Hinweis (Auftraggeber 15.10.2026) — Typo wie .drx-abo-price-note (#666, .88rem),
   Abstand zur Kachelreihe wie .drx-abo-interval-row (.7rem), unten 0 (Abschluss traegt .drx-abo-option).
   Icon als eigene Flex-Spalte in CI-Gruen wie .drx-abo-option-head: Folgezeilen fluchten mit dem Text. */
.drx-abo-option-note {
    display: flex;
    gap: .4rem;
    margin: .7rem 0 0;
    color: #666;
    font-size: .88rem;
}

.drx-abo-option-note .fas {
    flex: none;
    color: #40561d;
    opacity: .8;
    line-height: inherit;
}

.drx-abo-option-note > span {
    min-width: 0;
}

/* drx: Lieferrhythmus — nur sichtbar, wenn "Im Abo" gewaehlt ist (JS toggelt [hidden]). */
.drx-abo-interval-row {
    margin-top: .7rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.drx-abo-interval-label {
    margin: 0;
    font-size: .88rem;
    color: #555;
}

/* drx: Rhythmus-Auswahl als Chips (Radios). */
.drx-abo-rhythms {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.drx-abo-rhythm {
    position: relative;
    margin: 0;
    padding: .35rem .8rem;
    border: 1px solid #d0d0d0;
    border-radius: 1.4rem;
    cursor: pointer;
    font-size: .88rem;
    color: #444;
    transition: border-color .12s, background-color .12s, color .12s;
}

.drx-abo-rhythm input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.drx-abo-rhythm:hover {
    border-color: #b7c39a;
}

.drx-abo-rhythm.is-active {
    border-color: #40561d;
    background: #eef3e6;
    color: #40561d;
    /* drx: 1.3.2 — kein font-weight-Wechsel mehr: Fettschrift verbreiterte den Knopf und schob
       die Nachbarn (Breitensprung). Hervorhebung traegt jetzt Rahmen + Flaeche + Schatten. */
    box-shadow: inset 0 0 0 1px #40561d;
}

/* drx: freie count+unit-Eingabe — nur beim individuellen Rhythmus (JS toggelt [hidden]). */
.drx-abo-custom-fields {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: #555;
}

.drx-abo-custom-count {
    max-width: 5rem;
}

.drx-abo-custom-unit {
    max-width: 8rem;
}

/* drx: Phase 4 — Abo-Kennzeichnung an Warenkorb-/Checkout-Positionen (Theme-Snippet
   snippets/drx_abo_badge.tpl). Gleiche CI-Toene wie der aktive Rhythmus-Chip der Produktseite;
   Abstaende aus der Bootstrap-Skala (.25rem/.5rem). */
.drx-abo-badge {
    /* drx: 1.3.2 — Inline-Layout statt verschachteltem Flex: fit-content schrumpfte die Marke unter
       ihre Textbreite (Text am Rand, unnoetiger Umbruch im Mini-Warenkorb). Jetzt bricht sie nur,
       wenn die Spalte zu schmal ist (1440-Warenkorb: 183 px), und dann sauber zwischen den Teilen. */
    display: block;
    width: fit-content;
    max-width: 100%;
    /* drx: 1.3.2 (UI-Review B) — Abstand nach unten, bei 768 klebte die Marke am Mengenfeld. */
    margin: .25rem 0;
    padding: .25rem .5rem;
    border: 1px solid #40561d;
    /* drx: 1.3.2 (UI-Review A) — kleine Rundung: zweizeilig sah die Pillenform zerrissen aus. */
    border-radius: .25rem;
    background: #eef3e6;
    color: #40561d;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
}

.drx-abo-badge .fas {
    margin-right: .25rem;
    opacity: .8;
}

.drx-abo-badge-part {
    white-space: nowrap;
}

/* drx: 1.3.3 — Rhythmus immer eigene Zeile (Badge fest zweizeilig); darf bei langen Texten umbrechen. */
.drx-abo-badge-rhythm {
    display: block;
}