/**
 * YCT Checkout Popups — toast notices + thank-you modal
 *
 * NEW FILE. Save to:
 *   child-theme/assets/css/yct-checkout-popups.css
 *
 * Loaded by YCT_Checkout_Redesign::enqueue_popup_assets() on the
 * checkout page AND the order-received (thank-you) page.
 *
 * Desktop: normal units (px/rem/em).
 * Mobile (max-width:767px): vw for font-size, % for padding/margin/
 * spacing, em for button padding — per project convention.
 */

/* ==================== Toast notices ==================== */

.yct-toast-wrap {
	position: fixed !important;
	top: 24px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px !important;
	pointer-events: none !important;
	width: auto !important;
}

.yct-toast {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #000 !important;
	border-radius: 0.5em !important;
	padding: 14px 20px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
	pointer-events: auto !important;
	min-width: 280px !important;
	max-width: 420px !important;
	opacity: 0 !important;
	transform: translateY(-16px) !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.yct-toast.is-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

.yct-toast-icon {
	display: flex !important;
	flex-shrink: 0 !important;
	color: inherit !important;
}
.yct-toast-icon svg {
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor !important;
}

.yct-toast-msg {
	flex: 1 !important;
	color: inherit !important;
}

.yct-toast-close {
	background: transparent !important;
	border: none !important;
	outline:none!important;
	cursor: pointer !important;
	color: #fff !important;
	width: 20px !important;
	height: 20px !important;
	padding: 0.1em !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
	opacity: 0.65 !important;
	transition: opacity 0.2s ease, color 0.2s ease !important;
}
.yct-toast-close:hover {
	opacity: 1 !important;
	color: #fff !important;
	
}
.yct-toast-close:active {
	opacity: 1 !important;
	color: #6B0F1A !important;
	
}

/* Success — black bg, green text/icon */
.yct-toast--success {
	color: #3DDC84 !important;
}
.yct-toast--success .yct-toast-icon,
.yct-toast--success .yct-toast-icon svg {
	color: #3DDC84 !important;
}

/* Error / info — black bg, yellow text/icon */
.yct-toast--error {
	color: #F5C518 !important;
}
.yct-toast--error .yct-toast-icon,
.yct-toast--error .yct-toast-icon svg {
	color: #F5C518 !important;
}

/* Hide the native inline WooCommerce notice once it has been toasted.
   If JS fails to load this class never gets added, so the notice still
   shows inline as a safe fallback. */
.yct-native-notice-hidden {
	display: none !important;
}

/* ==================== Thank-you modal ==================== */

.yct-thankyou-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.75) !important;
	z-index: 9999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.3s ease, visibility 0.3s ease !important;
	padding: 20px !important;
	box-sizing: border-box !important;
}
.yct-thankyou-overlay.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

.yct-thankyou-modal {
	position: relative !important;
	background: #fff !important;
	color: #000 !important;
	border-radius: 1em !important;
	padding: 48px 52px !important;
	max-width: 440px !important;
	width: 100% !important;
	text-align: center !important;
	box-sizing: border-box !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
	transform: scale(0.94) !important;
	transition: transform 0.3s ease !important;
	font-family: 'Outfit', sans-serif !important;
}
.yct-thankyou-overlay.is-visible .yct-thankyou-modal {
	transform: scale(1) !important;
}

.yct-thankyou-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 35px !important;
	height: 35px !important;
	border-radius: 50% !important;
	border: none !important;
	background: none !important;
	outline:none!important;
	color: #000 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.yct-thankyou-close:hover {
	background: none !important;
	color: #000 !important;
	border: none!important;
}
.yct-thankyou-close:active {
	background: none !important;
	color: #000 !important;
	border: none !important;
}

.yct-thankyou-icon {
	width: 56px !important;
	height: 56px !important;
	margin: 0 auto 20px !important;
	border-radius: 50% !important;
	background: #6B0F1A !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color:#fff!important;
}
.yct-thankyou-icon svg {
	width: 26px !important;
	height: 26px !important;
	stroke: #fff !important;
}

.yct-thankyou-title {
	font-size: 1.4rem !important;
	font-weight: 600 !important;
	color: #000 !important;
	margin: 0 0 10px !important;
}

.yct-thankyou-sub {
	font-size: 0.92rem !important;
	color: #555 !important;
	line-height: 1.55 !important;
	margin: 0 0 30px !important;
}

.yct-thankyou-actions {
	display: flex !important;
	gap: 12px !important;
}

.yct-thankyou-btn {
	flex: 1 !important;
	padding: 0.9em 1em !important;
	border-radius: 0.5em !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	text-align: center !important;
	border: 1px solid #000 !important;
	box-sizing: border-box !important;
	background:#6B0F1A!important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.yct-thankyou-btn--secondary {
	background: #fff !important;
	color: #000 !important;
}
.yct-thankyou-btn--secondary:hover {
	background: #000 !important;
	color: #fff !important;
}
.yct-thankyou-btn--secondary:active {
	background: #6B0F1A !important;
	border-color: #6B0F1A !important;
	color: #fff !important;
}

.yct-thankyou-btn--primary {
	background: #6b0f1a !important;
	color: #fff !important;
}
.yct-thankyou-btn--primary:hover {
	background: #6B0F1A !important;
	border-color: #6B0F1A !important;
	color: #fff !important;
}
.yct-thankyou-btn--primary:active {
	background: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

/* ====================================================================
   Native WooCommerce / WordPress notices — sitewide toast styling
   Converts the default inline notice blocks (add-to-cart, cart errors,
   coupon errors, login/register errors, account update messages, etc.)
   into the same top-center popup treatment as the custom .yct-toast
   above. Covers .woocommerce-message (success), .woocommerce-error
   and .woocommerce-info, wrapped or unwrapped.
   ==================================================================== */

.woocommerce-notices-wrapper {
	position: fixed !important;
	top: 24px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px !important;
	width: auto !important;
	pointer-events: none !important;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	position: fixed !important;
	top: 24px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	background: #000 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 1em !important;
	padding: 14px 20px !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
	max-width: 420px !important;
	width: auto !important;
	list-style: none !important;
	margin: 0 !important;
	pointer-events: auto !important;
	opacity: 1 !important;
	transition: opacity 0.3s ease !important;
}

/* Toggled by yct-toast-notices.js — auto-dismiss (7s) and
   dismiss-on-click-anywhere both add this class before removal. */
.woocommerce-message.yct-notice-hide,
.woocommerce-error.yct-notice-hide,
.woocommerce-info.yct-notice-hide {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* When the theme wraps notices in .woocommerce-notices-wrapper, let the
   wrapper hold the fixed position/stacking and reset the notices
   themselves to sit inside it normally. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
}

.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Success — black bg, white text, green tick icon */
.woocommerce-message::before {
	content: '\2713' !important;
	color: #3DDC84 !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.1em !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Error / info — black bg, yellow text + yellow icon */
.woocommerce-error,
.woocommerce-info {
	color: #F5C518 !important;
}
.woocommerce-error li,
.woocommerce-info li {
	color: #F5C518 !important;
}
.woocommerce-error::before,
.woocommerce-info::before {
	content: '!' !important;
	color: #F5C518 !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.85em !important;
	line-height: 1 !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	border: 2px solid #F5C518 !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* "View cart" / forward links inside notices */
.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 600 !important;
	font-size: inherit !important;
	text-decoration: underline !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	color: #fff !important;
	transition: color 0.2s ease !important;
}
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover {
	color: #6B0F1A !important;
}
.woocommerce-message a.button.wc-forward:active,
.woocommerce-error a.button.wc-forward:active,
.woocommerce-info a.button.wc-forward:active {
	color: #6B0F1A !important;
}

/* ====================================================================
   MOBILE — max-width: 767px
   vw for font-size, % for padding/margin/spacing, em for button padding
   ==================================================================== */

@media (max-width: 767px) {
	.yct-toast-wrap {
		top: 3% !important;
		width: 92% !important;
		left: 50% !important;
	}
	.yct-toast {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 3.5% 4% !important;
		border-radius: 2vw !important;
		font-size: 3.4vw !important;
		gap: 3% !important;
	}
	.yct-toast-icon svg {
		width: 4.6vw !important;
		height: 4.6vw !important;
	}
	.yct-toast-close {
		width: 4.6vw !important;
		height: 4.6vw !important;
		font-size: 3.6vw !important;
		padding: 0.1em !important;
	}

	.yct-thankyou-overlay {
		padding: 5% !important;
	}
	.yct-thankyou-modal {
		padding: 10% 8% !important;
		border-radius: 3vw !important;
		max-width: 100% !important;
	}
	.yct-thankyou-close {
		top: 3% !important;
		right: 3% !important;
		width: 7vw !important;
		height: 7vw !important;
		font-size: 3.6vw !important;
	}
	.yct-thankyou-icon {
		width: 13vw !important;
		height: 13vw !important;
		margin: 0 auto 5% !important;
	}
	.yct-thankyou-icon svg {
		width: 6vw !important;
		height: 6vw !important;
	}
	.yct-thankyou-title {
		font-size: 5.2vw !important;
		margin: 0 0 3% !important;
	}
	.yct-thankyou-sub {
		font-size: 3.6vw !important;
		margin: 0 0 8% !important;
	}
	.yct-thankyou-actions {
		flex-direction: column !important;
		gap: 3% !important;
	}
	.yct-thankyou-btn {
		padding: 0.9em 1em !important;
		font-size: 3.6vw !important;
		border-radius: 1.6vw !important;
	}

	/* Native WooCommerce / WordPress notices */
	.woocommerce-notices-wrapper {
		top: 3% !important;
		width: 92% !important;
	}
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info {
		top: 3% !important;
		width: 92% !important;
		max-width: 92% !important;
		padding: 3.5% 4% !important;
		border-radius: 2vw !important;
		font-size: 3.4vw !important;
		gap: 3% !important;
	}
	.woocommerce-message li,
	.woocommerce-error li,
	.woocommerce-info li {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 100% !important;
	}
	.woocommerce-message::before,
	.woocommerce-error::before,
	.woocommerce-info::before {
		font-size: 4vw !important;
	}
	.woocommerce-error::before,
	.woocommerce-info::before {
		width: 4.6vw !important;
		height: 4.6vw !important;
	}
	.woocommerce-message a.button.wc-forward,
	.woocommerce-error a.button.wc-forward,
	.woocommerce-info a.button.wc-forward {
		font-size: 3.4vw !important;
	}
}