/*
 * BritTips 0.0.21 R2.1 — Exact Current UI Skin
 *
 * This stylesheet is intentionally narrow. The production public.css remains
 * the geometric/layout source of truth; only brand colors, semantic colors and
 * contrast are adjusted under the production public UI.
 */

:root {
    --bt-brand-navy: #102d44;
    --bt-brand-navy-deep: #081a29;
    --bt-brand-red: #cd2029;
    --bt-brand-red-bright: #e23a43;
    --bt-brand-red-dark: #a91620;
    --bt-success: #46b982;
    --bt-success-bright: #64d39a;
    --bt-success-soft: rgba(70, 185, 130, 0.10);
    --bt-info: #68b7e8;
    --bt-info-soft: rgba(79, 167, 221, 0.10);
    --bt-market-odds: #7fc7f0;
    --bt-market-odds-bright: #a8dcf7;
    --bt-market-odds-soft: rgba(127, 199, 240, 0.10);

    /* Existing public component contract: only the brand accent changes. */
    --accent: var(--bt-brand-red);
    --accent-bright: var(--bt-brand-red-bright);
    --accent-dark: var(--bt-brand-red-dark);
    --border-strong: rgba(205, 32, 41, 0.42);
}

body {
    background:
        radial-gradient(circle at 68% 2%, rgba(205, 32, 41, 0.11), transparent 27rem),
        linear-gradient(180deg, #06101a 0, var(--bg) 40%, var(--bg-deep) 100%);
}

.site-header {
    border-bottom-color: rgba(126, 157, 176, 0.19);
    background: rgba(6, 20, 31, 0.86);
}

.button-primary {
    color: #ffffff;
    border-color: var(--bt-brand-red);
    background: linear-gradient(135deg, var(--bt-brand-red-bright), var(--bt-brand-red-dark));
    box-shadow: 0 8px 24px rgba(205, 32, 41, 0.20);
}

.button-primary:hover,
.button-primary:focus-visible {
    box-shadow: 0 10px 32px rgba(205, 32, 41, 0.34);
}

.button-ghost:hover,
.button-ghost:focus-visible {
    border-color: rgba(205, 32, 41, 0.70);
    background: rgba(24, 37, 49, 0.80);
}

.hero-content h1 span,
.page-hero h1 span {
    text-shadow: 0 0 28px rgba(205, 32, 41, 0.22);
}

.hero-visual::before {
    background: linear-gradient(90deg, #06101a 0%, rgba(6, 16, 26, 0.94) 8%, rgba(16, 45, 68, 0.30) 39%, rgba(4, 11, 18, 0.02) 75%);
}

.hero-glow {
    box-shadow: 0 0 130px 32px rgba(205, 32, 41, 0.17);
}

/* Brand-facing accents that previously inherited the generic neon green. */
.team-badge {
    border-color: rgba(205, 32, 41, 0.34);
    background: rgba(205, 32, 41, 0.09);
}

.bookmaker-badge {
    border-color: rgba(205, 32, 41, 0.30);
    background: linear-gradient(135deg, rgba(123, 23, 31, 0.86), rgba(52, 24, 35, 0.76));
}

.today-predictions-badge {
    border-color: rgba(205, 32, 41, 0.26);
    background: rgba(205, 32, 41, 0.07);
}

.steps-list::before {
    background: linear-gradient(var(--bt-brand-red), rgba(205, 32, 41, 0.16));
}

/* Membership badges communicate state/trust, not danger. */
.guarantee-badge {
    border-color: rgba(104, 183, 232, 0.38);
    color: #c8ecff;
    background: var(--bt-info-soft);
}

.current-plan-summary {
    border-color: rgba(70, 185, 130, 0.38);
    color: var(--bt-success-bright);
    background: var(--bt-success-soft);
}

.price-card.is-featured {
    box-shadow: 0 0 34px rgba(205, 32, 41, 0.12);
}

.price-card.is-free {
    background:
        radial-gradient(circle at 14% 0%, rgba(205, 32, 41, 0.075), transparent 9rem),
        rgba(5, 17, 26, 0.66);
}

.price-card.is-active-plan {
    border-color: rgba(70, 185, 130, 0.56);
    box-shadow: 0 0 38px rgba(70, 185, 130, 0.15);
}

.active-plan-badge {
    color: #06130d;
    background: var(--bt-success-bright);
}

.administrator-plan-badge {
    color: #06131d;
    background: var(--bt-market-odds-bright);
}

.newsletter-form input:focus,
.account-field input:focus {
    box-shadow: 0 0 0 3px rgba(205, 32, 41, 0.10);
}

.page-hero {
    background:
        radial-gradient(circle at 78% 38%, rgba(205, 32, 41, 0.10), transparent 22rem),
        linear-gradient(135deg, rgba(8, 23, 34, 0.96), rgba(3, 10, 17, 0.98));
}

.page-hero-card {
    border-color: rgba(205, 32, 41, 0.16);
    box-shadow: 0 0 70px rgba(205, 32, 41, 0.10);
}

.public-cta-panel {
    border-color: rgba(205, 32, 41, 0.30);
    background:
        radial-gradient(circle at 84% 50%, rgba(205, 32, 41, 0.12), transparent 18rem),
        linear-gradient(135deg, rgba(10, 29, 39, 0.96), rgba(4, 15, 23, 0.96));
}

.performance-history-toggle button.is-active {
    color: #ffffff;
}

.prediction-live-progress-fill {
    background: linear-gradient(90deg, rgba(70, 181, 255, 0.72), rgba(205, 32, 41, 0.88));
}

/* Published bookmaker odds are neutral market data, not a warning/error state. */
.public-predictions-table td[data-label="Απόδοση"] .positive-number,
.home-prediction-row td[data-label="Απόδοση"] .positive-number {
    color: var(--bt-market-odds-bright) !important;
}

/* Semantic states remain independent from the red BritTips brand accent. */
.stat-item.is-accent .stat-value,
.stat-item.is-positive .stat-value,
.metric-positive,
.home-value.is-positive {
    color: var(--bt-success) !important;
}

.prediction-state.is-won,
.result-won,
.prediction-live-locked.is-won {
    border-color: rgba(70, 185, 130, 0.38);
    color: var(--bt-success-bright);
    background: var(--bt-success-soft);
}

.tips-empty-icon {
    border-color: rgba(70, 185, 130, 0.40);
    color: var(--bt-success);
    background: var(--bt-success-soft);
}

.pricing-notice-success,
.plan-status-active {
    border-color: rgba(70, 185, 130, 0.34);
    color: #d9f8e9;
    background: var(--bt-success-soft);
}

.price-card.is-premium .plan-status-active {
    border-color: rgba(218, 183, 54, 0.34);
    color: #f5e4b3;
    background: rgba(218, 183, 54, 0.08);
}

.prediction-bet-visual.is-positive {
    --bet-visual-color: var(--bt-success-bright);
}

.prediction-live-lock-mark.is-positive,
.prediction-bet-visual.is-positive .prediction-live-lock-mark {
    color: var(--bt-success-bright);
}

.history-day-label.is-positive i {
    background: var(--bt-success);
}

.live-status {
    border-color: rgba(79, 167, 221, 0.34);
    color: #bfe7ff;
    background: var(--bt-info-soft);
}

.live-status i {
    background: var(--bt-info);
    box-shadow: 0 0 12px rgba(79, 167, 221, 0.72);
}

/* Preserve semantic win tones inside market-specific live visuals. */
.prediction-outcome-track > i.is-half-win,
.prediction-outcome-rail.is-five.is-pos-3 .prediction-outcome-rail-marker {
    color: #86cb72;
    background: #86cb72;
}

.prediction-outcome-track > i.is-win,
.prediction-outcome-rail.is-five.is-pos-4 .prediction-outcome-rail-marker,
.prediction-outcome-rail.is-three.is-pos-2 .prediction-outcome-rail-marker,
.prediction-outcome-rail.is-two.is-pos-1 .prediction-outcome-rail-marker {
    color: #66ed46;
    background: #66ed46;
}

.prediction-live-ah-visual .prediction-live-ah-track > i {
    background: linear-gradient(90deg, rgba(255, 115, 121, 0.66) 0%, rgba(255, 115, 121, 0.38) 38%, rgba(126, 149, 161, 0.32) 50%, rgba(134, 203, 114, 0.38) 62%, rgba(102, 237, 70, 0.66) 100%);
}

/* Accessible focus color consistent with the logo palette. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline-color: var(--bt-brand-red);
}

@media (max-width: 980px) {
    .primary-navigation {
        background: rgba(3, 14, 23, 0.985);
    }
}