/* PWGermanShop — Versand-Modul CSS
 *
 * Wird vom GermanShopShipping-Modul über die AssetRegistry mit Priority 50
 * (Modul-Schicht) angemeldet. Referenziert die Design-Tokens aus
 * `gs-theme.css` (--gs-*).
 *
 * Inhalt:
 *  - Versandkosten-Übersichtsseite (`/versandkosten/`): Intro, Matrix
 *    (Versandklasse × Zone), Fallback-Liste (ohne Zonen), Hint-Text.
 */

.gs-versand-intro {
    color: var(--gs-ink-soft);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}
.gs-versand-empty {
    background: var(--gs-surface-alt);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    color: var(--gs-ink-soft);
}

/* Matrix-Tabelle (Klasse × Zone) — und Fallback-Liste */
.gs-versand-matrix,
.gs-versand-list {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}
.gs-versand-matrix th,
.gs-versand-matrix td,
.gs-versand-list th,
.gs-versand-list td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--gs-border);
    vertical-align: top;
}
.gs-versand-matrix thead th,
.gs-versand-list thead th {
    background: var(--gs-surface-alt);
    font-weight: 600;
    border-bottom: 2px solid var(--gs-border-strong);
}
.gs-versand-matrix tbody th {
    font-weight: 600;
    background: var(--gs-surface);
}
.gs-versand-class-title {
    display: block;
}
.gs-versand-class-time,
.gs-versand-class-note,
.gs-versand-zone-countries {
    display: block;
    font-size: 0.8125rem;
    color: var(--gs-ink-soft);
    font-weight: normal;
    margin-top: 0.15rem;
}
.gs-versand-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.gs-versand-cell--none {
    color: var(--gs-ink-soft);
    text-align: center;
}
.gs-versand-cell--free {
    color: var(--gs-ok);
    font-weight: 600;
}
.gs-versand-hint {
    color: var(--gs-ink-soft);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

/* ════════════════════════════════════════════════════════════════════════
 * Responsive — Versand
 *
 * Matrix: echte 2D-Tabelle (Klassen × Zonen), lässt sich nicht sinnvoll zu
 * Cards stapeln → horizontaler Scroll-Wrapper (Markup in ShippingRenderer::
 * renderMatrix). Fokus-Rahmen für Tastaturbedienung der Scroll-Region.
 * Liste: 3-spaltig, wird unter 48 rem zum Card-Layout (data-label aus
 * ShippingRenderer::renderList). Eine 4. Zelle (Row-Header .gs-versand-class-
 * title) wird zum Kartentitel ohne data-label-Präfix.
 * ════════════════════════════════════════════════════════════════════════ */
.gs-table-scroll {
    overflow-x: auto;
    margin: 0 0 1.25rem;
}
.gs-table-scroll:focus-visible {
    outline: 2px solid var(--gs-accent);
    outline-offset: 2px;
    border-radius: var(--gs-radius-sm);
}
/* Matrix darf im Scroll-Wrapper nicht schrumpfen — feste Mindestbreite
 * erzwingt das Scrollen statt des Quetschens. */
.gs-table-scroll .gs-versand-matrix {
    min-width: 32rem;
}

@media (max-width: 48rem) {
    .gs-versand-list {
        background: transparent;
        border: none;
        margin: 0 0 1rem;
    }
    .gs-versand-list thead {
        display: none;
    }
    .gs-versand-list tbody,
    .gs-versand-list tr,
    .gs-versand-list th,
    .gs-versand-list td {
        display: block;
        width: 100%;
    }
    .gs-versand-list tbody tr {
        background: var(--gs-surface);
        border: 1px solid var(--gs-border);
        border-radius: var(--gs-radius);
        padding: 0.5rem 1rem;
        margin-bottom: 0.75rem;
    }
    /* Zeilenkopf = Kartentitel (ohne Label-Präfix). */
    .gs-versand-list tbody th {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--gs-border);
        background: transparent;
    }
    .gs-versand-list td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--gs-border);
        text-align: right;
    }
    .gs-versand-list tbody tr:last-child td {
        border-bottom: none;
    }
    .gs-versand-list td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gs-ink-soft);
        font-size: 0.8125rem;
        margin-right: auto;
        text-align: left;
    }
}