/**
 * The availability picker on the tutor application.
 *
 * Sits inside a Gravity Forms field, so everything is prefixed hard enough to
 * beat both Divi's input rules and Gravity Forms' own.
 */

.ngs-avail {
	--ngs-slate: #5a748b;
	--ngs-sky:   #abbfd1;
	--ngs-cream: #eaede1;
	--ngs-sage:  #d8dfcb;
	--ngs-deep:  #395d62;
	max-width: 620px;
}

.ngs-avail-lead {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: #6d7d88;
}

.ngs-avail-none {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--ngs-sky);
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: #6d7d88;
}

.ngs-avail-day {
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var(--ngs-sage);
	border-radius: 10px;
	background: var(--ngs-cream);
}

.ngs-avail-day h4 {
	margin: 0 0 10px !important;
	font-size: 15px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ngs-slate) !important;
}

.ngs-avail-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.ngs-avail-row label {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ngs-deep) !important;
}

/* Divi and GF both want a say in how an input looks; this needs the last word. */
.ngs-avail input[type="time"],
.gform_wrapper .ngs-avail input[type="time"] {
	width: auto !important;
	max-width: 11rem !important;
	min-height: 44px;
	margin: 0 !important;
	padding: .5rem .65rem !important;
	border: 1px solid var(--ngs-sky) !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-size: 16px !important;   /* under 16 and iOS zooms on focus */
	line-height: 1.3 !important;
	color: #2f3d45 !important;
}

.ngs-avail input[type="time"]:focus {
	outline: none !important;
	border-color: var(--ngs-slate) !important;
	box-shadow: 0 0 0 3px rgba( 90, 116, 139, .18 );
}

.ngs-avail-row.is-bad input[type="time"] {
	border-color: #c0392b !important;
	background: #fdf6f5 !important;
}

.ngs-avail-bad {
	flex: 1 0 100%;
	font-size: 13px;
	color: #8f2f22;
}

/* Gravity Forms' generated theme CSS styles every <button> inside a form as a
   primary button, using custom properties and its own display rule. These are
   secondary controls, so they have to say so louder than that. */
.gform_wrapper .ngs-avail .ngs-avail-del,
.gform_wrapper .ngs-avail .ngs-avail-add,
.ngs-avail .ngs-avail-del,
.ngs-avail .ngs-avail-add {
	display: inline-block !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: .35rem .8rem !important;
	border: 1px solid var(--ngs-sky) !important;
	border-radius: 999px !important;
	background: #fff !important;
	background-color: #fff !important;
	color: var(--ngs-slate) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}

.gform_wrapper .ngs-avail .ngs-avail-del:hover,
.gform_wrapper .ngs-avail .ngs-avail-add:hover,
.ngs-avail .ngs-avail-del:hover,
.ngs-avail .ngs-avail-add:hover {
	border-color: var(--ngs-slate) !important;
	background: var(--ngs-sage) !important;
	background-color: var(--ngs-sage) !important;
}

/* One window is the normal case, and it cannot be removed — hide the control. */
.ngs-avail-rows > .ngs-avail-row:only-child .ngs-avail-del,
.gform_wrapper .ngs-avail-rows > .ngs-avail-row:only-child .ngs-avail-del { display: none !important; }

.ngs-avail .ngs-avail-add { margin-top: 2px; }

.ngs-avail-summary {
	margin: 16px 0 0;
	padding: 12px 15px;
	border-left: 4px solid var(--ngs-slate);
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ngs-deep);
}

.ngs-avail-fallback { margin: 12px 0 6px; font-size: 14px; color: #6d7d88; }

@media (max-width: 560px) {
	.ngs-avail-row { gap: 8px; }
	.ngs-avail-row label { flex: 1 0 100%; }
	.ngs-avail input[type="time"] { flex: 1; max-width: none !important; }
}