/**
 * Merklisten-Seite (Kundenpunkt P70, 22.07.2026).
 * Gehoert zur Action Tour/favorites (Tour/Favorites.html). Baut auf den
 * Design-Tokens und den Basis-Card-Klassen (.ot-maps-card*) aus tour-maps.css
 * auf (dort als :root definiert und in Favorites.html mit-eingebunden) und
 * legt hier nur das Seiten-Grid, die vertikale Card-Variante, das Loesch-Icon
 * und den Leerzustand darueber.
 *
 * Die Cards werden clientseitig gerendert (Inline-JS in Favorites.html liest den
 * gemeinsamen Store 'osttirol_wishlist_v1' + fetch /ot-favorites.json) - hier ist
 * nur die Optik. Seit AP5 (27.07.2026) gruppiert nach Typ (.ot-fav-group).
 *
 * Copyright: Stefan Ennemoser, web-crossing GmbH
 */

/* ---- Seitenrahmen ---- */
.ot-fav-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.ot-fav-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ot-fav-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ot-ink, #1a1a1a);
    margin: 0;
    line-height: 1.15;
}
.ot-fav-count {
    font-size: 15px;
    font-weight: 500;
    color: var(--ot-ink-3, #777);
}
/* Speicherort-Hinweis (Testfeedback 04.08.2026): dauerhaft sichtbar, dezent abgesetzt.
   Icon und Text auf gemeinsamer Grundlinie; das Icon schrumpft nicht mit (flex-shrink). */
.ot-fav-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -8px 0 20px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ot-surface-2, #f2efe8);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ot-ink-2, #555);
}
.ot-fav-hint-ico {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ot-ink-3, #777);
}

/* F3: dezenter Hinweis, wenn mehr als 50 Eintraege gemerkt sind (JS toggelt [hidden]). */
.ot-fav-note {
    font-size: 13px;
    color: var(--ot-ink-3, #777);
    margin: -12px 0 20px;
}
.ot-fav-note[hidden] { display: none; }

/* ---- Aktionen (Druck-Button, P71) ---- */
/* Container wird per JS ein-/ausgeblendet (nur bei mind. einem Eintrag sichtbar).
   Der Button selbst nutzt .ot-detail-actionbtn aus tour-maps.css (auf dieser Seite
   ohnehin geladen) - hier nur Abstand/Formular-Reset. */
.ot-fav-actions {
    margin: -6px 0 20px;
}
.ot-fav-actions[hidden] { display: none; }
.ot-fav-print-form { margin: 0; }

/* ---- Typ-Gruppen (AP5 Merklisten-Merge: Touren + Booking-Eintraege) ----
   Container haelt je Typ eine <section> mit Ueberschrift + eigenem Card-Grid.
   Reihenfolge und Beschriftung kommen vom Server (/ot-favorites.json). */
.ot-fav-groups[hidden] { display: none; }
.ot-fav-group + .ot-fav-group { margin-top: 34px; }
.ot-fav-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ot-ink, #1a1a1a);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ot-line, #e6e2da);
    line-height: 1.2;
}
/* Anzahl je Gruppe als dezente Bubble neben der Ueberschrift. */
.ot-fav-group-count {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--ot-accent, #b51621);
    border-radius: 999px;
    min-width: 22px;
    padding: 1px 7px;
    text-align: center;
}

/* ---- Grid: 1 / 2 / 3 Spalten ---- */
.ot-fav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 700px) {
    .ot-fav-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .ot-fav-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Vertikale Card-Variante (Basis .ot-maps-card ist horizontal) ---- */
.ot-fav-grid .ot-maps-card {
    flex-direction: column;
    position: relative;   /* Anker fuer das Loesch-Icon */
    cursor: default;
}
/* Bild oben ueber volle Breite statt 110px-Seitenspalte. */
.ot-fav-grid .ot-maps-card-thumb {
    width: 100%;
    min-width: 0;
    aspect-ratio: 3 / 2;
}
.ot-fav-grid .ot-maps-card-body {
    gap: 6px;
}
/* Kategorie-Label (Eyebrow) ueber dem Titel. */
.ot-fav-cat {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ot-accent, #b51621);
}
.ot-fav-meta {
    font-size: 13px;
    color: var(--ot-ink-2, #555);
}

/* ---- Loesch-Icon (oben rechts auf der Card) ---- */
.ot-fav-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;              /* Touch-Target */
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #444;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s, color 0.15s;
}
.ot-fav-remove:hover { background: #fff; color: #e20000; }
.ot-fav-remove:focus-visible { outline: 2px solid #b51621; outline-offset: 2px; }
.ot-fav-remove svg { width: 20px; height: 20px; pointer-events: none; }

/* ---- Leerzustand ---- */
.ot-fav-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--ot-ink-2, #555);
    font-size: 16px;
    line-height: 1.5;
}
.ot-fav-empty a {
    color: var(--ot-accent, #b51621);
    font-weight: 600;
}
/* Zustaende werden vom JS per Klasse umgeschaltet. */
.ot-fav-empty[hidden],
.ot-fav-grid[hidden] { display: none; }