/* ============================================
   Nova brand overrides for WPLoyalty Pro
   ============================================
   Plugin namespaces touched here:
     .wlr-*    — My Account loyalty page, cart points block, rewards/coupons
     .wll_*    — Launcher popup widget (#wll-site-launcher)
     .alertify — Modal/dialog confirmations the plugin spawns

   The plugin emits its theme color via inline styles + !important
   throughout. Where possible, the user should ALSO set the plugin's
   admin Settings → theme color to Nova accent (#6E27D9 or whatever
   --nova-accent resolves to via the Customizer) so that inline emit
   is on-brand at the source. The CSS below covers the surfaces inline
   styles don't reach + harmonizes typography + radii + spacing with
   the rest of the Nova theme. !important is used only where the
   plugin's own !important rules would otherwise win.
   ============================================ */

/* ----------------------------------------
   Launcher floating button — bottom-right pill
   Plugin defaults to a circular #6F38C5 chip.
   Brand it as the Nova gradient pill with a soft shadow.
   ---------------------------------------- */

.wll_launcher_button {
	background: linear-gradient(135deg, var(--nova-accent), var(--nova-accent-hover)) !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 24px rgba(var(--nova-accent-rgb), 0.35) !important;
	transition: transform 200ms ease, box-shadow 200ms ease !important;
}

.wll_launcher_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(var(--nova-accent-rgb), 0.45) !important;
}

.wll_launcher_button:focus-visible {
	outline: 2px solid var(--nova-accent);
	outline-offset: 2px;
}

/* ----------------------------------------
   Launcher popup container
   ---------------------------------------- */

#wll-site-launcher,
.wll_launcher_popup_container {
	font-family: var(--nova-font-body) !important;
	border-radius: var(--nova-radius-card) !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;
	overflow: hidden;
}

#wll-site-launcher button,
.wll_launcher_popup_container button {
	font-family: var(--nova-font-body) !important;
	border-radius: var(--nova-radius-button) !important;
}

/* ----------------------------------------
   WPLoyalty My Account page + cart points block
   ---------------------------------------- */

.wlr-myaccount-page,
.wlr-page-cart {
	font-family: var(--nova-font-body) !important;
	color: var(--nova-text-dark);
}

.wlr-myaccount-page .wlr-heading,
.wlr-heading {
	font-family: var(--nova-font-heading) !important;
	color: var(--nova-text-dark) !important;
	border-left-color: var(--nova-accent) !important;
}

/* ----------------------------------------
   Points / rewards / coupon cards
   ---------------------------------------- */

.wlr-points-container,
.wlr-rewards-container,
.wlr-coupon-card,
.wlr-coupons-container {
	border-color: var(--nova-border-light) !important;
	border-radius: var(--nova-radius-card) !important;
	background: var(--nova-bg-white);
}

.wlr-text-color {
	color: var(--nova-text-dark) !important;
}

.wlr-border-color {
	border-color: var(--nova-border-light) !important;
}

#wlr-available-points,
#wlr-redeemed-points,
#wlr-used-rewards,
.wlr-points-value {
	font-family: var(--nova-font-heading) !important;
	color: var(--nova-accent) !important;
	font-weight: 600 !important;
}

.wlr-points-name {
	color: var(--nova-text-dark-muted) !important;
	font-weight: 500;
}

/* ----------------------------------------
   Reward tabs (active state)
   ---------------------------------------- */

.wlr-my-rewards-title {
	font-family: var(--nova-font-body) !important;
	color: var(--nova-text-dark-muted) !important;
}

.wlr-my-rewards-title.active {
	color: var(--nova-accent) !important;
	border-bottom-color: var(--nova-accent) !important;
	font-weight: 600 !important;
}

/* ----------------------------------------
   Buttons (apply, redeem, copy code, etc.)
   ---------------------------------------- */

.wlr-button,
.wlr-button-action,
.wlr-button-reward,
.wlr-code-button {
	background: var(--nova-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--nova-radius-button) !important;
	font-family: var(--nova-font-body) !important;
	font-weight: 500 !important;
	padding: 10px 20px !important;
	transition: background 200ms ease;
}

.wlr-button:hover,
.wlr-button-action:hover,
.wlr-button-reward:hover,
.wlr-code-button:hover {
	background: var(--nova-accent-hover) !important;
}

.wlr-button-text-color {
	color: #fff !important;
}

/* ----------------------------------------
   Coupon code chip
   ---------------------------------------- */

.wlr-coupon-code {
	font-family: var(--nova-font-body) !important;
	font-weight: 600;
	background: var(--nova-surface-light);
	border: 1px dashed var(--nova-accent);
	border-radius: var(--nova-radius-input);
	color: var(--nova-text-dark);
	padding: 8px 14px;
	letter-spacing: 0.04em;
}

.wlr-coupon-copy-icon {
	color: var(--nova-accent) !important;
}

/* ----------------------------------------
   Reward type / status badge
   ---------------------------------------- */

.wlr-reward-type-name {
	background: rgba(var(--nova-accent-rgb), 0.08) !important;
	color: var(--nova-accent) !important;
	border-radius: 88px !important;
	font-family: var(--nova-font-body) !important;
	font-weight: 500 !important;
	font-size: 12px !important;
	letter-spacing: 0.04em;
	padding: 4px 12px !important;
	text-transform: uppercase;
}

/* ----------------------------------------
   Progress bar
   ---------------------------------------- */

.wlr-progress-level {
	background: linear-gradient(90deg, var(--nova-accent), var(--nova-accent-hover)) !important;
	border-radius: 999px !important;
}

/* ----------------------------------------
   Inline notice banners — "Complete your order and earn N points",
   "You have points earned, choose your rewards", redeem hints, etc.
   Plugin emits these via woocommerce_before_cart / woocommerce_before_checkout_form
   / woocommerce_before_main_content as full-width green strips with a star
   icon. Rebrand them as compact Nova-style accent notices, constrain
   to the page content width, and adjust spacing so they don't push
   the page heading off the fold.
   ---------------------------------------- */

.wlr-message-info,
.wlr_points_rewards_earn_points,
.wlr_points_rewards_redeem_points,
.wlr_thankyou_message {
	max-width: var(--nova-content-width) !important;
	margin: 16px auto !important;
	padding: 12px 18px !important;
	background: rgba(var(--nova-accent-rgb), 0.06) !important;
	border: 1px solid rgba(var(--nova-accent-rgb), 0.18) !important;
	border-left: 3px solid var(--nova-accent) !important;
	border-radius: var(--nova-radius-input) !important;
	color: var(--nova-text-dark) !important;
	font-family: var(--nova-font-body) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	box-shadow: none !important;
}

/* If the plugin nests the notice inside a wrapper, scope to that too. */
.woocommerce-notices-wrapper .wlr-message-info,
.woocommerce-cart .wlr-message-info,
.woocommerce-checkout .wlr-message-info {
	max-width: var(--nova-content-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Star icon emitted inside the message. The plugin renders an inline
   <img> or <svg>; recolor and resize so it fits the Nova notice. */
.wlr-message-info img,
.wlr-message-info svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	filter: none !important;
}

/* Inline links in the notice (e.g. "Click Here") */
.wlr-message-info a {
	color: var(--nova-accent) !important;
	font-weight: 600 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wlr-message-info a:hover {
	color: var(--nova-accent-hover) !important;
}

/* Make sure the tr/td wrapper variant (used inside cart table) matches
   the cart's existing row styling instead of hard-bordering green. */
tr.wlr-message-row td.wlr-message-info,
tr td.wlr-message-info {
	display: table-cell !important;
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid var(--nova-border-light) !important;
	padding: 14px 0 !important;
	font-size: 13px !important;
}

/* When the plugin marks the message as empty (display:none placeholder),
   keep it collapsed without leaving a stray gap. */
.wlr-message-info[style*="display: none"],
.wlr-message-info:empty {
	display: none !important;
	margin: 0 !important;
}

/* ----------------------------------------
   Alertify modals (confirmation dialogs the plugin spawns)
   ---------------------------------------- */

.alertify .ajs-dialog {
	font-family: var(--nova-font-body) !important;
	border-radius: var(--nova-radius-card) !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.alertify .ajs-header {
	font-family: var(--nova-font-heading) !important;
	color: var(--nova-text-dark) !important;
	border-bottom: 1px solid var(--nova-border-light) !important;
}

.alertify .ajs-ok {
	background: var(--nova-accent) !important;
	border-color: var(--nova-accent) !important;
	color: #fff !important;
	border-radius: var(--nova-radius-button) !important;
	font-family: var(--nova-font-body) !important;
	font-weight: 500 !important;
}

.alertify .ajs-ok:hover {
	background: var(--nova-accent-hover) !important;
	border-color: var(--nova-accent-hover) !important;
}

.alertify .ajs-cancel {
	background: var(--nova-surface-light) !important;
	color: var(--nova-text-dark) !important;
	border: 1px solid var(--nova-border-light) !important;
	border-radius: var(--nova-radius-button) !important;
	font-family: var(--nova-font-body) !important;
	font-weight: 500 !important;
}

.alertify .ajs-cancel:hover {
	background: var(--nova-border-light) !important;
}

/* =============================================================================
   NOVA × WPLOYALTY INDICATORS
   Brand-styled surfaces that read from the plugin's data:
     - .nova-loyalty-chip      → header points pill (logged-in, non-zero)
     - .nova-loyalty-pdp-pill  → PDP earn-on-purchase pill (under price)
   Re-uses the accent gradient + star glyph for instant brand recognition.
   ============================================================================= */

.nova-loyalty-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	margin-right: 4px;
	font-family: var(--nova-font-body, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: linear-gradient(135deg, var(--nova-accent, #8a4fff) 0%, var(--nova-accent-hover, #7a3fee) 100%);
	border: none;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 1px 2px rgba(138, 79, 255, 0.25);
}

.nova-loyalty-chip:hover,
.nova-loyalty-chip:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(138, 79, 255, 0.35);
	color: #fff;
	text-decoration: none;
	outline: none;
}

.nova-loyalty-chip__icon {
	flex-shrink: 0;
	color: #ffd966;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.15));
}

.nova-loyalty-chip__count {
	font-variant-numeric: tabular-nums;
}

.nova-loyalty-chip__label {
	opacity: 0.92;
	font-weight: 500;
}

@media (max-width: 640px) {
	.nova-loyalty-chip {
		padding: 5px 10px 5px 8px;
		font-size: 12px;
	}
	.nova-loyalty-chip__label {
		display: none;
	}
}

/* PDP earn-points pill — sits below the price block in the buy box */

.nova-loyalty-pdp-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	padding: 8px 14px;
	font-family: var(--nova-font-body, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--nova-text-dark, #0a0a0e);
	background: rgba(138, 79, 255, 0.08);
	border: 1px solid rgba(138, 79, 255, 0.25);
	border-radius: 999px;
	max-width: 100%;
}

.nova-loyalty-pdp-pill__icon {
	flex-shrink: 0;
	color: var(--nova-accent, #8a4fff);
}

.nova-loyalty-pdp-pill__msg {
	min-width: 0;
}

.nova-loyalty-pdp-pill__msg a {
	color: var(--nova-accent, #8a4fff);
	text-decoration: underline;
}

.nova-loyalty-pdp-pill__msg a:hover {
	color: var(--nova-accent-hover, #7a3fee);
}

/* ---------------------------------------------------------------------------
   Cart-context loyalty pills (cart page summary + mini-cart drawer totals).
   Earn variant uses the accent purple tint already shared with the PDP pill;
   redeem variant uses a soft gold tint for visual distinction at a glance.
   --------------------------------------------------------------------------- */

.nova-cart-loyalty-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-family: var(--nova-font-body, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--nova-text-dark, #0a0a0e);
	border-radius: 999px;
	max-width: 100%;
}

.nova-cart-loyalty-pill__icon {
	flex-shrink: 0;
}

.nova-cart-loyalty-pill__msg {
	min-width: 0;
}

.nova-cart-loyalty-pill__msg a {
	text-decoration: underline;
}

.nova-cart-loyalty-pill--earn {
	background: rgba(138, 79, 255, 0.08);
	border: 1px solid rgba(138, 79, 255, 0.25);
}

.nova-cart-loyalty-pill--earn .nova-cart-loyalty-pill__icon,
.nova-cart-loyalty-pill--earn .nova-cart-loyalty-pill__msg a {
	color: var(--nova-accent, #8a4fff);
}

.nova-cart-loyalty-pill--earn .nova-cart-loyalty-pill__msg a:hover {
	color: var(--nova-accent-hover, #7a3fee);
}

.nova-cart-loyalty-pill--redeem {
	background: rgba(255, 178, 36, 0.12);
	border: 1px solid rgba(255, 178, 36, 0.4);
}

.nova-cart-loyalty-pill--redeem .nova-cart-loyalty-pill__icon,
.nova-cart-loyalty-pill--redeem .nova-cart-loyalty-pill__msg a {
	color: #c87a00;
}

.nova-cart-loyalty-pill--redeem .nova-cart-loyalty-pill__msg a:hover {
	color: #a96400;
}

/* Cart-page wrapper — sits above the cost breakdown in the summary card. */
.nova-cart-page__loyalty {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 12px;
}

/* Drawer wrapper — sits at the top of the totals fragment, above the
   coupon tags + subtotal row. Stacks pills vertically because the
   drawer column is narrow. */
.nova-cart-drawer__loyalty {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 10px;
}

.nova-cart-drawer__loyalty .nova-cart-loyalty-pill {
	font-size: 12px;
	padding: 6px 12px;
	width: 100%;
	box-sizing: border-box;
}

/* ============================================================
   Responsive ladder — Phase 29 Plan 11
   NOTE: nova-cart.css already hides .nova-cart-loyalty-pill and
   .nova-cart-drawer__loyalty at ≤768px (user explicitly asked).
   nova-header.css hides .nova-loyalty-chip at ≤480px. Do NOT
   revive those — only polish the surfaces that stay visible:
   PDP pill, account/cart pages, launcher popup, alertify dialogs,
   inline notice banners, redeem buttons.
   ============================================================ */

@media (max-width: 1024px) {
	#wll-site-launcher,
	.wll_launcher_popup_container {
		max-width: 92vw;
		max-height: 85vh;
		overflow-y: auto;
	}

	.wlr-message-info,
	.wlr_points_rewards_earn_points,
	.wlr_points_rewards_redeem_points,
	.wlr_thankyou_message {
		max-width: calc(100% - 24px) !important;
		font-size: 13px !important;
	}
}

@media (max-width: 768px) {
	/* Launcher popup — fit phone width with sane margins */
	#wll-site-launcher,
	.wll_launcher_popup_container {
		width: 90vw !important;
		max-width: 360px !important;
		max-height: 85vh !important;
		padding: 16px !important;
		overflow-y: auto;
		border-radius: 14px !important;
	}

	#wll-site-launcher button,
	.wll_launcher_popup_container button {
		min-height: 44px !important;
		font-size: 14px !important;
		width: 100%;
	}

	/* Launcher floating chip — pull in slightly so it doesn't
	   collide with the cart drawer trigger / mobile bottom bar. */
	.wll_launcher_button {
		bottom: 80px !important;
		right: 14px !important;
		transform: scale(0.92);
	}

	/* Account loyalty page + cart points block */
	.wlr-myaccount-page,
	.wlr-page-cart {
		padding: 0 4px;
	}

	.wlr-myaccount-page .wlr-heading,
	.wlr-heading {
		font-size: 20px !important;
		line-height: 1.25 !important;
	}

	/* Points / rewards / coupon cards stack to 1-col */
	.wlr-points-container,
	.wlr-rewards-container,
	.wlr-coupons-container {
		display: block !important;
		padding: 16px !important;
	}

	.wlr-coupon-card {
		width: 100% !important;
		margin-bottom: 12px;
		padding: 16px !important;
	}

	#wlr-available-points,
	#wlr-redeemed-points,
	#wlr-used-rewards,
	.wlr-points-value {
		font-size: 28px !important;
	}

	.wlr-points-name {
		font-size: 13px !important;
	}

	/* Reward tabs — wrap and stay readable */
	.wlr-my-rewards-title {
		font-size: 13px !important;
		padding: 8px 10px !important;
	}

	/* Redeem / apply / copy buttons → full-width tap targets */
	.wlr-button,
	.wlr-button-action,
	.wlr-button-reward,
	.wlr-code-button {
		width: 100% !important;
		min-height: 44px !important;
		font-size: 13px !important;
		padding: 12px 16px !important;
	}

	.wlr-coupon-code {
		display: block;
		text-align: center;
		font-size: 13px;
		padding: 8px 12px;
	}

	/* Inline notice banners — tighter on phones */
	.wlr-message-info,
	.wlr_points_rewards_earn_points,
	.wlr_points_rewards_redeem_points,
	.wlr_thankyou_message {
		max-width: calc(100% - 16px) !important;
		margin: 12px auto !important;
		padding: 10px 14px !important;
		font-size: 13px !important;
		gap: 8px !important;
	}

	/* Alertify modal — fit viewport, internal scroll */
	.alertify .ajs-dialog {
		width: 90vw !important;
		max-width: 360px !important;
		max-height: 90vh !important;
		overflow-y: auto;
	}

	.alertify .ajs-ok,
	.alertify .ajs-cancel {
		min-height: 44px !important;
		font-size: 14px !important;
		padding: 10px 18px !important;
	}

	/* PDP earn-points pill */
	.nova-loyalty-pdp-pill {
		font-size: 12.5px;
		padding: 7px 12px;
		gap: 6px;
	}
}

@media (max-width: 480px) {
	#wll-site-launcher,
	.wll_launcher_popup_container {
		width: 92vw !important;
		max-width: none !important;
		padding: 14px !important;
		border-radius: 12px !important;
	}

	.wll_launcher_button {
		bottom: 76px !important;
		right: 12px !important;
		transform: scale(0.88);
	}

	.wlr-myaccount-page .wlr-heading,
	.wlr-heading {
		font-size: 18px !important;
	}

	#wlr-available-points,
	#wlr-redeemed-points,
	#wlr-used-rewards,
	.wlr-points-value {
		font-size: 24px !important;
	}

	.wlr-points-container,
	.wlr-rewards-container,
	.wlr-coupons-container {
		padding: 14px !important;
	}

	.wlr-coupon-card {
		padding: 14px !important;
	}

	.wlr-message-info,
	.wlr_points_rewards_earn_points,
	.wlr_points_rewards_redeem_points,
	.wlr_thankyou_message {
		font-size: 12.5px !important;
		padding: 10px 12px !important;
		line-height: 1.45 !important;
	}

	.alertify .ajs-dialog {
		width: 92vw !important;
		max-width: none !important;
	}

	.nova-loyalty-pdp-pill {
		font-size: 12px;
		padding: 6px 10px;
	}
}