/**
 * StarzMeet Appointments — booking widget styling (purple brand).
 */
.szm-appt {
	border: 1px solid #e6e1fb;
	border-radius: 14px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(108, 77, 246, .06);
}
.szm-appt-title { margin: 0 0 4px; font-size: 18px; color: #2d2550; }
.szm-appt-sub { margin: 0 0 16px; font-size: 13px; color: #7a7a8c; }

/* Date strip */
.szm-appt-dates {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
}
.szm-appt-date {
	flex: 0 0 auto;
	min-width: 64px;
	padding: 8px 6px;
	border: 1px solid #e0d8ff;
	border-radius: 10px;
	background: #faf8ff;
	cursor: pointer;
	text-align: center;
	line-height: 1.2;
	transition: all .15s;
}
.szm-appt-date:hover { border-color: #6C4DF6; }
.szm-appt-date.active { background: #6C4DF6; border-color: #6C4DF6; color: #fff; }
/* The date label lives in child spans, and the theme colours spans inside its
   widgets directly (#7f7f7f). A direct rule always beats a colour inherited
   from the parent, so the selected date stayed grey on the purple fill and was
   effectively unreadable. Bind the spans to the button's own colour rather than
   relying on inheritance — this fixes the selected state and the washed-out
   unselected one in a single rule. */
.szm-appt-date .szm-appt-dow,
.szm-appt-date .szm-appt-dom { color: inherit !important; }
.szm-appt-dow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.szm-appt-dom { display: block; font-weight: 700; font-size: 14px; }

/* Slots */
.szm-appt-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	min-height: 8px;
}
.szm-appt-slot {
	padding: 8px 14px;
	border: 1px solid #e0d8ff;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #4a3f7a;
	transition: all .15s;
}
.szm-appt-slot:hover { border-color: #6C4DF6; }
.szm-appt-slot.active { background: #6C4DF6; border-color: #6C4DF6; color: #fff; }
.szm-appt-slot-taken {
	color: #b8b4c8;
	background: #f4f2fa;
	border-color: #eceaf5;
	text-decoration: line-through;
	cursor: not-allowed;
}
.szm-appt-slot-taken:hover { border-color: #eceaf5; }
.szm-appt-none, .szm-appt-loading { font-size: 13px; color: #7a7a8c; margin: 4px 0 0; }

/* Fields */
.szm-appt-fields { margin-top: 18px; }
.szm-appt-row { display: flex; gap: 10px; margin-bottom: 10px; }
.szm-appt-row > * { flex: 1; }
.szm-appt-fields input,
.szm-appt-fields textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
}
.szm-appt-fields textarea { margin-bottom: 12px; resize: vertical; }
.szm-appt-fields input:focus,
.szm-appt-fields textarea:focus {
	outline: none;
	border-color: #6C4DF6;
	box-shadow: 0 0 0 3px rgba(108, 77, 246, .15);
}
.szm-appt-submit {
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 8px;
	background: #6C4DF6;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.szm-appt-submit:hover { background: #5a3ee0; }
.szm-appt-submit:disabled { opacity: .6; cursor: default; }

/* Messages */
.szm-appt-msg { margin: 14px 0 0; font-size: 14px; }
.szm-appt-msg.ok { color: #2e8b57; font-weight: 600; }
.szm-appt-msg.err { color: #b02a2a; }

@media (max-width: 480px) {
	.szm-appt-row { flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   Visit type, location, insurance and timezone (includes/services.php).
   Only rendered when the provider actually offers a choice.
   ========================================================================== */
.szm-appt-modes { display: flex; gap: 8px; margin: 0 0 14px; }
.szm-appt-mode {
	flex: 1 1 0;
	padding: 9px 10px;
	border: 1px solid #e0d8ff;
	border-radius: 10px;
	background: #faf8ff;
	color: #2d2550;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.szm-appt-mode:hover { border-color: #6C4DF6; }
.szm-appt-mode.active { background: #6C4DF6; border-color: #6C4DF6; color: #fff; }

.szm-appt-label {
	display: block;
	margin: 0 0 5px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a86a0;
}
.szm-appt-place,
.szm-appt-insurance {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	margin: 0 0 6px;
	border: 1px solid #e6e1fb;
	border-radius: 10px;
	background: #fff;
	color: #2d2550;
	font-size: 14px;
}
.szm-appt-place:focus,
.szm-appt-insurance:focus { border-color: #6C4DF6; outline: none; box-shadow: 0 0 0 3px rgba(108, 77, 246, .13); }
.szm-appt-place-address { margin: 0 0 14px; font-size: 12.5px; color: #7a7a8c; line-height: 1.45; }
.szm-appt-hint { margin: 0 0 12px; font-size: 12px; color: #8a86a0; line-height: 1.5; }
.szm-appt-tz { margin: 12px 0 0; font-size: 12px; color: #8a86a0; text-align: center; }