/* =====================================================================================
   eth-country  -  country picker with flags
   ADDED 09/16/2026

   Replaces the bare <select class="Populatecountry"> in the site header. A native
   <select> cannot render an image inside an <option>, so the select is kept in the DOM
   (hidden, still named countryCode, still the thing handleCountryChange reads) and this
   widget is drawn over the top of it.

   Namespaced under .ethc- so it cannot reach any existing rule.
   ===================================================================================== */

.ethc {
    position: relative;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

/* the original select stays in the DOM for form posts and for handleCountryChange,
   but is taken out of the visual and tab order */
.ethc-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------- the button ---- */

.ethc-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    min-height: 34px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #d3d9e0;
    border-radius: 4px;
    background: #fff;
    color: #24303c;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
}

.ethc-btn:hover {
    border-color: #b6bfca;
}

.ethc-btn:focus {
    outline: none;
    border-color: #2c7fb8;
    box-shadow: 0 0 0 3px rgba(44, 127, 184, .18);
}

.ethc-btn-label {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ethc-btn-code {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: none;
    margin: 0 6px;
    font-weight: 600;
    letter-spacing: .03em;
}

.ethc-caret {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6b7885;
}

/* ---------------------------------------------------------------- the flag ---- */

.ethc-flag {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: inline-block;
    width: 24px;
    height: 18px;
    border-radius: 2px;
    background: #eef1f4;
    /* a 1px inset keeps white flags (Japan, Poland) from vanishing on white */
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .12);
    object-fit: cover;
    vertical-align: middle;
}

/* shown instead of the image when a flag will not load, or for "All Country" */
.ethc-chip {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: inline-block;
    width: 24px;
    height: 18px;
    border-radius: 2px;
    background: #e8edf2;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .12);
    color: #4a5764;
    font-size: 9px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .04em;
    text-align: center;
    font-family: Consolas, Monaco, monospace;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- the panel ---- */

.ethc-panel {
    position: absolute;
    /* the site's category menu bar (.navbar-inverse) sits at z-index 5001, and the
       mobile menu row with it, so the panel has to clear that. Still below the
       page loader (100000) and the search autocomplete (99999). */
    z-index: 10051;
    top: calc(100% + 6px);
    right: 0;
    width: 300px;
    max-width: 92vw;
    background: #fff;
    border: 1px solid #e1e6eb;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .08);
    overflow: hidden;
    display: none;
}

.ethc-open > .ethc-panel {
    display: block;
}

.ethc-search-wrap {
    padding: 10px;
    border-bottom: 1px solid #eef1f4;
    background: #fafbfc;
}

.ethc-search {
    width: 100%;
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #d3d9e0;
    border-radius: 4px;
    font-size: 13px;
    color: #24303c;
    background: #fff;
}

.ethc-search:focus {
    outline: none;
    border-color: #2c7fb8;
    box-shadow: 0 0 0 3px rgba(44, 127, 184, .15);
}

.ethc-list {
    /* positioned so the rows' offsetTop is measured from the list itself. Without
       this the offsetParent is .ethc-panel and every offsetTop is 55px too large -
       the width of the panel's search box - which threw both scrollToSelected and
       the arrow key scrolling off by that much and left a sliced row under the
       search box. ADDED 09/16/2026 */
    position: relative;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.ethc-opt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.3;
    color: #24303c;
    cursor: pointer;
}

.ethc-opt-name {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ethc-opt:hover,
.ethc-opt.ethc-active {
    background: #f1f6fa;
}

.ethc-opt.ethc-selected {
    background: #e8f2f8;
    font-weight: 600;
}

.ethc-tick {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 8px;
    color: #1f7a4d;
    font-size: 13px;
    font-weight: 700;
    visibility: hidden;
}

.ethc-opt.ethc-selected .ethc-tick {
    visibility: visible;
}

.ethc-globe {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    color: #5b6672;
}

.ethc-empty {
    padding: 18px 12px;
    text-align: center;
    color: #8a95a1;
    font-size: 13px;
}

/* sheet chrome, only used on small screens */
.ethc-sheet-head {
    display: none;
}

.ethc-backdrop {
    display: none;
}

/* ---------------------------------------------------------------- mobile ---- */

@media (max-width: 767px) {

    .ethc-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10050;
        background: rgba(17, 24, 39, .45);
    }

    .ethc-open .ethc-backdrop {
        display: block;
    }

    /* full screen sheet - a 300px popover is unusable at 360px wide */
    .ethc-open > .ethc-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10051;
        width: auto;
        max-width: none;
        border: 0;
        border-radius: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .ethc-sheet-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding: 12px 8px 12px 16px;
        border-bottom: 1px solid #eef1f4;
    }

    .ethc-sheet-title {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }

    .ethc-sheet-close {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #6b7885;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        border-radius: 4px;
    }

    .ethc-sheet-close:hover,
    .ethc-sheet-close:focus {
        background: #f1f3f5;
        color: #333;
        outline: none;
    }

    .ethc-search-wrap {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding: 12px 16px;
    }

    .ethc-search {
        height: 42px;
        /* 16px stops iOS Safari zooming the page when the field takes focus */
        font-size: 16px;
    }

    .ethc-list {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        max-height: none;
        padding: 0 0 12px;
    }

    .ethc-opt {
        min-height: 48px;
        padding: 10px 16px;
        font-size: 15px;
    }

    .ethc-flag,
    .ethc-chip {
        width: 28px;
        height: 21px;
    }

    .ethc-chip {
        font-size: 10px;
        line-height: 21px;
    }

    /* stop the page behind the sheet from scrolling */
    body.ethc-locked {
        overflow: hidden;
    }
}

/* -------------------------------------------------- fit into the site header ----
   The header row was rebuilt as a flex row on 09/15/2026; these keep the new button
   the same height as the LOGIN / MANAGE EVENT buttons beside it. */

/* service.css line 16954 pins this wrapper to min-width:130px/width:20px, which left
   the label about 64px and truncated "All Country" to "All Cou...". Let the button
   size to its own content instead, with a ceiling so a long name cannot push the
   LOGIN / MANAGE EVENT buttons around. */
.evtHeaderMainWrap .divPopulatecountry {
    width: auto !important;
    min-width: 0 !important;
}

.evtHeaderMainWrap .divPopulatecountry .ethc {
    width: auto;
}

.evtHeaderMainWrap .divPopulatecountry .ethc-btn {
    width: auto;
    min-width: 0;
    max-width: 100%;
}

/* Match the height of the LOGIN / MANAGE EVENT / Why Ethrave buttons sitting beside it.
   Measured in the real header: those are 46px tall (12px padding + 20px line + 1px
   border each side) while this button was 34px, so it read as short and top aligned.
   Desktop only - below 768px every button in the row is already 34px. */
@media (min-width: 768px) {

    .evtHeaderMainWrap .divPopulatecountry {
        height: auto !important;
        vertical-align: middle;
    }

    /* A fixed width, not a min/max range. Measured at 14px in the header font,
       "All Country" needs 69px of text and the flag, caret, gaps and padding take
       72px, so 148px shows the default value in full. Fixing it means switching
       country can never resize the button, so the header cannot reflow underneath
       the user - which is what a 132-210px range did: "Bolivia (Plurinational
       State of)" grew the button to 210px and pushed MANAGE EVENT onto a second
       row at 1280px. Longer names ellipsize and syncButton puts the full name in
       the button's title. */
    .evtHeaderMainWrap .divPopulatecountry .ethc-btn {
        width: 148px;
        min-width: 148px;
        max-width: 148px;
        min-height: 46px;
        padding: 6px 12px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {

    .evtHeaderMainWrap .divPopulatecountry .ethc-btn {
        min-width: 0;
        height: 34px;
        padding: 4px 7px;
        font-size: 12px;
    }

    /* country name out, two letter code in */
    .ethc-btn-label {
        display: none;
    }

    .ethc-btn-code {
        display: inline-block;
    }
}

/* -------------------------------------------------- short viewports ----
   ADDED 09/16/2026. The popover is 377px tall (a 320px list plus the search box)
   and hangs 84px below the top of the header, so it needs 461px of viewport.
   A tablet or small laptop in landscape can be shorter than that - measured at
   900x420 the list ran 41px past the bottom of the window with no way to reach
   the last rows. Shrink the list instead; it scrolls either way.
   Scoped by height only, so nothing here fires on a normal portrait screen. */

@media (min-width: 768px) and (max-height: 620px) {

    .ethc-list {
        max-height: 240px;
    }
}

@media (min-width: 768px) and (max-height: 520px) {

    .ethc-list {
        max-height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ethc-panel {
        transition: none !important;
    }
}