/**
 * Store-flow chrome (cart/checkout): minimal fixed nav + one-line footer,
 * visually matching the Next.js pricing page (pricing-redesign).
 * Loaded from header-store.php.
 */

body.pc-store-flow {
	background: #f7f8fa;
}

/* --- Nav ---------------------------------------------------------------- */

/* Sticky, not fixed: a sticky nav is part of the flow, so during rubber-band
   overscroll it is pulled down together with the page in every browser
   (fixed navs stay pinned in Chrome/Firefox, detaching from the content) */
.pc-store-nav {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Curtain above the nav: covers the area revealed by top overscroll with the
   header color, so the header appears to stretch upward */
.pc-store-nav::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 100vh;
	background: #0b0f14;
}

body.admin-bar .pc-store-nav {
	top: 32px;
}

/* No extra body padding for the admin bar: WP already offsets the page via
   html { margin-top: 32px } — adding more would double-count the shift */

.pc-store-nav {
	/* Solid #0B0F14: the pricing page nav is rgba(11,15,20,.85) over a dark
	   body — on our light pages only the solid color reads the same */
	background: #0b0f14;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pc-store-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.pc-store-nav__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.pc-store-nav__logo img {
	height: 28px;
	width: auto;
	display: block;
	/* The JPG is a white logo on black — lighten drops the black onto the nav */
	mix-blend-mode: lighten;
}

.pc-store-nav__links {
	display: flex;
	gap: 28px;
	align-items: center;
}

.pc-store-nav__links a {
	position: relative;
	font-size: 0.875rem;
	color: #8a94a6;
	text-decoration: none;
	transition: color 0.25s;
}

.pc-store-nav__links a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: #43a047;
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pc-store-nav__links a:hover {
	color: #edf0f5;
}

.pc-store-nav__links a:hover::after {
	width: 100%;
}

/* --- Footer ------------------------------------------------------------- */

.pc-store-footer {
	padding: 40px 0;
	border-top: 1px solid #e5e7eb;
	text-align: center;
	font-size: 0.8rem;
	color: #9ca3af;
}

.pc-store-footer p {
	margin: 0;
}

/* --- Content area ------------------------------------------------------- */

.pc-store-main {
	min-height: calc(100vh - 64px - 101px); /* viewport minus nav and footer */
}

/* Cart keeps its white page background; checkout stays on the gray canvas */
body.pc-store-flow.woocommerce-cart .pc-store-main {
	background: #fff;
}

/* --- Shared purchase-flow components (cart + checkout) ------------------- */

/* Centered status state (empty cart, checkout cart errors) */

.pc-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding: 96px 24px 120px;
}

.pc-status__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin-bottom: 28px;
}

.pc-status--brand .pc-status__icon {
	background: #eef9f1;
	color: #3fb859;
}

.pc-status--warning .pc-status__icon {
	background: #fef3c7;
	color: #d97706;
}

.pc-status__title {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #17181c;
}

.pc-status__text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: #6b7280;
}

.pc-status__notices {
	width: 100%;
	margin-bottom: 8px;
	text-align: left;
}

.pc-status__notices:empty {
	display: none;
}

.pc-status__cta {
	display: inline-block;
	padding: 14px 36px;
	border-radius: 8px;
	background: #3fb859;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.pc-status__cta:hover,
.pc-status__cta:focus {
	background: #35a04c;
	color: #fff !important;
	transform: translateY(-1px);
}

@media (max-width: 600px) {
	.pc-status {
		padding: 56px 20px 80px;
	}

	.pc-status__icon {
		width: 80px;
		height: 80px;
		margin-bottom: 22px;
	}

	.pc-status__title {
		font-size: 24px;
	}
}

/* Empty PayPal recaptcha placeholder still carries margins (cart + checkout) */
.pc-store-flow #ppcp-recaptcha-v2-container:empty {
	display: none;
}

/* Notice cards; right padding clears the dismiss (×) control */
.pc-store-flow .woocommerce-error,
.pc-store-flow .woocommerce-info,
.pc-store-flow .woocommerce-message {
	position: relative;
	margin: 0 auto 10px;
	padding: 12px 44px 12px 18px;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px;
	background: #f9fafb;
	color: #374151;
	font-size: 14px;
	line-height: 1.5;
}

.pc-store-flow .woocommerce-error {
	border-color: #fecaca !important;
	background: #fef2f2;
	color: #b91c1c;
}

.pc-store-flow .woocommerce-message {
	border-color: #bbf7d0 !important;
	background: #f0fdf4;
	color: #166534;
}

.pc-store-flow :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) a {
	color: #3fb859;
	font-weight: 600;
	text-decoration: none;
}

.pc-store-flow :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) a:hover {
	text-decoration: underline;
}

/* Default WooCommerce/Astra notice icons collide with the card padding */
.pc-store-flow :is(.woocommerce-error, .woocommerce-info, .woocommerce-message)::before,
.pc-store-flow :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) svg {
	display: none !important;
}

/* Dismiss (×) control appended by JS */
.pc-notice-dismiss {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent !important; /* Astra paints generic buttons */
	color: inherit !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.pc-notice-dismiss:hover {
	opacity: 1;
	background: transparent !important;
	color: inherit !important;
}

/* Renewal note — one line per recurring cart (see pc_renewal_note()) */

.pc-summary__renewal-line {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: #9ca3af;
}

.pc-summary__renewal-line + .pc-summary__renewal-line {
	margin-top: 10px;
}

.pc-summary__renewal-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: #c3c8cf;
}

.pc-summary__renewal-text {
	flex: 1;
	min-width: 0;
	line-height: 1.4;
	text-align: left;
}

.pc-summary__renewal-text strong {
	font-weight: 600;
	color: #6b7280;
}

.pc-summary__renewal-text .first-payment-date {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	line-height: 1.4;
	color: #b6bbc2;
}

.pc-summary__renewal-text .first-payment-date small {
	font-size: inherit;
}

/* Applied-coupon chip (see pc_coupon_chip_row() in includes/store-flow.php) */
.pc-coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 8px 4px 10px;
	border: 1px dashed #8ad3a0;
	border-radius: 999px;
	background: #f0fdf4;
	color: #166534;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.4;
}

.pc-coupon-chip svg {
	flex: 0 0 auto;
}

.pc-coupon-chip__code {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-store-flow a.pc-coupon-chip__remove {
	flex: 0 0 auto;
	position: relative;
	top: -1px; /* the × glyph sits on the baseline — optically low without this */
	padding: 0 2px;
	color: #6fa583;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

.pc-store-flow a.pc-coupon-chip__remove:hover {
	color: #dc2626;
	text-decoration: none;
}

/* Promo-code input + Apply button (cart form and checkout proxy) */

.pc-store-flow .pc-cart__coupon-row .input-text,
.pc-store-flow .pc-checkout-promo__row input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
}

.pc-store-flow .pc-cart__coupon-row .input-text:focus,
.pc-store-flow .pc-checkout-promo__row input:focus {
	border-color: #3fb859;
	outline: none;
	box-shadow: 0 0 0 3px rgba(63, 184, 89, 0.15);
}

.pc-store-flow .pc-cart__coupon-apply,
.pc-store-flow .pc-checkout-promo__apply {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: #17181c;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.pc-store-flow .pc-cart__coupon-apply:hover:not(:disabled),
.pc-store-flow .pc-checkout-promo__apply:hover:not(:disabled) {
	border-color: #3fb859;
	color: #3fb859;
	background: #fff;
}

.pc-store-flow .pc-cart__coupon-apply:disabled,
.pc-store-flow .pc-checkout-promo__apply:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Spinner while the coupon is being applied */

.pc-store-flow .pc-cart__coupon-apply.is-loading,
.pc-store-flow .pc-checkout-promo__apply.is-loading {
	opacity: 0.8;
	cursor: wait;
}

.pc-store-flow .pc-cart__coupon-apply.is-loading::after,
.pc-store-flow .pc-checkout-promo__apply.is-loading::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	vertical-align: -1px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: pc-spin 0.6s linear infinite;
}

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

.pc-store-flow .pc-cart__coupon-row .input-text[readonly],
.pc-store-flow .pc-checkout-promo__row input[readonly] {
	opacity: 0.6;
}

@media (max-width: 600px) {
	.pc-store-nav__links {
		gap: 16px;
	}
}