/* Custom styles for registration process */

/* Mobile Responsive Fixes */
@media (max-width: 1199.98px) {
    /* Hide right sidebar on screens smaller than 1200px */
    .qr-panel-animated {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Optimize for 1024x600 screens */
    .w-lg-650px {
        max-width: 600px !important;
    }
    
    /* Reduce margins on medium screens */
    .mx-lg-10 {
        margin-left: 2rem !important;
        margin-right: 2rem !important;
    }
    
    .p-lg-15 {
        padding: 2rem !important;
    }
}

@media (max-width: 991.98px) {
    /* Reduce sidebar height on mobile */
    .stepper-nav {
        display: none !important;
    }
    
    /* Make sidebar more compact on mobile */
    #kt_create_account_stepper {
        min-height: auto !important;
    }
    
    /* Remove fixed positioning on mobile */
    .position-lg-fixed {
        position: relative !important;
    }
    
    /* Ensure form takes full width */
    .w-lg-650px, .w-xl-750px {
        max-width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /* Further reduce padding on small mobile */
    .p-5 {
        padding: 1rem !important;
    }
    
    /* Smaller buttons on mobile */
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* Reduce form control size on mobile */
    .form-control-lg, .form-select-lg {
        min-height: 2.5rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* QR Panel Animation */
.qr-panel-animated {
    animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Payment method cards hover effect */
.payment-method-card {
    transition: all 0.3s ease;
}

.payment-method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
}

.hover-elevate-up:hover {
    transform: translateY(-5px);
}

/* Charte signin (primary + accent) — variables injectées via partials/brand/_theme_head.html.twig */
body.brand-theme-configured {
    --theme-primary: var(--bs-primary);
    --theme-secondary: var(--bs-secondary);
}

body.brand-theme-configured .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

body.brand-theme-configured .btn-primary:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

body.brand-theme-configured .text-primary,
body.brand-theme-configured .link-primary {
    color: var(--bs-primary) !important;
}

body.brand-theme-configured .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Stepper customization */
.stepper.stepper-pills .stepper-nav .stepper-item.current .stepper-icon {
    background-color: var(--bs-primary);
    color: #ffffff;
}

.stepper.stepper-pills .stepper-nav .stepper-item.completed .stepper-icon {
    background-color: #50cd89;
    color: #ffffff;
}

.stepper.stepper-pills .stepper-nav .stepper-item .stepper-icon {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.stepper.stepper-pills .stepper-nav .stepper-item .stepper-number {
    color: #ffffff;
}

.stepper.stepper-pills .stepper-nav .stepper-item.current .stepper-number {
    color: #ffffff;
}

/* Password strength meter */
[data-kt-password-meter-control="highlight"] > div {
    transition: background-color 0.3s ease;
}

/* Form validation */
.fv-plugins-message-container {
    margin-top: 0.5rem;
}

/* Progress bar animation */
.progress-bar {
    transition: width 0.3s ease;
}

/* Custom field styling */
.separator-content {
    display: flex;
    align-items: center;
    text-align: center;
}

.separator-content::before,
.separator-content::after {
    content: '';
    flex: 1;
    border-bottom: 1px dashed #e4e6ef;
}

.separator-content span {
    padding: 0 1rem;
}