/**
 * Osttirol Booking — Warenkorb-Ansicht (Plugin `Cart`).
 *
 * Self-contained (kein @import): alle Farben/Groessen kommen als Consumer aus
 * `tokens.css`, das global VOR diesem Stylesheet geladen wird (T7-Re-Pointing).
 * px-only (F1: ein 10px-Root der Host-Site darf die Insel nicht schrumpfen).
 *
 * UI-Regeln (CLAUDE.md / ui-design-qa):
 *   - min-height statt height bei dynamischem Content,
 *   - Flex-Kinder mit Text: min-width: 0,
 *   - Touch-Targets >= 44x44 px,
 *   - Z-Index nur aus dem Token-System (hier gar keiner noetig — kein Overlay),
 *   - :focus-visible sichtbar, prefers-reduced-motion respektiert.
 *
 * Copyright: Stefan Ennemoser, web-crossing GmbH
 */

[x-cloak] {
    display: none !important;
}

/* Eigenes box-sizing fuer die Insel: die Host-Site (www.osttirol.com) garantiert
   kein globales border-box. Ohne das rechnet `width: 100%` + Padding + Border
   ueber die Containerbreite hinaus und erzeugt horizontales Scrollen (auf 375px
   gemessen: 377px Dokumentbreite). */
.ott-cart,
.ott-cart *,
.ott-cart *::before,
.ott-cart *::after {
    box-sizing: border-box;
}

.ott-cart {
    --ott-cart-gap: 16px;

    display: flex;
    flex-direction: column;
    gap: var(--ott-cart-gap);
    max-width: 760px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-text);
}

/* ---------------------------------------------------------------- Statuszeile */
.ott-cart__status {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* ------------------------------------------------------------------ Skeleton */
.ott-cart__skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ott-cart__skeleton-row {
    min-height: 92px;
    border-radius: var(--radius-lg, 12px);
    background: var(--c-bg-sunken);
    animation: ott-cart-pulse 1.6s ease-in-out infinite;
}

@keyframes ott-cart-pulse {
    0%,
    100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .ott-cart__skeleton-row {
        animation: none;
    }
}

/* -------------------------------------------------------------- Positionen */
.ott-cart__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ott-cart__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}

/* min-width: 0 — sonst sprengt ein langer Betriebsname die Flex-Zeile. */
.ott-cart__item-body {
    flex: 1 1 260px;
    min-width: 0;
}

.ott-cart__badge {
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill, 999px);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ott-cart__item-title {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-text);
}

.ott-cart__item-provider {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    color: var(--c-text-muted);
}

.ott-cart__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ott-cart__fact {
    font-size: 14px;
    color: var(--c-text-muted);
}

/* Trenner als Rahmen, NICHT als ::before-Zeichen: ein Interpunktions-Glyph
   wuerde von Screenreadern mitgelesen ("Punkt 3 Naechte"). */
.ott-cart__fact + .ott-cart__fact {
    padding-left: 12px;
    border-left: 1px solid var(--c-border-strong);
}

.ott-cart__item-price {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--c-text);
}

/* Position entfernen. Zurueckhaltend, aber nicht versteckt: eine loeschende
   Aktion darf nicht die auffaelligste der Karte sein, muss aber ohne Hover
   auffindbar bleiben (Hover-only waere auf Touch gar nicht erreichbar).
   44x44 Mindestflaeche laut UI-Checkliste. */
.ott-cart__item-remove {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.ott-cart__item-remove:hover,
.ott-cart__item-remove:focus-visible {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
}

/* Waehrend des laufenden DELETE: sichtbar inaktiv, Klick prallt ab. */
.ott-cart__item-remove[disabled] {
    opacity: 0.55;
    cursor: progress;
}

/* ----------------------------------------------------------- Zusammenfassung */
.ott-cart__summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--c-bg-alt);
}

.ott-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.ott-cart__total-label {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.ott-cart__total-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

/* Die CTA soll auf Desktop nicht die ganze Box-Breite fluten (Flex-Kinder
   werden per Default gestreckt); auf Mobile darf sie volle Breite nehmen. */
.ott-cart__summary .ott-cart__btn {
    align-self: flex-start;
}

.ott-cart__hint {
    margin: 0;
    font-size: 13px;
    color: var(--c-text-subtle);
}

/* ------------------------------------------------------ Leer-/Hinweiszustaende */
.ott-cart__empty,
.ott-cart__notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--c-surface);
}

/* Leerzustand: eigene, einladende Buehne statt Hinweis-Box. Der weiche
   Farbverlauf ist rein dekorativ (kein Bild = keine externe Ressource). */
.ott-cart__empty {
    align-items: center;
    gap: 24px;
    padding: 32px 20px;
    text-align: center;
    background:
        radial-gradient(130% 90% at 50% 0%, var(--c-accent-soft) 0%, rgba(255, 255, 255, 0) 62%),
        var(--c-surface);
}

.ott-cart__empty-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 520px;
}

/* ------------------------------------------------ Leerzustand: Illustration */
/* Inline-SVG, dekorativ (aria-hidden). Faerbung ueber currentColor, damit die
   Marken-Farbe aus einem Token kommt und nicht im Markup steht. */
.ott-cart__art {
    display: block;
    width: 100%;
    max-width: 260px;
    color: var(--c-primary);
}

.ott-cart__art svg {
    display: block;
    width: 100%;
    height: auto;
}

.ott-cart__art-sun {
    fill: currentColor;
    opacity: 0.16;
}

.ott-cart__art-ridge-back {
    fill: currentColor;
    opacity: 0.26;
}

.ott-cart__art-ridge-front {
    fill: currentColor;
    opacity: 0.82;
}

.ott-cart__art-snow {
    fill: var(--c-surface);
}

/* Der Weg liegt bewusst INNERHALB des vorderen Bergs — auf der dunklen Flaeche
   traegt die helle Strichelung, auf Weiss waere sie unsichtbar. */
.ott-cart__art-trail {
    fill: none;
    stroke: var(--c-surface);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 5 7;
    opacity: 0.9;
}

.ott-cart__art-pole {
    fill: none;
    stroke: var(--c-text);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.ott-cart__art-flag {
    fill: var(--c-star);
}

.ott-cart__art-ground {
    fill: currentColor;
    opacity: 0.16;
}

/* --------------------------------------------------- Leerzustand: Merkliste */
.ott-cart__wish {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 14px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 16px);
    background: var(--c-accent-soft);
    text-align: left;
}

.ott-cart__wish-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.ott-cart__wish-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--c-primary);
}

/* min-width: 0 — sonst sprengt der Satz die Zeile statt umzubrechen. */
.ott-cart__wish-body {
    flex: 1 1 220px;
    min-width: 0;
}

.ott-cart__wish-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-accent-text);
}

.ott-cart__wish-text {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--c-text-muted);
}

/* ----------------------------------------------------- Leerzustand: Planer */
.ott-cart__planner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 16px);
    background: var(--c-bg-alt);
    text-align: left;
}

.ott-cart__planner-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text);
}

.ott-cart__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ott-cart__chip {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill, 999px);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.ott-cart__chip:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.ott-cart__chip--active {
    border-color: var(--c-primary);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
}

.ott-cart__chip:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

.ott-cart__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.ott-cart__field {
    display: flex;
    flex: 1 1 170px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ott-cart__field-label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* font-size 16px ist Pflicht: iOS zoomt beim Fokus in Felder mit kleinerer
   Schrift automatisch hinein und verschiebt das Layout. */
.ott-cart__input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md, 10px);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.2;
}

.ott-cart__input:focus-visible {
    border-color: var(--c-primary);
    outline: 2px solid var(--c-focus);
    outline-offset: 1px;
}

.ott-cart__nights {
    flex: 0 0 auto;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-muted);
}

.ott-cart__planner-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ------------------------------------------------------ Leerzustand: Ideen */
.ott-cart__ideas {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.ott-cart__ideas-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* auto-fit/minmax: 1 Spalte auf dem Handy, bis zu 3 auf dem Desktop — ohne
   Media-Query und ohne Mindestbreite, die auf 320px ueberlaufen wuerde. */
.ott-cart__ideas-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ott-cart__idea {
    display: flex;
}

/* flex: 1 statt height: 100% — die Kachel fuellt die Grid-Zeile, ohne dass eine
   feste Hoehe den Inhalt abschneiden kann. */
.ott-cart__idea-link {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md, 10px);
    background: var(--c-surface);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.ott-cart__idea-link:hover,
.ott-cart__idea-link:focus-visible {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-card);
}

.ott-cart__idea-link:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

.ott-cart__idea-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.ott-cart__idea-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--c-primary);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ott-cart__idea-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ott-cart__idea-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ott-cart__idea-text {
    font-size: 14px;
    color: var(--c-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .ott-cart__chip,
    .ott-cart__idea-link {
        transition: none;
    }
}

.ott-cart__empty-title,
.ott-cart__notice-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--c-text);
}

.ott-cart__empty-text,
.ott-cart__notice-text {
    margin: 0;
    max-width: 640px;
    font-size: 15px;
    color: var(--c-text-muted);
}

/* Der Leerzustand traegt die Aussage der Seite — deshalb groesser als eine
   Hinweis-Box, aber unter der H1 der TYPO3-Seite. */
.ott-cart__empty-title {
    font-size: 24px;
    line-height: 1.25;
}

.ott-cart__empty-text {
    font-size: 16px;
}

.ott-cart__notice--error {
    border-color: var(--c-error-border);
    background: var(--c-error-soft);
}

.ott-cart__notice--error .ott-cart__notice-title {
    color: var(--c-error-text);
}

.ott-cart__notice--info {
    border-color: var(--c-warning-border);
    background: var(--c-warning-soft);
}

.ott-cart__notice--info .ott-cart__notice-title {
    color: var(--c-warning-text);
}

/* -------------------------------------------------------------------- Buttons */
.ott-cart__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.ott-cart__btn--primary {
    background: var(--c-primary);
    color: var(--c-bg);
}

.ott-cart__btn--primary:hover,
.ott-cart__btn--primary:focus-visible {
    background: var(--c-primary-hover);
    color: var(--c-bg);
}

.ott-cart__btn--secondary {
    border-color: var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
}

.ott-cart__btn--secondary:hover,
.ott-cart__btn--secondary:focus-visible {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.ott-cart__btn:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ott-cart__btn {
        transition: none;
    }
}

/* ---------------------------------------------------------------- noscript */
.ott-cart--noscript {
    gap: 12px;
    padding: 20px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--c-surface);
}

/* ------------------------------------------------------------------- Mobile */
@media (max-width: 480px) {
    .ott-cart__item {
        padding: 14px;
    }

    .ott-cart__item-price {
        flex: 1 1 100%;
    }

    /* Auf schmalen Viewports brechen die Fakten ohnehin um; der senkrechte
       Trenner haengt dann am Zeilenanfang. Deshalb hier gestapelt ohne Trenner. */
    .ott-cart__facts {
        flex-direction: column;
        gap: 4px;
    }

    .ott-cart__fact + .ott-cart__fact {
        padding-left: 0;
        border-left: 0;
    }

    /* Volle Breite ueber align-self, NICHT ueber width: 100% — letzteres kaempft
       mit dem Flex-Layout und dem Padding. */
    .ott-cart__summary .ott-cart__btn,
    .ott-cart__empty .ott-cart__btn,
    .ott-cart--noscript .ott-cart__btn {
        align-self: stretch;
    }

    /* Leerzustand: Buehne schmaler, Datumsfelder gestapelt (nebeneinander
       bleiben auf 320px keine 44px-Ziele uebrig). */
    .ott-cart__empty {
        padding: 24px 14px;
    }

    .ott-cart__fields {
        flex-direction: column;
        align-items: stretch;
    }

    /* Pflicht beim Wechsel auf column: `flex-grow` wirkt dann auf die HOEHE —
       die Felder wuerden sich sonst auf die Container-Hoehe aufblaehen und
       riesige Luecken zwischen Label und Feld erzeugen. */
    .ott-cart__field {
        flex: 0 0 auto;
    }

    .ott-cart__nights {
        margin: 0;
    }

    .ott-cart__planner-actions {
        align-self: stretch;
    }

    .ott-cart__chip {
        flex: 1 1 auto;
    }

    /* Merkliste bleibt eine umbrechende ZEILE (Icon + Text nebeneinander); nur
       der Button rutscht auf eine eigene, volle Zeile. Ein Umschalten auf
       column wuerde ueber `flex-grow` die Hoehe des Textblocks aufblaehen. */
    .ott-cart__wish .ott-cart__btn {
        flex: 1 1 100%;
    }
}

/* Anzahl vor dem Positionstitel („2×"). Etwas leiser als der Titel, damit die
   Zahl ihn nicht ueberstimmt, aber klar lesbar — sie ist ein Preisfaktor.
   Stefan 29.07.2026: „Anzahl muss wohl auch noch dazu". */
.ott-cart__item-units {
    margin-right: 6px;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Vorschaubild einer Position. Feste Groesse, damit die Positionszeilen trotz
   unterschiedlicher Bildformate auf einer Kante stehen; `flex: 0 0 auto`, damit
   das Bild nicht mit dem Text um Platz konkurriert (die Textspalte darf
   schrumpfen, das Bild nicht). Mobil bleibt es links neben dem Text — bei 80px
   ist dafuer genug Raum, und ein Bild ueber die ganze Breite wuerde die Liste
   unnoetig lang machen. */
.ott-cart__item-media {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: var(--c-bg-sunken);
}

.ott-cart__item-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}