/* WirKaufenFair - Main Styles */
/* All styles have been modularized into separate CSS files */

@import url("/assets/css/base.css");
@import url("/assets/css/components.css");
/* header.css wird pro Seite als eigenes <link> direkt nach main.css geladen –
   es war zuvor auf 13 Seiten doppelt (hier und als <link>) eingebunden. */
@import url("/assets/css/modals.css");
@import url("/assets/css/dashboard.css");
@import url("/assets/css/suggestions.css");
@import url("/assets/css/admin.css");
/* mobile.css / mobile-components.css werden BEWUSST nicht hier importiert.
   @import-Regeln landen am Dateianfang, main.css ist auf jeder Seite das erste
   Stylesheet – die Mobile-Regeln hätten dadurch gegen jedes nachfolgende <link>
   verloren. Beide werden pro Seite als letzte <link>-Elemente eingebunden. */
@import url("/assets/css/components/bottom-toast-stack.css");
@import url("/assets/css/components/update-notice.css");
@import url("/assets/css/components/install-prompt.css");
@import url("/assets/css/components/consent-banner.css");
@import url("/assets/css/components/pending-indicator.css");
@import url("/assets/css/components/price-empty-cta.css");
@import url("/assets/css/components/allergen-alert.css");

/* Site Footer - Shared across all pages */
.site-footer {
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 24px 16px;
    margin-top: 0;
    text-align: center;
}

.footer-inner {
    max-width: 800px;
    margin: 0 auto;
}

.text-muted {
    color: var(--text-muted);
}

.footer-muted {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-bottom: 8px;
}

.footer-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.8125rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Public pages: external text links */
.external-link,
.external-link:visited {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    font-weight: 600;
}

.external-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Kontrastoptimierung für pa11y: text-muted und text */
:root {
    --content-link-color: #0369a1;
    --text: #23272a;
    --text-muted: #4b5563;
    --card: #fff;
    --border: #d1d5db;
    --accent: #0ea5e9;
    --accent-contrast: #0e7490;
    --input-bg: #f3f4f6;
    --shadow: rgba(0, 0, 0, 0.04);
    --muted: #e5e7eb;
    --success: #059669;
    --danger: #dc2626;
    --warning: #f59e0b;
}

/* Allgemeine Content-Links besser sichtbar (ohne Nav/Buttons zu beeinflussen) */
:where(main, .container, .card, article)
    a:not(.nav-link):not(.logo-link):not(.icon-only):not(.btn):not(.cta-btn):not(.tile):not(
        .help-cta-btn
    ):not(.btn-datenschutz):not(.admin-external-link):not(.donate-stripe-link) {
    color: var(--content-link-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    font-weight: 600;
}

:where(main, .container, .card, article)
    a:not(.nav-link):not(.logo-link):not(.icon-only):not(.btn):not(.cta-btn):not(.tile):not(
        .help-cta-btn
    ):not(.btn-datenschutz):not(.admin-external-link):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.external-link.btn,
.external-link.btn:visited,
.btn.external-link,
.btn.external-link:visited {
    text-decoration: none;
    font-weight: inherit;
}

.donate-stripe-link,
.donate-stripe-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #0369a1;
    background: #0369a1;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}

.donate-stripe-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* „Auf Anfrage · Beta"-Badge: macht klar, dass Stripe (noch) kein direkter
   Bezahl-Button ist, sondern per E-Mail angefragt wird. */
.donate-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

/* Spendentransparenz: echtes Kosten-Ledger.
   Bezahlte und erwartete (geschätzte) Kosten werden in zwei Gruppen getrennt;
   die Forecast-Gruppe ist gestrichelt umrandet, damit sie nie wie ein
   feststehender Betrag wirkt. Alle Farben laufen über die Theme-Variablen,
   funktionieren also in Light und Dark. */
.tp-note {
    margin: 0 0 12px;
    color: var(--text-muted);
}

.tp-group {
    margin: 0 0 16px;
}

.tp-group:last-child {
    margin-bottom: 0;
}

.tp-group-title {
    margin: 0 0 8px;
    font-size: 1rem;
}

.tp-ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.tp-group--forecast .tp-item {
    border-style: dashed;
    background: transparent;
}

.tp-item-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tp-item-label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.tp-item-amount {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tp-item-meta,
.tp-item-rate {
    margin: 4px 0 0;
    color: var(--text-muted);
}

.tp-group-total {
    margin: 8px 0 0;
    font-weight: 600;
    text-align: right;
}

/* Regional alerts widget */
.regional-spinner,
.regional-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.regional-spinner {
    gap: 10px;
}

.regional-spinner-icon {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.regional-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.regional-summary-card {
    flex: 1;
    min-width: 80px;
    padding: 8px;
    background: var(--input-bg);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.regional-summary-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.regional-summary-value--accent {
    color: var(--accent);
}

.regional-summary-value--success {
    color: var(--success);
}

.regional-summary-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.regional-updates-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.regional-updates-list {
    display: grid;
    gap: 8px;
}

.regional-update-item {
    padding: 8px;
    background: var(--input-bg);
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
}

.regional-update-product {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.regional-update-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
}

.regional-update-price {
    font-weight: 700;
    color: var(--color-price);
}

.regional-update-time {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.regional-updates-more,
.regional-updates-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.regional-updates-more {
    margin-top: 8px;
}

.regional-updates-empty {
    padding: 16px;
    font-size: 0.8125rem;
}

.regional-new-products {
    margin-top: 12px;
    padding: 8px;
    background: rgba(14, 165, 164, 0.08);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text);
}

.regional-error {
    flex-direction: column;
    text-align: center;
    color: var(--danger);
    font-size: 0.8125rem;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    border: 1px solid var(--danger);
}

.regional-error-icon {
    margin-bottom: 8px;
    font-size: 1.5em;
}

/* Onboarding: noch kein Markt gewählt – neutraler Hinweis, KEIN Fehlerstil */
.regional-onboarding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}

.regional-onboarding-icon {
    font-size: 1.75em;
    line-height: 1;
}

.regional-onboarding-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.regional-onboarding-cta {
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.regional-onboarding-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der
   Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
    .footer-links a:hover {
        color: var(--accent);
    }

    .external-link:hover {
        text-decoration-thickness: 2px;
    }

    .donate-stripe-link:hover {
        background: #075985;
        border-color: #075985;
    }

    .regional-onboarding-cta:hover {
        opacity: 0.9;
    }

    /* Content-Links (Gegenstück zur :focus-visible-Regel weiter oben,
       die bewusst ungekapselt bleibt). */
    :where(main, .container, .card, article)
        a:not(.nav-link):not(.logo-link):not(.icon-only):not(.btn):not(.cta-btn):not(.tile):not(
            .help-cta-btn
        ):not(.btn-datenschutz):not(.admin-external-link):hover {
        color: var(--accent-hover);
    }
}