/* ==========================================================================
   Gravity Forms Time Slots
   ========================================================================== */

/* --------------------------------------------------------------------------
   Front-end: radio list
   -------------------------------------------------------------------------- */
.ginput_container_time_slots .gfield_time_slots_list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
}

.ginput_container_time_slots .gf-time-slots-item {
	margin: 0;
}

.ginput_container_time_slots .gf-time-slots-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #d5d9dd;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 400;
	line-height: 1.3;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.ginput_container_time_slots .gf-time-slots-item input[type="radio"] {
	margin: 0;
	flex: 0 0 auto;
}

.ginput_container_time_slots .gf-time-slots-item label:hover {
	border-color: #8a9097;
}

.ginput_container_time_slots .gf-time-slots-item input[type="radio"]:checked + label,
.ginput_container_time_slots .gf-time-slots-item input[type="radio"]:checked ~ label {
	border-color: #1f6feb;
	background-color: #eef4ff;
	box-shadow: inset 0 0 0 1px #1f6feb;
}

.ginput_container_time_slots .gf-time-slots-item input[type="radio"]:focus + label {
	outline: 2px solid #1f6feb;
	outline-offset: 1px;
}

/* Full / disabled slots */
.ginput_container_time_slots .gf-time-slots-item--full label {
	cursor: not-allowed;
	opacity: .55;
	background-color: #f3f4f5;
	border-style: dashed;
}

/* Manually deactivated slots (only ever visible in the editor preview) */
.ginput_container_time_slots .gf-time-slots-item--off label {
	cursor: not-allowed;
	opacity: .55;
	background-color: #f3f4f5;
	border-style: dashed;
	text-decoration: line-through;
}

.ginput_container_time_slots .gf-time-slots-item input[type="radio"]:disabled + label {
	cursor: not-allowed;
}

/* Status badges */
.ginput_container_time_slots .gf-time-slots-status {
	margin-left: auto;
	font-size: .8em;
	padding: 1px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.ginput_container_time_slots .gf-time-slots-full {
	background-color: #fde2e1;
	color: #8a1c13;
}

.ginput_container_time_slots .gf-time-slots-remaining {
	background-color: #e3f3e6;
	color: #1c6b2f;
}

.ginput_container_time_slots .gf-time-slots-off {
	background-color: #e5e7eb;
	color: #4b5563;
}

/* --------------------------------------------------------------------------
   Front-end: dropdown
   -------------------------------------------------------------------------- */
.ginput_container_time_slots .gfield_time_slots_select {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.ginput_container_time_slots .gf-time-slots-notice {
	padding: 10px 12px;
	border: 1px dashed #c9ccd1;
	border-radius: 6px;
	background: #fafafa;
	color: #555;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Form editor settings panel
   -------------------------------------------------------------------------- */
.gf-ts-grid {
	margin-top: 8px;
}

.gf-ts-grid .gf-ts-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.gf-ts-grid .gf-ts-row > label.inline {
	flex: 0 0 180px;
	margin: 0;
	font-weight: 600;
}

.gf-ts-grid .gf-ts-row input[type="time"],
.gf-ts-grid .gf-ts-row input[type="number"],
.gf-ts-grid .gf-ts-row select {
	flex: 1 1 auto;
	max-width: 220px;
}

.gf-ts-grid .gf-ts-row.gf-ts-checkbox > label.inline {
	flex: 1 1 auto;
	font-weight: 400;
}

.gf-ts-grid .gf-ts-row.gf-ts-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
}

.gf-ts-grid .gf-ts-note {
	margin-top: 4px;
	font-style: italic;
}

/* Deactivate individual slots */
.gf-ts-grid .gf-ts-row.gf-ts-blocked {
	display: block;
}

.gf-ts-grid .gf-ts-row.gf-ts-blocked > label.inline {
	flex: none;
	display: block;
	margin-bottom: 6px;
}

.gf-ts-blocked-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 6px;
	max-height: 220px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid #d5d9dd;
	border-radius: 6px;
	background: #fff;
}

.gf-ts-blocked-list .gf-ts-empty {
	grid-column: 1 / -1;
	margin: 0;
	font-style: italic;
}

.gf-ts-block-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 6px;
	border-radius: 4px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
}

.gf-ts-block-item:hover {
	background: #f0f2f4;
}

.gf-ts-block-item.is-blocked {
	background: #fde2e1;
	color: #8a1c13;
	text-decoration: line-through;
}

.gf-ts-block-item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}