/* ═══════════════════════════════════════════════════
   Tor-Alarm Rabattrechner – EUROGREEN WM-Kampagne
   Praefix: eg-tr-
   ═══════════════════════════════════════════════════ */

/* ─── Widget-Tokens (Fallbacks fuer Theme-Variablen) ── */

:root {
    --eg-tr-font: var(--body_typography-font-family, 'Fira Sans', system-ui, sans-serif);
    --eg-tr-green: var(--awb-color5, #0f8345);
    --eg-tr-green-dark: var(--awb-custom13, #084524);
    --eg-tr-green-light: var(--awb-custom_color_7, #6dca91);
}

/* ─── Gemeinsame Basis ─────────────────────────────── */

.eg-toralarm-wrap {
    max-width: 540px;
    margin: 0 auto;
}

.eg-toralarm-rechner,
.eg-toralarm-widget {
    font-family: var(--eg-tr-font);
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
}

.eg-toralarm-rechner *,
.eg-toralarm-rechner *::before,
.eg-toralarm-rechner *::after,
.eg-toralarm-widget *,
.eg-toralarm-widget *::before,
.eg-toralarm-widget *::after {
    box-sizing: inherit;
}

/* ─── Modus A: Interaktiver Rechner ────────────────── */

.eg-toralarm-rechner:not(.eg-toralarm-aktiv) {
    background: rgba(255, 255, 255, .1);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 10px;
    padding: 20px 40px;
}

/* Header */
.eg-tr-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.eg-tr-eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .35rem !important;
}

.eg-tr-headline {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    margin: 0 !important;
}

/* Tor-Buttons Label */
.eg-tr-goals-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 .75rem;
}

/* Tor-Buttons */
.eg-tr-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.eg-tr-goal-btn {
    flex: 1 1 auto;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: all .15s ease;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}

.eg-tr-goal-btn:hover {
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, 1);
    color: #fff;
}

.eg-tr-goal-btn.active {
    background: rgba(255, 255, 255, .5);
    border-color: rgba(255, 255, 255, 1);
    color: #0f8345;
}

.eg-tr-goal-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.eg-tr-goal-pct {
    font-size: 11px;
    font-weight: 500;
    opacity: .7;
}

.eg-tr-goal-btn.active .eg-tr-goal-pct {
    opacity: 1;
}

/* Ergebnis-Bereich */
.eg-tr-result {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, .2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    min-height: 80px;
}

.eg-tr-result-left {
    flex: 1;
}

.eg-tr-result-right {
    text-align: right;
    white-space: nowrap;
}

.eg-tr-result-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 .35rem !important;
}

.eg-tr-empty {
    font-size: 15px;
    color: rgba(255, 255, 255, .35);
}

.eg-tr-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eg-tr-pct {
    font-size: clamp(36px, 8vw, 48px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
}

.eg-tr-max-badge {
    display: inline-block;
    background: #639922;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: .05em;
    vertical-align: middle;
}

.eg-tr-expiry-date {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin: 0 !important;
}

.eg-tr-expiry-time {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    margin: .15rem 0 0 !important;
}

/* Hinweis */
.eg-tr-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin: 0 !important;
}

/* ─── Modus B: Aktiver Gutschein ───────────────────── */

.eg-tr-gif-wrap {
    text-align: center;
    margin-top: -70px;
    margin-bottom: 1rem;
}

.eg-tr-gif {
    max-width: 100%;
    width: 80px;
    height: auto;
    border-radius: 10px;
}

.eg-tr-aktiv-box {
    text-align: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 10px;
    padding: 20px 40px;
}

.eg-tr-aktiv-label {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .05em;
    margin: 0 0 .5rem;
}

.eg-tr-aktiv-rabatt {
    font-size: clamp(48px, 10vw, 72px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
    margin: 0 0 -20px -20% !important;
    padding: 10px 20px;
    background: #e40026;
    border-radius: 10px;
    border: 2px solid #ffffff;
    width: 140%;
    animation: eg-tr-text-glow 1s ease-in-out infinite;
}

@keyframes eg-tr-text-glow {
    0%, 100% {
        text-shadow:
            0 0 12px rgba(255, 255, 255, .15),
            0 0 30px rgba(255, 255, 255, .08);
    }
    50% {
        text-shadow:
            0 0 20px rgba(255, 255, 255, .35),
            0 0 50px rgba(255, 255, 255, .15),
            0 0 80px rgba(255, 255, 255, .05);
    }
}

.eg-tr-aktiv-subline {
    font-size: 14px;
    color: #fff;
    margin: 0 0 1.5rem;
}

.eg-tr-code-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: .75rem;
}

.eg-tr-code {
    font-family: monospace;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .15em;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
}

.eg-tr-copy-btn {
    background: #fff;
    color: #0f8345;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s ease;
}

.eg-tr-copy-btn:hover {
    opacity: .85;
}

.eg-tr-kopiert-hinweis {
    font-size: 13px;
    color: #fff;
    margin: 0 0 .5rem;
}

.eg-tr-expiry {
    font-size: 13px;
    color: #fff;
    margin: .75rem 0 0;
}

.eg-tr-expiry strong {
    color: #fff;
}

/* ═══════════════════════════════════════════════════
   Countdown-Widget [eg_toralarm_countdown]
   ═══════════════════════════════════════════════════ */

/* ─── Gemeinsam: Countdown + Standby ───────────────── */

.eg-toralarm-widget {
    background: rgba(255, 255, 255, .2);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 10px;
    padding: 20px 40px;
}

.eg-toralarm-widget .eg-tr-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--eg-tr-green-light);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .5rem !important;
}

/* ─── Modus A: Countdown ──────────────────────────── */

.eg-tr-w-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.eg-tr-w-title {
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 600;
    color: #fff !important;
    line-height: 1.25;
    margin: 0 0 .35rem !important;
}

.eg-tr-w-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    margin: 0 !important;
}

/* Matchday-Zeile */
.eg-tr-matchday {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.eg-tr-match-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eg-tr-match-teams {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.eg-tr-match-time {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

/* Countdown-Bloecke */
.eg-tr-countdown {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.eg-tr-cd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 48px;
}

.eg-tr-cd-num {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.eg-tr-cd-lbl {
    font-size: 10px;
    color: rgba(255, 255, 255, .9);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* Rabatt-Skala (Balken) */
.eg-tr-scale-section {
    margin-bottom: 1.5rem;
}

.eg-tr-scale-label {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 .75rem !important;
}

.eg-tr-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
}

.eg-tr-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.eg-tr-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    /* Farbe kommt inline per rgba(255,255,255, opacity) */
}

.eg-tr-bar-lbl {
    font-size: 12px;
    color: rgba(255, 255, 255, .9);
    margin-top: 4px;
    white-space: nowrap;
}

/* Footer */
.eg-tr-w-footer {
    text-align: center;
}

.eg-tr-w-footer-text {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 .75rem !important;
}

.eg-tr-nl-btn {
    display: inline-block;
    background: #fff;
    color: var(--eg-tr-green, #0f8345);
    font-size: 14px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 99px;
    text-decoration: none !important;
    transition: opacity .15s ease;
}

.eg-tr-nl-btn:hover {
    opacity: .85;
    color: var(--eg-tr-green, #0f8345);
    text-decoration: none !important;
}

/* ─── Modus B (Countdown-Widget): Aktiver Rabatt ──── */

.eg-toralarm-widget-aktiv {
    text-align: center;
    animation: eg-tr-glow-pulse 1s ease-in-out infinite;
}

@keyframes eg-tr-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 12px rgba(255, 255, 255, .15),
            0 0 30px rgba(255, 255, 255, .08);
    }
    50% {
        box-shadow:
            0 0 20px rgba(255, 255, 255, .35),
            0 0 50px rgba(255, 255, 255, .15),
            0 0 80px rgba(255, 255, 255, .05);
    }
}

.eg-toralarm-widget-aktiv .eg-tr-aktiv-box {
    background: none;
    border: none;
    padding: 0;
}

/* ─── Modus C: Standby ────────────────────────────── */

.eg-toralarm-standby {
    text-align: center;
}

.eg-toralarm-standby .eg-tr-eyebrow {
    margin-bottom: .75rem;
}

.eg-tr-standby-text {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    margin: 0 0 1.25rem !important;
    line-height: 1.6;
}

/* ─── Variante C: Tore-Block + Spielstand-Chip ────── */

.eg-tr-tore-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    padding: 10px 20px;
}

.eg-tr-tore-zahl {
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.eg-tr-tore-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.eg-tr-tore-main {
    font-size: 20px;
    font-weight: 600;
    line-height: 1em;
    color: #fff;
}

.eg-tr-tore-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, .9);
}

.eg-tr-spielstand-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 16px;
}

.eg-tr-spielstand-chip strong {
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
}

/* ─── Modus D: 0 Tore (Nullnummer) ───────────────── */

.eg-toralarm-nullnummer {
    opacity: .9;
}

.eg-tr-tore-null {
    color: rgba(255, 255, 255, .3) !important;
}

.eg-tr-nullnummer-text {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    line-height: 1.6;
    margin: 12px 0 0 !important;
}

/* Naechstes Spiel in Modus D */
.eg-tr-next-match {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.eg-tr-next-match-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px !important;
}

/* ─── Responsiv ────────────────────────────────────── */

@media (max-width: 480px) {
    .eg-tr-goals {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .eg-tr-result {
        flex-direction: column;
        gap: .75rem;
        padding: 1rem;
    }

    .eg-tr-result-right {
        text-align: left;
    }

    .eg-tr-matchday {
        flex-direction: column;
        text-align: center;
    }

    .eg-tr-countdown {
        justify-content: center;
    }

    .eg-toralarm-widget {
        padding: 20px;
    }
}

/* ═══════════════════════════════════════════════════
   Spielhistorie
   ═══════════════════════════════════════════════════ */

.eg-toralarm-history {
    margin: 16px 0 0;
    font-family: var(--eg-tr-font);
    box-sizing: border-box;
}

.eg-toralarm-history *,
.eg-toralarm-history *::before,
.eg-toralarm-history *::after {
    box-sizing: inherit;
}

.eg-tr-history-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 10px 2px !important;
}

.eg-tr-history-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.eg-tr-history-card {
    background: rgba(255, 255, 255, .2);
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.eg-tr-history-info {
    flex: 1;
    min-width: 0;
}

.eg-tr-history-match {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px !important;
}

.eg-tr-history-date {
    font-size: 12px;
    color: #fff;
    margin: 0 !important;
}

.eg-tr-history-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

.eg-tr-history-tore,
.eg-tr-history-rabatt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.eg-tr-history-tore-zahl,
.eg-tr-history-rabatt-zahl {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.eg-tr-history-tore-label,
.eg-tr-history-rabatt-label {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.eg-tr-history-arrow {
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    line-height: 24px;
}

.eg-tr-history-null {
    color: rgba(255, 255, 255, .25) !important;
}

@media (max-width: 480px) {
    .eg-tr-history-card {
        padding: 14px 16px;
    }

    .eg-tr-history-tore-zahl,
    .eg-tr-history-rabatt-zahl {
        font-size: 24px;
    }
}

/* ═══════════════════════════════════════════════════
   Tor-Alarm FAB (Floating Action Button)
   Positioniert sich ueber dem Chatbot-FAB
   ═══════════════════════════════════════════════════ */

.eg-toralarm-fab-wrap {
    padding: 3px 10px 3px 3px;
    background: #e40026;
    border: solid white;
    border-width: 2px 0 2px 2px;
    position: fixed;
    bottom: 120px;
    right: 0;
    z-index: 999;
    height: fit-content;
    width: fit-content;
    border-radius: 60px 0 0 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none !important;
    transform: translate3d(120%, 0, 0);
    opacity: 0;
    animation: eg-toralarm-fab-enter .5s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}

.eg-toralarm-fab-wrap:hover {
    text-decoration: none !important;
}

.eg-toralarm-fab {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 2px solid #e40026;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.eg-toralarm-fab__gif {
    width: 70%;
    height: 70%;
    object-fit: contain;
    border-radius: 50%;
}

.eg-toralarm-fab-wrap__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

@keyframes eg-toralarm-fab-enter {
    from {
        transform: translate3d(120%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .eg-toralarm-fab-wrap {
        bottom: 70px;
        right: -15px;
        scale: .8;
    }
}