@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/**
 * Frontend Stylesheet - Doctor Appointment Booking
 * High-specificity styles to override theme CSS conflicts
 */

.dab-booking-wrapper {
	max-width: 720px !important;
	margin: 0 auto 2rem auto !important;
	font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
	color: #1a202c !important;
	box-sizing: border-box !important;
}

.dab-booking-wrapper *, 
.dab-booking-wrapper *::before, 
.dab-booking-wrapper *::after {
	box-sizing: border-box !important;
}

.dab-card {
	background-color: #ffffff !important;
	border: none !important;
	border-radius: 16px !important;
	padding: 3rem 2.5rem !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

.dab-form-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 1.25rem 1.5rem !important;
}

.dab-full-width {
	grid-column: 1 / -1 !important;
}

.dab-form-group {
	display: flex !important;
	flex-direction: column !important;
	margin-bottom: 0 !important;
}

.dab-label {
	display: block !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 0 0.45rem 0 !important;
}

.dab-required {
	color: #ef4444 !important;
	font-weight: 500 !important;
	margin-left: 2px !important;
}

.dab-input,
.dab-select,
.dab-textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.93rem !important;
	font-family: 'Nunito', sans-serif !important;
	color: #2d3748 !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	outline: none !important;
	box-shadow: none !important;
	height: 48px !important;
	line-height: 1.5 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.dab-input::placeholder,
.dab-select::placeholder,
.dab-textarea::placeholder {
	color: #94a3b8 !important;
}

.dab-input:focus,
.dab-select:focus,
.dab-textarea:focus {
	border-color: #94a3b8 !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04) !important;
}

/* Custom dropdown chevron arrow */
.dab-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 1.1em !important;
	padding-right: 2.5rem !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer !important;
}

.dab-textarea {
	height: auto !important;
	min-height: 110px !important;
	resize: vertical !important;
}

/* Checkbox Row Override */
.dab-checkbox-row {
	grid-column: 1 / -1 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	margin-top: 1rem !important;
	margin-bottom: 0.5rem !important;
	width: 100% !important;
}

.dab-checkbox-input {
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	accent-color: #000000 !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
	float: none !important;
	position: static !important;
}

.dab-checkbox-label {
	display: inline-block !important;
	font-family: 'Nunito', sans-serif !important;
	font-size: 0.9rem !important;
	color: #2d3748 !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	vertical-align: middle !important;
}

.dab-disclaimer-note {
	font-family: 'Nunito', sans-serif !important;
	font-size: 0.88rem !important;
	color: #4a5568 !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0 !important;
	line-height: 1.5 !important;
}

.dab-disclaimer-note strong {
	color: #1a202c !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
}

/* Submit Actions */
.dab-form-actions {
	margin-top: 1.75rem !important;
	width: 100% !important;
}

.dab-btn-primary,
.dab-btn-secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 170px !important;
	height: 48px !important;
	padding: 0 2.5rem !important;
	font-family: 'Nunito', sans-serif !important;
	font-size: 0.98rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 50px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.dab-btn-primary:hover,
.dab-btn-secondary:hover,
.dab-btn-primary:focus,
.dab-btn-secondary:focus {
	background-color: #222222 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Alerts */
.dab-alert {
	padding: 0.85rem 1rem !important;
	border-radius: 8px !important;
	font-size: 0.88rem !important;
	margin-bottom: 1.25rem !important;
	line-height: 1.4 !important;
}

.dab-alert-error {
	background-color: #fef2f2 !important;
	color: #991b1b !important;
	border: 1px solid #fca5a5 !important;
	font-weight: 600 !important;
}

/* Confirmation Box */
.dab-confirmation-box {
	text-align: center !important;
	padding: 1rem 0 !important;
}

.dab-success-icon {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	background: #000000 !important;
	color: #ffffff !important;
	font-size: 2rem !important;
	line-height: 64px !important;
	margin: 0 auto 1.25rem auto !important;
	font-weight: 800 !important;
}

.dab-confirmation-title {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	margin: 0 0 0.5rem 0 !important;
}

.dab-confirmation-desc {
	font-size: 0.95rem !important;
	color: #4a5568 !important;
	margin-bottom: 1.5rem !important;
}

.dab-summary-card {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 1.25rem !important;
	margin-bottom: 1.5rem !important;
	text-align: left !important;
}

.dab-summary-row {
	display: flex !important;
	justify-content: space-between !important;
	padding: 0.45rem 0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	font-size: 0.9rem !important;
}

.dab-summary-row:last-child {
	border-bottom: none !important;
}

.dab-whatsapp-hint {
	font-size: 0.88rem !important;
	color: #4a5568 !important;
	margin-bottom: 1.5rem !important;
}

@media (max-width: 640px) {
	.dab-booking-wrapper {
		margin-top: 0 !important;
		padding: 0 1rem !important;
	}
	.dab-card {
		padding: 1.75rem 1.25rem !important;
	}
	.dab-form-grid {
		grid-template-columns: 1fr !important;
	}
}