/* Terra-Byte.ai demo scheduler — uses the :root variables already defined
   on the site (--teal, --ink, --slate, --line, --mint, --ice, --body). */

.fld input[type="date"] {
	font-family: var(--body);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--ink);
	width: 100%;
}

.slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin-top: 8px;
	min-height: 44px;
}

.slot-btn {
	font-family: var(--body);
	font-size: 13px;
	padding: 8px 6px;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.slot-btn:hover:not(:disabled) {
	border-color: var(--teal);
	color: var(--teal);
}

.slot-btn--active {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}

.slot-btn--disabled,
.slot-btn:disabled {
	background: var(--ice);
	color: var(--muted);
	border-color: var(--line);
	cursor: not-allowed;
	text-decoration: line-through;
}

.slot-msg {
	font-family: var(--body);
	font-size: 13px;
	color: var(--slate);
	grid-column: 1 / -1;
	margin: 4px 0;
}

#demoForm button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}