/* LakeSide Promotions — matches the promotions calendar on lakesidegaming.com */

.lsp-root,
.lsp-root * {
	box-sizing: border-box;
}

.lsp-root {
	--lsp-red: #cb222f;
	--lsp-ink: #000;
	--lsp-muted: #505d68;
	--lsp-line: #ece8da;
	--lsp-card: #fff;
	--lsp-shadow: 0 1px 3px 0 rgba( 0, 0, 0, .1 ), 0 1px 2px -1px rgba( 0, 0, 0, .1 );
	font-family: "Plus Jakarta Sans", sans-serif;
	color: var( --lsp-ink );
}

.lsp-root .lsp-noscript {
	margin: 0;
	padding-left: 1.2em;
}

/* ---------- toolbar ---------- */

.lsp-bar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lsp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lsp-chip,
.lsp-details {
	font: 800 12.8px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 12px 28px;
	border: 2px solid var( --lsp-ink );
	background: transparent;
	color: var( --lsp-ink );
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lsp-chip.is-active {
	background: var( --lsp-red );
	border-color: var( --lsp-red );
	color: #fff;
}

.lsp-chip:not( .is-active ):hover {
	background: var( --lsp-ink );
	color: #fff;
}

.lsp-toggle {
	display: inline-flex;
	align-self: flex-start;
	border: 2px solid var( --lsp-ink );
	border-radius: 999px;
	padding: 4px;
}

.lsp-tab {
	font: 800 14px/20px "Plus Jakarta Sans", sans-serif;
	letter-spacing: .025em;
	text-transform: uppercase;
	border: 0;
	border-radius: 999px;
	padding: 8px 20px;
	background: transparent;
	color: var( --lsp-ink );
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.lsp-tab.is-active {
	background: var( --lsp-ink );
	color: #fff;
}

/* ---------- list view ---------- */

.lsp-body {
	margin-top: 40px;
}

.lsp-list {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
}

.lsp-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var( --lsp-card );
	border-radius: 10px;
	box-shadow: var( --lsp-shadow );
	padding: 20px;
}

.lsp-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	flex: 0 0 80px;
	border-radius: 10px;
	background: var( --lsp-red );
	color: #fff;
	line-height: 1;
}

.lsp-date-dow {
	font: 700 12px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lsp-date-num {
	font: 900 30px/1 "Plus Jakarta Sans", sans-serif;
	margin-top: 4px;
}

.lsp-card-day {
	font: 700 12px/16px "Plus Jakarta Sans", sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --lsp-muted );
	margin: 0;
}

.lsp-card-body {
	flex: 1;
	min-width: 0;
}

.lsp-card-title {
	font: 900 18px/24px "Plus Jakarta Sans", sans-serif;
	text-transform: uppercase;
	margin: 2px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lsp-card-detail {
	font: 400 15px/22px "Plus Jakarta Sans", sans-serif;
	color: var( --lsp-muted );
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lsp-details {
	border-color: var( --lsp-red );
	color: var( --lsp-red );
	align-self: flex-start;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 10px 22px;
}

.lsp-details:hover {
	background: var( --lsp-red );
	color: #fff;
}

.lsp-empty {
	font: 400 16px/1.5 "Plus Jakarta Sans", sans-serif;
	color: var( --lsp-muted );
	margin: 0;
	grid-column: 1 / -1;
}

/* ---------- calendar view ---------- */

.lsp-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lsp-nav {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var( --lsp-ink );
	border-radius: 999px;
	background: transparent;
	color: var( --lsp-ink );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.lsp-nav:hover {
	background: var( --lsp-ink );
	color: #fff;
}

.lsp-cal-month {
	font: 900 24px/1.2 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -.025em;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

.lsp-cal-scroll {
	margin-top: 24px;
	overflow-x: auto;
}

.lsp-cal-min {
	min-width: 640px;
}

.lsp-grid {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 1px;
	background: var( --lsp-line );
}

.lsp-grid-head {
	border-radius: 10px 10px 0 0;
	overflow: clip;
}

.lsp-dow {
	background: var( --lsp-red );
	color: #fff;
	font: 800 14px/20px "Plus Jakarta Sans", sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	padding: 12px 0;
}

.lsp-grid-body {
	border-radius: 0 0 10px 10px;
	overflow: clip;
}

.lsp-cell {
	background: #fff;
	min-height: 110px;
	padding: 8px;
}

.lsp-cell.is-outside {
	background: #faf9f6;
}

.lsp-cell.is-outside .lsp-cell-num {
	color: #d4d1c6;
}

.lsp-cell-pills {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lsp-cell-num {
	font: 700 14px/20px "Plus Jakarta Sans", sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
}

.lsp-cell-num.is-today {
	background: var( --lsp-red );
	color: #fff;
	border-radius: 999px;
	width: 28px;
	height: 28px;
}

.lsp-pill {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	border-radius: 4px;
	background: #faf9f6;
	color: #8c0e06;
	font: 700 12px/15px "Plus Jakarta Sans", sans-serif;
	padding: 4px 6px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.lsp-pill:hover {
	background: #f0ece0;
}

.lsp-foot{display:flex;flex-wrap:wrap;gap:16px;}
.lsp-foot-list{margin-top:40px;}
.lsp-foot-cal{margin-top:32px;}
.lsp-btn{font:800 12.8px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:12px 28px;border:2px solid var(--lsp-red);background:var(--lsp-red);color:#fff;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
.lsp-btn.is-hollow{background:transparent;border-color:var(--lsp-ink);color:var(--lsp-ink);}
.lsp-btn.is-hollow:hover{background:var(--lsp-ink);color:#fff;}
.lsp-btn.is-fill:hover{background:#a91b25;border-color:#a91b25;}

/* ---------- modal ---------- */

.lsp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.lsp-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .6 );
}

.lsp-modal-panel {
	position: relative;
	width: 100%;
	max-width: 672px;
	max-height: calc( 100vh - 64px );
	overflow: auto;
	background: #fff;
	border-radius: 14px;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.lsp-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.lsp-modal-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.lsp-modal-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lsp-modal-body {
	padding: 32px;
}

.lsp-modal-title {
	font: 900 36px/1 "Plus Jakarta Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: normal;
	margin: 0;
}

.lsp-modal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 16px;
}

.lsp-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 14px/20px "Plus Jakarta Sans", sans-serif;
	letter-spacing: .025em;
	text-transform: uppercase;
}

.lsp-icon {
	width: 14px;
	height: 14px;
	color: var( --lsp-red );
	flex: 0 0 14px;
}

.lsp-modal-detail {
	font: 400 18px/1.625 "Plus Jakarta Sans", sans-serif;
	margin: 20px 0 0;
}

.lsp-modal-link {
	display: inline-block;
	margin-top: 20px;
	font: 800 12.8px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 12px 28px;
	background: var( --lsp-red );
	border: 2px solid var( --lsp-red );
	color: #fff;
	text-decoration: none;
}

/* ---------- breakpoints ---------- */

@media ( min-width: 640px ) {
	.lsp-card {
		flex-direction: row;
		align-items: center;
	}

	.lsp-details {
		align-self: auto;
	}
}

@media ( min-width: 768px ) {
	.lsp-bar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.lsp-cal-month {
		font-size: 30px;
	}
}

@media ( min-width: 1024px ) {
	.lsp-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}