/*
 * header_v2.css — стилі для components/header_v2.html.twig.
 *
 * Містить лише слім-смугу статусу (Сезон/День + прогрес) під навбаром і
 * sticky-wrapper, що утримує навбар і смугу разом біля верху вʼюпорта.
 *
 * Поки не підключений: щоб увімкнути, додати у assets/app.js
 *   import './styles/header_v2.css';
 * та замінити в layout-ах інклуд header.html.twig на header_v2.html.twig.
 */

.bd-header {
    z-index: 1030;
}

.bd-status-strip {
    background-color: #f5f7fb;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.bd-status-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.4rem 1rem;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bd-status-strip__inner {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.bd-status-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.bd-status-strip__label {
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.bd-status-strip__sep {
    color: var(--bs-tertiary-color);
    margin: 0 0.15rem;
}

.bd-status-strip__total {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.bd-status-strip__season strong {
    font-variant-numeric: tabular-nums;
    color: var(--bs-emphasis-color);
}

.bd-status-strip__progress {
    width: 90px;
    height: 5px;
    margin-left: 0.4rem;
    background-color: var(--bs-gray-300);
    border-radius: 999px;
    overflow: hidden;
}

.bd-status-strip__progress .progress-bar {
    background-color: var(--bg-olive);
}

/* Wallet — golden coin pouch, replaces the default Bootstrap warning badge.
   Lives in the navbar's right cluster (after notifications), stands out
   against the dark navbar while staying compact and tactile. */
.bd-wallet {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    /* background: linear-gradient(135deg, #fff2c2 0%, #f7d772 100%); */
    /* border: 1px solid rgba(120, 75, 0, 0.15); */
    /* color: #5a3f00; */
    /* box-shadow: */
    /*     0 1px 2px rgba(60, 35, 0, 0.10), */
    /*     inset 0 1px 0 rgba(255, 255, 255, 0.55); */
    /* background: linear-gradient(135deg, #ffe033 0%, #ffaa00 100%); */
    /* background: #ffbe00; */
    background: #ffd60a;
    border: 1px solid rgba(180, 130, 0, 0.5);
    color: #3d2800;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    font-size: 0.95rem;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.bd-wallet:hover,
.bd-wallet:focus-visible {
    background: linear-gradient(135deg, #fff8d5 0%, #ffd35e 100%);
    color: #3a2900;
    transform: translateY(-1px);
    box-shadow:
        0 3px 7px rgba(60, 35, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bd-wallet:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(60, 35, 0, 0.12),
        inset 0 1px 2px rgba(120, 75, 0, 0.15);
}

.bd-wallet__icon {
    color: #b38500;
    font-size: 0.95em;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

.bd-wallet__amount {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.bd-status-strip__pause {
    /* Strip the browser <button> defaults so the chip keeps the slim height
       of its original <span> incarnation (padding + line-height-1 only). */
    appearance: none;
    -webkit-appearance: none;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: #fff4d6;
    border: 1px solid #ffe69c;
    color: #8a5a00;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    /* On mobile — sit on the right edge of the strip (auto-left only). */
    margin-left: auto;
}

.bd-status-strip__pause:hover,
.bd-status-strip__pause:focus-visible {
    background-color: #ffe9b0;
    border-color: #ffc966;
    outline: none;
}

@media (min-width: 768px) {
    .bd-status-strip__inner {
        position: relative;
    }

    .bd-status-strip__pause {
        /* On desktop — absolute-centered relative to the whole strip width,
           so the chip sits in the true middle regardless of the season
           block's width on the left. */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
}

.bd-status-strip__pause i {
    color: #c8841b;
}

.bd-status-strip__pause-until {
    font-weight: 500;
    opacity: 0.85;
}

.bd-status-strip__pause-message {
    font-weight: 400;
    opacity: 0.85;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-navbar {
    box-shadow: none;
}

/* Hide the in-strip progress bar on very narrow screens — Day/Total digits
   already convey the same info. */
@media (max-width: 575.98px) {
    .bd-status-strip__progress {
        display: none;
    }

    /* Mobile chip = label only. Resume-at and admin message live in the
       sidebar pause card (visible when the burger menu is opened). */
    .bd-status-strip__pause-until,
    .bd-status-strip__pause-message {
        display: none;
    }
}