/* Extracted from new/templ/component/notifications_modal.templ (templ NotificationsModal) */
@keyframes rioNotiFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes rioBellSwing {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(14deg); }
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(6deg); }
	80% { transform: rotate(-4deg); }
}
#notificationsModal.offcanvas-bottom {
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	border: none;
	box-shadow: 0 -18px 60px -12px rgba(15, 40, 90, 0.28);
	max-height: 94vh;
	background:
		radial-gradient(1200px 320px at 50% -80px, rgba(0, 140, 255, 0.10) 0%, rgba(0, 140, 255, 0) 70%),
		linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
/* On larger screens, float as a centered card instead of a full-width sheet.
   Keeps left/right anchoring so Bootstrap's translateY slide animation still works. */
@media (min-width: 768px) {
	#notificationsModal.offcanvas-bottom,
	#referralStatusModal.offcanvas-bottom {
		left: 24px;
		right: 24px;
		bottom: 24px;
		width: auto;
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 28px;
		max-height: calc(100vh - 48px);
		/* Slide fully out of view despite the 24px bottom offset */
		transform: translateY(calc(100% + 24px));
	}
	/* The ID selector above outweighs Bootstrap's .offcanvas.show rules,
	   so restore the visible position explicitly. */
	#notificationsModal.offcanvas-bottom.showing,
	#notificationsModal.offcanvas-bottom.show:not(.hiding),
	#referralStatusModal.offcanvas-bottom.showing,
	#referralStatusModal.offcanvas-bottom.show:not(.hiding) {
		transform: none;
	}
	#notificationsModal.offcanvas-bottom {
		box-shadow: 0 24px 80px -12px rgba(15, 40, 90, 0.35);
	}
	#notificationsModal .rio-noti-handle {
		display: none;
	}
}

#notificationsModal .rio-noti-content {
	margin-top: -55px;
	text-align: center;
}
#notificationsModal .rio-noti-handle {
	width: 48px;
	height: 5px;
	border-radius: 999px;
	background: #d7dde6;
	margin: 10px auto 0;
}
#notificationsModal .btn-close {
	position: absolute;
	top: 18px;
	right: 20px;
	z-index: 5;
	opacity: .55;
	padding: 10px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.04);
	transition: opacity .18s ease, background-color .18s ease, transform .18s ease;
}
#notificationsModal .btn-close:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.08);
	transform: rotate(90deg);
}
#notificationsModal .rio-noti-hero {
	position: relative;
	display: flex;
	justify-content: center;
	height: 120px;
}
#notificationsModal .welcome-area {
	animation: rioNotiFadeUp .45s ease both;
	max-width: 620px;
	margin: 0 auto;
}
#notificationsModal .rio-noti-title {
	font-weight: 800;
	font-size: 2.1rem;
	letter-spacing: -.5px;
	background: linear-gradient(135deg, #00a2ff 0%, #0056d6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: .4rem;
}
#notificationsModal .rio-noti-sub {
	color: #6b7280;
	max-width: 480px;
	font-size: .98rem;
	line-height: 1.5;
	margin: 0 auto 1.1rem;
}
#notificationsModal .rio-card {
	position: relative;
	display: block;
	border: 1px solid #e9eef5;
	border-radius: 22px;
	background: #fff;
	padding: 16px 20px;
	margin-bottom: 12px;
	box-shadow: 0 8px 24px -14px rgba(20, 50, 100, 0.22);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	text-decoration: none;
	overflow: hidden;
}
#notificationsModal .rio-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #00a2ff 0%, #0056d6 100%);
	opacity: 0;
	transition: opacity .2s ease;
}
#notificationsModal .rio-card:hover {
	transform: translateY(-4px);
	border-color: #cfe4ff;
	box-shadow: 0 20px 40px -18px rgba(0, 140, 255, 0.45);
}
#notificationsModal .rio-card:hover::before {
	opacity: 1;
}
#notificationsModal .rio-card:hover .rio-card-icon {
	transform: scale(1.06);
}
#notificationsModal .rio-card:hover .rio-card-icon img {
	animation: rioBellSwing .9s ease;
}
#notificationsModal .rio-card-icon {
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: linear-gradient(135deg, #f2f8ff 0%, #e2efff 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 140, 255, 0.08);
	transition: transform .2s ease;
}
#notificationsModal .rio-card-icon img {
	height: 46px;
	width: auto;
	transform-origin: 50% 12%;
}
#notificationsModal .rio-card h5 {
	font-weight: 700;
	letter-spacing: .4px;
	font-size: 1rem;
	color: #16223a;
	margin-bottom: 3px;
}
#notificationsModal .rio-card p {
	color: #6b7280;
	margin-bottom: 0;
	font-size: .9rem;
	line-height: 1.45;
}
#notificationsModal .form-switch .form-check-input {
	height: 30px;
	width: 54px;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease, border-color .2s ease;
}
#notificationsModal .form-switch .form-check-input:focus {
	box-shadow: 0 0 0 4px rgba(0, 140, 255, 0.18);
}
#notificationsModal .form-switch .form-check-input:checked {
	background-color: #008cff;
	border-color: #008cff;
}
#notificationsModal .rio-freq-label {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #8a94a6;
	margin: 4px 0 6px;
}
#notificationsModal .rio-card .form-select {
	border-radius: 14px;
	border-color: #e2e8f2;
	padding: 8px 12px;
	min-height: 46px;
}

/* ===== Reminder types multi-select (select2) ===== */

/* A global rule pads .select2-container (10px 18px), which shrank the
   selection box inside its card. */
#notificationsModal .freq-card .select2-container {
	padding: 0;
	margin: 0;
	width: 100% !important;
}

/* Selection box */
.select2-container .select2-selection--multiple.rio-freq-selection {
	border: 1px solid #e2e8f2;
	border-radius: 16px;
	background: #fbfdff;
	padding: 5px 8px;
	min-height: 54px;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.select2-container--focus .select2-selection--multiple.rio-freq-selection,
.select2-container--open .select2-selection--multiple.rio-freq-selection {
	border-color: #7cc0ff;
	box-shadow: 0 0 0 4px rgba(0, 140, 255, 0.14);
	outline: none;
}
.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 4px 2px;
	margin: 0;
	list-style: none;
}

/* Chips */
.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 12px 4px 4px;
	border: 1px solid rgba(0, 140, 255, 0.22);
	border-radius: 999px;
	background: linear-gradient(135deg, #eef7ff 0%, #dfefff 100%);
	color: #0b5cc4;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
	animation: rioNotiFadeUp .2s ease both;
}
.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice__remove {
	position: static;
	order: -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 7px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 140, 255, 0.12);
	color: #0b5cc4;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice__remove:hover {
	background: #ff5c74;
	color: #fff;
	transform: scale(1.08);
}
.rio-freq-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.rio-freq-chip img {
	height: 16px;
	width: auto;
}

/* Inline search field. select2 4.1 renders it as a sibling AFTER the chip
   list, which left it on an empty row of its own. The box is the flex
   container and the <ul> is display:contents, so chips and the search field
   share one wrapping flow and the search tucks in beside the last chip. */
.select2-container .select2-selection--multiple.rio-freq-selection {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 9px 10px;
}
.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__rendered {
	display: contents;
}
.select2-container .rio-freq-selection.select2-selection--multiple .select2-search--inline {
	display: inline-flex;
	align-items: center;
	flex: 1 1 40px;
	min-width: 40px;
}
.select2-container .rio-freq-selection.select2-selection--multiple .select2-search--inline .select2-search__field {
	margin: 0 4px;
	height: 28px;
	font-size: .85rem;
	font-family: inherit;
	color: #16223a;
}
.rio-freq-selection .select2-search--inline .select2-search__field::placeholder {
	color: #9aa5b5;
}

/* Dropdown */
@keyframes rioFreqDropIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}
.rio-freq-dropdown.select2-dropdown {
	/* The dropdown is attached to <body>, while #notificationsModal is lifted
	   to 1100 on desktop (below). select2's default 1051 painted it behind
	   the sheet, so the open list was invisible. Stay under the Swal layer. */
	z-index: 1150;
	border: 1px solid #e5edf7;
	border-radius: 18px;
	overflow: hidden;
	background:
		linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
	box-shadow: 0 24px 60px -16px rgba(15, 40, 90, 0.35);
	animation: rioFreqDropIn .18s ease both;
}
.rio-freq-dropdown.select2-dropdown--above {
	animation-name: rioNotiFadeUp;
	animation-duration: .18s;
}
.rio-freq-dropdown.select2-dropdown .select2-results > .select2-results__options {
	max-height: 340px;
	overflow-y: auto;
	padding: 8px;
	scrollbar-width: thin;
	scrollbar-color: #cfd9e6 transparent;
}
.rio-freq-dropdown .select2-results__option {
	padding: 0;
	border-radius: 14px;
	transition: background-color .15s ease;
}
.rio-freq-dropdown .select2-results__option + .select2-results__option {
	margin-top: 2px;
}

/* Option rows */
.rio-freq-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}
.rio-freq-option-icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, #f2f8ff 0%, #e2efff 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 140, 255, 0.08);
	transition: transform .15s ease;
}
.rio-freq-option-icon img {
	max-height: 30px;
	max-width: 30px;
}
.rio-freq-option-body {
	flex: 1 1 auto;
	min-width: 0;
}
.rio-freq-option-title {
	display: block;
	font-weight: 700;
	font-size: .92rem;
	color: #16223a;
	line-height: 1.3;
}
.rio-freq-option-desc {
	display: block;
	font-size: .8rem;
	font-weight: 400;
	color: #7c8698;
	line-height: 1.35;
}
.rio-freq-option-check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #d5dde9;
	border-radius: 50%;
	color: transparent;
	font-size: 11px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Hover / highlight: soft blue instead of white-on-blue */
.rio-freq-dropdown.select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: #f0f7ff;
	color: inherit;
}
.rio-freq-dropdown .select2-results__option--highlighted .rio-freq-option-icon {
	transform: scale(1.05);
}

/* Selected: check badge instead of grey row */
.rio-freq-dropdown.select2-dropdown .select2-results__option--selected {
	background-color: transparent;
}
.rio-freq-dropdown .select2-results__option--selected .rio-freq-option-check {
	background: linear-gradient(135deg, #00a2ff 0%, #0056d6 100%);
	border-color: transparent;
	color: #fff;
}
.rio-freq-dropdown .select2-results__message {
	padding: 12px;
	color: #7c8698;
	font-size: .85rem;
}

/* On phones the sheet used to outgrow the viewport (body overflow is visible so
   the hero hangs above the sheet and gets cut off). Contain the hero inside the
   sheet, compact the layout, and let the body scroll if it still doesn't fit.
   This block must stay LAST in the file: it overrides same-specificity base
   rules above, so source order is what makes it win. */
@media (max-width: 767.98px) {
	#notificationsModal.offcanvas-bottom {
		max-height: calc(100dvh - 16px);
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
	}
	#notificationsModal .offcanvas-body {
		overflow-y: auto !important;
		overscroll-behavior: contain;
		padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
	}
	#notificationsModal .rio-noti-content {
		margin-top: 0;
	}
	#notificationsModal .btn-close {
		top: 14px;
		right: 14px;
	}
	/* Tall enough that the mascot's feet clear the title below */
	#notificationsModal .rio-noti-hero {
		height: 150px;
	}
	/* Keep the mascot inside the scrollable body instead of overhanging the sheet,
	   and below the drag handle so it doesn't peek out beside Rio's head */
	#notificationsModal #streakParrot {
		height: 225px !important;
		width: 100% !important;
		max-width: 420px;
		margin-top: 0 !important;
	}
	#notificationsModal #otherParrot {
		height: 195px !important;
		margin-top: 0 !important;
	}
	#notificationsModal .rio-noti-title {
		font-size: 1.55rem;
	}
	#notificationsModal .rio-noti-sub {
		font-size: .88rem;
		margin-bottom: .85rem;
	}
	#notificationsModal .rio-card {
		padding: 12px 14px;
		border-radius: 18px;
		margin-bottom: 10px;
	}
	#notificationsModal .rio-card .ms-4 {
		margin-left: .75rem !important;
	}
	#notificationsModal .rio-card-icon {
		width: 50px;
		height: 50px;
		border-radius: 14px;
	}
	#notificationsModal .rio-card-icon img {
		height: 34px;
	}
	#notificationsModal .rio-card h5 {
		font-size: .85rem;
		letter-spacing: .3px;
	}
	#notificationsModal .rio-card p {
		font-size: .8rem;
		line-height: 1.4;
	}
	#notificationsModal .form-switch .form-check-input {
		height: 26px;
		width: 48px;
	}
	#notificationsModal .rio-freq-label {
		font-size: .72rem;
	}
	/* Reminder types: the heading already says what the box is, so drop the
	   duplicate label, and pull the box out to the card's full width (select2
	   sized itself off the 100px <select>). */
	#notificationsModal .rio-freq-label {
		display: none;
	}
	#notificationsModal .freq-card .input-group {
		margin-top: 10px;
	}
	.select2-container .select2-selection--multiple.rio-freq-selection {
		min-height: 0;
		gap: 5px;
		padding: 7px 6px;
	}
	/* Compact chips so two sit per row instead of one chip per line */
	.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice {
		font-size: .72rem;
		padding: 3px 8px 3px 3px;
	}
	.select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice__remove {
		width: 17px;
		height: 17px;
		margin-right: 4px;
		font-size: 12px;
	}
	.rio-freq-chip {
		gap: 5px;
	}
	.rio-freq-chip img {
		height: 14px;
	}
	/* The inline search is readonly on phones (tap opens the picker), so keep
	   it focusable but out of flow - it was adding an empty row under the chips */
	.select2-container .rio-freq-selection.select2-selection--multiple .select2-search--inline {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
	}
}

/* Desktop card on shorter viewports: the mascot overhanging the card got
   clipped by the top bar / viewport edge. Keep Rio inside the card, compact
   the layout and let the body scroll if it still doesn't fit. */
@media (min-width: 768px) and (max-height: 1200px) {
	#notificationsModal.offcanvas-bottom {
		max-height: calc(100dvh - 48px);
		z-index: 1100;
	}
	#notificationsModal .offcanvas-body {
		overflow-y: auto !important;
		overscroll-behavior: contain;
		padding-top: 8px;
	}
	#notificationsModal .rio-noti-content {
		margin-top: 0;
	}
	#notificationsModal .rio-noti-hero {
		height: 135px;
		margin-bottom: 0 !important;
	}
	#notificationsModal #streakParrot {
		height: 165px !important;
		width: 300px !important;
		margin-top: 0 !important;
	}
	#notificationsModal #otherParrot {
		height: 145px !important;
		margin-top: 0 !important;
	}
	#notificationsModal .rio-noti-title {
		font-size: 1.8rem;
		margin-bottom: .25rem;
	}
	#notificationsModal .rio-noti-sub {
		margin-bottom: .8rem;
	}
	#notificationsModal .rio-card {
		padding: 12px 16px;
		margin-bottom: 10px;
	}
	#notificationsModal .rio-card-icon {
		width: 56px;
		height: 56px;
		border-radius: 16px;
	}
	#notificationsModal .rio-card-icon img {
		height: 38px;
	}
}

/* ============================================================
   Dark theme (html[data-theme="dark"] - see theme.css tokens)
   ============================================================ */
html[data-theme="dark"] #notificationsModal.offcanvas-bottom {
	background:
		radial-gradient(1200px 320px at 50% -80px, rgba(0, 140, 255, 0.14) 0%, rgba(0, 140, 255, 0) 70%),
		linear-gradient(180deg, var(--tt-surface, #111a2e) 0%, var(--tt-bg, #0b1120) 100%);
	box-shadow: 0 -18px 60px -12px rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] #notificationsModal .rio-noti-handle {
	background: var(--tt-line-strong, #33436a);
}
html[data-theme="dark"] #notificationsModal .btn-close {
	background-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] #notificationsModal .btn-close:hover {
	background-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] #notificationsModal .rio-noti-sub {
	color: var(--tt-muted, #94a3b8);
}
html[data-theme="dark"] #notificationsModal .rio-card {
	background: var(--tt-surface-2, #17233b);
	border-color: var(--tt-line, #263450);
	box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] #notificationsModal .rio-card:hover {
	border-color: var(--tt-line-strong, #33436a);
	box-shadow: 0 20px 40px -18px rgba(0, 140, 255, 0.35);
}
html[data-theme="dark"] #notificationsModal .rio-card h5 {
	color: var(--tt-ink, #e6ebf5);
}
html[data-theme="dark"] #notificationsModal .rio-card p {
	color: var(--tt-muted, #94a3b8);
}
html[data-theme="dark"] #notificationsModal .rio-card-icon {
	background: linear-gradient(135deg, rgba(0, 140, 255, 0.16) 0%, rgba(0, 86, 214, 0.22) 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 162, 255, 0.22);
}
html[data-theme="dark"] #notificationsModal .rio-freq-label {
	color: var(--tt-muted, #94a3b8);
}
html[data-theme="dark"] #notificationsModal .rio-card .form-select {
	background-color: var(--tt-surface-3, #1e2c48);
	border-color: var(--tt-line-strong, #33436a);
	color: var(--tt-ink, #e6ebf5);
}

/* Reminder-types select2: the selection box lives in the modal but the
   dropdown is parented to <body>, so both are scoped by their rio-freq-*
   css classes rather than the modal id. */
html[data-theme="dark"] .select2-container .select2-selection--multiple.rio-freq-selection {
	background: var(--tt-surface-3, #1e2c48);
	border-color: var(--tt-line-strong, #33436a);
}
html[data-theme="dark"] .select2-container--focus .select2-selection--multiple.rio-freq-selection,
html[data-theme="dark"] .select2-container--open .select2-selection--multiple.rio-freq-selection {
	border-color: #3b82f6;
	box-shadow: 0 0 0 4px rgba(0, 140, 255, 0.2);
}
html[data-theme="dark"] .select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice {
	background: linear-gradient(135deg, rgba(0, 140, 255, 0.18) 0%, rgba(0, 86, 214, 0.24) 100%);
	border-color: rgba(0, 162, 255, 0.35);
	color: #9ecfff;
}
html[data-theme="dark"] .select2-container .rio-freq-selection.select2-selection--multiple .select2-selection__choice__remove {
	background: rgba(0, 140, 255, 0.22);
	color: #9ecfff;
}
html[data-theme="dark"] .select2-container .rio-freq-selection.select2-selection--multiple .select2-search--inline .select2-search__field {
	color: var(--tt-ink, #e6ebf5);
}
html[data-theme="dark"] .rio-freq-selection .select2-search--inline .select2-search__field::placeholder {
	color: var(--tt-muted, #94a3b8);
}
html[data-theme="dark"] .rio-freq-dropdown.select2-dropdown {
	background: linear-gradient(180deg, var(--tt-surface-2, #17233b) 0%, var(--tt-surface, #111a2e) 100%);
	border-color: var(--tt-line-strong, #33436a);
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] .rio-freq-dropdown.select2-dropdown .select2-results > .select2-results__options {
	scrollbar-color: var(--tt-line-strong, #33436a) transparent;
}
html[data-theme="dark"] .rio-freq-option-icon {
	background: linear-gradient(135deg, rgba(0, 140, 255, 0.16) 0%, rgba(0, 86, 214, 0.22) 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 162, 255, 0.22);
}
html[data-theme="dark"] .rio-freq-option-title {
	color: var(--tt-ink, #e6ebf5);
}
html[data-theme="dark"] .rio-freq-option-desc {
	color: var(--tt-muted, #94a3b8);
}
html[data-theme="dark"] .rio-freq-option-check {
	border-color: var(--tt-line-strong, #33436a);
}
html[data-theme="dark"] .rio-freq-dropdown.select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: rgba(0, 140, 255, 0.14);
}
html[data-theme="dark"] .rio-freq-dropdown .select2-results__message {
	color: var(--tt-muted, #94a3b8);
}

/* SweetAlert2 dialogs raised from the notifications flow (permission denied /
   unavailable) must sit above #notificationsModal, which is lifted to 1100
   on desktop above. Swal's own container defaults to 1060. */
.swal2-container.rio-noti-swal {
	z-index: 1200;
}