/* ============================================================
   COMPONENTS — Reusable UI: buttons, cards, popup, forms, notice
   ============================================================ */

/* ---- Buttons ----
   Sizing matches Figma "ui/button/L". Focus uses an inset outline so the
   3px border doesn't shift layout. Variants override colors only. */
.btn {
    display: inline-flex;
    padding: 14px 25px 10px 25px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    font-family: var(--font-display-bold-italic);
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    /* Default = white variant */
    background: var(--color-gray-white);
    color: #000;
}

.btn:hover {
    background: var(--color-gray-light);
    color: var(--color-grey-grey45);
}

.btn:focus-visible {
    background: var(--color-gray-white);
    color: var(--color-grey-grey18);
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.btn:disabled,
.btn[disabled] {
    background: var(--color-grey-grey85);
    color: var(--color-grey-grey45);
    cursor: not-allowed;
    pointer-events: none;
}

/* Variant: yellow */
.btn-yellow {
    background: var(--color-primary);
    color: #000;
}

.btn-yellow:hover {
    background: var(--color-tertiary-yellow-hover);
    color: var(--color-grey-grey30);
}

.btn-yellow:focus-visible {
    background: var(--color-primary);
    color: #000;
    outline-color: var(--color-overlay-grey-50);
}

.btn-yellow:disabled,
.btn-yellow[disabled] {
    background: var(--color-grey-grey85);
    color: var(--color-grey-grey45);
}

/* Variant: black */
.btn-black {
    background: var(--color-grey-grey18);
    color: var(--color-gray-white);
}

.btn-black:hover {
    background: var(--color-grey-grey30);
    color: var(--color-gray-white);
}

.btn-black:focus-visible {
    background: var(--color-grey-grey18);
    color: var(--color-gray-white);
    outline-color: var(--color-overlay-white-50);
}

.btn-black:disabled,
.btn-black[disabled] {
    background: var(--color-grey-grey65);
    color: var(--color-gray-white);
}

input.btn {
    border: none !important;
    font-weight: 400 !important;
}

/* Size: secondary (smaller) — applied alongside .btn variants */
.btn-secondary {
    padding: 10px 16px 6px 16px;
}

/* Size: tertiary (pill) — shape-only modifier; can be used without .btn */
.btn-tertiary {
    padding: 5px 12px;
    border-radius: 16px;
}


/* ---- Notice banner — same look as fitnesspark.fr .announcement ---- */
.notice {
    width: 100%;
    padding: 11px 0;
    background: linear-gradient(0deg, #f4cd00 0%, #ffe141 100%);
    color: #3c454d;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: normal;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
}

.notice p {
    margin: 0;
}

.notice .grid--container {
    max-width: 1136px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- Challenger card grid ---- */
.challengers-grid {
    display: grid;
    row-gap: 32px;
    column-gap: 32px;
    grid-template-columns: repeat(4, 260px);
    justify-content: center;
}

/* ---- Challenger card ---- */
.challenger-card {
    display: flex;
    width: 260px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
}

.challenger-card-link {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.challenger-card-photo {
    display: flex;
    height: 260px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    aspect-ratio: 1/1;
    background: var(--color-gray-light);
}

.challenger-card-photo .photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Heart gradient zone */
.challenger-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 171px;
    border-radius: 0 16px 0 0;
    background: linear-gradient(40deg, rgba(0, 0, 0, 0.00) 52.93%, rgba(0, 0, 0, 0.80) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Heart vote button on card */
.challenger-card-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.challenger-card-heart .heart-empty,
.challenger-card-heart .heart-full {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.challenger-card-heart .heart-full { opacity: 0; }
.challenger-card-heart .heart-empty { opacity: 1; }
.challenger-card-heart.voted .heart-full { opacity: 1; }
.challenger-card-heart.voted .heart-empty { opacity: 0; }

/* Card info below photo */
.challenger-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.challenger-card-name {
    color: var(--color-grey-grey18);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
    margin: 0;
}

.challenger-card-likes {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-grey-grey18);
    margin: 0;
}

.challenger-card-likes svg {
    flex-shrink: 0;
}

.challenger-card-club {
    color: #3C454D;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
    margin: 0;
}

/* ---- Pagination ---- */
.pagination {
    display: flex;
    padding: 64px 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pagination-prev,
.pagination-next {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #3C454D;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 325;
    line-height: 18px;
}

.pagination-prev.disabled,
.pagination-next.disabled {
    color: #A0A4A6;
    pointer-events: none;
}

.pagination-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.pagination-numbers a,
.pagination-numbers span {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: #3C454D;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
}

.pagination-numbers a.active {
    border-radius: 20px;
    background: var(--color-primary);
    color: #000;
    font-weight: 400;
}

@media (max-width: 628px) {
    .pagination {
        padding: 40px 0;
    }

    .pagination-label {
        display: none;
    }

    .pagination-numbers {
        gap: 8px;
    }

    .pagination-numbers a,
    .pagination-numbers span {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* ---- Responsive grid ---- */
@media (max-width: 1200px) {
    .challengers-grid {
        grid-template-columns: repeat(3, 260px);
    }
}

@media (max-width: 968px) {
    .challengers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .challenger-card {
        width: 100%;
    }

    .challenger-card-photo {
        height: auto;
    }
}

@media (max-width: 628px) {
    .challengers-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile slider mode for home challengers */
@media (max-width: 480px) {
    .home-challengers .challengers-grid {
        display: block;
        overflow: hidden;
    }

    .home-challengers .challengers-grid .slick-list {
        overflow: visible;
    }

    .home-challengers .challengers-grid .slick-slide {
        padding: 0 8px;
    }

    .home-challengers .challengers-grid .challenger-card {
        width: 100%;
    }
}

/* ---- Smoke overlay (popup backdrop) ---- */
#smoke {
    background: var(--color-overlay);
    position: absolute;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    left: 0;
    top: 0;
    z-index: var(--z-smoke);
    display: none;
}

/* ---- Popup ---- */
.popup {
    position: fixed;
    flex-direction: column;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1055px;
    max-height: 100%;
    z-index: var(--z-popup);
    display: none;
    text-align: center;
    color: var(--color-dark);
    background: #ffffff;
    border-radius: var(--radius-popup);
    overflow: hidden;
}

.popup .popup_content {
    padding: 1em;
    overflow-x: hidden;
    overflow-y: auto;
}

#popup_registered .popup_content {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
}

.popup .close {
    position: absolute;
    float: right;
    width: 3.25em;
    height: 3.25em;
    top: 2.9em;
    right: 2.5em;
    background: url(../gfx/popup-close.svg) no-repeat center;
    background-size: 3.2em;
    z-index: 2;
}

.popup h2 {
    font-family: var(--font-display-bold-italic);
    font-size: 5em;
    line-height: 1em;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-text-dark);
    text-transform: uppercase;
    padding: 0.5em 1em 0.3125em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.popup h3 {
    font-family: var(--font-display-bold-italic);
    font-size: 2.5em;
    line-height: 1em;
    color: var(--color-text-dark);
    text-transform: uppercase;
}

.popup p {
    font-family: var(--font-sans);
    font-size: 1.125em;
    line-height: 1em;
    color: #000000;
    padding-top: 0.9em;
}

.popup p a {
    color: #000000;
    text-decoration: underline;
}

/* popup_howto modern: lay out each step with internal gap, body links underlined */
.popup.popup--modern .popup_step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 8px;
}

.popup.popup--modern .popup_step .popup__body a {
    color: var(--color-grey-grey30);
    text-decoration: underline;
}

#popup_login, #popup_lost_password {
    max-width: 680px;
}

#popup_login .btn-login,
#popup_lost_password .btn-retrieve-password,
#popup_register .btn-register,
#popup_register .btn-import,
#popup_register .btn-participer {
    background: var(--color-primary);
    width: auto;
}

#popup_edit_infos .fields,
#popup_edit_password .fields {
    padding: 0 1.5em;
}

.popup-form-submit {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

#popup_register:not(.popup--modern) .popup_content {
    padding: 0 6.25em;
}

#popup_register:not(.popup--modern) .popup_content .register_choose {
    display: flex;
    flex-direction: column;
    padding: 0 0 4.375em;
    margin: 0 -6.25em;
    flex: 0 0 33em;
    text-align: center;
    background: url(../gfx/bg-popup-register-left.svg) no-repeat scroll center center #f2f2f2;
    background-size: cover;
}

#popup_register:not(.popup--modern) .popup_content .register_choose .register_disclaimer {
    background-position-y: -2em;
    padding: 4.375em 0 0;
}

#popup_register .popup_content .register_choose h3 {
    font-family: var(--font-display-light-italic);
    font-size: 3.3125em;
    letter-spacing: 0.06em;
}

#popup_register .popup_content .register_choose .btn-register-select-forms {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

#popup_register .popup_content .register_choose h4.btn-register-select-form {
    font-size: 3.125em;
    font-family: var(--font-display-light-italic);
    line-height: 1em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-dark);
    cursor: pointer;
    text-align: center;
    padding: 0.75em 0 0.5em;
    background: var(--color-gray-light);
    width: 80%;
    margin: 0 auto;
    border-radius: 0.24em;
}

#popup_register .popup_content .register_choose h4.btn-register-select-form:hover {
    background: #E8E7E7;
    box-shadow: inset 0 7px 9px rgba(0, 0, 0, 0.25);
}

#popup_register .popup_content .register_choose p {
    padding: 2em 0;
    font-size: 1.5625em;
    line-height: 1.2em;
}

/* Legacy #popup_register layout/show-hide rules removed — popup is now
   .popup--modern and the modern overrides at the end of this file own
   the layout and the data-form / data-step show-hide logic. */
#popup_register .popup_content .register_forms .step-links > div {
    cursor: pointer;
}

/* ---- Popup forms ---- */
.popup form {
    position: relative;
    width: 100%;
    max-width: 535px;
    padding: 15px 0;
    margin: 0 auto;
}

.popup .text {
    position: relative;
    width: 100%;
    max-width: 740px;
    padding: 0;
    margin: 0 auto;
    color: var(--color-dark);
    font-size: 125%;
}

.popup .text span {
    font-size: 80%;
}

.popup form a, .popup .text a, .popup .links a {
    color: var(--color-dark);
    text-decoration: underline;
}

.popup .links a {
    margin: 0 5px;
}

.popup form .fields label {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    color: var(--color-grey-grey18);
    text-align: left;
}

.popup:not(.popup--modern) form .fields input:not(.btn),
.popup:not(.popup--modern) form .fields select,
.popup:not(.popup--modern) form .fields textarea {
    width: 100%;
    border: 2px solid var(--color-border-light);
    border-radius: 0.3125em;
    display: inline-block;
    line-height: 1.5;
    padding: 6px 8px;
    font-size: 14px;
    height: 37px;
    margin: 0.3125em 0;
    font-family: var(--font-sans);
    font-weight: 325;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}

.popup form .fields input.btn:disabled {
    background: var(--color-grey-grey85);
    color: var(--color-grey-grey45);
}

.popup form .fields textarea {
    resize: none;
    height: 20em;
    max-height: 30dvh;
}

.popup:not(.popup--modern) form .fields select {
    font-size: 14px !important;
    font-weight: 325 !important;
    border: 2px solid var(--color-border-light) !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233C454D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 12px 8px;
    padding-right: 2.5em;
}

.popup form .fields .double-input,
.popup form .checkbox-radio {
    display: flex;
    gap: 0.5em;
}

.popup form .checkbox-radio input {
    width: 2em;
    height: 2em;
    border: 2px solid var(--color-dark);
    flex: 0 0 auto;
}

.popup form input.error, .popup form textarea.error {
    background-image: url("../gfx/error.png");
    background-position: calc(100% - 2em) center;
    background-repeat: no-repeat;
}

.popup form .fields input:not(.btn).error,
.popup form input.error,
.popup form input.error::placeholder,
.popup form textarea.error,
.popup form .label-upload.error,
.popup form select.error,
.popup form select.error::placeholder,
.popup form select.error + .selectize-control .selectize-input,
.popup form textarea.error + label,
.popup form input[type='checkbox'].error + label,
.popup form input[type='checkbox'].error + label a,
.bloc .inside form input.error::placeholder {
    border-color: var(--color-error);
    color: var(--color-error);
}

.popup form input[type='checkbox'].error {
    border-color: var(--color-error);
}

.popup form .g-recaptcha.error {
    display: inline-block;
    border: 1px solid var(--color-error);
    border-radius: 4px;
    padding: 2px;
}

.popup form .fields input:has(+ .error-text), .popup form .fields textarea:has(+ .error-text) {
    margin-bottom: 32px;
}

.popup form .fields input + .error-text, .popup form .fields textarea + .error-text {
    position: absolute;
    color: var(--color-error);
    text-align: justify;
    margin-top: -32px;
    font-size: 1em;
    font-weight: bold;
    display: none;
}

.popup form .fields input.error + .error-text, .popup form .fields textarea.error + .error-text {
    display: block;
}

.popup form .fields label.label-bold {
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1em;
    margin-bottom: 0.5em;
    display: block;
    text-align: justify;
}

.popup form .fields label.label-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 2em;
    margin-bottom: 0.5em;
}

.popup form .fields label.label-upload span {
    flex: 0 0 75%;
    text-align: left;
    line-height: 1em;
    position: relative;
}

.popup form .fields label.label-upload span img {
    max-width: 2em;
    max-height: 2em;
    position: absolute;
}

.popup form .fields label.label-upload .btn-import {
    display: flex;
    align-items: center;
    font-size: 1.25em;
    padding: 0.25em 1em 0;
    position: relative;
    gap: 0.25em;
}

.popup form .fields label.label-upload .btn-import img {
    width: 0.75em;
    margin-top: -0.25em;
}

.popup form .fields input + p.form-hint,
.popup form .fields select + p.form-hint,
.popup form .fields textarea + p.form-hint {
    margin-top: 0 !important;
}

.popup form .row {
    margin: 1em 0 0;
}

.popup form .row-center {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.popup form .fields > span {
    font-family: var(--font-body);
    font-size: 125%;
    text-align: center;
    display: inline-block;
    width: 100%;
    line-height: 120%;
    margin-bottom: 15px;
}

.popup .parallelogram > div > input, .popup .parallelogram a {
    border: none;
    background: none;
    color: var(--color-dark);
    font-family: var(--font-display-black-italic);
    font-size: 2.5em;
    line-height: 1em;
    text-transform: uppercase;
    margin: 0;
    padding: 0.75em 0.25em 0.5em;
    cursor: pointer;
    text-align: center;
}

.popup .parallelogram {
    text-align: center;
    margin: 0 auto;
}

.popup .btn-register .submit {
    width: 100%;
}

.popup .btn-see-challengers {
    width: 380px;
}

.popup .btn-challengers.parallelogram a {
    display: block;
    font-size: 260%;
    padding: 20px 10px 15px;
}

#popup_credits {
    background: #fff;
    color: #000;
}

#popup_credits a {
    color: #f60853;
}

/* ---- Bloc (full-page registration fallback) ---- */
.bloc {
    width: 100%;
    padding: 10% 0;
    position: relative;
    background-size: contain;
    display: none;
}

.bloc .inside {
    position: relative;
    width: 100%;
    max-width: 535px;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.bloc h2 {
    margin: 0 0 10%;
    font-family: var(--font-display-bold-italic);
    font-size: 387%;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
}

#bloc_registered.bloc h2 {
    font-size: 300%;
    margin: 0;
}

.bloc .links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
}

.bloc .links a {
    font-family: var(--font-body);
    font-size: 113%;
    line-height: 100%;
    color: var(--color-dark);
    text-decoration: underline;
}

/* ---- Early access restrictions (body.early-access) ---- */
body.early-access .early-access-hidden,
body.early-access .challenger-card-heart,
body.early-access .challenger-card-likes,
body.early-access .participant-likes,
body.early-access .vote.btn,
body.early-access .btn-show-register-vote {
    display: none !important;
}

/* Early access popup: blur the page behind the modal.
   opacity creates a stacking context that disables backdrop-filter, so we drop it
   and use an rgba background instead. position: fixed covers the viewport on scroll. */
body.early-access-blocked #smoke {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Register form: searchable club dropdown (same pattern as challengers filter) */
.popup form .fields .register-club-wrapper {
    position: relative;
    width: 100%;
    margin: 0.3125em 0;
}

.popup form .fields .register-club-wrapper input[type="text"] {
    margin: 0;
}

.popup form .fields .register-club-wrapper .filter-club-dropdown,
#register_club_dropdown {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #E8E7E7;
    border-radius: 0.625em;
    max-height: 240px;
    overflow-y: auto;
    z-index: calc(var(--z-popup) + 10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.popup form .fields .register-club-wrapper .filter-club-option {
    padding: 10px 14px;
    font-family: 'Gotham', serif;
    font-size: 14px;
    color: #000;
    cursor: pointer;
}

.popup form .fields .register-club-wrapper .filter-club-option:hover {
    background: #f3f3f3;
}

/* ---- Popup Early Bird ---- */
#popup_early_bird {
    max-width: 551px;
    overflow: hidden;
    /* popup--modern sets padding on the container; early bird manages its own padding via .early-bird-body */
    padding: 0;
    gap: 0;
}

#popup_early_bird .popup__error {
    display: none;
    text-align: left;
}

#popup_early_bird .early-bird-header {
    position: relative;
    width: 100%;
    aspect-ratio: 551 / 300;
    overflow: hidden;
    flex-shrink: 0;
}

.early-bird-header-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.35);
    padding: 0;
}

.early-bird-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.early-bird-body {
    padding: 40px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

#popup_early_bird .early-bird-title {
    font-family: var(--font-display-black);
    font-size: 90px;
    font-style: normal;
    font-weight: 900;
    line-height: 100px;
    letter-spacing: -8px;
    text-transform: uppercase;
    color: #FFD600;
    margin: 0;
    background: none;
    position: static;
    padding: 0;
    width: 100%;
}

#popup_early_bird h3.early-bird-subtitle {
    font-family: var(--font-display-black);
    font-size: 40px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: normal;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

#popup_early_bird p.early-bird-intro {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 325;
    line-height: 26px;
    color: #616B73;
    margin: 0;
    padding-bottom: 0;
}

#popup_early_bird .fields {
    width: 100%;
    max-width: 359px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
}


#popup_early_bird .fields .btn {
    background: var(--color-primary);
    color: #000;
    margin: 0 auto;
}

#popup_early_bird .fields .btn:disabled,
#popup_early_bird .fields .btn[disabled] {
    background: var(--color-grey-grey85);
    color: var(--color-grey-grey45);
}

@media (max-width: 600px) {
    #popup_early_bird .early-bird-title {
        font-size: 52px;
        line-height: 60px;
    }

    .early-bird-subtitle {
        font-size: 30px;
        letter-spacing: 1.5px;
    }

    .early-bird-intro {
        font-size: 16px;
    }

    .early-bird-body {
        padding: 32px 24px 24px;
        gap: 12px;
    }
}

/* ============================================================
   Popup — modern variant (.popup.popup.popup--modern)
   New design system. Coexists with legacy .popup styles via a
   modifier class so popups can be migrated one at a time.
   ============================================================ */

.popup.popup--modern {
    /* Override legacy .popup width / radius / overflow / colors */
    width: 553px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    padding: 32px 40px;
    border-radius: 20px;
    background: var(--color-gray-white);
    color: var(--color-grey-grey18);
    text-align: left;
    /* Clip content at popup boundaries; scrolling happens inside .popup_content */
    overflow: hidden;
    /* Layout */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

@media (max-width: 600px) {
    .popup.popup--modern {
        width: calc(100vw - 32px);
        padding: 24px;
    }
}

/* Close button — overrides legacy .popup .close (image background) */
.popup.popup--modern > .close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    background-image: none;
    background-size: auto;
    border: 0;
    color: var(--color-grey-grey18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

@media (max-width: 600px) {
    .popup.popup--modern > .close {
        top: 24px;
        right: 24px;
    }
}

.popup.popup--modern > .close svg { display: block; width: 16px; height: 16px; }

/* Header (eyebrow + title + optional subtitle) */
.popup.popup--modern .popup__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 8px;
}

.popup.popup--modern .popup__eyebrow {
    margin: 0;
    /* Only this row aligns with the close icon — reserve space here so they don't collide */
    padding-right: 32px;
    color: var(--color-grey-grey30);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: normal;
    text-transform: uppercase;
}

.popup.popup--modern .popup__title {
    margin: 0;
    color: #000;
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 325;
    line-height: 40px;
    /* Override legacy .popup h2 sticky-yellow-banner styles */
    background: none;
    padding: 0;
    position: static;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
}

.popup.popup--modern .popup__subtitle {
    margin: 0;
    color: var(--color-grey-grey18);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 350;
    line-height: 18px;
    text-transform: uppercase;
}

/* Body copy (info popups, descriptions inside the textes block) */
.popup.popup--modern .popup__body {
    margin: 0;
    padding: 0;
    color: var(--color-grey-grey18);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
    text-align: left;
}

/* Content wrapper — overrides legacy .popup .popup_content padding/overflow.
   flex: 1 + min-height: 0 lets it shrink below content size; overflow-y auto
   brings back internal scroll for tall popups (registration forms etc.).
   The negative margin + matching padding pushes the right edge into the
   popup's right padding so the scrollbar sits in the gutter, not on top of
   the form fields. */
.popup.popup--modern .popup_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex: 1;
    min-height: 0;
    gap: 32px;
    padding: 0 24px 0 0;
    margin-right: -24px;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .popup.popup--modern .popup_content {
        padding-right: 16px;
        margin-right: -16px;
    }
}

/* Form acts as a transparent layout wrapper inside popup_content — strip
   the legacy .popup form padding/max-width so children flow naturally. */
.popup.popup--modern .popup_content > form {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    gap: 32px;
}

/* Block holding fields + link with the 24px rhythm */
.popup.popup--modern .popup__textes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 24px;
}

/* Field (label + helper + input + optional message) */
.popup.popup--modern .popup__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.popup.popup--modern .popup__label {
    margin: 0;
    color: var(--color-grey-grey18);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
    text-align: left;
}

.popup.popup--modern .popup__helper {
    margin: 0;
    padding-top: 0;
    color: var(--color-grey-grey65);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 325;
    line-height: 14px;
    text-align: left;
}

.popup.popup--modern .popup__input-wrap {
    position: relative;
    align-self: stretch;
}

/* 8px gap helper → input only inside structured .popup__field; raw wraps
   (e.g. injected by password toggle JS in popup_register) keep no margin
   so the parent .fields gap is the only vertical rhythm. */
.popup.popup--modern .popup__field .popup__input-wrap {
    margin-top: 8px;
}

/* Override legacy .popup form .fields input — scope strictly to modern */
.popup.popup--modern .popup__input-wrap input {
    width: 100%;
    height: auto;
    padding: 7px 16px;
    margin: 0;
    border: 1px solid var(--color-grey-grey65);
    border-radius: 4px;
    background: var(--color-gray-white);
    color: var(--color-grey-grey30);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    box-sizing: border-box;
    outline: none;
}

.popup.popup--modern .popup__input-wrap input::placeholder {
    color: var(--color-grey-grey65);
    font-weight: 325;
    opacity: 1;
}

/* Select — unified look with inputs (border / radius / colors / font),
   native chevron replaced by our SVG. font-weight is 325 (book) until the
   user picks a real option, then bumps to 400 — placeholder uses
   `<option value="" disabled selected hidden>` so `:invalid` matches the
   empty state on a `required` select and `:valid` matches a real choice. */
.popup.popup--modern select {
    width: 100%;
    height: auto;
    /* Match the input vertical padding (7px) so a select sitting next to an
       input in .double-input shares the same height — the Figma 10/9px values
       were measured in isolation and broke alignment in our row layouts. */
    padding: 7px 40px 7px 16px;
    margin: 0;
    border: 1px solid var(--color-grey-grey65);
    border-radius: 4px;
    background: var(--color-gray-white);
    color: var(--color-grey-grey18);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 6L8 10L13.5 6' stroke='%233C454D' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    cursor: pointer;
}

.popup.popup--modern select:valid {
    font-weight: 400;
}

/* Empty state (placeholder option selected) — match input::placeholder color */
.popup.popup--modern select:invalid {
    color: var(--color-grey-grey65);
}

@media (max-width: 600px) {
    .popup.popup--modern select {
        padding: 7px 40px 7px 16px;
    }
}

/* Reserve room on the right when a trailing icon button exists.
   `!important` to win against the higher-specificity `.fields` compat layer
   below, which would otherwise reset padding via the shorthand. */
.popup.popup--modern .popup__input-wrap:has(.popup__input-icon) input {
    padding-right: 40px !important;
}

/* Trailing icon (eye toggle, error cross, success check) */
.popup.popup--modern .popup__input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.popup.popup--modern .popup__input-icon[disabled],
.popup.popup--modern .popup__input-icon:not(button) {
    cursor: default;
}

.popup.popup--modern .popup__input-toggle .icon-eye-shut { display: none; }
.popup.popup--modern .popup__input-toggle.is-revealed .icon-eye-open { display: none; }
.popup.popup--modern .popup__input-toggle.is-revealed .icon-eye-shut { display: inline-block; }

/* Error states — JS adds `.error` to the input/select/textarea on validation
   failure. We pick that up everywhere inside .popup--modern (wrapped inputs,
   bare inputs in .fields, double-input wrappers) and also surface the message. */
.popup.popup--modern input.error,
.popup.popup--modern select.error,
.popup.popup--modern textarea.error {
    border-color: var(--color-error) !important;
    color: var(--color-error);
    /* Clear the legacy error.png background — modern popups use the
       border + .popup__error text below for error feedback. */
    background-image: none;
}

.popup.popup--modern .popup__error,
.popup.popup--modern .popup__success {
    margin: 8px 0 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 325;
    line-height: 14px;
    display: none;
}

.popup.popup--modern .popup__error { color: var(--color-error); }
.popup.popup--modern .popup__success { color: var(--color-functional-green); }

/* Show .popup__error when its sibling input is in error state.
   :has() lets us react to the JS-added `.error` class without needing
   .has-error on the field wrapper. */
.popup.popup--modern .popup__field:has(input.error, select.error, textarea.error) .popup__error,
.popup.popup--modern .popup__field.has-error .popup__error { display: block; }
.popup.popup--modern .popup__field.has-success .popup__success { display: block; }

/* Link */
.popup.popup--modern .popup__link {
    align-self: flex-start;
    color: var(--color-grey-grey30);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 325;
    line-height: 18px;
    text-decoration: underline;
    /* Reserve focus border space so layout doesn't shift */
    border: 2px solid transparent;
    border-radius: 2px;
    padding: 0 2px;
}

.popup.popup--modern .popup__link:hover {
    color: var(--color-grey-grey30);
}

.popup.popup--modern .popup__link:focus,
.popup.popup--modern .popup__link:focus-visible {
    outline: none;
    border-color: var(--color-primary);
}

.popup.popup--modern .popup__link:visited {
    /* color: var(--color-tertiary-blue-dark); */
}

/* Footer (buttons stack) */
.popup.popup--modern .popup__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 16px;
}

.popup.popup--modern .popup__footer .btn {
    width: 100%;
}

.popup.popup--modern .popup__footer .btn-tertiary {
    width: auto;
}

/* Hide the legacy auto-injected eye <img> if it sneaks into a modern popup */
.popup.popup--modern img.toggle-password { display: none; }

/* Compat layer: bare inputs/textareas inside .popup--modern .fields
   inherit the modern look without needing to wrap each in .popup__input-wrap.
   <select> is handled by the unified `.popup--modern select` rule above. */
.popup.popup--modern form .fields input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not(.btn),
.popup.popup--modern form .fields textarea,
.popup.popup--modern form .fields .double-input input {
    width: 100%;
    height: auto;
    padding: 7px 16px;
    margin: 0;
    border: 1px solid var(--color-grey-grey65);
    border-radius: 4px;
    background: var(--color-gray-white);
    color: var(--color-grey-grey30);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    box-sizing: border-box;
    outline: none;
}

.popup.popup--modern form .fields input::placeholder,
.popup.popup--modern form .fields textarea::placeholder {
    color: var(--color-grey-grey65);
    font-weight: 325;
    opacity: 1;
}

.popup.popup--modern form .fields textarea {
    resize: vertical;
    min-height: 120px;
}

/* Use grid (not flex) so children take exactly half the row regardless of
   their intrinsic content width — flex was letting <select> grow wider than
   sibling <input> because of native min-content sizing on selects. */
.popup.popup--modern form .fields .double-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-self: stretch;
}

.popup.popup--modern form .fields .double-input > * {
    min-width: 0;
}

/* Stack double-inputs on mobile */
@media (max-width: 600px) {
    .popup.popup--modern form .fields .double-input {
        grid-template-columns: 1fr;
    }
}

/* Vertical rhythm inside the legacy .fields container */
.popup.popup--modern form .fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 16px;
    padding: 0;
    margin: 0;
}

/* Form-level rows (checkboxes, captcha, legal text) get vertical breathing room */
.popup.popup--modern form .row,
.popup.popup--modern form .row-center {
    display: flex;
    align-self: stretch;
    margin: 0;
}

.popup.popup--modern form .row.align_left {
    align-items: flex-start;
}

.popup.popup--modern form .row-center {
    justify-content: center;
}

.popup.popup--modern form .row.legal {
    gap: 12px;
}

.popup.popup--modern form .row.legal img {
    flex-shrink: 0;
    margin-top: 2px;
    max-width: 20px;
}

.popup.popup--modern form .row.legal p,
.popup.popup--modern form .row.legal .align_left {
    margin: 0;
    color: var(--color-grey-grey45);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 325;
    line-height: 18px;
}

/* Step links (Précédent/Suivant) inside multi-step forms */
.popup.popup--modern form .step-links {
    display: flex;
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

/* ===========================================================
   popup_register modern overrides — beat ID-specificity legacy
   rules (#popup_register X) by using #popup_register.popup--modern X
   =========================================================== */

/* Wider than the base popup so "Confirmation Mot de passe*" fits in a double-input column */
#popup_register.popup--modern {
    width: 660px;
}

/* Stack double-input columns as soon as the popup starts shrinking (viewport < 660 + 32px margins) */
@media (max-width: 691px) {
    #popup_register.popup--modern form .fields .double-input {
        grid-template-columns: 1fr;
    }
}

#popup_register.popup--modern .popup_content {
    /* Inherits scrollbar gutter (padding-right + negative margin) and
       overflow-y from the .popup--modern .popup_content rule above. */
}

#popup_register.popup--modern .register_choose {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 24px;
    padding: 0;
    margin: 0;
    background: none;
    text-align: left;
    flex: 0 0 auto;
}

#popup_register.popup--modern .register_choose .register_disclaimer {
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#popup_register.popup--modern .register_choose .register_disclaimer h3 {
    margin: 0;
    color: #000;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 350;
    line-height: 30px;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
}

#popup_register.popup--modern .register_choose p {
    margin: 0;
    padding: 0;
    color: var(--color-grey-grey45);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
    text-align: left;
}

#popup_register.popup--modern .register_choose .btn-register-select-forms {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
    padding: 0;
}

/* Choice buttons styled like .btn-yellow — specificity matches legacy 1,3,1 */
#popup_register.popup--modern .popup_content .register_choose h4.btn-register-select-form {
    display: inline-flex;
    width: 100%;
    padding: 14px 25px 10px 25px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #000;
    font-family: var(--font-display-bold-italic);
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0;
    box-shadow: none;
    text-align: center;
}

#popup_register.popup--modern .popup_content .register_choose h4.btn-register-select-form:hover {
    background: var(--color-tertiary-yellow-hover);
    color: var(--color-grey-grey30);
    box-shadow: none;
}

/* Form area inside modern register popup */
#popup_register.popup--modern .register_forms {
    display: none;
    padding: 0;
    flex: 1;
    align-self: stretch;
}

/* When a form is active, show register_forms and hide the choice screen */
#popup_register.popup--modern[data-form="egerie"] .register_choose,
#popup_register.popup--modern[data-form="voter"] .register_choose {
    display: none;
}

#popup_register.popup--modern[data-form="egerie"] .register_forms,
#popup_register.popup--modern[data-form="voter"] .register_forms {
    display: block;
}

/* Eyebrow: show the label matching the active form */
#popup_register .eyebrow-voter,
#popup_register .eyebrow-egerie { display: none; }
#popup_register[data-form="voter"] .eyebrow-default,
#popup_register[data-form="voter"] .eyebrow-egerie { display: none; }
#popup_register[data-form="voter"] .eyebrow-voter { display: inline; }
#popup_register[data-form="egerie"] .eyebrow-default,
#popup_register[data-form="egerie"] .eyebrow-voter { display: none; }
#popup_register[data-form="egerie"] .eyebrow-egerie { display: inline; }

/* Form layout: grid lets us put .header (form-switch, right) and
   .still_account (login link, left) on the same row at the top,
   while everything else flows full-width below. */
#popup_register.popup--modern .register_forms form {
    display: none;
    grid-template-columns: 1fr 1fr;
    align-self: stretch;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    gap: 24px;
}

#popup_register.popup--modern[data-form="egerie"] form#form_register_participate,
#popup_register.popup--modern[data-form="voter"] form#form_register {
    display: grid;
}

/* Children default to full width (cross both columns) */
#popup_register.popup--modern .register_forms form > * {
    grid-column: 1 / -1;
}

/* Place header (form-switch) and still_account (login link) on the same
   grid row — left/right utility links above the main fields. */
#popup_register.popup--modern .register_forms form > .still_account {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: var(--color-grey-grey45);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 325;
    line-height: 22px;
    text-align: left;
}

#popup_register.popup--modern .register_forms form > .header {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--color-grey-grey45);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 325;
    line-height: 22px;
    text-align: right;
}

#popup_register.popup--modern .still_account a,
#popup_register.popup--modern .register_forms form > .header a {
    color: var(--color-grey-grey30);
    text-decoration: underline;
}

/* Stack on mobile (column too narrow for both side-by-side) */
@media (max-width: 600px) {
    #popup_register.popup--modern .register_forms form > .still_account,
    #popup_register.popup--modern .register_forms form > .header {
        grid-column: 1 / -1;
        text-align: left;
    }
    #popup_register.popup--modern .register_forms form > .still_account { grid-row: 1; }
    #popup_register.popup--modern .register_forms form > .header { grid-row: 2; }
}

/* Steps indicator (Informations / Motivations / Photos) */
#popup_register.popup--modern .steps {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    margin: 0;
    color: var(--color-grey-grey45);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 325;
    line-height: 18px;
}

#popup_register.popup--modern .steps > div {
    color: inherit;
    font-weight: 325;
}

#popup_register.popup--modern[data-step="infos"] .steps > div[data-step="infos"],
#popup_register.popup--modern[data-step="motivations"] .steps > div[data-step="motivations"],
#popup_register.popup--modern[data-step="photos"] .steps > div[data-step="photos"] {
    color: var(--color-grey-grey18);
    font-weight: 350;
}

#popup_register.popup--modern .steps img {
    width: 24px;
    height: auto;
    flex-shrink: 0;
}

/* Step containers — keep selector specificity low so the data-step show
   rules below (1,4,0) win without needing extra IDs in the show rule. */
#popup_register.popup--modern .step {
    display: none;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
    margin: 0;
    padding: 0;
}

#popup_register.popup--modern[data-step="infos"] .step[data-step="infos"],
#popup_register.popup--modern[data-step="motivations"] .step[data-step="motivations"],
#popup_register.popup--modern[data-step="photos"] .step[data-step="photos"] {
    display: flex;
}

/* First step → no Back button visible */
#popup_register.popup--modern[data-step="infos"] .step[data-step="infos"] .btn-back-register {
    visibility: hidden;
}

/* Step links: use modern step-links rules from above; reset legacy paddings */
#popup_register.popup--modern .step-links {
    margin-top: 0;
    font-size: inherit;
}

/* form-hint (password requirements text) */
#popup_register.popup--modern .form-hint {
    margin: 0;
    padding: 0;
    color: var(--color-grey-grey65);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 325;
    line-height: 14px;
    text-align: left;
}

/* label-bold (motivations textarea label) */
#popup_register.popup--modern label.label-bold {
    margin: 0 0 4px;
    color: var(--color-grey-grey18);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 350;
    line-height: 26px;
    text-align: left;
}

/* Photo upload tiles */
#popup_register.popup--modern label.label-upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-grey-grey65);
    border-radius: 4px;
    background: var(--color-gray-white);
}

/* Description text takes the available room between thumb and import btn */
#popup_register.popup--modern label.label-upload .label-upload__desc {
    flex: 1;
    color: var(--color-grey-grey30);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 325;
    line-height: 18px;
    text-align: left;
}

#popup_register.popup--modern label.label-upload .btn-import {
    flex-shrink: 0;
    padding: 5px 12px 4px;
    font-size: 14px;
    gap: 6px;
}

/* Empty placeholder — dotted box on the left of the description */
#popup_register.popup--modern label.label-upload .label-upload__thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1.5px dashed var(--color-grey-grey65);
    background: var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Filled state — image fills the slot, border becomes solid green */
#popup_register.popup--modern label.label-upload .label-upload__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#popup_register.popup--modern label.label-upload .label-upload__thumb:has(img) {
    border-style: solid;
    border-color: var(--color-functional-green);
    background: transparent;
}

/* Green check overlay in the bottom-right corner of the filled thumb */
#popup_register.popup--modern label.label-upload .label-upload__thumb:has(img)::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-functional-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.9 7.35L1.4 5.25L0 6.65L4.9 12.25L14 3.15L12.6 1.75L4.9 7.35Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    box-shadow: 0 0 0 2px var(--color-gray-white);
}

/* Error text inline below input */
#popup_register.popup--modern .error-text {
    color: var(--color-error);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 325;
    line-height: 14px;
    margin: 4px 0 0;
    display: none;
}

/* Show only the .error-text adjacent to the failing field, not all of them */
#popup_register.popup--modern .fields textarea.error + .error-text,
#popup_register.popup--modern .fields input.error + .error-text,
#popup_register.popup--modern .fields select.error + .error-text {
    display: block;
}

/* Checkbox / Radio rows */
.popup.popup--modern .checkbox-radio,
.popup.popup--modern .row.checkbox-radio {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: 8px;
    text-align: left;
}

.popup.popup--modern .checkbox-radio input[type="checkbox"],
.popup.popup--modern .checkbox-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 3px 0 0;
    padding: 0;
    border: 1px solid var(--color-grey-grey65);
    background: var(--color-gray-white);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.popup.popup--modern .checkbox-radio input[type="checkbox"] {
    border-radius: 2px;
}

.popup.popup--modern .checkbox-radio input[type="radio"] {
    border-radius: 50%;
}

.popup.popup--modern .checkbox-radio input[type="checkbox"]:checked {
    background: var(--color-grey-grey30);
    border-color: var(--color-grey-grey30);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.9 7.35L1.4 5.25L0 6.65L4.9 12.25L14 3.15L12.6 1.75L4.9 7.35Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.popup.popup--modern .checkbox-radio input[type="radio"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.2 6.3L1.2 4.5L0 5.7L4.2 10.5L12 2.7L10.8 1.5L4.2 6.3Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.popup.popup--modern .checkbox-radio input.error {
    border-color: var(--color-error);
}

.popup.popup--modern .checkbox-radio label {
    flex: 1;
    color: var(--color-grey-grey45);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 325;
    line-height: 26px;
    cursor: pointer;
}

.popup.popup--modern .checkbox-radio input:checked + label {
    color: var(--color-grey-grey30);
    font-weight: 350;
}

.popup.popup--modern .checkbox-radio label a {
    color: var(--color-grey-grey30);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .popup.popup--modern .checkbox-radio label {
        font-size: 12px;
        line-height: 16px;
    }
}

/* Loading variant — centered, no close button, non-dismissible */
.popup.popup--loading {
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 48px 40px;
}

.popup.popup--loading .popup__header {
    align-items: center;
}

.popup.popup--loading .popup__eyebrow {
    padding-right: 0;
}

.popup__loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.popup__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-grey-grey65);
    border-top-color: var(--color-grey-grey18);
    border-radius: 50%;
    animation: popup-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes popup-spin {
    to { transform: rotate(360deg); }
}