/* Clean Modern CSS for Rendez-vous Page */
:root {
    --primary: #ff6b81; /* Pink Brand Color */
    --primary-hover: #e84a64;
    --text-dark: #1e1e1e;
    --text-gray: #6b7280;
    --bg-light: #fff5f7; /* Very light pink/cream background */
    --white: #ffffff;
    --border: #e5e7eb;
    --card-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
}

html, body {
    overflow-x: clip;
    max-width: 100%;
}

body {
    background-color: var(--bg-light);
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
}

.page-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* Header/Title Section */
.main-title {
    text-align: center;
    margin-bottom: 40px;
}

.main-title h1 {
    font-size: 36px;
    font-weight: 700;
    color: #4a3b32; /* Brownish dark for "Réservez..." text matching image feel */
    margin-bottom: 8px;
}

.subtitle {
    font-size: 16px;
    color: var(--primary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Booking Card */
.booking-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: 50px;
}

.card-header {
    background-color: var(--primary); /* Pink header */
    color: white;
    padding: 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-header h2 {
    font-size: 28px; /* Slightly larger */
    font-weight: 700;
    margin: 0;
    display: block;
    line-height: 1.2;
}

.card-header p {
    font-size: 15px;
    opacity: 0.95;
    margin: 0;
    display: block;
    font-weight: 400;
}

.booking-form {
    padding: 40px;
}

/* Form Sections */
.form-section {
    margin-bottom: 30px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i {
    color: var(--primary);
    font-size: 18px;
}

/* Grids */
.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Inputs */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 6px;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    background-color: #fff;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box; /* Fix width issues */
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.1);
}

::placeholder {
    color: #9ca3af;
}

/* Service Selection Cards */
.services-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.service-option {
    cursor: pointer;
    position: relative;
    display: block;
}

.service-option input {
    position: absolute;
    opacity: 0;
}

.option-content {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s;
    background: #f9fafb;
}

.service-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-dark);
    display: block;
    margin-bottom: 4px;
}

.service-duration {
    font-size: 12px;
    color: var(--text-gray);
}

.service-option input:checked + .option-content {
    border-color: var(--primary);
    background-color: #fff0f3;
}

/* Wizard Progress Bar */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto 40px auto;
    position: relative;
    padding: 0 40px;
}
.wizard-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: #e11d48; /* Solid red line connecting everything as per mockup */
    z-index: 1;
}
.wizard-progress-bar {
    display: none; /* Hide dynamic bar, keep solid background line if mockup demands it, or show it for strictly past steps. But mockup shows solid red line holding everything. Let's make the background light pink and the active bar dark pink. */
}
.step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 80px;
}
.step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ff748b; /* Light pink by default or completed */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.4s ease;
}
.step-label {
    font-size: 13px;
    color: #ff748b; /* Light pink label for completed */
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.4s ease;
}
.step.active .step-circle {
    background-color: #e11d48; /* Dark pink for ACTIVE */
    transform: scale(1.1);
}
.step.active .step-label {
    color: #0f172a; /* Black label for ACTIVE */
    font-weight: 700;
}
.step.completed .step-circle {
    background-color: #ff748b; /* Light pink for COMPLETED */
}
.step.completed .step-label {
    color: #ff748b;
}

/* Wizard Steps Display */
.wizard-step {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}
.wizard-step.active-step {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom File Upload Styling */
.modern-file-upload {
    position: relative;
    width: 100%;
    margin-top: 5px;
}
.file-input-hidden {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}
.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
.file-upload-label:hover {
    border-color: #e11d48;
    background-color: #fff1f2;
}
.upload-icon {
    font-size: 36px;
    color: #94a3b8;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}
.file-upload-label:hover .upload-icon {
    color: #e11d48;
}
.upload-text {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
    margin-bottom: 4px;
}
.upload-hint {
    font-size: 12px;
    color: #94a3b8;
}
.file-upload-label.has-file {
    border: 2px solid #10b981;
    background-color: #ecfdf5;
}
.file-upload-label.has-file .upload-icon {
    color: #10b981;
}
.file-upload-label.has-file .upload-text {
    color: #065f46;
    font-weight: 600;
}

/* Wizard Navigation Actions */
.wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.btn-prev {
    padding: 12px 24px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.btn-prev:hover {
    background: #e2e8f0;
}
.btn-next {
    padding: 12px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    margin-left: auto;
}
.btn-next:hover {
    background: var(--primary-hover);
}
.btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #cbd5e1;
}

/* Summary Box */
.summary-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}
.summary-row:last-child {
    border-bottom: none;
}
.summary-label {
    color: #64748b;
    font-weight: 500;
}
.summary-value {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

/* Submit Button Override */
.submit-btn {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
    padding: 16px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}
.submit-btn:hover {
    background-color: var(--primary-hover);
}

/* Footer Stats */
.stats-footer {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
}

.stat-item {
    text-align: center;
}

.stat-val {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #d97706; /* Golden/Orange tone for stats */
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-desc {
    font-size: 13px;
    color: var(--text-gray);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .page-wrapper {
        padding: 30px 15px 60px;
    }
    
    .main-title h1 {
        font-size: 30px;
    }
    
    .booking-form {
        padding: 30px;
    }
    
    .row-2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .wizard-progress {
        padding: 0 15px;
    }
    
    .wizard-progress::before {
        left: 20px;
        right: 20px;
    }
    
    .step {
        width: 70px;
    }
    
    .step-label {
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .card-header {
        padding: 20px;
        gap: 6px;
    }
    
    .card-header h2 {
        font-size: 22px;
    }
    
    .card-header p {
        font-size: 13px;
    }
    
    .booking-form {
        padding: 20px;
    }
    
    .services-selection {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .option-content {
        padding: 12px 16px;
    }
    
    .modern-file-upload .file-upload-label {
        padding: 16px 12px;
    }
    
    .modern-file-upload .upload-icon {
        font-size: 28px;
    }
    
    .stats-footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        text-align: center;
        margin-top: 30px;
    }
    
    .stat-val {
        font-size: 18px;
    }
    
    .stat-desc {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .page-wrapper {
        padding: 20px 8px 40px;
    }

    .booking-form {
        padding: 15px;
    }
    
    .wizard-progress {
        padding: 0 10px;
        margin-bottom: 30px;
    }
    
    .wizard-progress::before {
        top: 18px;
        left: 15px;
        right: 15px;
        height: 3px;
    }
    
    .step {
        width: 40px;
        gap: 0;
    }
    
    .step-circle {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    
    .step-label {
        display: none; /* Hide labels on mobile to avoid overlapping */
    }
    
    .wizard-actions {
        flex-direction: column-reverse;
        gap: 12px;
        padding-top: 15px;
        margin-top: 25px;
    }
    
    .wizard-actions .btn-prev,
    .wizard-actions .btn-next,
    .wizard-actions .submit-btn {
        width: 100% !important;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        padding: 12px;
        font-size: 15px;
    }
    
    .summary-box {
        padding: 16px;
    }
    
    .summary-row {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        padding: 10px 0;
    }
    
    .summary-value {
        text-align: left;
        font-size: 14px;
    }
}