/**
 * BudApproach Rewards — Premium UI
 * Presentation only. No reward logic is modified.
 */

/* Wider desktop popup */
html body #ba-rewards-popup.ba-rewards-popup {
	width: min(560px, calc(100vw - 48px)) !important;
	max-height: min(820px, calc(100vh - 48px)) !important;
	border: 1px solid rgba(36, 66, 54, 0.16) !important;
	border-radius: 24px !important;
	background: #FFFDF8 !important;
	box-shadow:
		0 36px 100px rgba(20, 34, 28, 0.22),
		0 8px 24px rgba(20, 34, 28, 0.08) !important;
	overflow: hidden !important;
}

/* Premium header */
html body #ba-rewards-popup .ba-rewards-popup__header {
	position: relative !important;
	overflow: hidden !important;
	padding: 28px 64px 24px 28px !important;
	border-bottom: 1px solid #D9D3C8 !important;
	background: linear-gradient(180deg, #FFFDF8 0%, #F8F5EE 100%) !important;
	color: #1E2521 !important;
}

html body #ba-rewards-popup .ba-rewards-popup__header::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	right: 28px !important;
	left: 28px !important;
	width: auto !important;
	height: 4px !important;
	border-radius: 0 0 999px 999px !important;
	background: linear-gradient(90deg, #244236 0%, #C7923E 100%) !important;
	opacity: 1 !important;
}

html body #ba-rewards-popup .ba-rewards-popup__header::after {
	content: "" !important;
	position: absolute !important;
	top: -95px !important;
	right: -75px !important;
	bottom: auto !important;
	left: auto !important;
	width: 220px !important;
	height: 220px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(36, 66, 54, 0.08) 0%, rgba(36, 66, 54, 0) 68%) !important;
	opacity: 1 !important;
	pointer-events: none !important;
}

html body #ba-rewards-popup .ba-rewards-popup__header p {
	margin: 0 0 6px !important;
	color: #6C756E !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

html body #ba-rewards-popup .ba-rewards-popup__header h2 {
	margin: 0 !important;
	color: #1E2521 !important;
	font-family: var(--wd-title-font, Georgia, serif) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.16 !important;
	letter-spacing: -0.02em !important;
}

html body #ba-rewards-popup .ba-rewards-popup__balance {
	align-self: center !important;
	padding: 9px 14px !important;
	border: 1px solid #D9D3C8 !important;
	border-radius: 999px !important;
	background: rgba(255, 253, 248, 0.84) !important;
	color: #244236 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	box-shadow: none !important;
}

html body #ba-rewards-popup .ba-rewards-popup__close {
	top: 14px !important;
	right: 14px !important;
	width: 36px !important;
	height: 36px !important;
	border: 1px solid rgba(36, 66, 54, 0.08) !important;
	border-radius: 50% !important;
	background: #F3EFE7 !important;
	color: #244236 !important;
	font-size: 28px !important;
	box-shadow: none !important;
}

html body #ba-rewards-popup .ba-rewards-popup__close:hover,
html body #ba-rewards-popup .ba-rewards-popup__close:focus-visible {
	background: #EAE4D9 !important;
	color: #315743 !important;
	transform: rotate(90deg) !important;
}

/* Popup body and cards */
html body #ba-rewards-popup .ba-rewards-popup__body {
	padding: 20px !important;
	background: linear-gradient(180deg, #FBFAF6 0%, #F3EFE7 100%) !important;
}

html body #ba-rewards-popup .ba-rewards-popup__view {
	gap: 18px !important;
}

html body #ba-rewards-popup .ba-rewards-popup-card {
	padding: 24px !important;
	border: 1px solid #D9D3C8 !important;
	border-top: 1px solid #D9D3C8 !important;
	border-radius: 20px !important;
	background: #FFFDF8 !important;
	box-shadow: 0 14px 34px rgba(26, 40, 33, 0.06) !important;
}

html body #ba-rewards-popup .ba-rewards-popup-card h3 {
	margin: 0 0 14px !important;
	color: #1E2521 !important;
	font-family: var(--wd-title-font, Georgia, serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-card p,
html body #ba-rewards-popup .ba-rewards-popup-rule p,
html body #ba-rewards-popup .ba-rewards-popup-rule small,
html body #ba-rewards-popup .ba-rewards-popup__stats {
	color: #6C756E !important;
}

/* Premium action buttons */
html body #ba-rewards-popup .ba-rewards-popup-nav,
html body #ba-rewards-popup .ba-rewards-popup__primary,
html body #ba-rewards-popup .ba-rewards-popup__secondary,
html body #ba-rewards-popup .ba-rewards-popup-rule form:not(.ba-rewards-popup-birthday) button,
html body #ba-rewards-popup .ba-rewards-popup-birthday button {
	border: 0 !important;
	background: #244236 !important;
	color: #FFFDF8 !important;
	box-shadow: 0 10px 22px rgba(36, 66, 54, 0.16) !important;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

html body #ba-rewards-popup .ba-rewards-popup-nav:hover,
html body #ba-rewards-popup .ba-rewards-popup__primary:hover,
html body #ba-rewards-popup .ba-rewards-popup__secondary:hover,
html body #ba-rewards-popup .ba-rewards-popup-rule form:not(.ba-rewards-popup-birthday) button:hover,
html body #ba-rewards-popup .ba-rewards-popup-birthday button:hover {
	background: #315743 !important;
	color: #FFFDF8 !important;
	box-shadow: 0 14px 28px rgba(36, 66, 54, 0.20) !important;
	transform: translateY(-1px) !important;
}

html body #ba-rewards-popup .ba-rewards-popup-nav {
	justify-content: flex-start !important;
	gap: 13px !important;
	min-height: 58px !important;
	padding: 0 19px !important;
	border-radius: 15px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-nav span {
	display: grid !important;
	place-items: center !important;
	width: 31px !important;
	height: 31px !important;
	border-radius: 50% !important;
	background: rgba(255, 253, 248, 0.13) !important;
	font-size: 16px !important;
}

/* Earning / Redeem heading */
html body #ba-rewards-popup .ba-rewards-popup__subheader {
	grid-template-columns: 42px minmax(0, 1fr) 42px !important;
	padding: 2px 2px 0 !important;
}

html body #ba-rewards-popup .ba-rewards-popup__subheader button {
	width: 40px !important;
	height: 40px !important;
	border: 1px solid rgba(36, 66, 54, 0.08) !important;
	background: #ECEFEA !important;
	color: #244236 !important;
	box-shadow: none !important;
}

html body #ba-rewards-popup .ba-rewards-popup__subheader h3 {
	margin: 0 !important;
	color: #1E2521 !important;
	font-family: var(--wd-title-font, Georgia, serif) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

/* Earning / Redeem cards */
html body #ba-rewards-popup .ba-rewards-popup-rule {
	grid-template-columns: 56px minmax(0, 1fr) !important;
	gap: 18px !important;
	align-items: start !important;
	overflow: hidden !important;
}

html body #ba-rewards-popup .ba-rewards-popup-rule > span {
	display: grid !important;
	place-items: center !important;
	width: 56px !important;
	height: 56px !important;
	border: 1px solid rgba(36, 66, 54, 0.06) !important;
	border-radius: 50% !important;
	background: linear-gradient(180deg, #F2F5F1 0%, #E8EDE9 100%) !important;
	font-size: 24px !important;
	box-shadow: none !important;
}

html body #ba-rewards-popup .ba-rewards-popup-rule > div {
	min-width: 0 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-rule strong {
	display: block !important;
	margin-bottom: 6px !important;
	color: #1E2521 !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

/* Birthday: 3 selectors on row 1, Set on row 2 */
html body #ba-rewards-popup .ba-rewards-popup-birthday {
	display: grid !important;
	grid-template-columns:
		minmax(92px, 0.82fr)
		minmax(150px, 1.28fr)
		minmax(118px, 1fr) !important;
	gap: 12px !important;
	align-items: center !important;
	width: 100% !important;
	margin-top: 14px !important;
}

html body #ba-rewards-popup .ba-rewards-popup-birthday select {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid #D9D3C8 !important;
	border-radius: 13px !important;
	background-color: #FFFDF8 !important;
	color: #1E2521 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 48px !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
}

html body #ba-rewards-popup .ba-rewards-popup-birthday select:hover {
	border-color: #BFC9C1 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-birthday select:focus {
	border-color: #244236 !important;
	box-shadow: 0 0 0 3px rgba(36, 66, 54, 0.10) !important;
}

html body #ba-rewards-popup .ba-rewards-popup-birthday button {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	border-radius: 13px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	justify-self: stretch !important;
}

/* Referral details */
html body #ba-rewards-popup .ba-rewards-popup-referral-link input {
	height: 48px !important;
	padding: 0 15px !important;
	border: 1px solid #D9D3C8 !important;
	border-radius: 13px 0 0 13px !important;
	background: #FBF9F4 !important;
	color: #1E2521 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-referral-link button {
	padding: 0 17px !important;
	border: 1px solid #D9D3C8 !important;
	border-left: 0 !important;
	border-radius: 0 13px 13px 0 !important;
	background: #EEEAE1 !important;
	color: #244236 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-referral-rewards {
	overflow: hidden !important;
	border: 1px solid #D9D3C8 !important;
	border-radius: 16px !important;
	background: #FBF9F4 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-referral-rewards > div {
	padding: 18px 14px !important;
}

html body #ba-rewards-popup .ba-rewards-popup-referral-rewards strong {
	color: #6C756E !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-referral-rewards span {
	color: #1E2521 !important;
	font-size: 23px !important;
	font-weight: 800 !important;
	line-height: 1.12 !important;
}

html body #ba-rewards-popup .ba-rewards-popup-share {
	justify-content: flex-start !important;
	gap: 10px !important;
}

html body #ba-rewards-popup .ba-rewards-popup-share a {
	padding: 9px 12px !important;
	border: 1px solid #D9D3C8 !important;
	border-radius: 12px !important;
	background: #FFFDF8 !important;
	color: #244236 !important;
	box-shadow: 0 4px 14px rgba(30, 37, 33, 0.04) !important;
}

html body #ba-rewards-popup .ba-rewards-popup-coupons code {
	padding: 8px 11px !important;
	border-radius: 10px !important;
	background: #EDF2EE !important;
	color: #244236 !important;
	font-weight: 800 !important;
}

/* Footer */
html body #ba-rewards-popup .ba-rewards-popup__footer {
	padding: 15px 18px !important;
	border-top: 1px solid #D9D3C8 !important;
	background: rgba(255, 253, 248, 0.94) !important;
	backdrop-filter: blur(10px) !important;
}

html body #ba-rewards-popup .ba-rewards-popup__footer a {
	color: #244236 !important;
	font-size: 14px !important;
}

/* Premium launcher */
html body #ba-rewards-launcher.ba-rewards-launcher {
	min-height: 56px !important;
	padding: 0 19px !important;
	border: 1px solid rgba(36, 66, 54, 0.14) !important;
	border-radius: 17px !important;
	background: rgba(255, 253, 248, 0.97) !important;
	color: #1E2521 !important;
	box-shadow: 0 18px 44px rgba(20, 34, 28, 0.16) !important;
	backdrop-filter: blur(12px) !important;
}

html body #ba-rewards-launcher.ba-rewards-launcher > span:first-child {
	background: #EDF2EE !important;
	color: #244236 !important;
}

html body #ba-rewards-launcher.ba-rewards-launcher span,
html body #ba-rewards-launcher.ba-rewards-launcher strong {
	color: #1E2521 !important;
}

html body #ba-rewards-launcher.ba-rewards-launcher strong {
	background: #F1EEE7 !important;
}

/* Responsive */
@media (max-width: 1024px) {
	html body #ba-rewards-popup.ba-rewards-popup {
		width: 100% !important;
		max-height: none !important;
		border-radius: 0 !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup__header {
		padding-top: max(23px, env(safe-area-inset-top)) !important;
	}
}

@media (max-width: 620px) {
	html body #ba-rewards-popup .ba-rewards-popup__body {
		padding: 15px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-card {
		padding: 19px !important;
		border-radius: 17px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-birthday {
		grid-template-columns:
			minmax(0, 0.85fr)
			minmax(0, 1.25fr)
			minmax(0, 1fr) !important;
		gap: 9px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-birthday select {
		height: 46px !important;
		padding: 0 10px !important;
		font-size: 14px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-birthday button {
		height: 46px !important;
	}
}

@media (max-width: 390px) {
	html body #ba-rewards-popup .ba-rewards-popup-rule {
		grid-template-columns: 48px minmax(0, 1fr) !important;
		gap: 12px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-rule > span {
		width: 48px !important;
		height: 48px !important;
		font-size: 21px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-rule strong {
		font-size: 17px !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-birthday {
		grid-template-columns: 1fr 1fr !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-birthday select:nth-of-type(3) {
		grid-column: 1 / -1 !important;
	}

	html body #ba-rewards-popup .ba-rewards-popup-birthday button {
		grid-column: 1 / -1 !important;
	}
}