/* Registration page only (templates/auth/register.html).
   Shared form styles live in base.css. */

.section-index {
    font-variant-numeric: tabular-nums;
}

/* Partner logos: hide the broken-image icon until a logo src is set */
.partner-logo img[src=""] {
    display: none;
}

#confirmationPanel {
    display: none;
}

#confirmationPanel.is-visible {
    display: block;
}

#registrationForm.hidden-after-submit {
    display: none;
}

/* --- Team member cards --- */

@keyframes add-member-pop {
    0% {
        transform: scale(1) rotate(0deg);
    }

    40% {
        transform: scale(1.6) rotate(90deg);
    }

    70% {
        transform: scale(0.9) rotate(90deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.add-member-icon-pop {
    display: inline-block;
    animation: add-member-pop 0.5s ease;
}

@keyframes member-card-drop-in {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }

    60% {
        opacity: 1;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.member-card-drop-in {
    animation: member-card-drop-in 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Phone --- */

@media screen and (max-width: 639px) {
    header > div,
    body > section,
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body > section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    main {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    #registrationForm h2 {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    /* Form cards, including generated member cards */
    main .bg-white.rounded-3xl {
        padding: 1.25rem;
        border-radius: 1rem;
    }

    #registrationForm .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #registrationForm .grid > * {
        min-width: 0;
    }

    /* Short options (age group, challenge mode) and partner logos stay two per row */
    #registrationForm .choice-grid-compact,
    #registrationForm .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .category-option-card {
        padding: 1rem;
    }

    .section-index {
        flex-shrink: 0;
        font-size: 1.5rem;
    }

    #registrationForm button[type="submit"] {
        width: 100%;
        padding: 1rem;
        white-space: normal;
    }

    #confirmationPanel {
        overflow-wrap: anywhere;
    }
}

/* --- Tablet --- */

@media screen and (min-width: 640px) and (max-width: 1023px) {
    main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* --- Phone comfort (audited at 320 / 375 / 390px) --- */
/* Phones: every Yes/No, nationality and other small radio / checkbox choice is at least 40px tall to tap */
#registrationForm label:has(> input[type="radio"]:not(.sr-only)),
#registrationForm label:has(> input[type="checkbox"]) { min-height: 2.5rem; }
/* Invisible larger tap area around small controls, without changing how they look */
.tap-area:not(.absolute):not(.fixed) { position: relative; }  /* Keeps an absolutely placed button where it is */
.tap-area::after { content: ''; position: absolute; inset: -10px; }
/* Merchandise options (Size / Color / ...): side by side only when each gets ~6rem, else one per line */
.variant-row { container-type: inline-size; }
.variant-choices { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 12.5rem) { .variant-choices[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 19rem) { .variant-choices[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }