/* Styles pour le formulaire d'adhésion multipage */

:root {
    --kam-primary: #3b507b;
    --kam-primary-hover: #2a3c5f;
    --kam-secondary: #8dc63f;
    --kam-secondary-hover: #7ab239;
    --kam-text-dark: #1a2b56;
    --kam-text-light: #f7f9fc;
    --kam-bg-light: #eafbe1;
    --kam-bg-grey: #ffffff;
}

/* Typography & Layout */
.kam-adhesion-wrapper {
    background-color: var(--kam-bg-grey);
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

[v-cloak] {
    position: relative;
}
[v-cloak]::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffffee;
    z-index: 9999;
}

.kam-adhesion-header {
    background-color: var(--kam-bg-light);
    overflow: hidden;
}

.kam-form-title {
    color: #2b3d1b;
    letter-spacing: -1px;
}

.kam-form-subtitle {
    color: #4b6b27;
    max-width: 600px;
    font-size: 1.1rem;
}

.kam-adhesion-wave {
    opacity: 0.8;
}
.kam-wave-1 {
    top: -100px;
    right: -150px;
    width: 600px;
    height: 600px;
}
.kam-wave-2 {
    bottom: -150px;
    right: 100px;
    width: 450px;
    height: 450px;
}

#kam_phone_prefix_select + .select2-container {
    max-width: 110px;
}

/* Progress Bar */
.kam-adhesion-progress {
    background-color: var(--kam-primary);
}

.kam-adhesion-progress .step-item {
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 40px; 
    height: 40px;
    margin-right: 15px; 
    transition: all 0.3s ease;
}

.step-item.active .step-circle {
    background-color: var(--kam-secondary);
    color: var(--kam-text-dark);
    box-shadow: 0 0 0 4px rgba(139, 195, 74, 0.3);
}

.step-item.active .step-text {
    color: var(--kam-secondary);
}

.step-item:not(.active) .step-circle {
    background-color: rgba(255,255,255,0.2);
    color: white;
}

.step-item:not(.active) .step-text {
    color: rgba(255,255,255,0.7);
    font-weight: normal !important;
}

.step-divider {
    width: 50px; 
    height: 2px; 
    background-color: rgba(255,255,255,0.2); 
    margin: 0 20px;
}

/* Form Styles */
.kam-input-label {
    color: var(--kam-primary);
}

#kam-adhesion-form input.form-control:focus {
    border-color: var(--kam-secondary) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.25);
}

#kam-adhesion-form .form-select:focus {
    border-color: var(--kam-secondary) !important;
    box-shadow: 0 0 0 0.25rem rgba(139, 195, 74, 0.25);
}

.kam-phone-group input:focus {
    border-color: var(--kam-secondary) !important;
    box-shadow: none; /* Focus shadow handled by the group or avoided to not double */
}

/* Buttons */
.kam-btn-primary {
    background-color: var(--kam-primary) !important;
    border-color: var(--kam-primary) !important;
    color: white !important;
    transition: all 0.3s ease;
}
.kam-btn-primary:hover {
    background-color: var(--kam-primary-hover) !important;
    border-color: var(--kam-primary-hover) !important;
    transform: translateY(-2px);
}

.kam-btn-success {
    background-color: var(--kam-secondary) !important;
    border-color: var(--kam-secondary) !important;
    color: var(--kam-text-dark) !important;
    transition: all 0.3s ease;
}
.kam-btn-success:hover {
    background-color: var(--kam-secondary-hover) !important;
    border-color: var(--kam-secondary-hover) !important;
    transform: translateY(-2px);
}

/* Upload Area */
.upload-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area .kam-upload-icon {
    color: var(--kam-primary);
    transition: all 0.3s ease;
}

.upload-area:hover,
.upload-area.dragover {
    background-color: #f1f8e9 !important; 
    border-color: var(--kam-secondary) !important;
}

.upload-area:hover .kam-upload-icon {
    color: var(--kam-secondary);
    transform: scale(1.1);
}

.kam-file-input {
    cursor: pointer;
}

/* Recap */
.kam-recap-title {
    color: var(--kam-text-dark);
}

/* Validation */
.is-invalid {
    border-color: #dc3545 !important;
}
.invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}
.is-invalid ~ .invalid-feedback {
    display: block;
}

/* File Previews */
.img-thumbnail {
    border: 2px solid var(--kam-bg-light);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.img-thumbnail:hover {
    transform: scale(1.05);
}

#photo-preview-container, #file-preview-container,
#recap-photo-preview, #recap-file-preview {
    animation: fadeIn 0.4s ease-out;
}

/* Success Screen */
#kam-adhesion-success {
    animation: fadeIn 0.8s ease-out;
}

.kam-success-icon-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kam-success-circle {
    position: absolute;
    border-radius: 50%;
    background-color: var(--kam-secondary);
}

.circle-1 {
    width: 200px;
    height: 200px;
    opacity: 0.1;
}

.circle-2 {
    width: 140px;
    height: 140px;
    opacity: 0.2;
}

.circle-3 {
    width: 80px;
    height: 80px;
    opacity: 1;
    box-shadow: 0 4px 15px rgba(141, 198, 63, 0.4);
}

.kam-success-checkmark {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 5;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #fff;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #fff;
    stroke-width: 5;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

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