/* ── LAN Party Manager: Tickets-Seite (dynamische Ticket-/Addon-Kacheln) ─────
 * Nur die neuen, dynamischen Teile (Addon-Grid, Beschreibungstext in den
 * Ticket-Kacheln). Kachel-Rahmen/Layout selbst kommen weiterhin aus den
 * bestehenden .wp-block-columns.tickets / .red-gradient-stitch Regeln des
 * Themes (front-page.css) - hier bewusst nicht dupliziert.
 * ────────────────────────────────────────────────────────────────────────── */

.lan-ticket-tile-image img {
    width: 100%;
    height: auto;
    display: block;
}

.lan-ticket-description {
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.lan-ticket-description p {
    margin: 0 0 10px;
}

/* "Add to basket"-Button der Ticket-Kacheln zentrieren - .wp-block-buttons
   ist hier reines PHP-Markup (nicht durch echte Gutenberg-Blöcke erzeugt),
   daher nicht garantiert von der WP-Block-Library-CSS erfasst. */
.lan-ticket-tile-body .wp-block-buttons {
    display: flex;
    justify-content: center;
}

/* ── Addon-Grid ───────────────────────────────────────────────────────────── */
/* minmax mit fester OBERGRENZE (320px) statt reinem "1fr": dadurch bleiben
   die Karten bei wenigen Addons (aktuell 2) kompakt statt sich über die
   volle Breite zu strecken (das war der Grund für die vorherige feste
   4-Spalten-Lösung) - UND werden per justify-content:center als Gruppe
   mittig platziert statt am linken Rand hängenzubleiben, wenn sie nicht
   alle 4 Spalten füllen. Bei 4+ Addons ergibt sich weiterhin ein 4er-Raster
   (4 x 320px + Gaps passt in die übliche Content-Breite dieser Seite). */
.lan-addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .lan-addon-grid {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }
}

/* Gradient-Rahmen wie bei den grossen Ticket-Kacheln oben
   (.wp-block-columns.tickets > .wp-block-column, style-frontend.css) -
   gleicher Border-Trick: transparenter Border + zwei Hintergrund-Layer,
   das äussere sichtbar nur im Border-Bereich (background-clip). */
.lan-addon-card {
    display: flex;
    flex-direction: column;
    border: 3px solid transparent;
    border-radius: 16px;
    /* 10px - gleicher Abstand zwischen Rahmen und Inhalt wie bei den
       Ticket-Kacheln (.wp-block-columns.tickets > .wp-block-column,
       style-frontend.css: padding: 10px). */
    padding: 10px;
    box-sizing: border-box;
    background-image: linear-gradient(var(--bg-color), var(--bg-color)),
                      linear-gradient(to left, rgba(77, 18, 18, 1), rgba(243, 1, 1, 1));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.lan-addon-card-image {
    margin: -10px -10px 16px;
    border-radius: 13px 13px 0 0;
    overflow: hidden;
}

/* height:auto statt fixer Höhe + object-fit:cover - dieselbe Logik wie
   .lan-ticket-tile-image img bei den Ticket-Kacheln: das ganze Bild bleibt
   sichtbar statt oben/unten abgeschnitten zu werden. */
.lan-addon-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Rote Verlaufs-Box für den gesamten Kartentext (Titel bis Button) - wie
   .red-gradient-stitch bei den Ticket-Kacheln. Eigenes Element statt
   Hintergrund direkt auf .lan-addon-card, damit ein Abstand zum
   Gradient-Rahmen bestehen bleibt (der bleibt beim Padding von
   .lan-addon-card, das jetzt nur noch als Rahmen-Abstand dient). */
.lan-addon-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: linear-gradient(180deg, #860404 0%, rgba(77, 18, 18, 1) 100%);
    border-radius: 10px;
    /* 30px - gleicher Innenabstand wie .red-gradient-stitch bei den
       Ticket-Kacheln (style-frontend.css), damit es einheitlich wirkt. */
    padding: 30px;
}

.lan-addon-card-title {
    margin: 0 0 8px;
    font-family: "Roboto", Arial, sans-serif; /* h3 erbt sonst sitewide die
        Display-Schrift "Big Macca" (h2-h6-Regel in style.css) - für einen
        kleinen Karten-Titel wirkt die auf dieser Grösse verzerrt/"komisch" */
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: none;
    letter-spacing: normal;
}

.lan-addon-card-desc {
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 12px;
    flex-grow: 1;
}

.lan-addon-card-desc p {
    margin: 0 0 8px;
}

.lan-addon-card-price {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.lan-addon-card-price .woocommerce-Price-amount {
    color: #fff;
}

/* Lagerbestand (wc_get_stock_html() - .stock ist WooCommerce's eigene
   Kernklasse, .in-stock/.out-of-stock/.available-on-backorder je nach
   Status, siehe WC_Product::get_availability_class()). */
.lan-addon-card-stock {
    margin: 0 0 14px;
}

.lan-addon-card-stock .stock {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.lan-addon-card-stock .stock.in-stock {
    color: #6ee7b7;
}

.lan-addon-card-stock .stock.out-of-stock {
    color: #fca5a5;
}

.lan-addon-card-stock .stock.available-on-backorder {
    color: #f5c518;
}

.lan-addon-card-cta {
    text-align: center;
}

.lan-addon-card-cta a.add_to_cart_button,
.lan-addon-card-cta a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    background: linear-gradient(0deg, #6a1010 0%, #f90000 100%);
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    border-radius: 6px;
    transition: opacity .2s ease;
    box-sizing: border-box;
}

.lan-addon-card-cta a.add_to_cart_button:hover,
.lan-addon-card-cta a.button:hover {
    opacity: .82;
}

.lan-addon-card-cta a.added_to_cart {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #86efac;
}

@media (max-width: 600px) {
    .lan-addon-grid {
        grid-template-columns: 1fr;
    }
}

/* ── "Details"-Button + Overlay für die lange Produktbeschreibung ───────────
 * Siehe LAN_Ticket_Shop::render_addon_grid(): die Kurzbeschreibung bleibt in
 * der Kachel, die normale (potenziell lange) Beschreibung steckt in einem
 * <template> und wird per addon-details-modal.js in dieses Overlay kopiert,
 * statt das Kachel-Grid der Tickets-Seite zu sprengen. */
/* Gleiches rotes CTA-Buttondesign wie die übrigen Buttons im Theme (schräge
   Ecken per clip-path, roter Verlauf - z.B. "Proceed to checkout" im
   Warenkorb oder .lan-transfer-submit beim Ticket-Transfer), statt eines
   schlichten grauen Outline-Buttons. */
.lan-addon-details-btn {
    --cut-small: 5px;
    --cut-large: 10px;
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 8px 16px;
    background: linear-gradient(0deg, #6a1010 0%, #f90000 100%);
    border: none;
    border-radius: 0;
    color: #fff;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    clip-path: polygon(
        var(--cut-small) 0,
        calc(100% - var(--cut-small)) 0,
        100% var(--cut-small),
        100% calc(100% - var(--cut-large)),
        calc(100% - var(--cut-large)) 100%,
        var(--cut-small) 100%,
        0 calc(100% - var(--cut-small)),
        0 var(--cut-small)
    );
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
    transition: opacity .15s ease, filter .15s ease;
}

.lan-addon-details-btn:hover {
    opacity: .85;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}

/* Cart/Checkout (cart-item-details.js): leere Kurzbeschreibung nicht als
   Leerraum stehen lassen, und etwas Abstand zwischen Produktname/Preis und
   dem "Details"-Button, da .wc-block-components-product-metadata dort kein
   Flex-Container ist (align-self oben greift dort nicht). */
.wc-block-components-product-metadata__description:empty {
    display: none;
}

.wc-block-components-product-metadata .lan-addon-details-btn {
    display: inline-block;
    margin-top: 6px;
}

.lan-addon-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    box-sizing: border-box;
}

/* [hidden] wuerde sonst von der eigenen display:flex-Regel oben
   ueberschrieben (Autoren-CSS schlaegt das UA-"[hidden]{display:none}"),
   dadurch war das Overlay schon beim Laden sichtbar. */
.lan-addon-details-overlay:not([hidden]) {
    display: flex;
}

.lan-addon-details-modal {
    position: relative;
    max-width: 640px;
    max-height: 80vh;
    width: 100%;
    overflow-y: auto;
    background: linear-gradient(180deg, #860404 0%, rgba(77, 18, 18, 1) 100%);
    border: 3px solid transparent;
    border-radius: 16px;
    background-image: linear-gradient(180deg, #860404 0%, rgba(77, 18, 18, 1) 100%),
                       linear-gradient(to left, rgba(77, 18, 18, 1), rgba(243, 1, 1, 1));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 56px 32px 32px;
    color: #e2e8f0;
    font-size: 15px;
    line-height: 1.7;
}

.lan-addon-details-modal p {
    margin: 0 0 12px;
}

/* Produktbild zentriert, mit Abstand zum Rand statt randlos zu bluten - lässt
   dadurch auch oben Platz für das Schliessen-Kreuz, statt es zu überlagern. */
.lan-addon-details-modal-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
    border-radius: 10px;
}

/* Gleiches Listen-Design wie die Vorteils-Liste der Ticket-/Preis-Kacheln
   (.red-gradient-stitch .wp-block-list, style-frontend.css) statt der
   nackten Browser-Punkte - für einheitliche Optik auch im Popup. */
.lan-addon-details-modal ul {
    list-style-image: url("/wp-content/themes/switzerlan/images/icons/list-icon.png");
    list-style-position: outside;
    margin: 0 0 12px;
    padding-left: 24px;
}

.lan-addon-details-modal li {
    margin-bottom: 6px;
    padding-left: 4px;
}

.lan-addon-details-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.lan-addon-details-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

body.lan-addon-details-open {
    overflow: hidden;
}