/* The Rx Spot - Custom Styles */
/* Based on Editorial by HTML5 UP */

/* ========================================
   FEATURE FLAGS
   To re-enable a feature: comment out its rule block.
   ======================================== */

/* LEARN MORE BUTTONS — enabled.
   Previously hidden until individual product pages were built. Now routed to learn-more.html. */

/* ========================================
   SIDEBAR INDEPENDENT SCROLL
   On desktop (>large), the sidebar sticks to the viewport and its
   .inner scrolls independently from the main content. Hovering
   over the sidebar scrolls only the sidebar; hovering over the
   main content scrolls only the page.
   ======================================== */

@media screen and (min-width: 1281px) {
	#sidebar {
		position: sticky;
		top: 0;
		align-self: flex-start;
		height: 100vh;
		overscroll-behavior: contain;
	}

	#sidebar > .inner {
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* On mobile/tablet (<=large), sidebar is an overlay — keep contain to
   prevent scroll bleed when the panel is open. */
@media screen and (max-width: 1280px) {
	#sidebar {
		overscroll-behavior: contain;
	}

	#sidebar .inner {
		overscroll-behavior: contain;
		overflow-y: auto;
	}
}

/* ========================================
   ACCESSIBILITY HELPERS
   ======================================== */

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	z-index: 10001;
	padding: 0.6rem 0.9rem;
	border-radius: 0.5rem;
	background: #111827;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	outline: 3px solid color-mix(in srgb, var(--rxspot-primary, #f56a6a) 78%, #ffffff);
	outline-offset: 2px;
}

.rxspot-muted {
	color: #7f888f;
	font-size: 0.9em;
	margin: 0.5em 0 1em 0;
}

:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--rxspot-primary, #f56a6a) 82%, #ffffff);
	outline-offset: 3px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: var(--rxspot-nav-logo-gap, 0.8em);
}

#header .logo {
	padding-left: calc(clamp(0.85rem, 2vw, 1.35rem) + var(--rxspot-nav-logo-offset, 25px));
}

.rxspot-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rxspot-nav-logo-size, 4.5rem);
	height: var(--rxspot-nav-logo-size, 4.5rem);
	overflow: hidden;
	flex-shrink: 0;
}

.rxspot-logo-mark img {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #ffffff;
}

.rxspot-logo-mark[data-rxspot-logo-active="1"] img {
	display: block;
}

.rxspot-logo-mark[data-rxspot-logo-active="1"] {
	width: fit-content;
	min-width: 0;
	max-width: none;
	padding: 0;
	border-radius: 0;
	background: transparent !important;
	overflow: visible;
	justify-content: flex-start;
}

.rxspot-logo-mark[data-rxspot-logo-active="1"] img {
	display: block;
	width: auto;
	max-width: var(--rxspot-nav-logo-max-width, 14rem);
	height: 100%;
	object-position: left center;
}

.rxspot-logo-mark[data-rxspot-logo-active="1"] .rxspot-logo-fallback {
	display: none;
}

.rxspot-logo-fallback {
	color: var(--rxspot-primary, #f56a6a);
	font-size: 1rem;
}

.rxspot-logo-text {
	min-width: 0;
}

.logo[data-rxspot-wordmark-active="1"] {
	gap: 0;
}

#header .logo[data-rxspot-wordmark-active="1"] {
	padding-left: calc(clamp(0.35rem, 0.9vw, 0.65rem) + var(--rxspot-nav-logo-active-offset, 8px));
}

.logo[data-rxspot-wordmark-active="1"] .rxspot-logo-text {
	display: none;
}

#header {
	border-bottom-color: var(--rxspot-primary, #f56a6a);
}

.header-nav a:hover,
.header-nav a:focus,
.footer-links a:hover,
.footer-links a:focus {
	color: var(--rxspot-primary, #f56a6a);
}

.button.primary,
.button.primary:hover,
.button.primary:focus {
	background: var(--rxspot-primary, #f56a6a);
	border-color: var(--rxspot-primary, #f56a6a);
}

.button.alt,
.button.alt:hover,
.button.alt:focus {
	color: var(--rxspot-secondary, #7f888f);
	border-color: var(--rxspot-secondary, rgba(127, 136, 143, 0.55));
}

.category-card {
	border-color: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 18%, transparent);
}

.category-card .icon,
.sticky-cart-total,
.sticky-cart-count,
.price,
.product-card .price {
	color: var(--rxspot-accent, var(--rxspot-primary, #f56a6a));
}

.category-card:hover,
.product-card:hover,
.faq-item.active,
.faq-question:hover {
	border-color: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 28%, transparent);
	background-color: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 7%, #ffffff);
}

.trust-badge,
.eligibility-card,
.eligibility-panel,
.checkout-sidebar,
#bookingRequirementsArea,
#rxspot-provider-status {
	border-color: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 16%, rgba(210, 215, 217, 0.75));
}

.hero-section {
	background-color: color-mix(in srgb, var(--rxspot-background, #f5f5f5) 88%, #ffffff);
}

.rxspot-flow-note {
	margin: 1rem 0 0;
	color: color-mix(in srgb, var(--rxspot-text, #3d4449) 82%, #ffffff);
	font-size: 0.95rem;
	max-width: 36rem;
}

body {
	background-color: var(--rxspot-background, #ffffff);
	color: var(--rxspot-text, inherit);
}

@media (prefers-reduced-motion: reduce) {
	#cart-sidebar,
	#sticky-cart-bar {
		transition: none !important;
	}
}

/* ========================================
   CART STYLES
   ======================================== */

/* Cart Badge */
.cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rxspot-primary, #f56a6a);
	color: #ffffff;
	font-size: 0.65em;
	font-weight: 700;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.4em;
	line-height: 1;
	text-align: center;
	border-radius: 0.75em;
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	white-space: nowrap;
	max-width: 4em;
	overflow: hidden;
	text-overflow: ellipsis;
}

#cart-toggle {
	position: relative;
}

@media screen and (max-width: 736px) {
	#header .logo[data-rxspot-wordmark-active="1"] {
		padding-left: calc(0.2rem + var(--rxspot-nav-logo-active-offset, 6px));
	}

	.rxspot-logo-mark[data-rxspot-logo-active="1"] img {
		max-width: min(var(--rxspot-nav-logo-max-width, 12rem), 55vw);
	}
}

/* Cart Sidebar */
#cart-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	width: 26em;
	height: 100vh;
	background: #f5f6f7;
	z-index: 10000;
	transform: translateX(100%);
	transition: transform 0.5s ease;
	box-shadow: -5px 0 5em 0 rgba(0, 0, 0, 0.175);
	overflow-y: auto;
}

#cart-sidebar:not(.inactive) {
	transform: translateX(0);
}

#cart-sidebar .inner {
	padding: 2.22em;
}

#cart-sidebar .toggle {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	cursor: pointer;
	color: #7f888f;
}

#cart-sidebar .toggle:before {
	content: '\f00d';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

/* Cart Items */
.cart-item {
	display: flex;
	align-items: center;
	padding: 1em 0;
	border-bottom: 1px solid rgba(210, 215, 217, 0.75);
}

.cart-item-image {
	width: 4em;
	height: 4em;
	border-radius: 0.375em;
	overflow: hidden;
	margin-right: 1em;
	flex-shrink: 0;
}

.cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-item-details {
	flex-grow: 1;
}

.cart-item-name {
	font-weight: 600;
	color: #3d4449;
	margin-bottom: 0.25em;
}

.cart-item-price {
	color: var(--rxspot-primary, #f56a6a);
	font-weight: 600;
}

.cart-item-quantity {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

/* Quantity number display */
.cart-item-quantity span {
	min-width: 1.75rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	color: #3d4449;
	user-select: none;
}

/* Compact circular quantity buttons (- and +) */
.cart-item-quantity .button.quantity-btn {
	width: 1.925rem;
	height: 1.925rem;
	min-width: auto;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	border-radius: 50%;
	background: transparent;
	border: none !important;
	box-shadow: none !important;
	color: var(--rxspot-primary, #f56a6a) !important;
	transition: all 0.15s ease;
}

.cart-item-quantity .button.quantity-btn:hover,
.cart-item-quantity .button.quantity-btn:focus {
	background: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 10%, transparent);
	box-shadow: none !important;
	transform: scale(1.05);
}

.cart-item-quantity .button.quantity-btn:active {
	transform: scale(0.95);
}

/* Text link style for Remove - lighter visual weight */
.cart-item-quantity .button.remove-btn {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #9fa3a6 !important;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 0.25rem 0.5rem;
	min-width: auto;
	margin-left: 0.5rem;
	transition: color 0.15s ease;
}

.cart-item-quantity .button.remove-btn:hover,
.cart-item-quantity .button.remove-btn:focus {
	color: #e74c3c !important;
	box-shadow: none;
	background: transparent;
}

/* Cart Summary */
.cart-subtotal {
	padding: 1.5em 0;
	border-top: 2px solid rgba(210, 215, 217, 0.75);
	font-size: 1.1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#cart-subtotal-amount,
#cart-sidebar-subtotal {
	color: var(--rxspot-primary, #f56a6a);
	font-weight: 700;
}

.cart-disclaimer {
	font-size: 0.8em;
	color: #9fa3a6;
	font-style: italic;
	margin-bottom: 1.5em;
}

.cart-empty {
	color: #9fa3a6;
	font-style: italic;
	text-align: center;
	padding: 2em 0;
}

/* Sticky Cart Bar */
#sticky-cart-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ffffff;
	border-top: solid 2px rgba(210, 215, 217, 0.75);
	padding: 1em 2em;
	padding-bottom: calc(1em + env(safe-area-inset-bottom));
	z-index: 9999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

#sticky-cart-bar.active {
	transform: translateY(0);
}

.sticky-cart-info {
	display: flex;
	align-items: center;
	gap: 1em;
}

.sticky-cart-count {
	background: var(--rxspot-primary, #f56a6a);
	color: #ffffff;
	min-width: 2.5em;
	height: 2.5em;
	border-radius: 1.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	padding: 0 0.6em;
	white-space: nowrap;
	max-width: 5em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-cart-total {
	font-size: 1.2em;
	font-weight: 700;
	color: #3d4449;
}

.sticky-cart-total span {
	color: var(--rxspot-primary, #f56a6a);
}

.sticky-cart-actions {
	display: flex;
	gap: 1em;
}

#cart-sidebar-legacy,
#cart-sidebar-legacy-checkout {
	display: none !important;
}

/* ========================================
   PRODUCT GRID & CARDS
   ======================================== */

.product-grid {
	margin-bottom: 2em;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2em;
}

.posts.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2em;
	margin: 0 0 2em 0;
	width: 100%;
}

.posts.product-grid article {
	width: 100%;
	margin: 0;
}

.posts.product-grid article:before,
.posts.product-grid article:after {
	display: none;
}

@media screen and (max-width: 1280px) {
	.posts.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 736px) {
	.posts.product-grid {
		grid-template-columns: 1fr;
		gap: 1.5em;
	}
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product-card .image {
	display: block;
	position: relative;
	width: 100%;
	height: clamp(9rem, 15vw, 11.5rem);
	background: #f5f6f7;
	border-radius: 0.375em;
	overflow: hidden;
	border: 1px solid rgba(210, 215, 217, 0.75);
}

.product-card .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.product-card .image img[src=""],
.product-card .image img:not([src]) {
	display: none;
}

.product-card .image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
	z-index: 0;
}

.product-card .image::before {
	content: '\f468';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3em;
	color: #c0c0c0;
	z-index: 1;
}

.product-card h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.product-card .product-description {
	flex-grow: 1;
	margin-bottom: 1em;
}

.product-card .price {
	color: var(--rxspot-primary, #f56a6a);
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 1em;
}

.product-card .actions {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.product-card .actions li {
	margin: 0;
}

.product-card .button.alt {
	box-shadow: inset 0 0 0 2px rgba(210, 215, 217, 0.75);
	color: #7f888f;
}

.product-card .button.alt:hover {
	box-shadow: inset 0 0 0 2px var(--rxspot-primary, #f56a6a);
	color: var(--rxspot-primary, #f56a6a);
}

@media screen and (max-width: 736px) {
	.product-card .image {
		height: 10rem;
	}
}

.product-card.in-cart .add-to-cart {
	background: var(--rxspot-primary, #f56a6a);
	color: #ffffff;
}

/* ========================================
   CATEGORY CARDS
   ======================================== */

.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5em;
	margin: 2em 0;
}

@media screen and (max-width: 736px) {
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1em;
	}
	
	.category-card {
		padding: 1.5em 1em;
	}
	
	.category-card .icon {
		font-size: 2em;
	}
}

.category-card {
	background: #f5f6f7;
	border-radius: 0.375em;
	padding: 2em 1.5em;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
	text-decoration: none;
	border: none;
	display: block;
}

.category-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.category-card .icon {
	font-size: 2.5em;
	color: #f56a6a;
	margin-bottom: 0.5em;
	display: block;
}

.category-card h3 {
	color: #3d4449;
	font-size: 1em;
	margin: 0;
	font-family: "Roboto Slab", serif;
}

/* ========================================
   SEARCH BAR
   ======================================== */

.search-bar {
	background: #f5f6f7;
	padding: 1em 0;
	margin-bottom: 2em;
	border-radius: 0.375em;
}

.search-bar form {
	display: flex;
	gap: 0.5em;
	padding: 0 1em;
}

.search-bar input[type="text"] {
	flex-grow: 1;
	margin-bottom: 0;
}

/* ========================================
   HEADER CUSTOMIZATION
   ======================================== */

#header .icons {
	display: flex;
	align-items: center;
	gap: 1em;
}

#header .icons li {
	margin-left: 0;
}

/* Header Navigation */
.header-nav {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 1em 0 auto;
	gap: 1.5em;
}

.header-nav li {
	margin: 0;
}

.header-nav a {
	color: #7f888f;
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	border-bottom: none;
}

.header-nav a:hover {
	color: var(--rxspot-primary, #f56a6a);
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero-section {
	background: linear-gradient(135deg, #3d4449 0%, #1e2529 100%);
	color: #ffffff;
	padding: 4em 3em;
	border-radius: 0.375em;
	margin-bottom: 3em;
	position: relative;
	overflow: hidden;
	min-height: 300px;
	display: flex;
	align-items: center;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: url('../../images/pic10.jpg') center/cover;
	opacity: 0.3;
}

.hero-section[data-rxspot-hero-url]:not([data-rxspot-hero-url=""])::before {
	background-image: var(--rxspot-hero-image);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 60%;
	padding-right: 2em;
}

.hero-section h1 {
	color: #ffffff;
	font-size: 2.5em;
	margin-bottom: 0.75em;
	line-height: 1.2;
}

.hero-section p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.2em;
	margin-bottom: 1.75em;
	line-height: 1.5;
}

.hero-section .button {
	background: var(--rxspot-primary, #f56a6a);
	color: #ffffff !important;
}

.hero-section .button:hover {
	background: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 88%, #000000);
}

/* Beat branding-injector's .button.alt secondary-color override (same specificity but later-declared).
   #main prefix gives (1,3,0) which wins over the injected (0,2,0) + !important. */
#main .hero-section .button.alt,
#main .hero-section .button.alt:hover,
#main .hero-section .button.alt:focus {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	color: #ffffff !important;
}

@media screen and (max-width: 980px) {
.hero-section::before {
		display: none;
	}
	
	.hero-content {
		max-width: 100%;
	}
}

/* ========================================
   GLOBAL STYLES BRIDGE
   ======================================== */

body {
	--rxspot-editorial-surface: color-mix(in srgb, var(--rxspot-background, #ffffff) 92%, #eff1f2);
	--rxspot-editorial-muted: var(--rxspot-secondary, #7f888f);
	--rxspot-editorial-hero-start: color-mix(in srgb, var(--rxspot-text, #3d4449) 82%, #111827);
	--rxspot-editorial-hero-end: color-mix(in srgb, var(--rxspot-text, #3d4449) 56%, #111827);
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6,
#main strong,
#main b,
#main p,
#main li,
#main td,
#main th,
#main label,
#main input,
#main select,
#main textarea,
#header .icons a,
#menu ul,
#menu ul a,
#menu ul span,
.search-bar input[type="text"],
.checkout-total,
.checkout-item,
.checkout-sidebar h3,
.eligibility-card,
.eligibility-panel,
.eligibility-sidebar-panel,
.progress-step.active .step-label {
	color: var(--rxspot-text, #3d4449);
}

#header .icons a:hover,
#header .icons a:focus,
#menu ul a:hover,
#menu ul span:hover,
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before,
ul.contact li:before {
	color: var(--rxspot-primary, #f56a6a);
}

#menu ul a.opener:before,
#menu ul span.opener:before,
.progress-step .step-label,
.rxspot-muted,
.trust-section .subtitle {
	color: var(--rxspot-editorial-muted);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea,
select option {
	background: var(--rxspot-background, #ffffff);
	color: var(--rxspot-text, #3d4449);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
	border-color: var(--rxspot-primary, #f56a6a);
	box-shadow: 0 0 0 1px var(--rxspot-primary, #f56a6a);
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
	background: var(--rxspot-text, #3d4449);
	border-color: var(--rxspot-text, #3d4449);
	color: #ffffff;
}

#sidebar,
#sidebar > .inner,
.trust-section,
.checkout-main,
.checkout-sidebar,
.eligibility-form,
.eligibility-sidebar-panel,
#cart-sidebar .inner {
	background: var(--rxspot-editorial-surface);
}

#sidebar {
	font-size: 1.15em;
}

.hero-section {
	background: linear-gradient(135deg, var(--rxspot-editorial-hero-start) 0%, var(--rxspot-editorial-hero-end) 100%);
}

/* Beat #main p (1,0,1) from Global Styles Bridge. Using (1,2,1) + !important wins. */
#main .hero-section h1,
#main .hero-section p {
	color: #ffffff !important;
}

ul.pagination li > .page.active {
	background-color: var(--rxspot-primary, #f56a6a);
	color: #ffffff !important;
}

/* ========================================
   TRUST SECTION
   ======================================== */

.trust-section {
	background: #f5f6f7;
	padding: 4em 3em;
	border-radius: 0.375em;
	margin: 3em 0;
	text-align: center;
}

.trust-section h2 {
	margin-bottom: 0.5em;
}

.trust-section .subtitle {
	color: #7f888f;
	margin-bottom: 2em;
	font-size: 1.1em;
}

.trust-badges {
	display: flex;
	justify-content: center;
	gap: 3em;
	flex-wrap: wrap;
	margin-top: 2em;
}

.trust-badge {
	text-align: center;
}

.trust-badge .icon {
	font-size: 2em;
	color: #f56a6a;
	margin-bottom: 0.5em;
}

.trust-badge p {
	color: #3d4449;
	font-weight: 600;
	font-size: 0.9em;
	margin: 0;
}

/* ========================================
   MAIN FOOTER
   ======================================== */

#main-footer {
	border-top: solid 2px rgba(210, 215, 217, 0.75);
	padding: 4em 0 2em 0;
	margin-top: 4em;
}

#main-footer.dark-footer {
	background: #1e2529;
	color: rgba(255, 255, 255, 0.7);
	margin: 4em -3em -3em -3em;
	padding: 4em 3em 2em 3em;
	border-top: none;
}

#main-footer.dark-footer h4 {
	color: #ffffff;
}

#main-footer.dark-footer .logo {
	color: #ffffff;
}

#main-footer.dark-footer .logo strong {
	color: #ffffff;
}

#main-footer.dark-footer p {
	color: rgba(255, 255, 255, 0.7);
}

#main-footer.dark-footer a {
	color: rgba(255, 255, 255, 0.7);
}

#main-footer.dark-footer a:hover {
	color: #f56a6a;
}

#main-footer.dark-footer .copyright {
	border-top-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.5);
}

.footer-content {
	display: flex;
	flex-wrap: wrap;
	gap: 3em;
	margin-bottom: 3em;
}

.footer-section {
	flex: 1;
	min-width: 200px;
}

.footer-section:first-child {
	flex: 2;
}

.footer-section h4 {
	color: #3d4449;
	font-family: "Roboto Slab", serif;
	font-size: 1.1em;
	margin-bottom: 1em;
}

.footer-section p {
	color: #7f888f;
	font-size: 0.9em;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 0.5em;
}

.footer-links a {
	color: #7f888f;
	border-bottom: none;
	font-size: 0.9em;
}

.footer-links a:hover {
	color: #f56a6a;
}

#main-footer .copyright {
	border-top: 1px solid rgba(210, 215, 217, 0.75);
	padding-top: 2em;
	text-align: center;
	color: #9fa3a6;
	font-size: 0.9em;
}

/* ========================================
   CART SECTION IN SIDEBAR
   ======================================== */

#cart-section {
	border-top: solid 2px rgba(210, 215, 217, 0.75);
	padding-top: 2em;
	margin-top: 2em;
}

#cart-items {
	margin-bottom: 1em;
}

/* ========================================
   AUTH PAGES (LOGIN/SIGNUP)
   ======================================== */

.auth-container {
	max-width: 500px;
	margin: 0 auto;
	padding: 3em 2em;
	background: #f5f6f7;
	border-radius: 0.375em;
}

.auth-container h2 {
	text-align: center;
	margin-bottom: 0.5em;
}

.auth-container .auth-subtitle {
	text-align: center;
	color: #7f888f;
	margin-bottom: 2em;
}

.auth-form .field {
	margin-bottom: 1.5em;
}

.auth-form label {
	display: block;
	margin-bottom: 0.5em;
	color: #3d4449;
	font-weight: 600;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form input[type="date"],
.auth-form select {
	width: 100%;
	background: #ffffff;
}

.auth-form .field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

.auth-form .actions {
	text-align: center;
	margin-top: 2em;
}

.auth-form .actions .button {
	width: 100%;
}

.auth-links {
	text-align: center;
	margin-top: 1.5em;
}

.auth-links a {
	color: #f56a6a;
}

.password-requirements {
	background: #ffffff;
	padding: 1em;
	border-radius: 0.375em;
	margin-top: 0.5em;
	font-size: 0.85em;
}

.password-requirements ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.password-requirements li {
	color: #9fa3a6;
	margin-bottom: 0.3em;
}

.password-requirements li.met {
	color: #2ecc71;
}

.password-requirements li:before {
	content: '\f00d';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.5em;
}

.password-requirements li.met:before {
	content: '\f00c';
}

/* ========================================
   CHECKOUT PROGRESS
   ======================================== */

.checkout-progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3em;
	position: relative;
}

.checkout-progress::before {
	content: '';
	position: absolute;
	top: 1.25em;
	left: 10%;
	right: 10%;
	height: 2px;
	background: rgba(210, 215, 217, 0.75);
	z-index: 0;
}

.progress-step {
	text-align: center;
	position: relative;
	z-index: 1;
	background: #ffffff;
	padding: 0 1em;
}

.progress-step .step-number {
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: rgba(210, 215, 217, 0.75);
	color: #7f888f;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.5em;
	font-weight: 700;
}

.progress-step.active .step-number {
	background: #f56a6a;
	color: #ffffff;
}

.progress-step.completed .step-number {
	background: #2ecc71;
	color: #ffffff;
}

.progress-step .step-label {
	font-size: 0.85em;
	color: #7f888f;
	font-weight: 600;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.progress-step.active .step-label {
	color: #3d4449;
}

/* Checkout Container */
.checkout-container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3em;
	width: 100%;
}

.checkout-container > * {
	min-width: 0;
}

.checkout-main {
	background: #f5f6f7;
	padding: 2em;
	border-radius: 0.375em;
}

.checkout-sidebar {
	background: #f5f6f7;
	padding: 2em;
	border-radius: 0.375em;
	height: fit-content;
	position: sticky;
	top: 1.5em;
	align-self: start;
}

.checkout-sidebar h3 {
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid rgba(210, 215, 217, 0.75);
}

.checkout-item {
	display: flex;
	justify-content: space-between;
	padding: 0.75em 0;
	border-bottom: 1px solid rgba(210, 215, 217, 0.75);
}

.checkout-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.6em 0;
	font-size: 1em;
	font-weight: 400;
	border-top: 1px solid rgba(210, 215, 217, 0.75);
}

/* Only the last total row (Grand Total) gets the heavy treatment */
.checkout-total:last-of-type {
	font-size: 1.15em;
	font-weight: 700;
	border-top: 2px solid rgba(210, 215, 217, 0.75);
	margin-top: 0.5em;
	padding-top: 0.85em;
}

.checkout-total .amount {
	color: var(--rxspot-primary, #f56a6a);
}

@media screen and (max-width: 980px) {
	.checkout-container {
		grid-template-columns: 1fr;
		gap: 2em;
	}
}

/* ========================================
   ELIGIBILITY FORM
   ======================================== */

.eligibility-form {
	background: #f5f6f7;
	padding: 2em;
	border-radius: 0.375em;
}

.eligibility-form .question-group {
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 1px solid rgba(210, 215, 217, 0.75);
}

.eligibility-form .question-group:last-child {
	border-bottom: none;
}

.eligibility-form .question {
	font-weight: 600;
	color: #3d4449;
	margin-bottom: 1em;
}

.eligibility-form .options {
	display: flex;
	gap: 2em;
}

.eligibility-form .option {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.eligibility-form input[type="radio"] {
	margin: 0;
}

.eligibility-form textarea {
	width: 100%;
	margin-top: 1em;
}

.eligibility-layout {
	display: grid;
	gap: 1.5em;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}

.eligibility-panel {
	background: #f5f6f7;
	padding: 2em;
	border-radius: 0.375em;
}

.eligibility-sidebar-panel {
	position: sticky;
	top: 2em;
}

.eligibility-checklist {
	margin: 0;
	padding-left: 1.2em;
	color: #3d4449;
}

.eligibility-checklist li + li {
	margin-top: 0.85em;
}

.eligibility-cards {
	display: grid;
	gap: 1em;
}

.eligibility-card {
	background: #ffffff;
	border-radius: 0.375em;
	padding: 1.25em;
	border: 1px solid rgba(210, 215, 217, 0.75);
}

.eligibility-card h4 {
	margin-bottom: 0.4em;
}

.eligibility-cart-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.eligibility-cart-item,
.eligibility-cart-total {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.eligibility-cart-item + .eligibility-cart-item {
	margin-top: 0.85em;
	padding-top: 0.85em;
	border-top: 1px solid rgba(210, 215, 217, 0.75);
}

.eligibility-cart-name {
	color: #3d4449;
	font-weight: 600;
}

.eligibility-cart-price {
	color: #7f888f;
	white-space: nowrap;
}

.eligibility-cart-total {
	margin-top: 1.25em;
	padding-top: 1em;
	border-top: 1px solid rgba(210, 215, 217, 0.75);
	color: #3d4449;
}

.eligibility-empty,
.eligibility-note {
	color: #7f888f;
	margin: 0;
}

.eligibility-actions {
	margin-top: 1.5em;
}

.eligibility-actions .button {
	width: 100%;
}

/* ========================================
   TELEHEALTH QUESTIONNAIRE
   ======================================== */

.telehealth-hero {
	display: flex;
	align-items: center;
	gap: 3em;
	padding: 3em;
	margin-bottom: 2.5em;
	background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 50%, #f5f7fa 100%);
	border-radius: 12px;
	overflow: hidden;
}

.telehealth-hero-illustration {
	flex: 0 0 auto;
	max-width: 360px;
	width: 40%;
}

.telehealth-hero-illustration svg {
	width: 100%;
	height: auto;
	display: block;
}

.telehealth-hero-content {
	flex: 1;
}

.telehealth-hero-content h1 {
	font-size: 2.4em;
	line-height: 1.15;
	margin-bottom: 0.5em;
	color: var(--rxspot-text, #1a2332);
}

.telehealth-hero-content p {
	color: var(--rxspot-editorial-muted);
	font-size: 1.1em;
	margin-bottom: 1.5em;
	line-height: 1.5;
}

.telehealth-hero-content .button.primary {
	padding: 0.9em 2.5em;
	font-size: 1em;
	border-radius: 8px;
}

.telehealth-hero-content .telehealth-alt-link {
	display: block;
	margin-top: 1em;
	color: var(--rxspot-editorial-muted);
	font-size: 0.9em;
}

.telehealth-hero-content .telehealth-alt-link::before {
	content: '\f111';
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	font-size: 0.5em;
	vertical-align: middle;
	margin-right: 0.75em;
	color: var(--rxspot-editorial-muted);
}

.telehealth-questionnaire {
	background: #ffffff;
	border: 1px solid rgba(210, 215, 217, 0.6);
	border-radius: 12px;
	padding: 2.5em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.telehealth-questionnaire h2 {
	font-size: 1.75em;
	margin-bottom: 0.3em;
}

.telehealth-questionnaire .telehealth-subtitle {
	color: var(--rxspot-editorial-muted);
	margin-bottom: 2em;
	font-size: 0.95em;
}

.telehealth-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
}

.telehealth-field {
	margin-bottom: 1.5em;
}

.telehealth-field label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 600;
	color: var(--rxspot-text, #3d4449);
	margin-bottom: 0.6em;
	font-size: 0.95em;
}

.telehealth-field label .icon {
	color: var(--rxspot-primary, #4a90d9);
	font-size: 0.95em;
	width: 1.2em;
	text-align: center;
}

.telehealth-field-wrap {
	position: relative;
}

.telehealth-field-wrap .field-icon {
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
	color: #b0b8c1;
	font-size: 0.9em;
	pointer-events: none;
}

.telehealth-field-wrap input,
.telehealth-field-wrap select,
.telehealth-field-wrap textarea {
	width: 100%;
	padding: 0.85em 1em 0.85em 2.8em;
	border: 1px solid rgba(210, 215, 217, 0.85);
	border-radius: 8px;
	font-size: 0.95em;
	background: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.telehealth-field-wrap textarea {
	padding-left: 1em;
	min-height: 120px;
	resize: vertical;
}

.telehealth-field-wrap input:focus,
.telehealth-field-wrap select:focus,
.telehealth-field-wrap textarea:focus {
	border-color: var(--rxspot-primary, #4a90d9);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rxspot-primary, #4a90d9) 15%, transparent);
	outline: none;
}

.telehealth-questionnaire .button.primary {
	padding: 0.85em 2.5em;
	border-radius: 8px;
	font-size: 1em;
	margin-top: 0.5em;
}

.telehealth-trust {
	display: flex;
	justify-content: center;
	gap: 3em;
	flex-wrap: wrap;
	padding: 2.5em 0;
	margin-top: 2em;
}

.telehealth-trust-badge {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.75em 1.25em;
	background: var(--rxspot-editorial-surface);
	border-radius: 50px;
	border: 1px solid rgba(210, 215, 217, 0.5);
}

.telehealth-trust-badge .badge-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	flex-shrink: 0;
}

.telehealth-trust-badge:nth-child(1) .badge-icon {
	background: #e8f5e9;
	color: #43a047;
}

.telehealth-trust-badge:nth-child(2) .badge-icon {
	background: #fff3e0;
	color: #ef6c00;
}

.telehealth-trust-badge:nth-child(3) .badge-icon {
	background: #e3f2fd;
	color: #1976d2;
}

.telehealth-trust-badge .badge-text strong {
	display: block;
	font-size: 0.9em;
	color: var(--rxspot-text, #3d4449);
}

.telehealth-trust-badge .badge-text span {
	font-size: 0.8em;
	color: var(--rxspot-editorial-muted);
}

@media screen and (max-width: 980px) {
	.telehealth-hero {
		flex-direction: column;
		text-align: center;
		padding: 2.5em 2em;
	}

	.telehealth-hero-illustration {
		max-width: 280px;
		width: 60%;
	}
}

@media screen and (max-width: 736px) {
	.telehealth-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.telehealth-questionnaire {
		padding: 1.5em;
	}

	.telehealth-hero {
		padding: 2em 1.5em;
	}

	.telehealth-hero-content h1 {
		font-size: 1.75em;
	}

	.telehealth-trust {
		gap: 1em;
	}

	.telehealth-trust-badge {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ========================================
   FAQ ACCORDION
   ======================================== */

.faq-container {
	max-width: 800px;
	margin: 0 auto;
}

.faq-intro {
	text-align: center;
	margin-bottom: 2em;
	color: #7f888f;
}

.faq-item {
	background: #f5f6f7;
	border-radius: 0.375em;
	margin-bottom: 1em;
	overflow: hidden;
}

.faq-question {
	padding: 1.25em 1.5em;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	color: #3d4449;
	transition: background 0.2s ease;
}

.faq-question:hover {
	background: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 10%, #ffffff);
}

.faq-question::after {
	content: '\f067';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: var(--rxspot-primary, #f56a6a);
	transition: transform 0.2s ease;
}

.faq-item.active .faq-question::after {
	content: '\f068';
}

.faq-answer {
	padding: 0 1.5em;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
	padding: 0 1.5em 1.5em 1.5em;
	max-height: 500px;
}

.faq-answer p {
	margin: 0;
	color: #7f888f;
}

/* ========================================
   CATEGORY NAV DROPDOWN - NO ICONS
   ======================================== */

/* Suppress any broken icon/SVG elements inside sidebar nav category items */
#menu > ul > li > ul > li a > i,
#menu > ul > li > ul > li a > svg,
[data-rxspot-category-filter-mount] li a > i,
[data-rxspot-category-filter-mount] li a > svg {
	display: none !important;
}

/* Never show pseudo-icon glyphs on generated sidebar category items. */
#menu > ul > li > ul > li::before,
#menu > ul > li > ul > li a::before,
[data-rxspot-category-filter-mount] li::before,
[data-rxspot-category-filter-mount] li a::before {
	content: none !important;
	display: none !important;
}

/* Ensure no list markers appear in category dropdown (belt + suspenders) */
#menu > ul > li > ul,
[data-rxspot-category-filter-mount] {
	list-style: none !important;
}

/* ========================================
   CATEGORY FILTER SIDEBAR
   ======================================== */

.category-filter {
	list-style: none;
	padding: 0;
	margin: 0;
}

.category-filter li {
	margin: 0;
	border-bottom: 1px solid rgba(210, 215, 217, 0.75);
}

.category-filter li:last-child {
	border-bottom: none;
}

.category-filter a {
	display: block;
	padding: 0.75em 0;
	color: #7f888f;
	border-bottom: none;
	transition: color 0.2s ease;
}

.category-filter a:hover,
.category-filter a.active {
	color: var(--rxspot-primary, #f56a6a);
}

.category-filter a.active {
	font-weight: 600;
}

/* ========================================
   MOBILE MENU TOGGLE (hamburger icon)
   ======================================== */

.mobile-menu-toggle {
	display: none;
}

@media screen and (max-width: 980px) {
	.mobile-menu-toggle {
		display: list-item;
	}
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media screen and (max-width: 1280px) {
	#cart-sidebar {
		width: 24em;
	}
	
	#cart-sidebar .inner {
		padding: 1.67em;
	}
}

@media screen and (max-width: 980px) {
	html, body {
		overflow-x: hidden;
	}

	#cart-sidebar {
		width: 100%;
		transform: translateX(100%);
	}
	
	.footer-content {
		flex-direction: column;
		gap: 2em;
	}
	
	.footer-section:first-child {
		flex: 1;
	}
	
	.header-nav {
		display: none;
	}
	
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.eligibility-layout {
		grid-template-columns: 1fr;
	}

	.eligibility-sidebar-panel {
		position: static;
	}
	
	.progress-step .step-label {
		font-size: 0.75em;
	}
}

@media screen and (max-width: 736px) {
	.search-bar form {
		flex-direction: column;
	}
	
	.product-card .actions {
		flex-direction: column;
	}
	
	.product-card .actions li {
		width: 100%;
	}
	
	.product-card .button {
		width: 100%;
	}
	
	.auth-form .field-row {
		grid-template-columns: 1fr;
	}
	
	.checkout-progress {
		flex-wrap: wrap;
		gap: 1em;
	}
	
	.checkout-progress::before {
		display: none;
	}
	
	.progress-step {
		flex: 1;
		min-width: 100px;
	}
	
	.category-grid {
		grid-template-columns: 1fr;
	}

	.eligibility-panel {
		padding: 1.5em;
	}
	
	#sticky-cart-bar {
		flex-direction: column;
		gap: 1em;
		padding: 1em;
	}
	
	.sticky-cart-actions {
		width: 100%;
	}
	
	.sticky-cart-actions .button {
		flex: 1;
	}
}

@media screen and (max-width: 480px) {
	#cart-sidebar .inner {
		padding: 1em;
	}
	
	.cart-item {
		flex-wrap: wrap;
	}
	
	.cart-item-image {
		width: 3em;
		height: 3em;
	}
	
	/* Stack remove button below quantity on very small screens */
	.cart-item-quantity {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	
	.cart-item-quantity .button.remove-btn {
		margin-left: 0;
		width: 100%;
		text-align: left;
		padding-left: 0;
	}
	
	.hero-section {
		padding: 2em 1.5em;
	}
	
	.hero-section h1 {
		font-size: 1.75em;
	}
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
	display: none !important;
}

.text-center {
	text-align: center;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mt-2 {
	margin-top: 2em !important;
}

.mt-4 {
	margin-top: 4em !important;
}

/* Wrapper adjustment for sticky cart */
body.has-sticky-cart #wrapper {
	padding-bottom: calc(8em + env(safe-area-inset-bottom));
}

/* ========================================
   TOASTS (Editorial cart feedback)
   ======================================== */

#rxspot-toast-root {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 10002;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	pointer-events: none;
}

.rxspot-toast {
	pointer-events: auto;
	width: min(560px, 100%);
	background: #111827;
	color: #ffffff;
	border-radius: 0.75rem;
	padding: 0.75rem 0.9rem;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.rxspot-toast.show {
	opacity: 1;
	transform: translateY(0);
}

.rxspot-toast-msg {
	font-size: 0.95rem;
	line-height: 1.2;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rxspot-toast-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
}

.rxspot-toast-action {
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border-radius: 0.6rem;
	padding: 0.35rem 0.6rem;
	font-weight: 700;
	cursor: pointer;
}

.rxspot-toast-action:hover {
	background: rgba(255, 255, 255, 0.14);
}

.add-to-cart[data-rxspot-busy="1"] {
	opacity: 0.75;
	pointer-events: none;
}

/* ========================================
   CHECKOUT CONFIRMATION SCREEN
   ======================================== */

#rxspot-confirmation-screen .inner {
	padding: 2em;
}

#rxspot-confirmation-screen header {
	margin-bottom: 1em;
}

.rxspot-confirmation-content {
	text-align: center;
	padding: 3em 1em 4em;
	max-width: 580px;
	margin: 0 auto;
}

.rxspot-confirmation-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 10%, transparent);
	border: 2px solid var(--rxspot-primary, #f56a6a);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5em;
}

.rxspot-confirmation-icon .icon {
	font-size: 2em;
	color: var(--rxspot-primary, #f56a6a);
	line-height: 1;
}

/* ========================================
   MODAL POPUPS — EDITORIAL PRESENTATION
   Aligns popup forms (eligibility, consent)
   with the checkout page's clean, editorial
   design language: sharp corners, compact
   typography, professional information density.
   ======================================== */

/* Overlay: smooth fade-in backdrop */
@keyframes rxspot-overlay-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes rxspot-modal-bloom {
	from {
		opacity: 0;
		transform: scale(0.93) translateY(6px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

#rxspotModalOverlay[data-rxspot-template='editorial'] {
	animation: rxspot-overlay-fadein 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Modal panel: editorial proportions + subtle entrance */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal {
	width: min(780px, 94%);
	max-height: min(92vh, 920px);
	border-radius: 0.5em;
	animation: rxspot-modal-bloom 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s both;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Header ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal-header {
	padding: 0.6em 1em 0.5em;
	border-bottom-color: rgba(210, 215, 217, 0.75);
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal-kicker {
	font-size: 0.5rem;
	margin-bottom: 2px;
	letter-spacing: 0.14em;
	color: #7f888f;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal-title {
	font-size: 0.88rem;
	font-family: 'Roboto Slab', serif;
	color: #3d4449;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal-close {
	inline-size: 28px;
	block-size: 28px;
	font-size: 0.85rem;
	border-radius: 0.375em;
	border-color: rgba(210, 215, 217, 0.75);
}

/* ── Body ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] #rxspotModalBody {
	padding: 0.6em 1em;
	font-size: 0.76rem;
	line-height: 1.5;
}

/* ── Hints ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .hint {
	padding: 0.5em 0.7em;
	font-size: 0.72rem;
	margin-bottom: 6px;
	border-radius: 0.375em;
	line-height: 1.55;
}

/* ── Question cards ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .q {
	padding: 0.5em 0.7em;
	border-radius: 0.375em;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .q + .q {
	margin-top: 5px;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .q label {
	font-size: 0.74rem;
	margin-bottom: 3px;
	font-weight: 600;
	color: #3d4449;
}

/* ── Choice pills → editorial flat chips ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .choice {
	gap: 6px;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .choice label {
	padding: 0.2em 0.55em;
	font-size: 0.7rem;
	border-radius: 0.375em;
	border: 1px solid rgba(210, 215, 217, 0.75);
	font-weight: 600;
	letter-spacing: 0.01em;
	background: #ffffff;
	color: #3d4449;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .choice label:hover {
	border-color: var(--rxspot-primary, #f56a6a);
	background: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 5%, #ffffff);
}

/* ── Consent body text ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal .q p {
	font-size: 0.72rem;
	line-height: 1.6;
	color: #7f888f;
	margin: 0;
}

/* ── Radio inputs ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal input[type='radio'] {
	width: 0.8rem;
	height: 0.8rem;
	accent-color: var(--rxspot-primary, #f56a6a);
}

/* ── Textarea ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal textarea {
	min-height: 64px;
	padding: 0.45em 0.6em;
	font-size: 0.76rem;
	border-radius: 0.375em;
	border-color: rgba(210, 215, 217, 0.75);
	background: #ffffff;
	color: #3d4449;
}

#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal textarea:focus {
	border-color: var(--rxspot-primary, #f56a6a);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rxspot-primary, #f56a6a) 12%, transparent);
}

/* ── Error messages ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal [data-rxspot-modal-error] {
	border-radius: 0.375em;
	font-size: 0.72rem;
	padding: 0.45em 0.6em;
}

/* ── Actions bar ── */
#rxspotModalOverlay[data-rxspot-template='editorial'] #rxspotModalActions {
	padding: 0.45em 1em 0.55em;
	border-top-color: rgba(210, 215, 217, 0.75);
}

#rxspotModalOverlay[data-rxspot-template='editorial'] #rxspotModalActions .rxspot-req-btn {
	padding: 0 1em;
	font-size: 0.68rem;
	min-height: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 0.375em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media screen and (max-width: 640px) {
	#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal {
		width: 100%;
		max-height: calc(100vh - 16px);
		border-radius: 0.375em;
	}
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	#rxspotModalOverlay[data-rxspot-template='editorial'],
	#rxspotModalOverlay[data-rxspot-template='editorial'] .rxspot-modal {
		animation-duration: 0.01s !important;
	}
}

/* ========================================
   CHECKOUT PAGE — COMPACT / ZOOM-OUT
   Uses CSS zoom to proportionally scale down
   the checkout page ~20% for a denser layout.
   ======================================== */

body.has-sticky-cart .checkout-container,
body .checkout-container {
	zoom: 0.833;
}

/* Keep the shared booking-requirements gating behavior intact on checkout.
   Editorial can still show the intake inline after requirements complete, but
   the initial hidden state needs to match the shared storefront contract. */
#requirementsProceedBtn,
#requirements-help,
#rxspotRequirementsProceedHint {
	display: none !important;
}

#rxspot-intake-wrap.rxspot-hidden {
	display: none !important;
}

#rxspot-intake-wrap {
	display: block !important;
}

/* On mobile, un-sticky the sidebar so it stacks normally */
@media screen and (max-width: 980px) {
	.checkout-sidebar {
		position: static;
	}
}

.rxspot-confirmation-content h1 {
	font-size: 2em;
	margin-bottom: 0.3em;
	color: #3d4449;
}

.rxspot-confirmation-content > p {
	color: #7f888f;
	font-size: 1.05em;
	max-width: 480px;
	margin: 0 auto 2em;
	line-height: 1.7;
}

/* ---- Order Receipt Card ---- */

.rxspot-confirmation-receipt {
	text-align: left;
	max-width: 440px;
	margin: 0 auto 2.5em;
	background: #fff;
	border: 1px solid #e2e5e8;
	border-radius: 0.5em;
	padding: 1.5em 1.75em;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.rxspot-confirmation-receipt h4 {
	margin: 0 0 1em;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #3d4449;
	border-bottom: 1px solid #eee;
	padding-bottom: 0.6em;
}

.rxspot-receipt-item {
	display: flex;
	justify-content: space-between;
	padding: 0.4em 0;
	font-size: 0.92em;
	color: #3d4449;
}

.rxspot-receipt-totals {
	border-top: 1px solid #eee;
	margin-top: 0.75em;
	padding-top: 0.75em;
}

.rxspot-receipt-row {
	display: flex;
	justify-content: space-between;
	padding: 0.3em 0;
	font-size: 0.9em;
	color: #7f888f;
}

.rxspot-receipt-row.rxspot-receipt-total {
	border-top: 1px solid #ddd;
	margin-top: 0.5em;
	padding-top: 0.6em;
	font-weight: 700;
	font-size: 1em;
	color: #3d4449;
}

.rxspot-receipt-note {
	margin: 1em 0 0;
	font-size: 0.82em;
	line-height: 1.6;
	color: #9aa1a7;
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
}

.rxspot-receipt-note .icon {
	color: var(--rxspot-primary, #f56a6a);
	flex-shrink: 0;
	margin-top: 0.15em;
}

.rxspot-confirmation-content .button.primary {
	font-size: 1.1em;
	padding: 0.85em 2.2em;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

/* ---- Next Steps (shown when no provider portal URL is configured) ---- */

.rxspot-next-steps {
	max-width: 440px;
	margin: 1.5em auto 0;
	padding: 1.2em 1.4em;
	background: #f8fafc;
	border: 1px solid #e2e5e8;
	border-radius: 0.5em;
	text-align: left;
	line-height: 1.6;
	font-size: 0.92em;
	color: #3d4449;
}

.rxspot-next-steps .icon {
	color: var(--rxspot-primary, #f56a6a);
	margin-right: 0.4em;
}

/* ---- Redirect Loader (replaces Join Visit button) ---- */

.rxspot-redirect-loader {
	margin: 0 auto 1em;
	text-align: center;
}

.rxspot-spinner {
	position: relative;
	width: 96px;
	height: 96px;
	margin: 0 auto 1.5em;
}

@keyframes rxspot-spin {
	to { transform: rotate(360deg); }
}

@keyframes rxspot-spin-reverse {
	to { transform: rotate(-360deg); }
}

@keyframes rxspot-pulse-icon {
	0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

.rxspot-spinner-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--rxspot-primary, #f56a6a) 15%, transparent);
	border-top-color: var(--rxspot-primary, #f56a6a);
	animation: rxspot-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.rxspot-spinner-ring--delayed {
	inset: 10px;
	border-width: 2.5px;
	border-top-color: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 65%, #333);
	animation: rxspot-spin-reverse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.rxspot-spinner-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.35em;
	color: var(--rxspot-primary, #f56a6a);
	animation: rxspot-pulse-icon 2.4s ease-in-out infinite;
}

.rxspot-redirect-text {
	font-family: 'Roboto Slab', serif;
	font-size: 1.15em;
	font-weight: 600;
	color: #3d4449;
	margin: 0 0 0.3em;
	letter-spacing: 0.01em;
}

.rxspot-redirect-subtext {
	color: #9aa1a7;
	font-size: 0.88em;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rxspot-spinner-ring,
	.rxspot-spinner-ring--delayed {
		animation-duration: 4s !important;
	}
	.rxspot-spinner-icon {
		animation: none !important;
		opacity: 0.8;
	}
}

.rxspot-confirmation-expect {
	margin-top: 2.5em;
	text-align: left;
	background: color-mix(in srgb, var(--rxspot-primary, #f56a6a) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--rxspot-primary, #f56a6a) 15%, transparent);
	border-radius: 0.375em;
	padding: 1.5em 1.75em;
}

.rxspot-confirmation-expect h4 {
	margin: 0 0 0.75em;
	color: #3d4449;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rxspot-confirmation-expect ul {
	margin: 0;
	padding-left: 1.2em;
	color: #7f888f;
	font-size: 0.9em;
	line-height: 2;
}

.rxspot-confirmation-expect a {
	color: var(--rxspot-primary, #f56a6a);
}

.rxspot-confirmation-back {
	margin-top: 2em;
}

.rxspot-confirmation-back a {
	color: #aaa;
	font-size: 0.9em;
	border-bottom: 1px solid #ddd;
	padding-bottom: 2px;
}

/* ========================================
   EMPTY CART STATE (checkout page)
   ======================================== */

.rxspot-empty-cart {
	text-align: center;
	padding: 4em 1em;
}

.rxspot-empty-cart .icon {
	font-size: 3em;
	color: #ccc;
	display: block;
	margin-bottom: 0.5em;
}

.rxspot-empty-cart p {
	color: #7f888f;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

/* ========================================
   MOBILE-ONLY FIXES
   These rules only fire below their breakpoints
   and do NOT affect desktop layout.
   ======================================== */

/* --- Sidebar: cap width to viewport on small screens --- */
@media screen and (max-width: 736px) {
	#sidebar {
		width: 100vw !important;
		max-width: 100vw !important;
	}

	#sidebar > .inner {
		width: 100% !important;
	}

	/* Move the toggle (hamburger/close ">") inside the sidebar
	   so it's always reachable, not pushed off-screen at left: 26em */
	#sidebar .toggle {
		left: auto !important;
		right: 0;
		width: 3.5em;
		text-indent: 3.5em;
	}
}

/* --- Hero section: prevent button overflow --- */
@media screen and (max-width: 736px) {
	.hero-section {
		padding: 2.5em 1.5em;
	}

	/* Use flex-direction:column + margin-left:0 — avoids Android Chrome flex-basis
	   miscalculation caused by the -1em negative margin on ul.actions. */
	.hero-section .actions {
		flex-direction: column;
		flex-wrap: nowrap;
		margin-left: 0;
		gap: 0.75em;
	}

	.hero-section .actions li {
		padding-left: 0;
		width: 100%;
		flex: none;
	}

	.hero-section .actions .button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 480px) {
	.hero-section {
		padding: 2em 1.25em;
		min-height: auto;
	}

	.hero-section h1 {
		font-size: 1.5em;
	}

	.hero-section p {
		font-size: 1em;
	}
}

/* --- Product card: prevent text clipping on narrow screens --- */
@media screen and (max-width: 480px) {
	.product-card .product-description {
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.product-card h3 {
		font-size: 1em;
		word-break: break-word;
	}
}

/* --- Sticky cart bar: more compact on mobile --- */
@media screen and (max-width: 480px) {
	#sticky-cart-bar {
		padding: 0.75em 1em;
		padding-bottom: calc(0.75em + env(safe-area-inset-bottom));
		gap: 0.75em;
	}

	.sticky-cart-actions .button {
		font-size: 0.85em;
		padding: 0 1.25em;
	}

	.sticky-cart-count {
		min-width: 2em;
		height: 2em;
		font-size: 0.85em;
	}
}

/* --- Trust badges: stack on small screens --- */
@media screen and (max-width: 480px) {
	.trust-badges {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media screen and (max-width: 360px) {
	.trust-badges {
		grid-template-columns: 1fr !important;
	}
}