/* ==================== Dropdown (shared) ====================
   The one dropdown panel in the app. Every consumer — the navbar user menu and
   timezone selector, the page filter selects, the coupons tab switcher — uses
   these classes for the panel and its items, so the look cannot drift apart.
   All values come from the --dd-* tokens in base/variables.css.

   Two open/close mechanisms sit on top of it:
     * `<details class="dd">` — panel shown by the browser; behaviour (single
       open panel, outside click, Escape, arrow keys, placement) in
       js/common/dropdown.js.
     * `.dropdown` + `.open` class — the older coupons switcher, further down.

   Only the panel width and the trigger belong to each consumer, since those
   depend on where the control sits. */

.dd {
    position: relative;
}

.dd > summary {
    list-style: none;
}

.dd > summary::-webkit-details-marker {
    display: none;
}

.dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.dd__arrow {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: -3px 2px 0 3px;
    border-right: 1.5px solid var(--nav-text);
    border-bottom: 1.5px solid var(--nav-text);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.dd[open] .dd__arrow {
    margin-top: 3px;
    transform: rotate(225deg);
}

.dd__menu {
    position: absolute;
    top: calc(100% + var(--dd-gap));
    right: 0;
    z-index: var(--dd-z-index);
    width: var(--dd-width);
    /* Never wider than the viewport, whatever the anchor is. */
    max-width: calc(100vw - 24px);
    max-height: var(--dd-max-height);
    overflow-y: auto;
    /* Keeps a scrolled-to-the-end list from chaining into the page scroll. */
    overscroll-behavior: contain;
    padding: var(--dd-padding);
    background: var(--dd-bg);
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    box-shadow: var(--dd-shadow);
}

/* Controls that sit at the bottom of a collapsed mobile panel (the navbar
   actions row) have no room below them and open upwards instead. The markup
   declares this once via the attribute, which js/common/dropdown.js reads too.
   This is only the starting direction: it must stay *above* the .is-above /
   .is-below rules, which have the same specificity (a media query adds none),
   so the direction actually measured on open wins over it. */
@media (max-width: 980px) {
    .dd[data-dd-mobile-placement="above"] > .dd__menu {
        top: auto;
        bottom: calc(100% + var(--dd-gap));
    }
}

/* Direction is decided per open by js/common/dropdown.js from the space
   actually available; these classes are what it toggles, and they come last so
   a measured flip beats the mobile default above. */
.dd.is-below > .dd__menu {
    top: calc(100% + var(--dd-gap));
    bottom: auto;
}

.dd.is-above > .dd__menu {
    top: auto;
    bottom: calc(100% + var(--dd-gap));
}

.dd__menu::-webkit-scrollbar {
    width: 8px;
}

.dd__menu::-webkit-scrollbar-track {
    background: transparent;
}

.dd__menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dd__menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
    background-clip: padding-box;
}

.dd__item {
    display: flex;
    align-items: center;
    /* Buttons default to border-box, plain <div> items (coupons) do not. */
    box-sizing: border-box;
    width: 100%;
    min-height: var(--dd-item-height);
    padding: var(--dd-item-padding);
    border: 0;
    border-radius: var(--dd-item-radius);
    background: transparent;
    color: var(--dd-item-color);
    font-family: inherit;
    font-size: var(--dd-item-font-size);
    font-weight: var(--dd-item-font-weight);
    text-align: left;
    cursor: pointer;
    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.dd__item:hover {
    color: var(--dd-item-color-hover);
    background: var(--dd-item-bg-hover);
}

.dd__item:focus-visible {
    outline: 2px solid;
    outline-offset: -2px;
}

/* `.dropdown__item.active` is the coupons switcher's own state class, driven by
   js/matches/coupons.js — same look, so it shares the rule rather than a copy. */
.dd__item--active,
.dropdown__item.active {
    color: var(--nav-text-strong);
    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.07)
        );
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ==================== Coupons Tab Switcher ====================
   Older click-toggled variant: the panel is a plain <div>, shown by an `.open`
   class from js/matches/coupons.js rather than by <details>. It carries the
   .dd__* classes for the panel and items, so only its trigger and the
   show/hide wiring live here. */

.dropdown {
    position: relative;
    display: inline-block;
    min-width: 160px;
    margin-bottom: 10px;
}

.dropdown__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.dropdown__trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dropdown__arrow {
    display: inline-block;
    font-size: 12px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.dropdown.open .dropdown__arrow {
    transform: rotate(180deg);
}

/* Anchored to the trigger's left edge and matched to its width, unlike the
   right-anchored navbar panels. */
.dropdown__menu {
    display: none;
    left: 0;
    right: auto;
    width: 100%;
    box-sizing: border-box;
}

.dropdown.open .dropdown__menu {
    display: block;
}

.subTabContent {
    display: none;
}

.subTabContent.active {
    display: block;
}