/* ===========================================
   EQUIPO ONBOARDING STYLES
   =========================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Root variables - Purple theme from mockup */
:root {
    --equipo-50: #f5f3ff;
    --equipo-100: #ede9fe;
    --equipo-200: #ddd6fe;
    --equipo-300: #c4b5fd;
    --equipo-400: #a78bfa;
    --equipo-500: #8b5cf6;
    --equipo-600: #7c3aed;
    --equipo-700: #6d28d9;
    --equipo-800: #5b21b6;
    --equipo-900: #4c1d95;
}

/* Hide old header/footer when onboarding is active */
body:has(.onboarding-container)>header,
body:has(.onboarding-container)>nav,
body:has(.onboarding-container)>footer,
body:has(.onboarding-container) .navbar,
body:has(.onboarding-container) .footer {
    display: none !important;
}

body:has(.onboarding-container) {
    padding-top: 0 !important;
    background: linear-gradient(135deg, #faf9ff 0%, #f3f0ff 100%) !important;
}

/* Base onboarding container */
.onboarding-container {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #faf9ff 0%, #f3f0ff 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100;
}

.onboarding-container * {
    box-sizing: border-box;
}

/* Header */
.onboarding-header {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
    padding: 0.875rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(109, 40, 217, 0.25);
}

.onboarding-header-inner {
    max-width: 42rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.onboarding-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* Same treatment as the logo inside the app (.er-sidenav-logo-img): the mark on
   its own, no badge behind it. */
.onboarding-logo-img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.onboarding-logo-text {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: white;
}

/* Progress dots */
.onboarding-progress-dots {
    display: flex;
    gap: 0.375rem;
}

.onboarding-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #e2e8f0;
    transition: all 0.3s ease;
}

.onboarding-dot.active {
    background: var(--equipo-500);
}

/*
    Main content. The extra bottom padding keeps the last row of the step
    (the Terug/Volgende nav) clear of the floating WhatsApp button, which is
    fixed to the bottom-right corner.
*/
.onboarding-main {
    flex: 1;
    padding: 1.5rem 1rem 6rem;
}

@media (min-width: 640px) {
    .onboarding-main {
        padding: 2.5rem 1.5rem 6rem;
    }
}

.onboarding-content {
    max-width: 36rem;
    margin: 0 auto;
}

/* Step content */
.onboarding-step {
    display: none;
}

.onboarding-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step header */
.onboarding-step-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .onboarding-step-header {
        margin-bottom: 2.5rem;
    }
}

.onboarding-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

@media (min-width: 640px) {
    .onboarding-title {
        font-size: 1.875rem;
        margin-bottom: 0.75rem;
    }
}

.onboarding-subtitle {
    color: #4b5563;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

@media (min-width: 640px) {
    .onboarding-subtitle {
        font-size: 1.125rem;
    }
}

/* Helper line under a field or a grid of options */
.onboarding-hint {
    margin: 0.75rem 0 0;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Sits between the label and its field, so the club dropdown cannot cover it. */
.onboarding-hint-above {
    margin: 0 0 0.5rem;
}

/* Choice cards */
.onboarding-choices {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .onboarding-choices {
        gap: 1rem;
    }
}

.onboarding-choice-card {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    font-family: inherit;
}

@media (min-width: 640px) {
    .onboarding-choice-card {
        border-radius: 1rem;
        padding: 1.5rem;
        gap: 1rem;
    }
}

.onboarding-choice-card:hover {
    border-color: var(--equipo-200);
    background: var(--equipo-50);
}

.onboarding-choice-card.selected {
    border-color: var(--equipo-500);
    background: var(--equipo-50);
}

.onboarding-choice-card.is-static {
    cursor: default;
}

.onboarding-choice-card.is-static:hover {
    border-color: #f3f4f6;
    background: white;
}

.onboarding-choice-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--equipo-100);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .onboarding-choice-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 0.75rem;
    }
}

.onboarding-choice-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--equipo-600);
}

@media (min-width: 640px) {
    .onboarding-choice-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.onboarding-choice-content {
    flex: 1;
    min-width: 0;
}

.onboarding-choice-title {
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.onboarding-choice-desc {
    color: #6b7280;
    margin: 0;
    font-size: 0.875rem;
}

/* Form inputs */
.onboarding-form-group {
    margin-bottom: 1rem;
}

.onboarding-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.onboarding-input {
    width: 100%;
    padding: 1rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #111827;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.onboarding-input:focus {
    outline: none;
    border-color: var(--equipo-300);
}

.onboarding-input::placeholder {
    color: #9ca3af;
}

.onboarding-input.invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
}

/* Phone input with country code */
.onboarding-phone-group {
    display: flex;
    gap: 0.5rem;
}

.onboarding-country-select {
    width: 5.5rem;
    padding: 0.875rem 0.5rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    font-size: 1rem;
    color: #111827;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

.onboarding-country-select:focus {
    outline: none;
    border-color: var(--equipo-300);
}

.onboarding-phone-input {
    flex: 1;
}

/* Club search dropdown */
.onboarding-dropdown-container {
    position: relative;
    z-index: 100;
}

.onboarding-dropdown-list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
    display: none;
    padding: 0.5rem 0;
}

.onboarding-dropdown-list.open {
    display: block;
}

.onboarding-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    z-index: 1;
}

.onboarding-dropdown-item:hover {
    background: #f8fafc;
}

.onboarding-dropdown-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onboarding-dropdown-icon span {
    color: var(--equipo-600);
    font-weight: 700;
    font-size: 0.875rem;
}

.onboarding-dropdown-name {
    font-weight: 500;
    color: #111827;
}

.onboarding-dropdown-city {
    font-size: 0.875rem;
    color: #6b7280;
}

.onboarding-dropdown-empty {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.onboarding-dropdown-add {
    color: var(--equipo-600);
    font-weight: 500;
    cursor: pointer;
}

.onboarding-dropdown-add:hover {
    color: var(--equipo-700);
}

/* Selected club display */
.onboarding-selected-club {
    background: var(--equipo-50);
    border: 2px solid var(--equipo-200);
    border-radius: 0.75rem;
    padding: 1rem;
    display: none;
    align-items: center;
    justify-content: space-between;
}

.onboarding-selected-club.visible {
    display: flex;
}

.onboarding-selected-club-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.onboarding-selected-club-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--equipo-600);
    font-weight: 700;
}

.onboarding-selected-club-name {
    font-weight: 600;
    color: #111827;
}

.onboarding-selected-club-city {
    font-size: 0.875rem;
    color: #6b7280;
}

.onboarding-selected-club-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
}

.onboarding-selected-club-remove:hover {
    color: #6b7280;
}

/* Radio options (referral) */
.onboarding-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .onboarding-radio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

.onboarding-radio-option {
    position: relative;
}

.onboarding-radio-option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.onboarding-radio-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 0.875rem;
}

.onboarding-radio-option input:checked+label {
    background: var(--equipo-50);
    border-color: var(--equipo-500);
    color: var(--equipo-700);
}

.onboarding-radio-option label:hover {
    border-color: var(--equipo-200);
}

/* Navigation buttons */
.onboarding-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .onboarding-nav {
        margin-top: 2.5rem;
    }
}

.onboarding-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    border: none;
}

@media (min-width: 640px) {
    .onboarding-btn {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

.onboarding-btn-back {
    background: none;
    color: #6b7280;
}

.onboarding-btn-back:hover {
    color: #111827;
}

.onboarding-btn-next {
    background: linear-gradient(135deg, var(--equipo-500) 0%, var(--equipo-600) 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}

.onboarding-btn-next:hover {
    background: linear-gradient(135deg, var(--equipo-600) 0%, var(--equipo-700) 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}

.onboarding-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Loading skeleton */
.onboarding-skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.375rem;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Loading spinner */
.onboarding-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #e2e8f0;
    border-top-color: var(--equipo-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Error message */
.onboarding-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: none;
}

.onboarding-error.visible {
    display: block;
}

.onboarding-input.error {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.onboarding-input.error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* AI Step card */
.onboarding-ai-card {
    background: linear-gradient(135deg, var(--equipo-50) 0%, white 100%);
    border: 2px solid var(--equipo-100);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
}

.onboarding-ai-icon {
    width: 4rem;
    height: 4rem;
    background: white;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.onboarding-ai-title {
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.onboarding-ai-desc {
    color: #6b7280;
    margin: 0;
    font-size: 0.9375rem;
}

.onboarding-ai-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.onboarding-ai-badge {
    padding: 0.375rem 0.75rem;
    background: white;
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #374151;
    border: 1px solid #e2e8f0;
}

/* Password strength */
.onboarding-password-strength {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.25rem;
}

.onboarding-password-bar {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.onboarding-password-bar.weak {
    background: #ef4444;
}

.onboarding-password-bar.medium {
    background: #f59e0b;
}

.onboarding-password-bar.strong {
    background: #10b981;
}

/* Utility: hidden */
.onboarding-hidden {
    display: none !important;
}

/* ===========================================
   LANGUAGE SELECTOR
   =========================================== */
.onboarding-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
    The floating WhatsApp button (templates/whatsapp_widget.php) runs on these
    pages too, same as the landing page. The room it needs is reserved by the
    bottom padding on .onboarding-main above.
*/

.onboarding-language-selector {
    position: relative;
}

.onboarding-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
}

.onboarding-lang-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.onboarding-lang-btn[aria-expanded="true"] .onboarding-lang-chevron {
    transform: rotate(180deg);
}

.onboarding-lang-chevron {
    transition: transform 0.2s ease;
}

.onboarding-lang-dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 60;
    min-width: 9rem;
    padding: 0.25rem;
    background: white;
    border-radius: 0.625rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.onboarding-lang-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.onboarding-lang-option {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.onboarding-lang-option:hover {
    background: #f9fafb;
    color: #374151;
}

.onboarding-lang-option.active {
    background: var(--equipo-50);
    color: var(--equipo-700);
    font-weight: 600;
}

/* ===========================================
   STEP TRACKER
   =========================================== */
/* The signup flow is just the bar now: the "step 2 of 7" line said what the bar
   already shows and cost a whole row of height (EQU-750). The three text rules below
   stay because new_team_existing_team.php still renders that line and loads this
   same stylesheet — deleting them left its "Stap 2 van 2" unstyled. */
.onboarding-step-tracker {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
}

.onboarding-step-tracker-text {
    max-width: 36rem;
    margin: 0 auto 0.75rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.onboarding-step-number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--equipo-600);
}

.onboarding-step-name {
    font-size: 0.875rem;
    color: #6b7280;
}

.onboarding-progress-bar-container {
    max-width: 36rem;
    margin: 0 auto;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--equipo-400) 0%, var(--equipo-600) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.onboarding-step-tracker .onboarding-progress-dots {
    max-width: 36rem;
    margin: 0 auto;
    justify-content: center;
}

/* ===========================================
   TEAM PREVIEW CARD
   =========================================== */
.onboarding-team-preview {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.onboarding-team-preview-card {
    background: linear-gradient(135deg, var(--equipo-50) 0%, white 100%);
    border: 2px solid var(--equipo-100);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.onboarding-team-preview-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: white;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--equipo-600);
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.onboarding-team-preview-info {
    flex: 1;
    min-width: 0;
}

.onboarding-team-preview-name {
    font-weight: 600;
    color: #111827;
    font-size: 1.125rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onboarding-team-preview-sport {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 0.25rem;
}

.onboarding-team-preview-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Light purple team preview card (like mockup) */
.onboarding-team-preview-card-purple {
    background: linear-gradient(135deg, var(--equipo-50) 0%, var(--equipo-100) 100%);
    border: 2px solid var(--equipo-200);
}

.onboarding-team-preview-card-purple .onboarding-team-preview-icon {
    background: white;
    color: var(--equipo-600);
}

.onboarding-team-preview-card-purple .onboarding-team-preview-name {
    color: #111827;
}

.onboarding-team-preview-card-purple .onboarding-team-preview-sport {
    color: var(--equipo-600);
}

/* ===========================================
   PASSWORD VISIBILITY TOGGLE
   =========================================== */
.onboarding-password-wrapper {
    position: relative;
}

.onboarding-password-wrapper .onboarding-input {
    padding-right: 3rem;
}

.onboarding-password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-password-toggle:hover {
    color: #6b7280;
}

/* ===========================================
   ROLE SELECTION
   =========================================== */
.onboarding-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .onboarding-role-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) {
    .onboarding-role-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }
}

.onboarding-role-card {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
}

.onboarding-role-card:hover {
    border-color: var(--equipo-200);
    background: var(--equipo-50);
}

.onboarding-role-card.selected {
    border-color: var(--equipo-500);
    background: var(--equipo-50);
}

.onboarding-role-card.selected .onboarding-role-icon {
    background: var(--equipo-500);
    color: white;
}

.onboarding-role-icon {
    width: 3rem;
    height: 3rem;
    background: var(--equipo-100);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--equipo-600);
    transition: all 0.2s ease;
}

.onboarding-role-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.onboarding-role-label {
    font-weight: 500;
    color: #374151;
    font-size: 0.8125rem;
}

@media (min-width: 640px) {
    .onboarding-role-label {
        font-size: 0.875rem;
    }
}

/* ===========================================
   ROLE SELECTION - VERTICAL LAYOUT
   =========================================== */
.onboarding-role-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.onboarding-role-row {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: inherit;
    width: 100%;
}

.onboarding-role-row:hover {
    border-color: var(--equipo-200);
    background: var(--equipo-50);
}

.onboarding-role-row.selected {
    border-color: var(--equipo-500);
    background: var(--equipo-50);
}

.onboarding-role-row.selected .onboarding-role-row-icon {
    background: var(--equipo-500);
    color: white;
}

.onboarding-role-row.selected .onboarding-role-row-check {
    background: var(--equipo-500);
    border-color: var(--equipo-500);
}

.onboarding-role-row.selected .onboarding-role-row-check svg {
    opacity: 1;
}

.onboarding-role-row-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--equipo-100);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--equipo-600);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.onboarding-role-row-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.onboarding-role-row-content {
    flex: 1;
}

.onboarding-role-row-title {
    font-weight: 600;
    color: #111827;
    display: block;
}

.onboarding-role-row-check {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.onboarding-role-row-check svg {
    width: 0.875rem;
    height: 0.875rem;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ===========================================
   AI CONFIGURATION STEP
   =========================================== */
.onboarding-ai-intro {
    text-align: center;
    margin-bottom: 1.5rem;
}

.onboarding-ai-intro .onboarding-ai-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--equipo-100) 0%, var(--equipo-50) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem auto;
    color: var(--equipo-600);
}

.onboarding-ai-intro .onboarding-ai-icon svg {
    width: 2rem;
    height: 2rem;
}

.onboarding-ai-description {
    color: #6b7280;
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 28rem;
    margin: 0 auto;
}

/* AI Feature buttons */
.onboarding-ai-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.onboarding-ai-feature {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.625rem;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    font-family: inherit;
}

.onboarding-ai-feature:hover {
    border-color: var(--equipo-200);
    background: var(--equipo-50);
}

.onboarding-ai-feature.selected {
    border-color: var(--equipo-500);
    background: var(--equipo-50);
}

.onboarding-ai-feature.selected svg {
    color: var(--equipo-600);
}

.onboarding-ai-feature svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.onboarding-ai-feature span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
}

/* AI Context display */
.onboarding-ai-context {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.onboarding-ai-context-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.onboarding-ai-context-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.onboarding-ai-context-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--equipo-600);
}

/* AI Chat-style input */
/* White card around the conversation so the step reads as a chat window rather
   than loose bubbles on the page background (EQU-689). Matches the card styling
   used elsewhere in this file. */
.onboarding-ai-chat {
    margin-top: 1.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

.onboarding-ai-chat-bubble {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.onboarding-ai-chat-avatar {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, var(--equipo-400) 0%, var(--equipo-600) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onboarding-ai-chat-avatar svg {
    width: 1.125rem;
    height: 1.125rem;
    color: white;
}

.onboarding-ai-chat-message {
    background: #f3f4f6;
    border-radius: 0 1rem 1rem 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    color: #374151;
    max-width: calc(100% - 3rem);
}

.onboarding-ai-chat-input-wrapper {
    position: relative;
    margin-left: 3rem;
}

.onboarding-ai-chat-input {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    font-size: 0.9375rem;
    color: #111827;
    font-family: inherit;
    resize: none;
    transition: border-color 0.2s ease;
}

.onboarding-ai-chat-input:focus {
    outline: none;
    border-color: var(--equipo-300);
}

.onboarding-ai-chat-input::placeholder {
    color: #9ca3af;
}

.onboarding-ai-chat-send {
    position: absolute;
    right: 0.5rem;
    bottom: 0.75rem;
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, var(--equipo-500) 0%, var(--equipo-600) 100%);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.onboarding-ai-chat-send:hover {
    transform: scale(1.05);
}

.onboarding-ai-chat-send svg {
    width: 1rem;
    height: 1rem;
    color: white;
}

/* AI Chat messages container */
.onboarding-ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

/* User message bubble (right aligned) */
.onboarding-ai-chat-bubble-user {
    justify-content: flex-end;
}

.onboarding-ai-chat-message-user {
    background: linear-gradient(135deg, var(--equipo-500) 0%, var(--equipo-600) 100%);
    color: white;
    border-radius: 1rem 1rem 0 1rem;
    margin-left: auto;
    max-width: 85%;
}

/* AI Header with large icon (like mockup) */
.onboarding-ai-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.onboarding-ai-icon-large {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, var(--equipo-500) 0%, var(--equipo-600) 100%);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem auto;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.onboarding-ai-icon-large svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.onboarding-ai-header .onboarding-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
    .onboarding-ai-header .onboarding-title {
        font-size: 1.75rem;
    }
}

/* ===========================================
   FEATURE SELECTION LIST (Step 10)
   =========================================== */
.onboarding-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.onboarding-feature-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.onboarding-feature-row:hover {
    border-color: var(--equipo-200);
    background: var(--equipo-50);
}

.onboarding-feature-row:has(input:checked) {
    border-color: var(--equipo-500);
    background: var(--equipo-50);
}

.onboarding-feature-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.onboarding-feature-row-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--equipo-100);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--equipo-600);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.onboarding-feature-row:has(input:checked) .onboarding-feature-row-icon {
    background: var(--equipo-500);
    color: white;
}

.onboarding-feature-row-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.onboarding-feature-row-text {
    flex: 1;
    font-weight: 500;
    color: #374151;
}

.onboarding-feature-row-check {
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.onboarding-feature-row:has(input:checked) .onboarding-feature-row-check {
    background: var(--equipo-500);
    border-color: var(--equipo-500);
}

.onboarding-feature-row:has(input:checked) .onboarding-feature-row-check::after {
    content: '';
    width: 0.5rem;
    height: 0.75rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* ===========================================
   LOADING OVERLAY
   =========================================== */
.onboarding-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.onboarding-loading-overlay.visible {
    display: flex;
}

.onboarding-loading-content {
    text-align: center;
    padding: 2rem;
}

.onboarding-loading-spinner {
    width: 3.5rem;
    height: 3.5rem;
    border: 4px solid var(--equipo-100);
    border-top-color: var(--equipo-500);
    border-radius: 50%;
    animation: onboarding-spin 1s linear infinite;
    margin: 0 auto 1.5rem auto;
}

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

.onboarding-loading-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}

.onboarding-loading-subtitle {
    font-size: 1rem;
    color: #6b7280;
}

.onboarding-loading-warning {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    font-style: italic;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 380px) {
    .onboarding-title {
        font-size: 1.25rem;
    }

    .onboarding-subtitle {
        font-size: 0.9375rem;
    }

    .onboarding-radio-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-role-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Still rendered by new_team_existing_team.php — see the STEP TRACKER block. */
    .onboarding-step-tracker-text {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }

}

/* ===========================================
   AI LOGO PULSE ANIMATION
   =========================================== */
.onboarding-ai-icon-pulse {
    animation: ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    }

    50% {
        opacity: 0.85;
        box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5);
    }
}

/* AI Context Card (like mockup) */
/* AI Context chips */
.onboarding-ai-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.onboarding-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.onboarding-ai-chip svg {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    flex-shrink: 0;
}

/* AI context header with label */
.onboarding-ai-context-label-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.onboarding-ai-context-label-header span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.onboarding-ai-context-label-header svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--equipo-500);
}

/* Email validation spinner inside input */
.input-group .onboarding-spinner {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Input with status indicator */
.onboarding-input-with-status {
    position: relative;
    display: flex;
    align-items: center;
}

.onboarding-input-with-status .onboarding-input {
    padding-right: 2.75rem;
}

.onboarding-input-status {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Email spinner */
.onboarding-spinner {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--equipo-200);
    border-top-color: var(--equipo-500);
    border-radius: 50%;
    animation: onboarding-spin 0.8s linear infinite;
}

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

/* Email status icons */
.onboarding-status-valid,
.onboarding-status-invalid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.onboarding-status-valid svg {
    stroke: #10b981;
}

.onboarding-status-invalid svg {
    stroke: #ef4444;
}

/* ===========================================
   LOADING STEP (Step 11)
   =========================================== */
.onboarding-loading-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    min-height: 400px;
}

.onboarding-loading-animation {
    margin-bottom: 2rem;
}

.onboarding-loading-circle {
    position: relative;
    width: 120px;
    height: 120px;
}

.onboarding-loading-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.onboarding-loading-progress {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: loading-progress 2s ease-in-out infinite;
}

@keyframes loading-progress {
    0% {
        stroke-dashoffset: 283;
    }

    50% {
        stroke-dashoffset: 70;
    }

    100% {
        stroke-dashoffset: 283;
    }
}

.onboarding-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--equipo-400) 0%, var(--equipo-600) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: icon-pulse 2s ease-in-out infinite;
}

.onboarding-loading-icon svg {
    width: 28px;
    height: 28px;
}

@keyframes icon-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 12px 32px rgba(139, 92, 246, 0.4);
    }
}

.onboarding-loading-step .onboarding-loading-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.onboarding-loading-step .onboarding-loading-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 2rem;
}

.onboarding-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 280px;
}

.onboarding-loading-step-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    color: #64748b;
    transition: all 0.3s ease;
}

.onboarding-loading-step-item.completed {
    background: var(--equipo-50);
    color: var(--equipo-700);
}

.onboarding-loading-step-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.onboarding-loading-step-check svg {
    width: 14px;
    height: 14px;
    stroke: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.onboarding-loading-step-item.completed .onboarding-loading-step-check {
    background: var(--equipo-500);
}

.onboarding-loading-step-item.completed .onboarding-loading-step-check svg {
    opacity: 1;
}

/* Error on step 11 */
.onboarding-loading-step .onboarding-error {
    margin-top: 1.5rem;
    max-width: 320px;
}

/* ===========================================
   DEMO ONBOARDING COMPONENT
   3-step interactive onboarding flow for demo mode
   =========================================== */

/* Base container */
.demo-onboarding {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Spotlight overlay */
.demo-spotlight {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(circle at var(--demo-spot-x, 50vw) var(--demo-spot-y, 50vh),
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) calc(var(--demo-spot-r, 120px) * 0.6),
            rgba(9, 12, 20, 0.68) calc(var(--demo-spot-r, 120px) * 0.9),
            rgba(9, 12, 20, 0.82) 100%);
}

.demo-spotlight.visible {
    opacity: 1;
}

/* Modal overlay (Step 1) */
.demo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.demo-modal-overlay.visible {
    display: flex;
}

/* Modal card */
.demo-modal {
    width: 100%;
    max-width: 28rem;
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.demo-modal-animate {
    animation: demoFloatIn 0.45s ease-out both;
}

@keyframes demoFloatIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.demo-modal-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--equipo-400) 0%, var(--equipo-600) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    color: white;
}

/* ----------------------------------------------------------------------
   Welcome-modal inline agenda animation.
   Cycle: 8s. Per row, with staggered delays based on --i (0..3), the "?"
   in the status box flips to a green ✓ and the green segment of the
   attendance bar grows from a sliver to ~45%. Rows reset in the same
   staggered order, then the cycle repeats.
   ---------------------------------------------------------------------- */
.demo-modal-animation {
    width: 100%;
    max-width: 22rem;
    margin: 0 auto 1.25rem;
    padding: 0.5rem 0.5rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dma-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #fafafa;
}

.dma-date {
    width: 28px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.dma-day {
    font-size: 0.6rem;
    font-weight: 700;
    color: #7c3aed;
    letter-spacing: 0.05em;
}

.dma-num {
    font-size: 0.95rem;
    font-weight: 800;
    color: #111827;
    margin-top: 1px;
}

.dma-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.dma-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.dma-bar {
    width: 100%;
    height: 9px;
    border-radius: 5px;
    overflow: hidden;
    background: #d1d5db;
}

.dma-bar-green {
    display: block;
    height: 100%;
    background: #34d399;
    width: var(--bar-start, 6%);
    animation: dma-bar-grow 8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.9s);
}

.dma-status {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 700;
    position: relative;
    animation: dma-status-flip 8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.9s);
}

.dma-status-question,
.dma-status-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dma-status-question {
    animation: dma-question-out 8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.9s);
}

.dma-status-check {
    color: #ffffff;
    opacity: 0;
    transform: scale(0.5);
    animation: dma-check-in 8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.9s);
}

.dma-status-check i { font-size: 0.65rem; }

@keyframes dma-bar-grow {
    0%, 8%     { width: var(--bar-start, 6%); }
    14%, 75%   { width: var(--bar-end, 48%); }
    82%, 100%  { width: var(--bar-start, 6%); }
}

@keyframes dma-status-flip {
    0%, 8%     { background: #e5e7eb; }
    14%, 75%   { background: #34d399; }
    82%, 100%  { background: #e5e7eb; }
}

@keyframes dma-question-out {
    0%, 8%     { opacity: 1; }
    12%, 75%   { opacity: 0; }
    80%, 100%  { opacity: 1; }
}

@keyframes dma-check-in {
    0%, 8%     { opacity: 0; transform: scale(0.5); }
    11%, 14%   { opacity: 1; transform: scale(1.35); }
    18%, 75%   { opacity: 1; transform: scale(1); }
    82%, 100%  { opacity: 0; transform: scale(0.5); }
}

/* ----------------------------------------------------------------------
   Step 2 "Onbeperkt aantal spelers" animation.
   A fixed-height viewport showing a tall stack of 20 player cards.
   The stack scrolls upward with an ease-in curve so the first cards
   are visible, then more keep flowing past faster and faster —
   "almost too fast to follow" — visual hook for "no caps".
   ---------------------------------------------------------------------- */
.demo-modal-players {
    height: 170px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.dmp-stack {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    box-sizing: border-box;
    animation: dmp-stack-scroll 7s cubic-bezier(0.55, 0, 1, 1) infinite;
}

.dmp-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #fafafa;
    border-radius: 8px;
    flex-shrink: 0;
    /* Default: invisible off-screen-right, waiting to fly in.
       Cards 1 & 2 override below to be present from the start. */
    opacity: 0;
    transform: translateX(150px);
    animation: dmp-card-fly-in 7s ease-out infinite;
}

.dmp-card:nth-child(1),
.dmp-card:nth-child(2) {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Decreasing intervals — each new card arrives a bit faster than the
   previous one ("steeds sneller"). Cards 18+ pile up almost together. */
.dmp-card:nth-child(3)  { animation-delay: 0.30s; }
.dmp-card:nth-child(4)  { animation-delay: 0.65s; }
.dmp-card:nth-child(5)  { animation-delay: 0.95s; }
.dmp-card:nth-child(6)  { animation-delay: 1.25s; }
.dmp-card:nth-child(7)  { animation-delay: 1.50s; }
.dmp-card:nth-child(8)  { animation-delay: 1.75s; }
.dmp-card:nth-child(9)  { animation-delay: 1.95s; }
.dmp-card:nth-child(10) { animation-delay: 2.15s; }
.dmp-card:nth-child(11) { animation-delay: 2.30s; }
.dmp-card:nth-child(12) { animation-delay: 2.45s; }
.dmp-card:nth-child(13) { animation-delay: 2.58s; }
.dmp-card:nth-child(14) { animation-delay: 2.68s; }
.dmp-card:nth-child(15) { animation-delay: 2.78s; }
.dmp-card:nth-child(16) { animation-delay: 2.86s; }
.dmp-card:nth-child(17) { animation-delay: 2.93s; }
.dmp-card:nth-child(18) { animation-delay: 2.99s; }
.dmp-card:nth-child(19) { animation-delay: 3.04s; }
.dmp-card:nth-child(20) { animation-delay: 3.08s; }

@keyframes dmp-card-fly-in {
    0%        { opacity: 0; transform: translateX(150px); }
    4%        { opacity: 1; transform: translateX(0); }
    95%       { opacity: 1; transform: translateX(0); }
    100%      { opacity: 0; transform: translateX(150px); }
}

.dmp-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

.dmp-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    text-align: left;
}

/* Two cards visible from the start at the top of the viewport. The
   stack scrolls upward with ease-in so it accelerates: the per-card
   fly-in-from-right animation lands new cards at the bottom while the
   stack scrolls them up. By the end the names blur past. */
@keyframes dmp-stack-scroll {
    0%, 4%   { transform: translateY(0); }
    100%     { transform: translateY(calc(170px - 100%)); }
}

/* ----------------------------------------------------------------------
   "Ik help je op weg" checklist animation.
   Four numbered circles connected by a vertical line. One by one the
   numbered bullets flip to a green checkmark circle, then reset.
   ---------------------------------------------------------------------- */
.demo-modal-checklist {
    padding: 12px 14px;
    position: relative;
}

.demo-modal-checklist::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: #d1d5db;
}

.dmc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    position: relative;
    z-index: 1;
}

.dmc-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    animation: dmc-circle-flip 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.7s);
}

.dmc-number,
.dmc-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dmc-number {
    animation: dmc-number-out 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.7s);
}

.dmc-check {
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    animation: dmc-check-in 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.7s);
}

.dmc-check i { font-size: 0.7rem; }

.dmc-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #111827;
    text-align: left;
}

@keyframes dmc-circle-flip {
    0%, 10%     { background: #e5e7eb; }
    18%, 78%    { background: #22c55e; }
    86%, 100%   { background: #e5e7eb; }
}

@keyframes dmc-number-out {
    0%, 10%     { opacity: 1; }
    16%, 78%    { opacity: 0; }
    86%, 100%   { opacity: 1; }
}

@keyframes dmc-check-in {
    0%, 10%     { opacity: 0; transform: scale(0.5); }
    16%, 20%    { opacity: 1; transform: scale(1.3); }
    24%, 78%    { opacity: 1; transform: scale(1); }
    86%, 100%   { opacity: 0; transform: scale(0.5); }
}

/* ----------------------------------------------------------------------
   Wizard chrome: indicator above title + button row at the bottom.
   ---------------------------------------------------------------------- */
.demo-step-indicator {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.demo-btn-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.demo-btn-row .demo-btn { flex: 0 1 auto; min-width: 110px; }

.demo-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
}

.demo-modal-text {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.demo-modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--equipo-50);
    border: 1px solid var(--equipo-200);
    border-radius: 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    color: var(--equipo-700);
    margin-bottom: 1.5rem;
}

.demo-modal-warning svg {
    flex-shrink: 0;
    color: var(--equipo-500);
    margin-top: 0.125rem;
}

/* Demo buttons */
.demo-btn {
    font-family: inherit;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.75rem;
}

.demo-btn-primary {
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--equipo-500) 0%, var(--equipo-600) 100%);
    color: white;
    font-size: 0.9375rem;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}

.demo-btn-primary:hover {
    background: linear-gradient(135deg, var(--equipo-600) 0%, var(--equipo-700) 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
}

.demo-btn-full {
    width: 100%;
}

.demo-btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

.demo-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Referral question — the wizard's first screen (EQU-680). Mirrors the cards
   it replaced in the signup flow, so answering stays a single tap. */
.demo-referral-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.demo-referral-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 0.25rem;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.demo-referral-card:hover {
    border-color: var(--equipo-400);
    background: var(--equipo-50);
}

.demo-referral-card.selected {
    border-color: var(--equipo-500);
    background: var(--equipo-50);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.demo-referral-icon {
    display: flex;
    color: var(--equipo-500);
}

.demo-referral-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.demo-referral-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #475569;
    text-align: center;
}

.demo-referral-input {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: #1e293b;
}

.demo-referral-input[hidden] {
    display: none;
}

.demo-referral-input:focus {
    outline: none;
    border-color: var(--equipo-500);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Setup Bar (Instagram-style). Anchored bottom-left so it never covers the
   "+ new event" button (bottom-right, hidden behind the pill on mobile). On
   desktop the redesign shell (body.er-mode) shows a 220px left sidebar, so the
   pill is pushed just to the right of it instead of sitting underneath it
   (EQU-508). */
.demo-setup-bar {
    position: fixed;
    bottom: 5rem;
    left: 1.5rem;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

/* Clear the 220px desktop sidebar (.er-sidenav). */
body.er-mode .demo-setup-bar {
    left: calc(220px + 1.5rem);
}

.demo-setup-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.15);
}

.demo-setup-bar.demo-pulse {
    animation: demoPulseRing 1.6s ease-in-out infinite;
}

/* Step 4 ("Ik help je op weg") spotlight: raise the setup-pill above
   the modal overlay backdrop and pulse it so the welcome wizard's
   final modal points at where the progress checklist lives. */
body.demo-step-final-active .demo-setup-bar {
    z-index: 1110;
    animation: demoPulseRing 1.6s ease-in-out infinite;
    border-color: #7c3aed;
    box-shadow: 0 10px 30px -5px rgba(124, 58, 237, 0.45),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

@keyframes demoPulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(139, 92, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    }
}

.demo-setup-bar-percentage {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--equipo-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}

.demo-setup-bar-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.demo-setup-bar-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

.demo-setup-bar-sublabel {
    font-size: 0.6875rem;
    color: #6b7280;
}

/* Setup Card (expandable checklist) — anchored bottom-left, matching the pill. */
.demo-setup-card {
    position: fixed;
    bottom: 9rem;
    left: 1.5rem;
    z-index: 1050;
    /* (er-mode sidebar offset applied below, mirroring .demo-setup-bar) */
    width: min(92vw, 20rem);
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: none;
}

/* Clear the 220px desktop sidebar (.er-sidenav). */
body.er-mode .demo-setup-card {
    left: calc(220px + 1.5rem);
}

.demo-setup-card.visible {
    display: block;
    animation: demoFloatIn 0.3s ease-out;
}

.demo-setup-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.demo-setup-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.demo-setup-card-badge {
    padding: 0.25rem 0.5rem;
    background: #ecfdf5;
    color: #059669;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Setup Checklist */
.demo-setup-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.demo-setup-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #64748b;
}

.demo-setup-checklist-item.completed {
    color: #374151;
}

.demo-setup-checklist-dot {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #e2e8f0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.0625rem;
}

.demo-setup-checklist-item.completed .demo-setup-checklist-dot {
    background: #10b981;
}

.demo-setup-checklist-check {
    color: #fff;
    font-size: 0.625rem;
    line-height: 1;
}

.demo-setup-checklist-text {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.3;
}

.demo-setup-checklist-label {
    font-weight: 500;
}

.demo-setup-checklist-sublabel {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Open, actionable steps (e.g. "Nodig teamgenoten uit") navigate to their
   own page; a pointer + chevron makes them read as clickable so the user is
   never left wondering how to advance the step (EQU-508). */
.demo-setup-checklist-item-clickable {
    cursor: pointer;
}

.demo-setup-checklist-go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.75rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.demo-setup-checklist-item-clickable:hover .demo-setup-checklist-label {
    color: var(--equipo-600, #6d28d9);
}

.demo-setup-checklist-item-clickable:hover .demo-setup-checklist-go {
    color: var(--equipo-500, #7c3aed);
    transform: translateX(2px);
}

/* Expandable "Bekijk onze features" row + per-feature sub-list */
.demo-setup-checklist-item-expandable {
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}

.demo-setup-checklist-item-expandable .demo-setup-checklist-text {
    flex: 1;
}

.demo-features-caret {
    display: inline-flex;
    align-items: center;
    color: #94a3b8;
    font-size: 0.7rem;
    margin-top: 0.2rem;
    transition: transform 0.25s ease;
}

.demo-setup-checklist-item-expandable.expanded .demo-features-caret {
    transform: rotate(180deg);
}

.demo-features-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    /* align under the label: dot width (1.125rem) + row gap (0.625rem) */
    padding-left: 1.75rem;
    flex-basis: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, visibility 0.3s;
}

.demo-setup-checklist-item-expandable.expanded .demo-features-sublist {
    max-height: 240px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: 0.35rem;
}

.demo-feature-row {
    margin: 0;
}

.demo-feature-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    color: #64748b;
    text-decoration: none;
    font-size: 0.8125rem;
}

.demo-feature-link:hover {
    color: #7c3aed;
    text-decoration: none;
}

.demo-feature-status {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: #fff;
}

.demo-feature-row.is-done .demo-feature-status {
    background: #10b981;
    border-color: #10b981;
}

.demo-feature-row.is-done .demo-feature-name {
    color: #374151;
}

.demo-feature-name {
    flex: 1;
}

.demo-feature-go {
    color: #cbd5e1;
    font-size: 0.7rem;
}

.demo-feature-link:hover .demo-feature-go {
    color: #7c3aed;
}

/* Hint bubble (Step 2) */
.demo-hint {
    position: fixed;
    z-index: 1060;
    display: none;
}

.demo-hint.visible {
    display: block;
}

.demo-hint-bottom-right {
    bottom: 10rem;
    right: 1.5rem;
}

.demo-hint-content {
    width: min(90vw, 16rem);
    background: white;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.demo-hint-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.demo-hint-text {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.demo-hint-content .demo-btn {
    margin-top: 1rem;
    width: 100%;
}

/* Tooltip (Step 3) */
.demo-tooltip {
    position: fixed;
    z-index: 1060;
    display: none;
}

.demo-tooltip.visible {
    display: block;
}

.demo-tooltip-content {
    width: min(90vw, 16rem);
    background: white;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.demo-tooltip-content .demo-btn {
    margin-top: 0.75rem;
    width: 100%;
}

/* Below 900px the desktop sidebar (.er-sidenav) is hidden, so drop the
   sidebar offset and let the pill/card sit at the left edge again — opposite
   the bottom-right "+ new event" button. */
@media (max-width: 900px) {
    body.er-mode .demo-setup-bar,
    body.er-mode .demo-setup-card {
        left: 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .demo-setup-bar {
        right: auto;
        left: 1rem;
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        width: auto;
        justify-content: flex-start;
        touch-action: none;
        user-select: none;
    }

    .demo-setup-bar.dragging {
        cursor: grabbing;
        opacity: 0.9;
        transition: none;
    }

    .demo-setup-card {
        right: auto;
        left: 1rem;
        bottom: calc(10rem + env(safe-area-inset-bottom));
        width: auto;
        max-width: min(90vw, 20rem);
        max-height: calc(100vh - 14rem);
        overflow-y: auto;
    }

    .demo-hint-bottom-right {
        left: 1rem;
        right: 1rem;
        bottom: calc(12rem + env(safe-area-inset-bottom));
    }

    .demo-modal {
        padding: 1.5rem;
    }

    .demo-modal-title {
        font-size: 1.25rem;
    }
}

/* Hidden utility class */
.demo-hidden {
    display: none !important;
}

.demo-btn-secondary {
    flex: 1;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Country selection step */
/* No margin of its own: the timezone field follows `space-2` under it (EQU-1189). */
.onboarding-country-field {
    position: relative;
}

/* Reads as a select: same box as the other fields, opening the full ISO list. */
.onboarding-country-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
}

.onboarding-country-chevron {
    flex: 0 0 auto;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.onboarding-country-toggle[aria-expanded="true"] .onboarding-country-chevron {
    transform: rotate(180deg);
}

/* The country list is 250 entries long, so it takes over the screen rather than
   hanging off a field: a full sheet with its own header, search and groups. */
.onboarding-country-dropdown {
    /* Repeated from .onboarding-container: the sheet sits outside it (to escape its
       stacking context), so it no longer inherits the onboarding typeface and would
       otherwise render in the body font of the page behind it. */
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.onboarding-country-dropdown.open {
    opacity: 1;
    visibility: visible;
}

.onboarding-country-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
}

.onboarding-country-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 32rem;
    max-height: 92vh;
    padding: 1rem;
    background: #f8f7ff;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(1.5rem);
    transition: transform 0.2s ease;
}

.onboarding-country-dropdown.open .onboarding-country-panel {
    transform: translateY(0);
}

@media (min-width: 640px) {
    .onboarding-country-dropdown {
        align-items: center;
    }

    .onboarding-country-panel {
        border-radius: 1.25rem;
    }
}

.onboarding-country-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.onboarding-country-panel-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.onboarding-country-panel-close {
    padding: 0 0.25rem;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.75rem;
    line-height: 1;
}

.onboarding-country-search-wrapper {
    padding-bottom: 0.75rem;
}

.onboarding-country-search {
    width: 100%;
}

.onboarding-country-options {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.onboarding-country-group + .onboarding-country-group {
    margin-top: 1.25rem;
}

.onboarding-country-group.onboarding-hidden + .onboarding-country-group {
    margin-top: 0;
}

.onboarding-country-group-title {
    margin: 0 0 0.5rem 0.25rem;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Same card as the sport lists, so a group reads as one block. */
.onboarding-country-list {
    background: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.875rem;
    overflow: hidden;
}

.onboarding-country-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid #f3f4f6;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Whichever option is topmost after filtering drops the divider; :first-child
   breaks as soon as options are hidden. */
.onboarding-country-option.first-visible {
    border-top: none;
}

.onboarding-country-option:hover,
.onboarding-country-option:focus-visible {
    background: #f9fafb;
}

.onboarding-country-option[aria-selected="true"] {
    background: var(--equipo-50);
    color: var(--equipo-700);
    font-weight: 600;
}

.onboarding-country-option[aria-selected="true"]::after {
    content: '\2713';
    margin-left: auto;
    color: var(--equipo-500);
    font-weight: 700;
}

.onboarding-country-flag {
    flex: 0 0 1.5rem;
    margin-right: 0.75rem;
    font-size: 1.125rem;
    line-height: 1;
}

.onboarding-country-toggle-value {
    display: flex;
    align-items: center;
    min-width: 0;
}

.onboarding-country-toggle-value .onboarding-country-name,
.onboarding-country-option .onboarding-country-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================================
   CELEBRATION: count-up + glow + step flash
   =========================================== */
.demo-setup-bar.demo-celebrating {
    animation: demo-pill-glow 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes demo-pill-glow {
    0%   { box-shadow: 0 8px 20px -4px rgba(0,0,0,0.25); transform: scale(1); }
    20%  { box-shadow: 0 0 60px 14px rgba(124, 58, 237, 0.55); transform: scale(1.10); }
    45%  { box-shadow: 0 0 80px 18px rgba(52, 211, 153, 0.55); transform: scale(1.06); }
    100% { box-shadow: 0 8px 20px -4px rgba(0,0,0,0.25); transform: scale(1); }
}

.demo-setup-bar-percentage {
    transition: color 0.2s ease;
}

.demo-setup-bar.demo-celebrating .demo-setup-bar-percentage {
    text-shadow: 0 0 16px rgba(255,255,255,0.85);
}

.demo-setup-checklist-item.demo-step-just-completed {
    animation: demo-step-flash 2.2s ease-out;
    border-radius: 0.5rem;
}

@keyframes demo-step-flash {
    0%   { background: rgba(16, 185, 129, 0);    transform: translateX(0)   scale(1); }
    12%  { background: rgba(16, 185, 129, 0.28); transform: translateX(6px) scale(1.03); }
    28%  { background: rgba(16, 185, 129, 0.22); transform: translateX(-3px) scale(1.02); }
    45%  { background: rgba(16, 185, 129, 0.18); transform: translateX(0)   scale(1.015); }
    100% { background: rgba(16, 185, 129, 0);    transform: translateX(0)   scale(1); }
}

.demo-setup-checklist-item.demo-step-just-completed .demo-setup-checklist-dot {
    animation: demo-dot-pop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes demo-dot-pop {
    0%   { transform: scale(0.6); box-shadow: 0 0 0 0    rgba(16, 185, 129, 0.7); }
    40%  { transform: scale(1.5); box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1);   box-shadow: 0 0 0 0    rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-setup-bar.demo-celebrating,
    .demo-setup-checklist-item.demo-step-just-completed,
    .demo-setup-checklist-item.demo-step-just-completed .demo-setup-checklist-dot {
        animation: none;
    }
}
/* ===========================================
   WHATSAPP BUTTON — ONBOARDING ONLY
   =========================================== */
/* The onboarding steps end in a Next button bottom-right, which the floating
   WhatsApp button sits on top of. Move it to the left here rather than in
   whatsapp_widget.css, which loads on every outside page: the marketing pages have
   no such conflict and their button belongs where visitors expect it. */
body:has(.onboarding-container) .wa-widget-button {
    left: 20px;
    right: auto;
}

@media (max-width: 767px) {
    body:has(.onboarding-container) .wa-widget-button {
        left: 14px;
        right: auto;
    }
}