/* =========================================================
   PACKAGE AVAILABILITY
   ========================================================= */

.availability-page {
	min-height: 80vh;
	padding: 40px 18px 70px;
	color: #142e59;
	background: radial-gradient( circle at 95% 0, rgba(255, 120, 23, .09), transparent 25% ), #f3f6fb;
	box-sizing: border-box;
}

.availability-container {
	width: min(1180px, 100%);
	margin: 0 auto;
}

/* Header */

.availability-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: 22px;
	padding: 28px 30px;
	color: #fff;
	background: radial-gradient( circle at top right, rgba(255, 132, 38, .40), transparent 34% ), linear-gradient(135deg, #102950, #193f73);
	border-radius: 22px;
	box-shadow: 0 16px 40px rgba(17, 42, 84, .18);
}

.availability-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 13px;
	color: #dce8f7 !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none !important;
}

	.availability-back:hover {
		color: #ffad71 !important;
		transform: translateX(-3px);
	}

.availability-eyebrow {
	display: block;
	margin-bottom: 5px;
	color: #ffad71;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.availability-header h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(27px, 4vw, 39px);
	line-height: 1.2;
}

.availability-header p {
	margin: 8px 0 0;
	color: #d5e2f3;
	font-size: 14px;
}

.availability-package {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 190px;
	padding: 11px;
	background: rgba(255,255,255,.11);
	border: 1px solid rgba(255,255,255,.19);
	border-radius: 14px;
}

	.availability-package img {
		width: 58px !important;
		height: 48px !important;
		flex: 0 0 58px;
		object-fit: cover !important;
		border-radius: 9px !important;
	}

	.availability-package span,
	.availability-package strong {
		display: block;
	}

	.availability-package span {
		margin-bottom: 4px;
		color: #c9d8ec;
		font-size: 10px;
	}

	.availability-package strong {
		color: #fff;
		font-size: 13px;
	}

/* Alerts */

.availability-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 17px;
	padding: 14px 16px;
	border: 1px solid;
	border-radius: 13px;
	font-size: 12px;
	font-weight: 700;
}

.success-alert {
	color: #166534;
	background: #ecfdf3;
	border-color: #a7e8bd;
}

.error-alert {
	color: #991b1b;
	background: #fff1f2;
	border-color: #fecaca;
}

/* Layout */

.availability-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: 22px;
}

.availability-main {
	display: grid;
	gap: 20px;
}

.availability-card {
	padding: 23px;
	background: #fff;
	border: 1px solid #dfe6ef;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(20,45,84,.07);
}

.availability-card-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 21px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e7ecf3;
}

.availability-heading-icon {
	display: grid;
	width: 43px;
	height: 43px;
	flex: 0 0 43px;
	place-items: center;
	border-radius: 12px;
}

.settings-icon {
	color: #2762af;
	background: #e8f1ff;
}

.blackout-icon {
	color: #b52f3b;
	background: #ffe9eb;
}

.dates-icon {
	color: #d8610c;
	background: #fff0e5;
}

.availability-card-heading h2 {
	margin: 0;
	color: #142e59;
	font-size: 18px;
}

.availability-card-heading p {
	margin: 4px 0 0;
	color: #7b8798;
	font-size: 11px;
}

/* Availability toggle */

.availability-toggle-option {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 15px !important;
	margin-bottom: 20px !important;
	padding: 15px !important;
	background: #f3f8ff !important;
	border: 1px solid #d3e2f4 !important;
	border-radius: 13px !important;
	cursor: pointer !important;
}

	.availability-toggle-option > div {
		display: flex;
		align-items: center;
		gap: 11px;
	}

.toggle-option-icon {
	display: grid;
	width: 39px;
	height: 39px;
	flex: 0 0 39px;
	place-items: center;
	color: #2476ba;
	background: #dceeff;
	border-radius: 11px;
}

.availability-toggle-option strong,
.availability-toggle-option small {
	display: block;
}

.availability-toggle-option strong {
	color: #173565;
	font-size: 13px;
}

.availability-toggle-option small {
	margin-top: 3px;
	color: #718096;
	font-size: 10px;
}

.availability-toggle-option > input {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}

.availability-toggle {
	position: relative;
	width: 47px;
	height: 25px;
	flex: 0 0 47px;
	background: #c6d0dc;
	border-radius: 999px;
	transition: background .2s ease;
}

	.availability-toggle > span {
		position: absolute;
		top: 3px;
		left: 3px;
		width: 19px;
		height: 19px;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0 2px 6px rgba(0,0,0,.18);
		transition: transform .2s ease;
	}

.availability-toggle-option > input[type="checkbox"]:checked ~ .availability-toggle {
	background: #20a75a;
}

	.availability-toggle-option > input[type="checkbox"]:checked ~ .availability-toggle > span {
		transform: translateX(22px);
	}

/* Fields */

.availability-form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.availability-field label {
	display: block;
	margin-bottom: 7px;
	color: #314866;
	font-size: 11px;
	font-weight: 800;
}

.availability-field > small {
	display: block;
	margin-top: 6px;
	color: #8490a1;
	font-size: 9px;
	line-height: 1.45;
}

.availability-input {
	position: relative;
}

	.availability-input > i {
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 13px;
		color: #8290a3;
		transform: translateY(-50%);
	}

	.availability-input input,
	.availability-field > input {
		width: 100% !important;
		height: 46px !important;
		color: #173565 !important;
		background: #f9fbfe !important;
		border: 1px solid #ced8e6 !important;
		border-radius: 10px !important;
		box-sizing: border-box !important;
		font: inherit !important;
		font-size: 12px !important;
	}

	.availability-input input {
		padding: 0 13px 0 39px !important;
	}

.availability-field > input {
	padding: 0 13px !important;
}

	.availability-input input:focus,
	.availability-field > input:focus {
		background: #fff !important;
		border-color: #ff7817 !important;
		outline: none !important;
		box-shadow: 0 0 0 4px rgba(255,120,23,.11) !important;
	}

.suffix-input input {
	padding-right: 54px !important;
}

.suffix-input > span {
	position: absolute;
	top: 50%;
	right: 11px;
	color: #7b8798;
	font-size: 9px;
	font-weight: 700;
	transform: translateY(-50%);
}

.save-availability-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 44px !important;
	margin-top: 20px !important;
	padding: 0 18px !important;
	color: #fff !important;
	background: #173565 !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
}

	.save-availability-button:hover {
		background: #0f284f !important;
		transform: translateY(-2px);
	}

/* Blackout form */

.blackout-form {
	display: grid;
	grid-template-columns: 175px minmax(0, 1fr) auto;
	align-items: end;
	gap: 13px;
}

.add-blackout-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 46px !important;
	padding: 0 16px !important;
	color: #fff !important;
	background: linear-gradient(135deg, #e5484d, #c72936) !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

	.add-blackout-button:hover {
		background: #b9212e !important;
		transform: translateY(-2px);
	}

/* Blackout list */

.blackout-list-card {
	position: sticky;
	top: 90px;
}

.blackout-date-list {
	display: grid;
	gap: 10px;
	max-height: 590px;
	padding-right: 3px;
	overflow-y: auto;
}

.blackout-date-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px;
	background: #fff8f8;
	border: 1px solid #f0d5d8;
	border-radius: 12px;
}

.blackout-date-box {
	display: grid;
	width: 49px;
	height: 53px;
	flex: 0 0 49px;
	place-content: center;
	color: #a92835;
	background: #ffe4e6;
	border-radius: 10px;
	text-align: center;
}

	.blackout-date-box span {
		display: block;
		font-size: 8px;
		font-weight: 900;
		letter-spacing: .06em;
		text-transform: uppercase;
	}

	.blackout-date-box strong {
		display: block;
		font-size: 20px;
		line-height: 1.05;
	}

.blackout-date-information {
	min-width: 0;
	flex: 1;
}

	.blackout-date-information strong,
	.blackout-date-information span {
		display: block;
	}

	.blackout-date-information strong {
		margin-bottom: 4px;
		color: #173565;
		font-size: 11px;
	}

	.blackout-date-information span {
		color: #7b8798;
		font-size: 9px;
		line-height: 1.4;
		overflow-wrap: anywhere;
	}

.blackout-date-item form {
	margin: 0 !important;
}

.blackout-date-item button {
	display: grid !important;
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	place-items: center !important;
	color: #a11d2c !important;
	background: #fff !important;
	border: 1px solid #efb5ba !important;
	border-radius: 9px !important;
	font-size: 10px !important;
	cursor: pointer !important;
}

	.blackout-date-item button:hover {
		color: #fff !important;
		background: #d9343e !important;
		border-color: #d9343e !important;
	}

.blackout-empty {
	padding: 35px 15px;
	color: #7b8798;
	text-align: center;
}

	.blackout-empty > i {
		margin-bottom: 12px;
		color: #28a45e;
		font-size: 35px;
	}

	.blackout-empty h3 {
		margin: 0 0 6px;
		color: #173565;
		font-size: 15px;
	}

	.blackout-empty p {
		margin: 0;
		font-size: 10px;
		line-height: 1.5;
	}

/* Responsive */

@media (max-width: 950px) {
	.availability-layout {
		grid-template-columns: 1fr;
	}

	.blackout-list-card {
		position: static;
	}
}

@media (max-width: 750px) {
	.availability-form-grid {
		grid-template-columns: 1fr;
	}

	.blackout-form {
		grid-template-columns: 1fr;
	}

	.add-blackout-button {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.availability-page {
		padding: 25px 11px 50px;
	}

	.availability-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 22px;
	}

	.availability-package {
		width: 100%;
		box-sizing: border-box;
	}

	.availability-card {
		padding: 18px;
	}

	.availability-toggle-option {
		align-items: flex-start !important;
	}

		.availability-toggle-option > div {
			align-items: flex-start;
		}
	.blackout-full-date {
		margin-bottom: 3px;
		color: #445b78 !important;
		font-size: 9px !important;
		font-weight: 700;
	}

	.blackout-reason {
		color: #7b8798 !important;
		font-size: 9px !important;
	}
}