/* Dar Bouazza Booking - Public */
.dbs-booking-app {
	max-width: 900px;
	margin: 0 auto;
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 30px rgba(0,0,0,0.1);
	overflow: hidden;
}

.dbs-booking-header {
	background: linear-gradient(135deg, #0066B3, #004A82);
	color: #fff;
	padding: 30px;
	text-align: center;
}
.dbs-booking-intro {
	margin: 0 0 18px;
	opacity: 0.9;
	font-size: 14px;
}
.dbs-panel-hint {
	margin: 0 0 18px;
	color: #666;
	font-size: 14px;
}
.dbs-date-picker label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 13px;
}
.dbs-time-label {
	font-weight: 600;
	font-size: 13px;
	margin: 20px 0 10px;
}
.dbs-summary-note {
	background: #FFF8F0;
	border-left: 3px solid #F7941D;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 14px;
	border-radius: 0 8px 8px 0;
}

.dbs-booking-steps {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.dbs-step {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: 0.6;
	transition: opacity 0.3s;
}
.dbs-step.active, .dbs-step.done { opacity: 1; }
.dbs-step span {
	width: 28px; height: 28px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
}
.dbs-step.active span { background: #F7941D; }
.dbs-step.done span { background: #00A651; }

.dbs-booking-body { padding: 30px; min-height: 350px; }
.dbs-panel { display: none; }
.dbs-panel.active { display: block; animation: dbsFadeIn 0.3s ease; }
.dbs-panel h3 { margin: 0 0 20px; color: #1A1A2E; font-size: 20px; }

@keyframes dbsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Activity cards */
.dbs-activities-select {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 15px;
}
.dbs-activity-card {
	border: 2px solid #E0E0E0;
	border-radius: 10px;
	padding: 25px 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
}
.dbs-activity-card:hover { border-color: #0066B3; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,102,179,0.15); }
.dbs-activity-card.selected { border-color: #F7941D; background: #FFF8F0; }
.dbs-activity-card .dbs-act-icon {
	width: 50px; height: 50px;
	border-radius: 50%;
	margin: 0 auto 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px; color: #fff;
}
.dbs-activity-card h4 { margin: 0 0 5px; font-size: 16px; }
.dbs-activity-card .dbs-act-price { color: #0066B3; font-weight: 700; font-size: 18px; }
.dbs-activity-card .dbs-act-dur { font-size: 12px; color: #999; }

/* Session types */
.dbs-session-types { display: flex; gap: 12px; flex-wrap: wrap; }
.dbs-type-btn {
	padding: 15px 25px;
	border: 2px solid #E0E0E0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s;
}
.dbs-type-btn:hover { border-color: #0066B3; }
.dbs-type-btn.selected { border-color: #F7941D; background: #FFF8F0; color: #F7941D; }

/* Date & slots */
.dbs-date-picker { margin-bottom: 20px; }
.dbs-date-picker input {
	padding: 12px 16px;
	border: 2px solid #E0E0E0;
	border-radius: 8px;
	font-size: 16px;
	font-family: inherit;
}
.dbs-slots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.dbs-slot-btn {
	padding: 12px;
	border: 2px solid #E0E0E0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	transition: all 0.3s;
}
.dbs-slot-btn:hover:not(:disabled) { border-color: #0066B3; }
.dbs-slot-btn.selected { border-color: #F7941D; background: #FFF8F0; }
.dbs-slot-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dbs-slot-time { font-weight: 700; font-size: 16px; display: block; }
.dbs-slot-info { font-size: 11px; color: #999; }

/* Form */
.dbs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.dbs-form-group { margin-bottom: 15px; }
.dbs-form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; color: #333; }
.dbs-form-group input, .dbs-form-group textarea, .dbs-form-group select {
	width: 100%; padding: 10px 14px;
	border: 2px solid #E0E0E0; border-radius: 8px;
	font-family: inherit; font-size: 14px;
	box-sizing: border-box;
}
.dbs-form-group input:focus, .dbs-form-group textarea:focus { outline: none; border-color: #F7941D; }
.dbs-voucher-input { display: flex; gap: 8px; }
.dbs-voucher-input input { flex: 1; }
#dbs-voucher-result { margin-top: 8px; font-size: 13px; }
#dbs-voucher-result.valid { color: #00A651; }
.dbs-pay { border: 1px solid #e6ebf1; border-radius: 10px; padding: 12px 14px; margin: 0; }
.dbs-pay legend { font-weight: 700; padding: 0 4px; }
.dbs-pay label { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-weight: 600; }
.dbs-pay small { font-weight: 400; color: #777; }
.dbs-pay-note { margin: 8px 0 0; font-size: 13px; color: #666; }

/* Summary */
.dbs-summary {
	background: #F5F7FA;
	border-radius: 10px;
	padding: 25px;
}
.dbs-summary-row {
	display: flex; justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #E0E0E0;
}
.dbs-summary-row:last-child { border: none; font-weight: 700; font-size: 18px; color: #0066B3; }

.dbs-success {
	text-align: center;
	padding: 40px;
}
.dbs-success-icon {
	width: 80px; height: 80px;
	background: #00A651;
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 40px;
	margin: 0 auto 20px;
}

/* Footer buttons */
.dbs-booking-footer {
	display: flex;
	justify-content: space-between;
	padding: 20px 30px;
	border-top: 1px solid #E0E0E0;
	background: #FAFAFA;
}
.dbs-btn {
	padding: 12px 30px;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s;
}
.dbs-btn-primary { background: #F7941D; color: #fff; }
.dbs-btn-primary:hover { background: #E07D0A; }
.dbs-btn-outline { background: transparent; border: 2px solid #0066B3; color: #0066B3; }
.dbs-btn-outline:hover { background: #0066B3; color: #fff; }
.dbs-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.dbs-loading { text-align: center; padding: 40px; color: #999; }
.dbs-empty { text-align: center; padding: 30px; color: #999; }

@media (max-width: 600px) {
	.dbs-form-row { grid-template-columns: 1fr; }
	.dbs-booking-steps .dbs-step span + * { display: none; }
	.dbs-booking-header { padding: 20px 14px; }
	.dbs-booking-body { padding: 18px 14px; min-height: 0; }
	.dbs-booking-footer {
		flex-direction: column;
		gap: 10px;
		padding: 14px;
	}
	.dbs-booking-footer .dbs-btn { width: 100%; }
	.dbs-form-group input,
	.dbs-form-group textarea,
	.dbs-form-group select,
	.dbs-date-picker input { font-size: 16px; }
}