/**
 * Shrike Pre-order
 *
 * Palette matched to the original ShrikeFi sticky footer bar:
 *   bar background  #000000
 *   bar top border  #6F6F6F
 *   bar text        #F4F5F8
 *   muted text      #aaaaaa
 *   button          #F4F5F8 on #191919 text, 4px radius
 *   font            inherited from the theme (matches the original bar)
 */

.shpo-bar {
	--shpo-bg: #000000;
	--shpo-border: #6f6f6f;
	--shpo-text: #f4f5f8;
	--shpo-muted: #aaaaaa;
	--shpo-btn-bg: #f4f5f8;
	--shpo-btn-text: #191919;

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: block;
	width: 100%;
	min-height: 100px;
	padding: 8px 20px;
	background: var(--shpo-bg);
	border-top: 1px solid var(--shpo-border);
	box-sizing: border-box;
}

.shpo-bar *,
.shpo-bar *::before,
.shpo-bar *::after {
	box-sizing: border-box;
}

.shpo-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 84px;
	max-width: 1200px;
	margin: 0 auto;
}

.shpo-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	min-width: 0;
	margin-right: 16px;
}

.shpo-title {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--shpo-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.shpo-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--shpo-text);
}

.shpo-price {
	font-size: 14px;
	color: var(--shpo-text);
}

/**
 * The theme styles the inner WooCommerce price markup (.woocommerce-Price-amount,
 * bdi, ins) with its own palette colour, which is more specific than a colour on
 * the parent - that is what made the amount render blue. Force it back to the
 * bar's text colour on every descendant.
 */
.shpo-bar .shpo-price,
.shpo-bar .shpo-price *,
.shpo-bar .shpo-meta > span,
.shpo-bar .shpo-price .price,
.shpo-bar .shpo-price .amount,
.shpo-bar .shpo-price .woocommerce-Price-amount,
.shpo-bar .shpo-price .woocommerce-Price-currencySymbol,
.shpo-bar .shpo-price bdi,
.shpo-bar .shpo-price ins,
.shpo-bar .shpo-price ins > *,
.shpo-bar .shpo-price a {
	color: var(--shpo-text) !important;
	text-decoration: none !important;
}

/* Struck-through "was" price stays muted. */
.shpo-bar .shpo-price del,
.shpo-bar .shpo-price del * {
	color: var(--shpo-muted) !important;
	text-decoration: line-through !important;
	opacity: 1;
}

.shpo-price del {
	font-weight: 400;
}

.shpo-price ins {
	text-decoration: none;
}

/* Stock / status sits on its own line BELOW the price, like the original badge. */
.shpo-stock {
	display: block;
	width: 100%;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--shpo-text);
}

.shpo-stock:empty {
	display: none;
}

.shpo-tax {
	font-size: 11px;
	color: var(--shpo-muted);
}

/* Booking deposit shown in the bar: amount charged now leads, full price
   follows as smaller context. */
.shpo-pay-now,
.shpo-pay-now * {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--shpo-text) !important;
	text-decoration: none !important;
}

.shpo-pay-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--shpo-muted);
}

.shpo-pay-full,
.shpo-pay-full * {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--shpo-muted) !important;
	text-decoration: none !important;
}

/* Higher specificity than the price colour override above, so the tax note
   keeps its muted grey instead of being forced to the bar text colour. */
.shpo-bar .shpo-meta > .shpo-tax {
	color: var(--shpo-muted) !important;
}

/* Actions: Subscribe Now sits to the LEFT of the main button */

.shpo-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}

.shpo-subscribe[hidden] {
	display: none !important;
}

.shpo-subscribe {
	display: flex;
	align-items: center;
}

/* The cloned Back In Stock Notifier button, restyled to match the bar. */
.shpo-subscribe .shpo-subscribe-btn,
.shpo-subscribe input.cwg_popup_submit,
.shpo-subscribe .cwg_popup_submit {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto !important;
	max-width: none !important;
	min-height: unset !important;
	height: 50px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	background-color: var(--shpo-btn-bg) !important;
	color: var(--shpo-btn-text) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-align: center;
	text-transform: uppercase;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer;
}

/* Call to action */

.shpo-cta {
	flex-shrink: 0;
	width: 432px !important;
	max-width: none !important;
	min-height: unset !important;
	height: 50px !important;
	padding: 0 24px;
	background-color: var(--shpo-btn-bg);
	color: var(--shpo-btn-text);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.shpo-cta:hover,
.shpo-cta:focus {
	background-color: var(--shpo-btn-bg) !important;
	color: var(--shpo-btn-text) !important;
}

.shpo-cta:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
}

.shpo-error:not([hidden]) {
	max-width: 1200px;
	margin: 8px auto 0;
	padding: 8px 12px;
	background: #2a1210;
	border-left: 3px solid #e05a4a;
	color: #ffb3a8;
	font-size: 13px;
}

/* Popup - white card with a black top edge, as before */

.shpo-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.shpo-modal.open {
	display: flex;
}

body.shpo-open {
	overflow: hidden;
}

.shpo-modal-box {
	position: relative;
	width: 92%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 0;
	border-top: 4px solid #000;
	padding: 32px;
}

/* ---- popup internals ---- */

.shpo-modal-head {
	margin: 0 0 18px;
	padding-right: 28px;
}

.shpo-tag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 9px;
	border-radius: 2px;
	background: #111;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.shpo-modal-box h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.3px;
	color: #111;
}

/* The number that matters most */
.shpo-amount {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 16px;
	padding: 16px 18px;
	border: 1px solid #111;
	border-radius: 3px;
	background: #fafafa;
}

.shpo-amount-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #555;
}

.shpo-amount-value {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	color: #111;
}

.shpo-amount-value * {
	color: #111 !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

.shpo-amount-note {
	margin-top: 2px;
	font-size: 12px;
	color: #666;
}

/* Key / value rows */
.shpo-facts {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	border-top: 1px solid #ececec;
}

.shpo-facts li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid #ececec;
	font-size: 13px;
	line-height: 1.45;
}

.shpo-fact-k {
	flex: 0 0 116px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #888;
}

.shpo-fact-v {
	flex: 1;
	color: #222;
}

/* Terms */
.shpo-terms-title {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #888;
}

.shpo-terms {
	max-height: 168px;
	overflow-y: auto;
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	background: #fbfbfb;
	font-size: 12.5px;
	line-height: 1.65;
	color: #444;
	overscroll-behavior: contain;
}

.shpo-terms p {
	margin: 0 0 10px;
}

.shpo-terms p:last-child {
	margin-bottom: 0;
}

.shpo-terms:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* Acknowledgement with a custom tick */
.shpo-ack {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	color: #222;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.shpo-ack:hover {
	border-color: #111;
	background: #fafafa;
}

.shpo-ack input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.shpo-ack-box {
	position: relative;
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border: 1.5px solid #999;
	border-radius: 3px;
	background: #fff;
	transition: border-color 0.15s, background-color 0.15s;
}

.shpo-ack input:checked + .shpo-ack-box {
	border-color: #111;
	background: #111;
}

.shpo-ack input:checked + .shpo-ack-box::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(40deg);
}

.shpo-ack input:focus-visible + .shpo-ack-box {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.shpo-ack-text {
	flex: 1;
}

/* Confirm */
.shpo-confirm {
	width: 100%;
	margin-top: 14px;
	padding: 15px;
	border: 2px solid #ddd;
	border-radius: 3px;
	background: #f4f4f4;
	color: #aaa;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: not-allowed;
	transition: all 0.18s;
}

.shpo-confirm.on {
	border-color: #111;
	background: #111;
	color: #fff;
	cursor: pointer;
}

.shpo-confirm.on:hover {
	background: #fff;
	color: #111;
}

.shpo-confirm:disabled {
	opacity: 1;
	cursor: not-allowed;
}

.shpo-secure {
	margin: 10px 0 0;
	text-align: center;
	font-size: 11px;
	color: #999;
}

.shpo-modal .shpo-error:not([hidden]) {
	margin: 12px 0 0;
	padding: 9px 12px;
	border-left: 3px solid #c0392b;
	background: #fdf0f0;
	color: #7d2019;
	font-size: 13px;
}

/* Variation options that cannot be bought yet */
option.shpo-opt-soon,
select option:disabled.shpo-opt-soon {
	color: #999;
	font-style: italic;
}

/* Options that are not on sale yet.
   Deliberately no visual overrides: we add the swatch plugin's own `disabled`
   class, so its native styling applies and these match every other product on
   the site. An earlier version forced opacity 0.4 plus grayscale here, which
   rendered far darker than the plugin's own 0.6. */

/* Cart / checkout notice */

.shpo-notice {
	margin: 14px 0;
	padding: 14px 18px;
	border: 1px solid #111;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.shpo-bar {
		min-height: auto;
		padding: 12px 16px;
	}

	.shpo-bar-inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: auto;
		gap: 10px;
	}

	.shpo-info {
		width: 100%;
		margin-right: 0;
	}

	.shpo-actions {
		width: 100%;
		gap: 10px;
	}

	.shpo-subscribe,
	.shpo-subscribe .shpo-subscribe-btn,
	.shpo-subscribe .cwg_popup_submit {
		width: 100% !important;
		height: 48px !important;
		font-size: 14px !important;
	}

	.shpo-title {
		font-size: 14px;
		white-space: normal;
	}

	.shpo-price,
	.shpo-meta {
		font-size: 12px;
	}

	.shpo-cta {
		width: 100% !important;
		height: 48px !important;
		font-size: 14px;
	}
}