/* ── Flowhub Cart Modal ──────────────────────────────────────────────────────
   Completely isolated from the Dispense / iHeartJane cart.
   "Neon Dispensary" moss-green theme, matching the product card / slider /
   "Choose a Weight" modal / product detail page / age gate / archive widget.
   --------------------------------------------------------------------------- */

#fhCartModal {
	--fh-cart-width: 420px;
	/* NOT var(--e-global-color-accent, ...) — this site's Elementor kit
	   defines that global color as a bright #61CE70, which made the count
	   badge look washed-out/light-green against the dark drawer. Hardcoded
	   to the theme's own dark moss tone instead. */
	--fh-accent: #3d5922;
	padding: 0 !important;
}

/* Right-side drawer slide-in */
#fhCartModal .fh-cart-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(100vw, var(--fh-cart-width));
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#fhCartModal.fade.show .fh-cart-dialog {
	transform: translateX(0);
}

#fhCartModal .modal-content {
	height: 100%;
	border-radius: 0;
	border: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #313d27;
	color: #f4f7ee;
	font-family: 'Space Grotesk', sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

#fhCartModal .fh-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #2c3423;
	flex-shrink: 0;
}

#fhCartModal .fh-cart-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: #f4f7ee;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Icon wrapper — gives the badge an absolute-position anchor. Also used
   outside the modal by the header cart-icon widget (widgets/class-cart-icon.php),
   which styles its own badge via Bootstrap's .bg-danger — left untouched here. */
.fh-cart-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* ── Header cart-icon count badge (widgets/class-cart-icon.php) ────────────
   Separate instance from #fhCartModal's own .fh-cart-count above — this one
   sits in the page header. Bootstrap's plain .badge.rounded-pill.bg-danger
   has no positioning of its own, so it rendered inline next to the icon
   instead of tucked into its corner; only size/position are touched here,
   the red .bg-danger fill is left as-is (not a themed choice, just what was
   asked to fix). */
.fh-cart-icon-wrap .fh-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25rem;
	font-size: 0.62rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── License (rec/med) switcher (widgets/class-store-switcher.php) ─────────
   Scoped to .fh-license-switcher specifically, NOT the bare .store-switcher
   class also used by the Dispense-only switcher markup in the same file —
   Dispense's own select must never be touched by this rule. Plain Bootstrap
   .form-select defaults otherwise (white pill, dark chevron, blue focus
   ring) don't match the dark "Neon Dispensary" header chrome at all. */
.fh-license-switcher .form-select {
	background-color: #232a1c;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aeb7a2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	color: #eef4e2;
	border: 1px solid #4a5a3c;
	border-radius: 999px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.45rem 2.25rem 0.45rem 1rem;
}

.fh-license-switcher .form-select:hover {
	border-color: #597d36;
}

.fh-license-switcher .form-select:focus {
	border-color: #597d36;
	box-shadow: 0 0 0 0.2rem rgba(89, 125, 54, 0.35);
}

/* Native <option> list — limited styling support across browsers, but this
   covers Chrome/Edge/Firefox rather than leaving it pure white-on-black. */
.fh-license-switcher .form-select option {
	background-color: #232a1c;
	color: #eef4e2;
}

/* Cart count badge inside the drawer's own header title. --fh-accent is only
   defined on #fhCartModal, so this rule only takes effect on the copy of
   .fh-cart-count that's actually inside the drawer — the header widget's
   badge (outside the modal) keeps its own .bg-danger styling untouched. */
#fhCartModal .fh-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--fh-accent);
	color: #eef4e2;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

/* Close button — mirrors #fhWeightModal .fh-modal-close (assets/css/flowhub-product-card.css)
   exactly: same circle/border/hover treatment, and the same #fhCartModal-id
   scoping needed to clear the theme's reset.css `button{border:1px solid
   #cc3366}` rule (0,1,0 specificity ties a bare single class and can win by
   source order). */
#fhCartModal .btn-close {
	appearance: none;
	box-sizing: border-box;
	/* padding:0 explicitly — Bootstrap's own .btn-close rule AND the
	   theme's reset.css both set an asymmetric default padding on buttons;
	   a fixed width/height alone doesn't stop padding from pushing the
	   icon off-center, which is exactly what made this oval instead of
	   circular (same bug already fixed on the other modals' close
	   buttons). */
	padding: 0 !important;
	margin: 0;
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	border: 1px solid #2c3423 !important;
	background-color: transparent !important;
	/* Bootstrap's .btn-close is a background-image X icon rendered black;
	   invert it to a light tone so it reads on the dark drawer. */
	filter: invert(1) grayscale(100%) brightness(200%);
	opacity: 0.7;
	transition: border-color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

#fhCartModal .btn-close:hover,
#fhCartModal .btn-close:focus {
	/* :focus included — same reset.css fuchsia-on-focus reason documented
	   throughout this file's siblings. */
	border-color: #597d36 !important;
	background-color: rgba(89, 125, 54, 0.25) !important;
	opacity: 1;
	box-shadow: none;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

#fhCartModal .fh-cart-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0;
}

/* Empty state */
#fhCartModal .fh-cart-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 2rem 1.5rem;
	color: #aeb7a2;
	font-size: 0.9rem;
}

/* ── Cart item ───────────────────────────────────────────────────────────── */

#fhCartModal .fh-cart-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	/* Extra right padding clears the absolutely-positioned remove button
	   in the top-right corner (see .fh-cart-remove below) so it never
	   overlaps the name/uom text. */
	padding: 1rem 2.25rem 1rem 1.5rem;
	border-bottom: 1px solid #2c3423;
}

#fhCartModal .fh-cart-item-img-wrap {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #1a2016;
	display: flex;
	align-items: center;
	justify-content: center;
}

#fhCartModal .fh-cart-item-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#fhCartModal .fh-cart-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/* Qty + price share a row instead of stacking in a separate right-hand
   column — easier to scan, and frees the top-right corner for the remove
   button (see .fh-cart-remove). */
#fhCartModal .fh-cart-item-bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.5rem;
}

#fhCartModal .fh-cart-item-brand {
	font-size: 0.7rem;
	color: #b3cd98;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

#fhCartModal .fh-cart-item-name {
	font-size: 0.875rem;
	font-weight: 500;
	color: #f4f7ee;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#fhCartModal .fh-cart-item-uom {
	font-size: 0.75rem;
	color: #aeb7a2;
}

/* Qty pill */
#fhCartModal .fh-qty {
	display: flex;
	align-items: center;
	/* #2c3423 (the old border color) sat too close to the drawer's own
	   #313d27 background to read as a border at all — lightened so the
	   pill outline is actually visible. */
	border: 1px solid #4a5a3c;
	border-radius: 999px;
	overflow: hidden;
	height: 28px;
	flex-shrink: 0;
}

#fhCartModal .fh-qty-btn {
	appearance: none;
	background: none;
	border: none;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0;
	color: #aeb7a2;
	transition: background 0.15s, color 0.15s;
}

#fhCartModal .fh-qty-btn:hover,
#fhCartModal .fh-qty-btn:focus {
	background: #3d5922 !important;
	color: #eef4e2 !important;
}

#fhCartModal .fh-qty-val {
	min-width: 1.6rem;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: #f4f7ee;
}

#fhCartModal .fh-cart-item-price {
	font-size: 0.875rem;
	font-weight: 700;
	color: #f4f7ee;
}

/* Moved out of the vertical qty/price stack into the item's own top-right
   corner (a clearer, more standard "dismiss" placement) — bigger hit area
   and a lighter resting color so it's actually visible against the dark
   drawer instead of nearly disappearing. */
#fhCartModal .fh-cart-remove {
	appearance: none;
	background-color: transparent;
	border: none;
	padding: 0;
	position: absolute;
	top: 0.85rem;
	right: 1.1rem;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #aeb7a2;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

#fhCartModal .fh-cart-remove:hover,
#fhCartModal .fh-cart-remove:focus {
	background-color: rgba(217, 117, 107, 0.18) !important;
	color: #d9756b !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

#fhCartModal .fh-cart-footer {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid #2c3423;
	flex-shrink: 0;
}

#fhCartModal .fh-cart-subtotal-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

#fhCartModal .fh-cart-subtotal-label {
	font-size: 0.9rem;
	color: #aeb7a2;
	font-weight: 500;
}

#fhCartModal .fh-cart-subtotal-value {
	font-size: 1.05rem;
	font-weight: 700;
	color: #f4f7ee;
}

#fhCartModal .fh-checkout-btn {
	appearance: none;
	position: relative;
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	font-family: 'Space Grotesk', sans-serif;
	border-radius: 999px;
	background: #597d36;
	color: #eef4e2 !important;
	border: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
	text-align: center;
	text-decoration: none;
}

/* Loading state — swapped in by the click handler in flowhub-cart.js while
   the checkout AJAX call (Flowhub_Cart::checkout_ajax_handler()) is in
   flight, so there's visible feedback during the 3-step create-cart /
   add-items / submit round trip instead of the button looking unresponsive. */
#fhCartModal .fh-checkout-btn-spinner {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -0.5rem;
	margin-top: -0.5rem;
	color: #eef4e2;
}

#fhCartModal .fh-checkout-btn.is-loading {
	cursor: wait;
}

#fhCartModal .fh-checkout-btn.is-loading .fh-checkout-btn-label {
	visibility: hidden;
}

#fhCartModal .fh-checkout-btn.is-loading .fh-checkout-btn-spinner {
	display: inline-block;
}

#fhCartModal .fh-checkout-btn:hover,
#fhCartModal .fh-checkout-btn:focus {
	background: #3d5922 !important;
}

#fhCartModal .fh-checkout-btn:disabled {
	background: #232a1c !important;
	color: #6c765f !important;
	cursor: not-allowed;
}