/**
 * Registration Page Styles
 * =========================================
 * Minimal CSS - most styling via Bootstrap 5
 * Uses CSS variables from defaults.css
 */

/* Background Gradient */
.registration-wrapper {
    background: linear-gradient(135deg, 
        var(--ion-color-brand, #56035F) 0%, 
        #7a1a7e 50%, 
        var(--ion-color-brand, #56035F) 100%);
    font-family: var(--ion-font-family-base, 'Quicksand', sans-serif);
}

/* Brand Color Helper Classes */
.text-brand {
    color: var(--ion-color-brand, #56035F) !important;
}

.bg-gradient-brand {
    background: linear-gradient(135deg, var(--ion-color-brand, #56035F), #7a1a7e) !important;
}

.btn-brand {
    background: linear-gradient(135deg, var(--ion-color-brand, #56035F), #7a1a7e);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(86, 3, 95, 0.3);
}

.btn-brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(86, 3, 95, 0.4);
    color: #fff;
}

.btn-brand:active {
    transform: translateY(0);
}

/* Benefit Icon Sizing */
.benefit-icon {
    width: 48px;
    height: 48px;
}

/* Fade-in Animation */
.animate-fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* YForm Overrides - Focus States */
.registration-form .form-control:focus {
    border-color: var(--ion-color-brand, #56035F);
    box-shadow: 0 0 0 0.25rem rgba(86, 3, 95, 0.15);
}

.registration-form .form-check-input:checked {
    background-color: var(--ion-color-brand, #56035F);
    border-color: var(--ion-color-brand, #56035F);
}

.registration-form .form-check-label a {
    color: var(--ion-color-brand, #56035F);
}

/* Backdrop Blur Effect for Benefits Card */
.registration-benefits {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Shadow Utilities */
.shadow-xl {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}