/* Language switcher. Copied from the website's public/css/lang-switcher.css,
 * which styles resources/views/layouts/header.blade.php on top of Bootstrap 4's
 * dropdown. Two things are dropped because they are specific to the website's
 * navbar: the .lang-switcher margin/order rules (this switcher is absolutely
 * positioned, not a flex child of a navbar) and the .lang-form rules (each
 * option there is a POST form; here it is a plain button).
 *
 * The toggle's colours are inverted. The website's header is white, so its
 * button is navy on transparent; this one sits on the dark .presale-bg image,
 * where navy-on-navy would be invisible. The menu is copied as-is -- it paints
 * its own white surface, so the background behind it never shows through.
 */
.ff-lang-switcher { position: absolute; top: 10px; right: 14px; z-index: 1100; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 3px solid #fff;          /* website: #546183 */
    border-radius: 6px;
    color: #fff;                     /* website: #122454 */
    font-size: 18px;
    font-weight: bold;
    padding: 8px 22px;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.lang-btn .lang-code {
    letter-spacing: 0.03em;
}

/* Bootstrap 4 keeps focus on the toggle while the menu is open, so this is
   also the open state -- same as on the website. */
.lang-btn:hover,
.lang-btn:focus {
    background: #fff;                /* website: #122454 */
    border-color: #fff;
    color: #122454;                  /* website: #fff */
    outline: none;
}

/* hide Bootstrap's default caret -- we use the globe icon instead */
.lang-btn::after {
    display: none;
}

/* ── Dropdown menu ── */
.lang-menu {
    min-width: 140px;
    border: 2px solid #122454;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(18, 36, 84, 0.14);
    padding: 5px;
    margin-top: 4px;
    z-index: 1060;
}

/* Each option is a <button>, and Bootstrap's .dropdown-item already resets
   width, border, text-align and background-color for buttons. Do NOT declare
   background here: at equal specificity it would out-order .dropdown-item.active
   below and leave white text on a transparent background -- the selected
   language rendering blank. */
.lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 600;
    color: #122454;
    cursor: pointer;
    transition: background 0.12s;
}

.lang-menu .dropdown-item .lang-check {
    font-size: 11px;
    opacity: 0;  /* hidden by default */
    flex-shrink: 0;
    width: 12px;
}

.lang-menu .dropdown-item.active .lang-check {
    opacity: 1; /* show checkmark on active locale */
}

.lang-menu .dropdown-item.active {
    background: #122454;
    color: #fff;
}

.lang-menu .dropdown-item:hover:not(.active) {
    background: #eef1f8;
    color: #122454;
}

/* ── Keeping clear of the page heading ──
 *
 * On the website the switcher is a flex item in the navbar, so it reserves its
 * own space and can never sit on top of anything. Here it is absolutely
 * positioned over the top-right of the navy banner, which also holds the
 * centred page heading -- so as the window narrows the heading grows towards it
 * and eventually runs underneath. (This predates the dropdown: the three EN/ES/FR
 * buttons were 94px wide and overlapped from 500px down. The dropdown toggle is
 * narrower, but the collision is the same.)
 *
 * Measured widths at which the centred heading first reaches the button, over
 * every page and locale: worst case es_ES "LISTA DE SORTEO DEL CAMPEONATO
 * BANANA BOWL 2026" at 811px. Below 860px, therefore, give the banner a top
 * strip the switcher can live in and let the heading start underneath it --
 * rather than squeezing the heading, which on a phone costs it another line.
 *
 * .presale-bg .list-today-new, not .list-today-new: waitlist.html loads
 * custom.css AFTER i18n.css, so a single-class selector would lose there.
 */
@media (max-width: 860px) {
    .presale-bg .list-today-new { padding-top: 66px; }  /* switcher: top 10 + ~46 tall */
}

@media (max-width: 767px) {
    .ff-lang-switcher { top: 6px; right: 8px; }
    .lang-btn { font-size: 15px; padding: 6px 14px; border-width: 2px; }
    .presale-bg .list-today-new { padding-top: 54px; } /* switcher: top 6 + ~39 tall */
}