/* ====================================================================== */
/* ======== RESERVATION ================================================= */
/* ====================================================================== */

 #booking_container {
display:flex;
flex-direction:column;
width:100%;
max-width:1400px;
margin:40px auto 0
}

#booking_progress {
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
width:100%;
background:rgba(255,255,255,0.05);
border:2px solid var(--beige);
border-radius:15px;
margin:0 0 60px;
padding:30px 20px
}

#booking_progress::before {
content:'';
position:absolute;
width:calc(100% - 120px);
height:3px;
background:rgba(201,176,148,0.2);
top:50%;
left:60px;
transform:translateY(-50%);
z-index:1
}

.booking_progress_step {
display:flex;
flex-direction:column;
align-items:center;
position:relative;
gap:10px;
z-index:2
}

.booking_progress_number {
display:flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
background:var(--black);
border:3px solid rgba(201,176,148,0.3);
border-radius:50%;
color:var(--white);
font-size:20px;
font-weight:700;
transition:all 0.3s ease
}

.booking_progress_step.active .booking_progress_number {
background:var(--beige);
border-color:var(--beige);
color:var(--black);
box-shadow:0 0 20px rgba(201,176,148,0.5)
}

.booking_progress_step.completed .booking_progress_number {
background:var(--lightLeather);
border-color:var(--lightLeather);
color:var(--white)
}

.booking_progress_label {
color:var(--white);
font-size:14px;
font-weight:600;
text-align:center;
opacity:0.6;
transition:opacity 0.3s ease
}

.booking_progress_step.active .booking_progress_label {
opacity:1;
color:var(--beige)
}

#booking_steps {
width:100%
}

.booking_step {
display:none;
width:100%;
animation:bookingFadeIn 0.4s ease
}

.booking_step.active {
display:block
}

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

.booking_step_title {
color:var(--beige);
font-size:32px;
font-weight:700;
text-align:center;
margin:0 0 15px
}

.booking_info_text {
color:var(--white);
font-size:16px;
text-align:center;
opacity:0.8;
margin:0 0 40px
}

.booking_services_grid,
.booking_studios_grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:25px;
width:100%;
margin:0 0 40px
}

.booking_service_card,
.booking_studio_card {
display:flex;
flex-direction:column;
background:var(--black);
border:2px solid rgba(201,176,148,0.2);
border-radius:15px;
overflow:hidden;
cursor:pointer;
transition:all 0.3s ease
}

.booking_service_card:hover,
.booking_studio_card:hover {
border-color:var(--beige);
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.3)
}

.booking_service_card.selected,
.booking_studio_card.selected {
border-color:var(--lightLeather);
box-shadow:0 0 25px rgba(201,176,148,0.4)
}

.booking_service_photo,
.booking_studio_photo {
width:100%;
height:220px;
overflow:hidden
}

.booking_service_photo img,
.booking_studio_photo img {
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.4s ease
}

.booking_service_card:hover .booking_service_photo img,
.booking_studio_card:hover .booking_studio_photo img {
transform:scale(1.08)
}

.booking_service_content,
.booking_studio_content {
display:flex;
flex-direction:column;
flex:1;
gap:12px;
padding:25px 25px 20px
}

.booking_service_card footer,
.booking_studio_card footer {
text-align:center;
margin-top:auto;
padding:0 25px 25px
}

.booking_select_btn {
background-color:var(--lightLeather);
border:solid 2px var(--lightLeather);
color:var(--white);
margin:20px 25px 25px;
padding:15px
}

.booking_service_content h3,
.booking_studio_content h3 {
color:var(--beige);
font-size:22px;
font-weight:700;
margin:0
}

.booking_service_content p,
.booking_studio_content p {
color:var(--white);
font-size:15px;
line-height:1.6;
opacity:0.85;
margin:0
}

.booking_service_price {
display:flex;
align-items:baseline;
gap:8px;
margin:15px 0 0
}

.booking_price_amount {
color:var(--white);
font-size:28px;
font-weight:700
}

.booking_price_label {
color:var(--white);
font-size:14px;
opacity:0.7
}

.booking_select_btn:hover {
background-color:var(--black);
border:solid 2px var(--white);
color:var(--white)
}

.booking_calendar_container {
width:100%;
max-width:900px;
background:rgba(255,255,255,0.03);
border:2px solid rgba(201,176,148,0.2);
border-radius:15px;
margin:0 auto 40px;
padding:30px
}

.booking_calendar_header {
display:flex;
justify-content:space-between;
align-items:center;
margin:0 0 25px
}

.booking_calendar_header h3 {
color:var(--beige);
font-size:24px;
font-weight:700;
margin:0
}

.calendar_nav_btn {
display:flex;
align-items:center;
justify-content:center;
width:45px;
height:45px;
background:var(--lightLeather);
border:none;
border-radius:50%;
color:var(--white);
font-size:18px;
cursor:pointer;
transition:all 0.3s ease
}

.calendar_nav_btn:hover {
background:var(--beige);
transform:scale(1.1)
}

#booking_calendar_grid {
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:8px
}

.calendar_day_header {
color:var(--beige);
font-size:14px;
font-weight:700;
text-align:center;
padding:10px 0
}

.calendar_day {
display:flex;
align-items:center;
justify-content:center;
position:relative;
aspect-ratio:1;
background:rgba(255,255,255,0.05);
border:2px solid transparent;
border-radius:10px;
color:var(--white);
font-size:16px;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease
}

.calendar_day:hover {
border-color:var(--beige);
background:rgba(201,176,148,0.1)
}

.calendar_day.disabled {
opacity:0.3;
cursor:not-allowed;
pointer-events:none
}

.calendar_day.other_month {
opacity:0.4
}

.calendar_day.selected {
background:var(--lightLeather);
border-color:var(--lightLeather);
color:var(--white)
}

.calendar_day.today {
border-color:var(--beige)
}

#booking_time_selector {
width:100%;
max-width:900px;
margin:0 auto 40px
}

.booking_subsection_title {
color:var(--beige);
font-size:24px;
font-weight:700;
text-align:center;
margin:0 0 25px
}

#booking_time_slots {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
gap:12px
}

.booking_time_slot {
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.05);
border:2px solid rgba(201,176,148,0.2);
border-radius:10px;
color:var(--white);
font-size:16px;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
padding:15px 10px
}

.booking_time_slot:hover {
border-color:var(--beige);
background:rgba(201,176,148,0.1)
}

.booking_options_grid {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:20px;
width:100%;
margin:0 0 40px
}
.booking_option_card {
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
position:relative;
background:var(--black);
border:2px solid rgba(201,176,148,0.2);
border-radius:12px;
transition:all 0.3s ease;
padding:25px 20px
}

.booking_option_card:hover {
border-color:var(--beige);
transform:translateY(-2px)
}

.booking_option_card.selected {
border-color:var(--lightLeather);
background:rgba(201,176,148,0.05)
}

.booking_option_icon {
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:70px;
height:70px;
background:linear-gradient(135deg, var(--lightLeather), var(--beige));
border-radius:12px;
margin:0 0 20px
}

.booking_option_icon i {
color:var(--black);
font-size:32px
}

.booking_option_content {
display:flex;
flex-direction:column;
width:100%;
gap:10px;
margin:0 0 20px
}

.booking_option_content h3 {
color:var(--beige);
font-size:18px;
font-weight:700;
margin:0
}

.booking_option_content p {
color:var(--white);
font-size:14px;
line-height:1.5;
opacity:0.85;
margin:0
}

.booking_option_price {
color:var(--white);
font-size:22px;
font-weight:700;
margin:0 0 20px
}

.booking_option_checkbox {
flex-shrink:0;
position:relative;
display:flex;
cursor:pointer;
margin:0
}

.booking_option_checkbox input {
position:absolute;
opacity:0;
cursor:pointer
}

.booking_checkbox_custom {
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
background:rgba(255,255,255,0.05);
border:2px solid rgba(201,176,148,0.3);
border-radius:6px;
transition:all 0.3s ease
}

.booking_option_checkbox input:checked ~ .booking_checkbox_custom {
background:var(--lightLeather);
border-color:var(--lightLeather)
}

.booking_option_checkbox input:checked ~ .booking_checkbox_custom::after {
content:'';
display:block;
width:14px;
height:14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size:contain;
background-repeat:no-repeat;
background-position:center
}

.booking_auth_container {
width:100%;
max-width:600px;
background:rgba(255,255,255,0.03);
border:2px solid rgba(201,176,148,0.2);
border-radius:15px;
margin:0 auto 40px;
padding:40px
}

.booking_auth_tabs {
display:flex;
gap:10px;
margin:0 0 30px
}

.booking_auth_tab {
flex:1;
background:rgba(255,255,255,0.05);
border:2px solid rgba(201,176,148,0.2);
border-radius:10px;
color:var(--white);
font-size:16px;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
padding:15px
}

.booking_auth_tab:hover {
border-color:var(--beige)
}

.booking_auth_tab.active {
background:var(--lightLeather);
border-color:var(--lightLeather);
color:var(--black)
}

.booking_auth_content {
display:none
}

.booking_auth_content.active {
display:block
}

.booking_form_group {
display:flex;
flex-direction:column;
gap:8px;
margin:0 0 20px
}

.booking_form_group label {
color:var(--beige);
font-size:15px;
font-weight:600
}

.booking_form_group input,
.booking_form_group select {
background:rgba(255,255,255,0.05);
border:2px solid rgba(201,176,148,0.2);
border-radius:8px;
color:var(--white);
font-size:15px;
transition:all 0.3s ease;
padding:12px 15px
}

.booking_form_group input:focus,
.booking_form_group select:focus {
border-color:var(--beige);
outline:none
}

.booking_checkbox_label {
display:flex;
align-items:center;
gap:10px;
color:var(--white);
font-size:15px;
cursor:pointer
}

.booking_form_message {
color:var(--white);
font-size:14px;
text-align:center;
margin:15px 0 0
}

.booking_form_message.error {
color:#ff6b6b
}

.booking_form_message.success {
color:#51cf66
}

.booking_recap_container {
width:100%;
max-width:900px;
margin:0 auto 40px
}

.booking_recap_section {
background:rgba(255,255,255,0.03);
border:2px solid rgba(201,176,148,0.2);
border-radius:12px;
margin:0 0 20px;
padding:25px
}

.booking_recap_section h3 {
color:var(--beige);
font-size:20px;
font-weight:700;
border-bottom:2px solid rgba(201,176,148,0.2);
margin:0 0 15px;
padding:0 0 10px
}

.booking_recap_section p {
color:var(--white);
font-size:16px;
line-height:1.8;
margin:0
}

.booking_recap_total {
background:linear-gradient(135deg, rgba(201,176,148,0.1), rgba(201,176,148,0.05));
border:2px solid var(--beige);
border-radius:12px;
padding:25px
}

.booking_recap_line {
display:flex;
justify-content:space-between;
align-items:center;
color:var(--white);
font-size:18px;
margin:0 0 15px
}

.booking_recap_line:last-child {
margin:0
}

.booking_recap_final {
border-top:2px solid rgba(201,176,148,0.3);
color:var(--beige);
font-size:24px;
font-weight:700;
margin:20px 0 0;
padding:20px 0 0
}

.booking_step_nav {
display:flex;
justify-content:space-between;
gap:20px;
width:100%;
margin:40px 0 0
}

.booking_step_nav button {
flex:1;
max-width:250px
}

.booking_empty_message {
color:var(--white);
font-size:18px;
text-align:center;
opacity:0.6;
margin:40px 0
}

.booking_time_slot.disabled {
opacity:0.3;
cursor:not-allowed;
pointer-events:none;
background:rgba(255,0,0,0.1);
border-color:rgba(255,0,0,0.3)
}

.booking_time_slot.selected {
background:var(--lightLeather);
border-color:var(--lightLeather);
color:var(--white);
font-weight:700
}

.booking_time_slot:not(.disabled):not(.selected):hover {
background:rgba(201,176,148,0.2);
border-color:var(--beige);
transform:scale(1.05)
}

@media(max-width:1024px) {
	.booking_services_grid,
	.booking_studios_grid {
	grid-template-columns:2fr
	}
	
	.booking_options_grid {
	grid-template-columns:1fr
	}
}

@media(max-width:768px) {
	.booking_services_grid,
	.booking_studios_grid {
	grid-template-columns:1fr
	}

	#booking_progress {
	flex-wrap:wrap;
	gap:15px;
	padding:20px 15px
	}
	
	#booking_progress::before {
	display:none
	}
	
	.booking_progress_step {
	flex:1;
	min-width:80px
	}
	
	.booking_progress_number {
	width:40px;
	height:40px;
	font-size:16px
	}
	
	.booking_progress_label {
	font-size:12px
	}
	
	.booking_step_title {
	font-size:26px
	}
	
	.booking_calendar_container {
	padding:20px
	}
	
	#booking_time_slots {
	grid-template-columns:repeat(auto-fill, minmax(100px, 1fr))
	}
	
	.booking_option_card {
	flex-direction:column;
	align-items:flex-start;
	gap:15px
	}
	
	.booking_option_icon {
	margin:0
	}
	
	.booking_option_content {
	margin:0
	}
	
	.booking_option_price {
	margin:0
	}
	
	.booking_auth_container {
	padding:25px
	}
	
	.booking_step_nav {
	flex-direction:column
	}
	
	.booking_step_nav button {
	max-width:100%
	}
}

@media(prefers-reduced-motion:reduce) {
	.booking_step,
	.booking_service_card,
	.booking_studio_card,
	.calendar_nav_btn,
	.booking_time_slot,
	.booking_option_card {
	animation:none;
	transition:none
	}
}

/* ====================================================================== */
/* ======== MES RESERVATIONS ============================================ */
/* ====================================================================== */

#myreservations_upcoming,
#myreservations_past {
width:100%;
margin:0 0 60px
}

.myreservations_section_title {
display:flex;
align-items:center;
gap:15px;
color:var(--beige);
font-size:26px;
font-weight:700;
border-bottom:2px solid var(--beige);
margin:0 0 30px;
padding:0 0 15px
}

.myreservations_section_title i {
color:var(--white);
font-size:28px
}

.myreservations_count {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:35px;
height:35px;
background:var(--lightLeather);
border-radius:50%;
color:var(--white);
font-size:16px;
font-weight:700;
padding:0 10px
}

.myreservations_grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
gap:25px;
width:100%
}

.myreservations_card {
display:flex;
flex-direction:column;
background:rgba(255,255,255,0.03);
border:2px solid var(--beige);
border-radius:16px;
transition:transform 0.3s ease, box-shadow 0.3s ease;
overflow:hidden
}

.myreservations_card:hover {
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.3)
}

.myreservations_upcoming {
border-color:var(--lightLeather)
}

.myreservations_past {
border-color:rgba(201,176,148,0.3);
opacity:0.85
}

.myreservations_card_header {
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
background:rgba(0,0,0,0.3);
border-bottom:1px solid rgba(201,176,148,0.2);
padding:20px
}

.myreservations_date {
display:flex;
align-items:center;
gap:12px
}

.myreservations_date i {
color:var(--white);
font-size:24px;
flex-shrink:0
}

.myreservations_date > div {
display:flex;
flex-direction:column;
gap:4px
}

.myreservations_date strong {
color:var(--beige);
font-size:16px;
font-weight:700
}

.myreservations_date span {
color:var(--white);
font-size:14px;
font-weight:500
}

.myreservations_badge {
display:inline-flex;
align-items:center;
border-radius:20px;
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
white-space:nowrap;
flex-shrink:0;
padding:6px 14px
}

.myreservations_badge_confirme {
background:rgba(76,175,80,0.2);
border:1px solid rgba(76,175,80,0.5);
color:#4caf50
}

.myreservations_badge_attente_paiement {
background:rgba(255,152,0,0.2);
border:1px solid rgba(255,152,0,0.5);
color:#ff9800
}

.myreservations_badge_annule {
background:rgba(244,67,54,0.2);
border:1px solid rgba(244,67,54,0.5);
color:#f44336
}

.myreservations_card_body {
display:flex;
flex-direction:column;
gap:15px;
flex:1;
padding:25px 20px
}

.myreservations_info_row {
display:flex;
align-items:flex-start;
gap:12px
}

.myreservations_info_row i {
color:var(--white);
font-size:18px;
flex-shrink:0;
margin:2px 0 0
}

.myreservations_info_row > div {
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0
}

.myreservations_label {
color:rgba(255,255,255,0.6);
font-size:12px;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.5px
}

.myreservations_info_row strong {
color:var(--white);
font-size:15px;
font-weight:600
}

.myreservations_options {
display:flex;
flex-wrap:wrap;
gap:6px
}

.myreservations_option {
display:inline-block;
background:rgba(207,187,149,0.15);
border:1px solid var(--beige);
border-radius:6px;
color:var(--beige);
font-size:12px;
font-weight:500;
padding:4px 10px
}

.myreservations_card_footer {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
background:rgba(0,0,0,0.2);
border-top:1px solid rgba(201,176,148,0.2);
padding:20px
}

.myreservations_pricing {
display:flex;
flex-direction:column;
gap:8px;
flex:1
}

.myreservations_price_line {
display:flex;
align-items:center;
justify-content:space-between;
gap:15px
}

.myreservations_price_line span {
color:rgba(255,255,255,0.7);
font-size:13px
}

.myreservations_price_line strong {
color:var(--white);
font-size:14px;
font-weight:600
}

.myreservations_total {
border-top:1px solid rgba(201,176,148,0.2);
margin:8px 0 0;
padding:8px 0 0
}

.myreservations_total strong {
color:var(--beige);
font-size:18px;
font-weight:700
}

.myreservations_actions {
display:flex;
flex-direction:column;
gap:10px
}

.myreservations_actions .btnNormal {
min-width:140px;
justify-content:center
}

.btnCancel {
background-color:transparent;
border-color:#f44336;
color:#f44336
}

.btnCancel:hover {
background-color:#f44336;
border-color:#f44336;
color:var(--white)
}

.myreservations_empty {
display:flex;
flex-direction:column;
align-items:center;
gap:25px;
text-align:center;
width:100%;
margin:80px auto;
padding:60px 20px
}

.myreservations_empty i {
color:var(--beige);
font-size:64px;
opacity:0.5
}

.myreservations_empty p {
color:var(--white);
font-size:18px;
line-height:1.6;
max-width:500px;
margin:0
}

@media(max-width:1200px) {
	.myreservations_grid {
	grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
	gap:20px
	}
}

@media(max-width:768px) {
	.myreservations_grid {
	grid-template-columns:1fr;
	gap:20px
	}
	
	.myreservations_card_header {
	flex-direction:column;
	align-items:flex-start;
	padding:15px
	}
	
	.myreservations_date {
	width:100%
	}
	
	.myreservations_card_body {
	padding:20px 15px
	}
	
	.myreservations_card_footer {
	flex-direction:column;
	align-items:stretch;
	padding:15px
	}
	
	.myreservations_actions {
	width:100%
	}
	
	.myreservations_actions .btnNormal {
	width:100%;
	min-width:auto
	}
}

@media(prefers-reduced-motion:reduce) {
	.myreservations_card {
	transition:none
	}
}

#booking_duration_selector {
width:100%;
max-width:900px;
margin:30px auto 40px
}

#booking_duration_options {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
gap:12px
}

.booking_duration_option {
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.05);
border:2px solid rgba(201,176,148,0.2);
border-radius:10px;
color:var(--white);
font-size:18px;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
padding:18px 10px
}

.booking_duration_option:hover {
border-color:var(--beige);
background:rgba(201,176,148,0.1);
transform:scale(1.05)
}

.booking_duration_option.selected {
background:var(--lightLeather);
border-color:var(--lightLeather);
color:var(--white)
}

.booking_duration_option strong {
font-size:20px
}