/*
 * cod-form.css — styles for the plugin's frontend components:
 *   [cod_form]       the registry-driven order form (matches the owner's template)
 *   [cod_price]      old/new price + discount badge
 *   [cod_sticky_cta] the reusable sticky bottom CTA bar
 *
 * Class names mirror the owner's Elementor template so the design is identical
 * whether rendered by the shortcode or by the original markup.
 */

/* ── Order form card ──────────────────────────────────────────────────────── */
.wp-order-form {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Fill the container (e.g. the product template column) rather than a fixed card. */
	max-width: 100%;
	width: 100%;
	margin: 10px auto;
	background-color: #ffffff;
	padding: 20px;
	border: 2px solid var( --cod-border, #000000 ); /* Outer black border */
	border-radius: 24px;
	box-shadow: 0 15px 35px rgba( 0, 0, 0, 0.1 );
	color: #2d3436;
	box-sizing: border-box;
}

/* Single-offer products: hide the redundant selector (radio stays for the JS). */
.wp-order-form .cod-offers-single { display: none; }

/* ── Out-of-stock state ──────────────────────────────────────────────────────
   Prominent banner + the interactive parts greyed/disabled (the JS also blocks
   submit + abandoned capture, and the button is rendered disabled). */
.cod-soldout-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	margin: 0 0 16px;
	padding: 14px 16px;
	background: #fff3cd;
	border: 1px solid #f0d98a;
	border-radius: 14px;
}
.cod-soldout-badge { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: #7a5b00; }
.cod-soldout-text { font-size: 13px; color: #9a7b25; }
.cod-soldout .cod-offers,
.cod-soldout .cod-fields { opacity: 0.5; pointer-events: none; filter: grayscale( 0.3 ); }
.cod-soldout .btn-checkout {
	background: #c3c4c7 !important;
	border-color: #b0b1b4 !important;
	color: #fff !important;
	box-shadow: none !important;
	animation: none !important;
	cursor: not-allowed;
}

/* Clear separator between the offers group and the customer-info group. */
.wp-order-form .cod-fields {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 2px dashed #e2e5ea;
	position: relative;
}
/* Small "Vos informations" caption sitting on the divider. */
.wp-order-form .cod-fields::before {
	content: attr( data-label );
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX( -50% );
	background: #ffffff;
	padding: 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #9aa0a6;
}
.wp-order-form * { box-sizing: border-box; }

.wp-order-form .form-header { text-align: center; margin-bottom: 20px; }
.wp-order-form .form-title { font-weight: 800; font-size: 22px; color: #000000; margin-bottom: 5px; }
.wp-order-form .trust-badge {
	display: inline-block;
	background: #f1f2f6;
	color: #000000;
	font-size: 11px;
	padding: 4px 12px;
	border-radius: 50px;
	font-weight: 700;
	margin-bottom: 10px;
	border: 1px solid var( --cod-border, #000000 );
}
.wp-order-form .star-rating { color: var( --cod-stars, #ffb400 ); }

/* Variant cards with black border. */
.wp-order-form .order-option {
	background: #f8fafc;
	border: 2px solid var( --cod-border, #000000 );
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}
.wp-order-form .order-option.active {
	background: #ffffff;
	/* Selected offer adopts the active theme's primary color. */
	border-color: var( --cod-primary, #e63946 );
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.12 );
	transform: scale( 1.02 );
}

/* The native radio is hidden; .check-circle is the visual indicator. */
.wp-order-form .order-option input[type="radio"] { display: none; }
.wp-order-form .check-circle {
	width: 22px;
	height: 22px;
	border: 2px solid var( --cod-border, #000000 );
	border-radius: 50%;
	margin-right: 12px;
	position: relative;
	flex-shrink: 0;
}
.wp-order-form .order-option.active .check-circle {
	background: var( --cod-primary, #e63946 );
	border-color: var( --cod-primary, #e63946 );
}
.wp-order-form .order-option.active .check-circle::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	left: 7px;
	top: 3px;
	transform: rotate( 45deg );
}

.wp-order-form .variant-label { font-weight: 700; font-size: 16px; flex-grow: 1; color: #000000; }
.wp-order-form .price-label { font-weight: 900; font-size: 17px; color: var( --cod-primary, #e63946 ); text-align: right; }

/* Floating per-offer badges. */
.wp-order-form .promo-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX( -50% );
	background: var( --cod-border, #000000 );
	color: white;
	font-size: 9px;
	padding: 3px 12px;
	border-radius: 4px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
}
.wp-order-form .promo-badge.badge-red { background: var( --cod-primary, #e63946 ); }

/* Inputs with black border + leading emoji icon. */
.wp-order-form .input-wrapper { position: relative; margin-bottom: 10px; }
.wp-order-form .input-wrapper span {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 18px;
}
.wp-order-form .input-field {
	width: 100%;
	/* Softer, lighter fields so they read differently from the bold offer cards. */
	background: #f7f8fa;
	border: 1.5px solid var( --cod-input-border, #d7dbe0 );
	border-radius: 12px;
	padding: 14px 14px 14px 44px;
	font-size: 16px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	box-sizing: border-box;
}
.wp-order-form .input-field:focus {
	background: #ffffff;
	border-color: var( --cod-primary, #e63946 );
	box-shadow: 0 0 0 3px rgba( 230, 57, 70, 0.12 );
}
/* Invalid phone (fails the format check). */
.wp-order-form .input-field.cod-invalid {
	border-color: #e11d48;
	background: #fff5f6;
}

/* Checkout button with soft shake. */
.wp-order-form .btn-checkout {
	background: var( --cod-primary, #e63946 );
	color: white;
	border: 2px solid var( --cod-border, #000000 );
	width: 100%;
	padding: 15px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	margin-top: 5px;
	box-shadow: 0 6px 15px rgba( 230, 57, 70, 0.25 );
	animation: softShake 4s infinite;
}
.wp-order-form .btn-checkout:disabled,
.wp-order-form .btn-checkout.is-loading { opacity: 0.75; cursor: progress; animation: none; }
@keyframes softShake {
	0%, 90%, 100% { transform: scale( 1 ); }
	92%, 96% { transform: scale( 1.03 ) rotate( 0.8deg ); }
	94%, 98% { transform: scale( 1.03 ) rotate( -0.8deg ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.wp-order-form .btn-checkout { animation: none; }
}

.wp-order-form .footer-note {
	text-align: center;
	font-size: 11px;
	color: #000000;
	margin-top: 15px;
	display: flex;
	justify-content: center;
	gap: 15px;
	font-weight: 600;
}
.wp-order-form .cod-form-error {
	margin-top: 12px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: #b3001b;
	background: #fdecee;
	border-radius: 12px;
}

/* Honeypot: present in the DOM, never visible/reachable for humans. */
.wp-order-form .cod-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── [cod_price] block ────────────────────────────────────────────────────── */
.cod-price-wrapper {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: nowrap;
	font-family: inherit;
	padding: 5px 0;
}
.cod-price-wrapper .old-price {
	font-size: 16px;
	color: #666;
	text-decoration: line-through;
	font-weight: 600;
	white-space: nowrap;
}
.cod-price-wrapper .new-price {
	font-size: 28px;
	color: var( --cod-price, #FF0000 );
	font-weight: 900;
	white-space: nowrap;
	line-height: 1;
}
.cod-price-wrapper .badge {
	display: inline-flex;
	align-items: center;
	background-color: var( --cod-badge, #e91e8c );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
	transform: translateY( -2px );
}
@media ( max-width: 480px ) {
	.cod-price-wrapper { gap: 8px; }
	.cod-price-wrapper .old-price { font-size: 14px; }
	.cod-price-wrapper .new-price { font-size: 24px; }
	.cod-price-wrapper .badge { font-size: 11px; padding: 3px 8px; }
}

/* ── [cod_thankyou] page ──────────────────────────────────────────────────── */
.cod-ty {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	padding: 40px 16px 64px;
}
.cod-ty-card {
	max-width: 560px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #eceff3;
	border-radius: 22px;
	box-shadow: 0 24px 60px -28px rgba( 0, 0, 0, 0.25 );
	padding: 40px 32px 34px;
	text-align: center;
}
.cod-ty-check {
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var( --cod-primary, #16a34a );
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 26px -10px var( --cod-primary, #16a34a );
	animation: codTyPop 0.45s cubic-bezier( 0.18, 0.9, 0.32, 1.2 ) both;
}
@keyframes codTyPop { 0% { transform: scale( 0.4 ); opacity: 0; } 100% { transform: scale( 1 ); opacity: 1; } }
/* Reassurance/brand image: spans the full card content width, rounded corners. */
.cod-ty-hero {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	margin: 0 0 22px;
	object-fit: cover;
}
.cod-ty-title { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 10px; }
.cod-ty-msg { color: #4b5563; font-size: 16px; line-height: 1.6; margin: 0 auto 18px; max-width: 440px; }
.cod-ty-msg p { margin: 0 0 8px; }
/* Order summary fills the card width so it lines up with the hero image. */
.cod-ty .cod-summary { box-shadow: none; border-color: #eef1f4; margin: 18px auto; max-width: none; width: 100%; box-sizing: border-box; }
/* Amber "keep your phone nearby" confirmation-call alert. */
.cod-ty-alert {
	background: #fff7ed;
	border: 1px solid #fb923c;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 20px 0 4px;
	text-align: center;
}
.cod-ty-alert-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #9a3412;
}
.cod-ty-alert-msg { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: #c2410c; }
.cod-ty-thanks { margin-top: 22px; font-size: 14px; font-style: italic; color: #9ca3af; }
.cod-ty-btn {
	display: inline-block;
	margin-top: 22px;
	padding: 14px 30px;
	border-radius: 999px;
	background: var( --cod-primary, #e63946 );
	color: #ffffff !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: filter 0.2s, transform 0.2s;
}
.cod-ty-btn:hover { filter: brightness( 0.95 ); transform: translateY( -1px ); }
.cod-ty-note { margin-top: 18px; font-size: 13px; color: #6b7280; }
@media ( prefers-reduced-motion: reduce ) { .cod-ty-check { animation: none; } }

/* ── [cod_announcement] top header bar (reusable component) ────────────────── */
.cod-announcement {
	/* Full-bleed even inside a boxed container; flush to top, thicker bar,
	   with breathing room before the main content. */
	position: relative;
	width: 100vw;
	margin: 0 0 32px calc( 50% - 50vw );
	box-sizing: border-box;
	overflow: hidden;
	background: var( --cod-announce-bg, #111111 );
	color: var( --cod-announce-text, #ffffff );
	text-align: center;
	padding: 16px 18px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Animated light streak sweeping across the bar. */
.cod-announcement::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient( 100deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.18 ) 50%, rgba( 255, 255, 255, 0 ) 100% );
	transform: skewX( -20deg );
	animation: codAnnounceShine 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes codAnnounceShine {
	0% { left: -150%; }
	45%, 100% { left: 150%; }
}
/* The text itself gently pulses to draw the eye. */
.cod-announcement span {
	display: inline-block;
	position: relative;
	z-index: 1;
	animation: codAnnouncePulse 4s ease-in-out infinite;
}
@keyframes codAnnouncePulse {
	0%, 100% { transform: scale( 1 ); opacity: 0.92; }
	50% { transform: scale( 1.03 ); opacity: 1; }
}
@media ( max-width: 600px ) {
	.cod-announcement { font-size: 13px; padding: 13px 14px; margin-bottom: 24px; }
}

/* Body/description images: the plugin owns the spacing so it's predictable and
   overrides Elementor's default ".elementor-widget:not(:last-child){margin-block-end:20px}".
   --cod-body-gap is injected per product page (default 0). */
.elementor-widget.cod-body-img,
.cod-body-img {
	margin-block-end: 0 !important;
	margin-bottom: 0 !important;
}
.cod-body-img + .cod-body-img {
	margin-block-start: var( --cod-body-gap, 0px ) !important;
	margin-top: var( --cod-body-gap, 0px ) !important;
}

/* Sticky main image on desktop (class added to the left column by the template). */
@media ( min-width: 768px ) {
	.cod-sticky-col {
		position: sticky;
		top: 20px;
		align-self: flex-start; /* required so a sticky column has room in the flex row */
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.cod-announcement::after, .cod-announcement span { animation: none; }
}

/* ── [cod_sticky_cta] sticky bottom bar (reusable component) ───────────────── */
.cod-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient( 90deg, var( --cod-primary, #e63946 ) 0%, var( --cod-primary-dark, #b91c1c ) 100% );
	color: white !important;
	text-align: center;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	z-index: 999999;
	box-shadow: 0px -4px 15px rgba( 0, 0, 0, 0.15 );
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	font-family: 'Montserrat', sans-serif, Arial;
}
.cod-sticky-cta .shake-text { display: inline-block; animation: codStickyShake 5s infinite; }
@keyframes codStickyShake {
	0%, 85%, 100% { transform: translateX( 0 ); }
	87%, 91%, 95% { transform: translateX( -3px ); }
	89%, 93%, 97% { transform: translateX( 3px ); }
}
.cod-sticky-cta .shimmer {
	position: absolute;
	top: 0;
	left: -100%;
	width: 30%;
	height: 100%;
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.3 ) 50%, rgba( 255, 255, 255, 0 ) 100% );
	transform: skewX( -20deg );
	animation: codStickyShimmer 4s infinite;
}
@keyframes codStickyShimmer {
	0% { left: -100%; }
	30%, 100% { left: 150%; }
}
.cod-sticky-cta:hover { filter: brightness( 1.1 ); }
@media ( max-width: 600px ) {
	.cod-sticky-cta { padding: 15px 0; font-size: 14px; border-radius: 15px 15px 0 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.cod-sticky-cta .shake-text, .cod-sticky-cta .shimmer { animation: none; }
}

/* ── Product image gallery (big image + thumbnail strip) ────────────────────── */
.cod-gallery { width: 100%; }
.cod-gallery-main {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: #f6f7f9;
	box-shadow: 0 14px 40px -22px rgba( 0, 0, 0, 0.45 );
}
.cod-gallery-main img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.cod-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
.cod-gallery-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	/* Image painted as a cover background so the thumbnail is always fully filled. */
	background-color: #f1f3f5;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.cod-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cod-gallery-thumb:hover { transform: translateY( -2px ); }
.cod-gallery-thumb.is-active { border-color: var( --cod-primary, #2563eb ); }
@media ( min-width: 768px ) {
	.cod-gallery-thumb { width: 76px; height: 76px; }
}

/* ── RTL (Arabic) — scoped to our own containers so the theme is unaffected ─── */
.wp-order-form.cod-rtl { text-align: right; direction: rtl; }
/* Mirror the leading input icon + padding to the right side. */
.wp-order-form.cod-rtl .input-wrapper span { left: auto; right: 15px; }
.wp-order-form.cod-rtl .input-field { text-align: right; padding: 14px 44px 14px 14px; }
/* Offer card: indicator + price swap sides. */
.wp-order-form.cod-rtl .check-circle { margin-right: 0; margin-left: 12px; }
.wp-order-form.cod-rtl .price-label { text-align: left; }
.wp-order-form.cod-rtl .footer-note { direction: rtl; }
.cod-announcement.cod-rtl { direction: rtl; }
.cod-ty.cod-rtl { direction: rtl; }
.cod-ty.cod-rtl .cod-summary-value { text-align: left; }