/* DKS Booking Widget
   Retheme by overriding these custom properties in your child theme or
   Elementor's Custom CSS panel — nothing below needs to change.

   Every rule is scoped under .dks-booking-widget (not just bare class
   names) so it reliably beats the host theme's global styles instead of
   losing the cascade to them. */

.dks-booking-widget {
	--dks-primary: #a97c50;      /* accent / buttons */
	--dks-primary-dark: #8a6440;
	--dks-bg: #fffaf5;
	--dks-card-bg: #ffffff;
	--dks-border: #e8ddd0;
	--dks-text: #3a332c;
	--dks-muted: #8a7f70;
	--dks-success-bg: #eef6ee;
	--dks-success-text: #2e5c33;
	--dks-error-bg: #fbeceb;
	--dks-error-text: #a13a34;
	--dks-radius: 10px;
	--dks-font: inherit;

	max-width: 720px;
	margin: 0 auto;
	background: var(--dks-bg);
	border: 1px solid var(--dks-border);
	border-radius: var(--dks-radius);
	padding: 28px;
	font-family: var(--dks-font);
	color: var(--dks-text) !important;
	box-sizing: border-box;
	/* Forces native browser controls (date picker icon/text, checkboxes)
	   to render in light mode regardless of any dark-mode CSS the host
	   theme applies globally — this is what was making the date field
	   look empty. */
	color-scheme: light;
}
.dks-booking-widget * { box-sizing: border-box; }

.dks-booking-widget .dks-progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 28px;
	flex-wrap: wrap;
	gap: 8px;
}
.dks-booking-widget .dks-progress-step {
	font-size: 13px;
	color: var(--dks-muted) !important;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	flex: 1 1 auto;
	text-align: center;
}
.dks-booking-widget .dks-progress-step.active {
	color: var(--dks-primary-dark) !important;
	border-bottom-color: var(--dks-primary);
	font-weight: 600;
}

.dks-booking-widget .dks-heading,
.dks-booking-widget h1.dks-heading,
.dks-booking-widget h2.dks-heading,
.dks-booking-widget h3.dks-heading {
	font-size: 20px;
	margin: 0 0 16px;
	color: var(--dks-text) !important;
	font-family: var(--dks-font);
	line-height: 1.3;
}

.dks-booking-widget .dks-category-grid,
.dks-booking-widget .dks-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.dks-booking-widget .dks-option-card {
	background: var(--dks-card-bg) !important;
	border: 1px solid var(--dks-border);
	border-radius: var(--dks-radius);
	padding: 16px;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
	color: var(--dks-text) !important;
}
.dks-booking-widget .dks-option-card:hover,
.dks-booking-widget .dks-option-card:focus {
	border-color: var(--dks-primary);
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.dks-booking-widget .dks-option-card .dks-option-title { font-weight: 600; margin-bottom: 4px; color: var(--dks-text) !important; }
.dks-booking-widget .dks-option-card .dks-option-meta { font-size: 13px; color: var(--dks-muted) !important; }

.dks-booking-widget .dks-slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin: 16px 0;
}
.dks-booking-widget .dks-slot-btn {
	background: var(--dks-card-bg) !important;
	border: 1px solid var(--dks-border);
	border-radius: 6px;
	padding: 10px 6px;
	cursor: pointer;
	font-size: 14px;
	color: var(--dks-text) !important;
}
.dks-booking-widget .dks-slot-btn:hover { border-color: var(--dks-primary); }
.dks-booking-widget .dks-slot-btn.selected {
	background: var(--dks-primary) !important;
	border-color: var(--dks-primary);
	color: #fff !important;
}

.dks-booking-widget .dks-field { margin-bottom: 16px; }
.dks-booking-widget .dks-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dks-text) !important;
}
.dks-booking-widget .dks-field input[type="text"],
.dks-booking-widget .dks-field input[type="email"],
.dks-booking-widget .dks-field input[type="tel"],
.dks-booking-widget .dks-field input[type="date"],
.dks-booking-widget .dks-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dks-border);
	border-radius: 6px;
	font-size: 15px;
	background: #fff !important;
	color: var(--dks-text) !important;
	-webkit-appearance: auto;
	appearance: auto;
	color-scheme: light;
	font-family: var(--dks-font);
}
.dks-booking-widget .dks-field textarea { min-height: 80px; resize: vertical; }
.dks-booking-widget .dks-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* Some themes globally invert or recolor the native calendar icon for
   dark-mode form fields — force it back to the normal dark icon here. */
.dks-booking-widget input[type="date"]::-webkit-calendar-picker-indicator {
	filter: none;
	opacity: 1;
}
.dks-booking-widget input[type="date"]::-webkit-datetime-edit,
.dks-booking-widget input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dks-booking-widget input[type="date"]::-webkit-datetime-edit-text,
.dks-booking-widget input[type="date"]::-webkit-datetime-edit-month-field,
.dks-booking-widget input[type="date"]::-webkit-datetime-edit-day-field,
.dks-booking-widget input[type="date"]::-webkit-datetime-edit-year-field {
	color: var(--dks-text) !important;
}

.dks-booking-widget .dks-summary-box {
	background: var(--dks-card-bg) !important;
	border: 1px solid var(--dks-border);
	border-radius: var(--dks-radius);
	padding: 16px;
	margin-bottom: 16px;
	color: var(--dks-text) !important;
}
.dks-booking-widget .dks-summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.dks-booking-widget .dks-summary-row.dks-total { font-weight: 700; border-top: 1px solid var(--dks-border); margin-top: 6px; padding-top: 10px; }

.dks-booking-widget #dks-card-container {
	border: 1px solid var(--dks-border);
	border-radius: 6px;
	padding: 12px;
	background: #fff !important;
	margin-bottom: 16px;
	min-height: 90px;
}

.dks-booking-widget .dks-btn {
	display: inline-block;
	background: var(--dks-primary) !important;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	padding: 12px 22px;
	font-size: 15px;
	cursor: pointer;
	font-weight: 600;
}
.dks-booking-widget .dks-btn:hover { background: var(--dks-primary-dark) !important; }
.dks-booking-widget .dks-btn:disabled { opacity: .6; cursor: not-allowed; }
.dks-booking-widget .dks-btn-link {
	background: none !important;
	border: none;
	color: var(--dks-muted) !important;
	cursor: pointer;
	font-size: 14px;
	padding: 8px 0;
	text-decoration: underline;
}

.dks-booking-widget .dks-alert {
	padding: 12px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}
.dks-booking-widget .dks-alert-error { background: var(--dks-error-bg) !important; color: var(--dks-error-text) !important; }
.dks-booking-widget .dks-alert-success { background: var(--dks-success-bg) !important; color: var(--dks-success-text) !important; }

.dks-booking-widget .dks-confirmation {
	text-align: center;
	padding: 20px 0;
	color: var(--dks-text) !important;
}
.dks-booking-widget .dks-confirmation h3 { font-size: 24px; margin-bottom: 10px; color: var(--dks-text) !important; }

@media (max-width: 480px) {
	.dks-booking-widget { padding: 18px; }
	.dks-booking-widget .dks-progress-step { font-size: 11px; }
}