/* First Purchase Discount for WooCommerce - Public Styles */

:root {
	--fpd-navy: #0b1f3a;
	--fpd-gold: #d4af37;
	--fpd-gold-light: #fbf7ea;
	--fpd-text: #1a1a1a;
	--fpd-muted: #6b7280;
	--fpd-overlay-bg: rgba(11, 31, 58, 0.72);
	--fpd-success-green: #16a34a;
}

/* Popup overlay */
.fpd-popup-overlay {
	position: fixed;
	inset: 0;
	background-color: var(--fpd-overlay-bg);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 16px;
}

.fpd-popup-overlay.fpd-is-visible {
	display: flex;
}

.fpd-popup-box {
	position: relative;
	background-color: #ffffff;
	border-radius: 10px;
	max-width: 460px;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: fpd-pop-in 0.25s ease-out;
}

@keyframes fpd-pop-in {
	from { transform: scale(0.92); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.fpd-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	cursor: pointer;
	color: var(--fpd-navy);
	font-size: 14px;
	z-index: 2;
}

.fpd-popup-media img.fpd-popup-image {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.fpd-popup-content {
	padding: 28px 28px 24px 28px;
	text-align: center;
}

.fpd-popup-headline {
	color: var(--fpd-navy);
	font-size: 22px;
	margin: 0 0 8px 0;
	font-weight: 700;
}

.fpd-popup-subtext {
	color: var(--fpd-muted);
	font-size: 14px;
	margin: 0 0 18px 0;
	line-height: 1.5;
}

/* Countdown timer */
.fpd-countdown-timer {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 0 0 18px 0;
}

.fpd-countdown-inline {
	gap: 2px;
	font-weight: 700;
	color: var(--fpd-navy);
}

.fpd-countdown-segment {
	background-color: var(--fpd-navy);
	color: #ffffff;
	border-radius: 6px;
	padding: 8px 12px;
	min-width: 48px;
}

.fpd-countdown-value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
}

.fpd-countdown-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.8;
	margin-top: 2px;
}

/* Form */
.fpd-popup-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fpd-popup-input {
	padding: 12px 14px !important;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.fpd-popup-input:focus {
	outline: 2px solid var(--fpd-gold);
	border-color: var(--fpd-gold);
}

.fpd-popup-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--fpd-muted);
	text-align: left;
}

.fpd-popup-submit {
	background-color: var(--fpd-gold);
	color: var(--fpd-navy);
	border: none;
	border-radius: 6px;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.fpd-popup-submit:hover {
	opacity: 0.9;
}

.fpd-popup-submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.fpd-popup-message {
	font-size: 13px;
	margin: 0;
	min-height: 16px;
}

.fpd-popup-message.fpd-is-error {
	color: #c0392b;
}

.fpd-popup-message.fpd-is-success {
	color: #1a7f37;
}

.fpd-popup-success {
	background-color: var(--fpd-success-green);
	color: #ffffff;
	border-radius: 8px;
	padding: 24px 20px;
	text-align: center;
	animation: fpd-pop-in 0.2s ease-out;
}

/* Circular badge housing the checkmark. */
.fpd-popup-success .fpd-icon.fa-check-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 12px auto;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
}

/* Checkmark drawn with plain CSS (no icon font dependency) for crisp,
   consistent rendering across every browser and device. This selector is
   intentionally more specific than the fallback icon file's rule so it
   always wins regardless of stylesheet load order. */
.fpd-popup-success .fpd-icon.fa-check-circle::before {
	content: "";
	display: block;
	width: 15px;
	height: 8px;
	border-left: 3px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	transform: rotate(-45deg) translate(1px, -2px);
}

.fpd-popup-success-text {
	font-size: 14px;
	color: #ffffff;
	margin: 0;
	line-height: 1.5;
}

/* Shortcode banner */
.fpd-shortcode-banner {
	background-color: var(--fpd-navy);
	color: #ffffff;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 16px 0;
}

.fpd-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.fpd-banner-text {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

.fpd-banner-text .fpd-icon {
	color: var(--fpd-gold);
}

.fpd-banner-button {
	background-color: var(--fpd-gold);
	color: var(--fpd-navy);
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.fpd-style-card {
	border: 1px solid var(--fpd-gold);
}

.fpd-style-inline {
	background-color: var(--fpd-gold-light);
	color: var(--fpd-navy);
}

.fpd-style-inline .fpd-banner-button {
	background-color: var(--fpd-navy);
	color: #ffffff;
}

@media (max-width: 480px) {
	.fpd-banner-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}