/* ----------------------------------------
   Auth Pages (Login/Register)
   ---------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    background: var(--color-gray-50);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-10);
    box-shadow: var(--shadow-xl);
    /* Ensure overflow for dropdowns */
    overflow: visible;
}

.auth-card__logo {
    display: block;
    height: 40px;
    margin: 0 auto var(--spacing-8);
}

.auth-card__title {
    text-align: center;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-2);
}

.auth-card__subtitle {
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-8);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    /* Added spacing between groups */
}

    .form-group label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-gray-700);
    }

    .form-group input {
        padding: var(--spacing-3) var(--spacing-4);
        border: 2px solid var(--color-gray-200);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-base);
        transition: all var(--transition-fast);
    }

        .form-group input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-alpha);
        }

        .form-group input::placeholder {
            color: var(--color-gray-400);
        }

.form-check {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-form__footer {
    text-align: center;
    margin-top: var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

    .auth-form__footer a {
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
    }

        .auth-form__footer a:hover {
            text-decoration: underline;
        }

/* Club Selector */
.club-selector {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.club-selector__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.club-selector__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.club-selector__value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

/* Updated Switch Button (Outline) */
.club-selector .btn--switch {
    font-size: var(--font-size-xs);
    padding: 6px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    color: var(--color-gray-600);
    background: white;
    transition: all var(--transition-fast);
    margin-left: var(--spacing-4);
}

    .club-selector .btn--switch:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: white;
    }

/* Button Utilities */
.btn--text {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    font-weight: var(--font-weight-medium);
}

    .btn--text:hover {
        text-decoration: underline;
    }

.btn--sm {
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) var(--spacing-3);
}

/* ----------------------------------------
   Registration Wizard
   ---------------------------------------- */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-8);
    position: relative;
}

    .wizard-progress::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--color-gray-200);
        transform: translateY(-50%);
        z-index: 1;
    }

.wizard-step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    position: relative;
    z-index: 2;
    transition: all var(--transition-normal);
}

    .wizard-step-indicator.active {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .wizard-step-indicator.completed {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

.form-step {
    display: none;
}

    .form-step.active {
        display: block;
        animation: fadeIn 0.4s ease-out;
    }

.wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-8);
    gap: var(--spacing-4);
}

/* Logo Upload */
.logo-upload-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.logo-preview {
    width: 100px;
    /* Increased size */
    height: 100px;
    border-radius: var(--radius-lg);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

    .logo-preview:hover,
    .logo-preview.drag-over {
        border-color: var(--color-primary);
        background: var(--color-white);
    }

    .logo-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
        /* Increased padding */
        display: none;
    }

    .logo-preview.has-image {
        border-style: solid;
        border-color: var(--color-gray-200);
        background: white;
    }

        .logo-preview.has-image svg {
            display: none;
        }

        .logo-preview.has-image img {
            display: block;
        }

.logo-preview-placeholder {
    color: var(--color-gray-400);
}

.logo-upload-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

    .logo-upload-info .btn--text {
        padding: 0;
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-sm);
        color: var(--color-primary);
    }

    .logo-upload-info .text-sm {
        font-size: 12px;
        color: var(--color-gray-500);
    }

.logo-upload-input {
    display: none;
}

/* Color Picker input override */
input[type="color"] {
    height: 48px;
    padding: 4px;
    background: white;
    cursor: pointer;
}

/* Select2 Customization */
.select2-container--default .select2-selection--single {
    height: 48px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-white) !important;
    display: flex !important;
    align-items: center !important;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
        color: var(--color-gray-900) !important;
        font-family: var(--font-body) !important;
    }

/* Success Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}

    .modal-overlay.active {
        display: flex;
    }

.modal-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: scaleIn 0.3s ease-out;
}

.modal-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-6);
}

.modal-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-900);
}

.modal-text {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-6);
    line-height: 1.6;
}

.modal-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    text-align: left;
}

.club-link-card {
    display: block;
    padding: var(--spacing-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    text-decoration: none;
}

    .club-link-card:hover {
        border-color: var(--color-primary);
        background: var(--color-white);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

.club-link-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
}

.club-link-url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Mobile Responsive For Auth */
@media (max-width: 768px) {
    .auth-page {
        padding: var(--spacing-4);
        align-items: flex-start;
        padding-top: var(--spacing-12);
    }

    .auth-card {
        padding: var(--spacing-6);
        border-radius: var(--radius-xl);
    }

    /* Registration Wizard */
    .wizard-progress {
        margin-bottom: var(--spacing-6);
    }

    .wizard-actions {
        flex-direction: column-reverse;
        /* Stack buttons, "Back" at bottom */
        gap: var(--spacing-3);
    }

        .wizard-actions .btn {
            width: 100%;
        }

    /* Logo Upload Mobile Layout */
    .logo-upload-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logo-upload-info {
        align-items: center;
    }

    /* Club Selector */
    .club-selector {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: stretch;
        text-align: center;
    }

    .club-selector__info {
        align-items: center;
    }

    .club-selector .btn--switch {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}