/**
 * DynamicAppointments & DynamicEngine Visual Bridge for Dynamic Booking Pro Theme.
 *
 * Aligns the native booking widget, interactive calendar, time slots,
 * checkout summary and user appointment portal with the theme design system.
 */

:root {
	--da-primary: var(--db-primary, #4f46e5);
	--da-primary-hover: var(--db-primary-hover, #4338ca);
	--da-primary-light: var(--db-primary-light, #eef2ff);
	--da-success: #10b981;
	--da-danger: #ef4444;
	--da-border: #e2e8f0;
	--da-bg-soft: #f8fafc;
	--da-text: #0f172a;
	--da-text-muted: #64748b;
}

/* Base Widget Elevation */
.da-booking-widget {
	--da-primary: var(--db-primary, #4f46e5);
	--da-primary-hover: var(--db-primary-hover, #4338ca);
	--da-primary-light: var(--db-primary-light, #eef2ff);
	font-family: var(--db-font-sans, inherit);
	border: 1px solid var(--db-slate-200);
	border-radius: var(--db-radius-xl, 20px);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
	background: #ffffff;
	padding: 32px;
	margin: 0 auto;
	max-width: 100%;
}

/* Compact Widget in Sidebars */
.db-booking-compact .da-booking-widget {
	padding: 16px;
	box-shadow: none;
	border: none;
}

.db-booking-compact .da-calendar-slots-layout {
	grid-template-columns: 1fr;
	padding: 12px;
	gap: 16px;
}

/* Form Fields & Labels */
.da-form-field label {
	color: var(--db-slate-700);
	font-weight: 600;
	font-size: 0.88rem;
}

.da-form-field input,
.da-form-field select,
.da-form-field textarea {
	border-color: var(--db-slate-300);
	border-radius: var(--db-radius-md, 10px);
	padding: 12px 14px;
	font-size: 0.95rem;
	transition: var(--db-transition);
}

.da-form-field input:focus,
.da-form-field select:focus {
	border-color: var(--db-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Selected Service/Provider Badge in Booking Widget */
.da-selected-badge {
	background: var(--db-primary-light);
	border: 1px solid rgba(79, 70, 229, 0.2);
	border-radius: var(--db-radius-md);
	padding: 14px 18px;
}

.da-selected-badge .dashicons {
	color: var(--db-primary);
}

.da-selected-badge strong {
	color: var(--db-slate-900);
	font-weight: 700;
}

/* Calendar Month & Weekdays Header */
.da-cal-month-label {
	font-weight: 700;
	color: var(--db-slate-900);
	font-size: 1.05rem;
}

.da-cal-weekday {
	font-weight: 600;
	color: var(--db-slate-500);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Day Tiles in Calendar */
.da-cal-day {
	border-radius: 8px;
	font-weight: 600;
	transition: var(--db-transition);
}

.da-cal-day.is-available:hover {
	background: var(--db-primary-light);
	color: var(--db-primary);
	transform: scale(1.05);
}

.da-cal-day.is-selected {
	background: var(--db-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

/* Time Slots Buttons */
.da-slot-btn {
	border-radius: 8px;
	font-weight: 600;
	border: 1px solid var(--db-slate-200);
	background: #ffffff;
	color: var(--db-slate-800);
	transition: var(--db-transition);
	padding: 8px 12px;
}

.da-slot-btn:hover {
	border-color: var(--db-primary);
	color: var(--db-primary);
	background: var(--db-primary-light);
}

.da-slot-btn.is-active,
.da-slot-btn.is-selected {
	background: var(--db-primary) !important;
	border-color: var(--db-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

/* Booking Summary Card */
.da-summary-card {
	background: var(--db-slate-50);
	border: 1px solid var(--db-slate-200);
	border-radius: var(--db-radius-lg);
	padding: 20px;
}

.da-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px dashed var(--db-slate-200);
}

.da-summary-row:last-child {
	border-bottom: none;
	padding-top: 14px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--db-slate-900);
}

/* Submit Action Button */
.da-booking-submit,
.da-btn-submit {
	background-color: var(--db-primary) !important;
	border: none !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	padding: 14px 28px !important;
	border-radius: var(--db-radius-md) !important;
	cursor: pointer !important;
	transition: var(--db-transition) !important;
	box-shadow: 0 6px 18px rgba(79, 70, 229, 0.3) !important;
	width: 100%;
}

.da-booking-submit:hover,
.da-btn-submit:hover {
	background-color: var(--db-primary-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(79, 70, 229, 0.4) !important;
}

/* ==========================================================================
   Customer Portal [da_user_appointments] Overrides
   ========================================================================== */
.da-portal-wrapper,
.da-user-appointments-wrapper {
	font-family: var(--db-font-sans, inherit);
}

.da-portal-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--db-slate-200);
	border-radius: var(--db-radius-lg);
	overflow: hidden;
}

.da-portal-table th {
	background: var(--db-slate-50);
	color: var(--db-slate-700);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 18px;
	border-bottom: 1px solid var(--db-slate-200);
	text-align: left;
}

.da-portal-table td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--db-slate-100);
	color: var(--db-slate-700);
	font-size: 0.95rem;
	vertical-align: middle;
}

.da-portal-table tr:last-child td {
	border-bottom: none;
}

.da-portal-table tr:hover td {
	background: var(--db-slate-50);
}

/* Action Links in Portal */
.da-gcal-link,
.da-meet-link,
.da-zoom-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 5px 10px;
	border-radius: var(--db-radius-sm);
	background: var(--db-slate-100);
	color: var(--db-slate-700);
	text-decoration: none;
	transition: var(--db-transition);
}

.da-gcal-link:hover {
	background: #dbeafe;
	color: #1d4ed8;
}

.da-meet-link:hover {
	background: #dcfce7;
	color: #15803d;
}

.da-zoom-link:hover {
	background: #e0e7ff;
	color: #4338ca;
}

.da-btn-cancel-appt {
	color: #dc2626 !important;
	background: #fee2e2 !important;
	font-size: 0.8rem !important;
	padding: 4px 10px !important;
	border-radius: var(--db-radius-sm) !important;
	border: 1px solid #fca5a5 !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

.da-btn-cancel-appt:hover {
	background: #fecaca !important;
}