/**
 * Style moderne pour le formulaire de réservation WPTotem CPLX Booking
 */

/* Variables de couleurs */
:root {
    --primary-color: #20376C;
    --primary-light: #3C5896;
    --primary-dark: #152244;
    --secondary-color: #f50057;
    --text-light: #ffffff;
    --text-dark: #333333;
    --gray-light: #f5f5f5;
    --gray-medium: #e0e0e0;
    --gray-dark: #9e9e9e;
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --border-radius: 6px;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

/* Conteneur principal du formulaire */
.wptotem-cplx-booking-container {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 15px 15px 30px;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
    /* Empêcher le débordement sur mobile */
    overflow-x: hidden;
    word-wrap: break-word;
}

/* Timeline des étapes */
.booking-timeline {
    display: flex;
    justify-content: space-between;
    margin: 0 0 15px 0;
    position: relative;
    padding: 0;
}

.booking-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--gray-medium);
    z-index: 1;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    text-align: center;
    width: 25%;
}

.timeline-step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--gray-medium);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: var(--transition);
}

.timeline-step-label {
    font-size: 14px;
    color: var(--gray-dark);
    transition: var(--transition);
    max-width: 100px;
    margin: 0 auto;
}

.timeline-step.active .timeline-step-number {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.timeline-step.active .timeline-step-label {
    color: var(--primary-color);
    font-weight: bold;
}

.timeline-step.completed .timeline-step-number {
    background-color: var(--success);
    color: var(--text-light);
}

/* Contenu des étapes */
.booking-step h2 {
    color: var(--primary-color);
    margin: 0 0 10px 0;
    font-size: 1.3em;
    font-weight: 500;
    padding: 0;
}

/* Grille pour afficher les examens sur deux colonnes */
.formations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Style des éléments d'examen */
.formation-item {
    background-color: #ffffff;
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    padding: 10px 15px 0;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}

.formation-item:hover {
    box-shadow: var(--box-shadow);
    border-color: var(--primary-light);
}

.formation-item h3 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.formation-item p.short-desc {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--text-dark);
    font-size: 0.9rem;
}

.formation-select-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 15px;
    margin-bottom: 5px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-weight: 500;
    align-self: stretch;
}

.formation-select-btn:hover {
    background-color: var(--primary-dark);
}

@media (max-width: 600px) {
    .formations-grid {
        grid-template-columns: 1fr;
    }
}

/* Titres */
.wptotem-cplx-booking-container h2 {
    color: var(--primary-dark);
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    font-weight: 500;
}

.wptotem-cplx-booking-container h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}

/* Cartes des formations */
.formation-item {
    background-color: var(--gray-light);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 15px;
    transition: var(--transition);
    border: 1px solid var(--gray-medium);
    cursor: pointer;
}

.formation-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.formation-item h3 {
    margin-top: 0;
    color: var(--primary-dark);
    font-size: 18px;
}

.formation-item p {
    color: var(--text-dark);
    margin-bottom: 15px;
}

/* Styles pour le composant de sélection de créneaux avec calendrier */
.slot-selection-container {
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
}

.slot-selection-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Styles du calendrier */
.calendar-container {
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.1em;
}

.calendar-nav {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.calendar-nav:hover {
    background: var(--primary-dark);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 5px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    font-size: 0.85em;
    padding: 5px;
    margin: 2px;
}

.calendar-day:hover:not(.empty):not(.past) {
    background-color: var(--gray-light);
}

.calendar-day.has-slots {
    font-weight: bold;
    color: var(--text-dark);
}

.calendar-day.selected {
    background-color: var(--primary-color);
    color: white;
}

.calendar-day.today {
    font-weight: bold;
    color: var(--primary-color);
}

.calendar-day.today.selected {
    color: white;
}

.calendar-day.past {
    opacity: 0.5;
    cursor: not-allowed;
}

.calendar-day.empty {
    visibility: hidden;
}

.slot-indicator {
    display: block;
    margin-top: 1px;
    color: var(--primary-color);
    font-size: 0.6em;
    line-height: 1;
    text-align: center;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
}

.calendar-day.selected .slot-indicator {
    color: white;
}

/* Styles de la liste des créneaux */
.slots-wrapper {
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    min-width: 300px; /* Pour garantir une largeur minimale */
}

.selected-date {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-light);
}

.slots-list {
    margin: 0;
    padding: 5px;
    list-style: none;
    align-content: flex-start;
}

/* Styles des listes de dates et créneaux */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slots-list {
    display: list-item;
    flex-direction: column;
    gap: 10px;
}

/* Styles des boutons de date */
.date-select-btn {
    padding: 12px 18px; /* Padding augmenté */
    margin-bottom: 8px; /* Marge augmentée */
    background-color: var(--background-color, #ffffff); /* Utiliser variable si disponible, sinon blanc */
    border: 1px solid var(--gray-light, #ddd);
    border-radius: var(--border-radius, 6px); /* Utiliser variable, sinon 6px */
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
}

.date-select-btn:hover {
    background-color: var(--gray-lighter, #f5f5f5);
    border-color: var(--gray-medium, #ccc);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.date-select-btn.selected {
    background-color: var(--primary-color, #007bff);
    color: var(--button-text-color, white); /* Utiliser variable pour couleur texte bouton */
    border-color: var(--primary-dark, #0056b3); /* Bordure plus foncée pour contraste */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Styles communs pour les items de créneaux */
.slot-item {
    border: 1px solid var(--gray-light, #e0e0e0);
    border-radius: var(--border-radius, 6px); /* Cohérence avec date-select-btn */
    padding: 12px 15px; /* Ajustement padding */
    margin: 0; /* La grille .time-slots-container gère le gap */
    background-color: var(--background-color, #ffffff);
    color: var(--text-color, #333);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 500;
}

/* Retirer .slot-select-btn et .slot-select-btn-alt de cette règle commune pour l'instant,
   car ils pourraient avoir des styles spécifiques ailleurs ou ne plus être utilisés.
   Si besoin, nous pourrons les réintégrer ou leur créer des styles dédiés. */

/* Styles spécifiques pour les boutons de créneaux */
.slot-select-btn {
    background-color: #e9f5ff;
    border-color: #b8daff;
}

.slot-item:hover:not(.unavailable) {
    background-color: var(--primary-light, #e6f0ff); /* Fond clair de la couleur primaire */
    border-color: var(--primary-color, #007bff);
    color: var(--primary-dark, #0056b3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

/* Styles spécifiques pour slot-item */
.slot-item {
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
    cursor: pointer;
}

.slot-item:hover:not(.unavailable) {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(63, 81, 181, 0.15);
}

.slot-item.selected {
    background-color: var(--primary-color, #007bff);
    color: var(--button-text-color, white);
    border: 1px solid var(--primary-dark, #0056b3);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    position: relative;
}

.slot-item.unavailable {
    background-color: var(--gray-lighter, #f8f9fa);
    color: var(--gray-medium, #aaa);
    border-color: var(--gray-light, #ddd);
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
    transform: none;
}

.slot-time {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1.05em;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.slot-meta {
    color: #4a5568;
    font-size: 0.92em;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.slot-select-btn {
    display: none; /* Caché car plus nécessaire */
}

.slot-select-btn:disabled {
    background: var(--gray-medium);
    cursor: not-allowed;
}

.slot-select-btn:not(:disabled):hover {
    background: var(--primary-dark);
}

.no-slots {
    text-align: center;
    color: var(--gray-dark);
    font-style: italic;
    padding: 10px 0 0 0;
    margin: 0;
}

/* Styles responsifs */
@media (min-width: 768px) {
    .slot-selection-wrapper {
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 0;
        gap: 20px;
        width: 100%;
        margin-bottom: 30px;
    }
    
    .calendar-container {
        flex: 0 0 300px;
        margin: 0;
        padding: 15px;
        background-color: #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .slots-wrapper {
        flex: 1;
        margin: 0;
        padding: 15px;
        background-color: #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        min-width: 300px;
        min-height: 0;
    }
}

/* Amélioration de l'accessibilité */
button:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* Animation de chargement */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slot-item {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Désactiver la sélection de texte sur les éléments cliquables */
.calendar-day, .slot-item, .slot-select-btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Correction pour les petits écrans */
@media (max-width: 480px) {
    .slot-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .slot-meta {
        margin-right: 0;
    }
    
    .slot-select-btn {
        width: 100%;
        margin-top: 5px;
    }
}

.formation-select-btn {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.formation-select-btn:hover {
    background-color: var(--primary-dark);
}

/* Boutons de créneaux */
.slot-list {
    /* display: grid; */ /* Supprimé car .slot-list contient maintenant .slot-selection-wrapper */
    /* grid-template-columns: repeat(2, 1fr); */ /* Supprimé */
    /* gap: 8px; */ /* Supprimé */
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.slot-list li {
    display: block;
    margin: 0;
    padding: 0;
}

.slot-item {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.slot-item:hover {
    background-color: #f8f9ff;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(63, 81, 181, 0.1);
}

.slot-item.selected {
    background-color: var(--primary-color, #007bff);
    color: var(--button-text-color, white);
    border: 1px solid var(--primary-dark, #0056b3);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    position: relative;
}

.slot-item.selected::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Formulaire des informations */
#booking-form {
    background-color: #fafafa;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.booking-form-group {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 5px;
    gap: 10px;
}

.booking-form-field {
    flex: 1 0 calc(50% - 20px);
    min-width: 200px;
    margin-bottom: 12px;
    padding: 0;
    box-sizing: border-box;
}

.booking-form-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.booking-form-field label span {
    color: var(--error);
}

.booking-form-field input,
.booking-form-field select,
.booking-form-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: 15px;
    margin-top: 3px;
    max-width: 98%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.booking-form-field input:focus,
.booking-form-field select:focus,
.booking-form-field textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

/* Titres des sections */
#booking-step-4 h3 {
    font-size: 1.2rem;
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-light);
    color: var(--primary-color);
    clear: both;
}

#booking-step-4 h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Boutons de navigation */
.booking-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.booking-btn {
    padding: 12px 20px;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 16px;
}

.btn-back {
    background-color: var(--gray-medium);
    color: var(--text-dark);
}

.btn-back:hover {
    background-color: var(--gray-dark);
    color: var(--text-light);
}

.btn-next {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.btn-next:hover {
    background-color: var(--primary-dark);
}

.booking-submit-btn {
    background-color: var(--success);
    color: var(--text-light);
    padding: 12px 24px;
    border-radius: var(--border-radius);
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.booking-submit-btn:hover {
    background-color: #3d8b40;
}

/* Styles pour le conteneur de sélection des créneaux */
.slot-selection-container {
    width: 100%;
    margin: 20px 0;
}

.slot-selection-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Styles pour le calendrier */
.calendar-container {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.calendar-nav {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-color);
    padding: 0 10px;
    border-radius: 4px;
    transition: var(--transition);
}

.calendar-nav:hover {
    background-color: var(--gray-light);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--gray-dark);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    font-size: 0.9rem;
}

.calendar-day:hover:not(.empty):not(.past) {
    background-color: var(--gray-light);
}

.calendar-day.has-slots {
    font-weight: 500;
}

.calendar-day.selected {
    background-color: var(--primary-color);
    color: white;
}

.calendar-day.past {
    color: var(--gray-medium);
    cursor: not-allowed;
}

.calendar-day.empty {
    visibility: hidden;
}

.slot-indicator {
    position: absolute;
    bottom: 3px;
    font-size: 1.5rem;
    line-height: 0;
    color: var(--primary-color);
}

.calendar-day.selected .slot-indicator {
    color: white;
}

/* Styles pour la liste des créneaux */
.slots-wrapper {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
}

.selected-date {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.slots-list {
    display: grid;
    gap: 10px;
}

.slot-item {
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.slot-item:hover:not(.unavailable) {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slot-item.selected {
    background-color: var(--primary-color, #007bff);
    color: var(--button-text-color, white);
    border: 1px solid var(--primary-dark, #0056b3);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    position: relative;
}

.slot-time {
    font-weight: 500;
    color: var(--text-dark);
}

.slot-meta {
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin: 3px 0 0 0;
}

.slot-select-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

.slot-select-btn:hover:not(:disabled) {
    background-color: var(--primary-dark);
}

.slot-select-btn:disabled {
    background-color: var(--gray-medium);
    cursor: not-allowed;
}

.slot-item.unavailable {
    background-color: var(--gray-lighter, #f8f9fa);
    color: var(--gray-medium, #aaa);
    border-color: var(--gray-light, #ddd);
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
    transform: none;
}

/* Styles responsifs pour le calendrier */
@media (min-width: 768px) {
    .slot-selection-wrapper {
        display: flex; /* S'assurer que display:flex est bien ici aussi */
        flex-direction: row;
        width: 100%; /* S'assurer qu'il prend toute la largeur de .slot-list */
    }
    
    .calendar-wrapper {
        width: 320px;       /* Largeur fixe pour le calendrier, ajustez si besoin */
        flex-grow: 0;       /* Ne pas s'étirer */
        flex-shrink: 0;     /* Ne pas se réduire */
    }
    
    .slots-wrapper {
        flex-grow: 1;       /* S'étirer pour remplir l'espace */
        flex-shrink: 1;     /* Peut se réduire si nécessaire */
        flex-basis: 0;      /* Base de croissance à partir de zéro */
        margin-left: 20px;
    }

    .slots-for-date {
        width: 100%;
        box-sizing: border-box; /* S'assurer que padding et border sont inclus dans la largeur */
    }

    .time-slots-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Crée des colonnes responsives */
        gap: 10px; /* Espacement entre les boutons de créneaux */
        padding-top: 10px; /* Un peu d'espace au-dessus des boutons de créneaux */
    }
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
    .wptotem-cplx-booking-container {
        padding: 20px 15px;
    }
    
    .timeline-step-label {
        font-size: 12px;
    }
    
    .booking-timeline::before {
        top: 12px;
    }
    
    .timeline-step-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .booking-timeline {
        flex-wrap: wrap;
    }
    
    .timeline-step {
        width: 50%;
        margin-bottom: 15px;
    }
    
    .booking-timeline::before {
        display: none;
    }
    
    .booking-nav-buttons {
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .booking-btn {
        width: 100%;
        text-align: center;
    }
}