/*
 * 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; } }

/* ── Storefront chrome resets ─────────────────────────────────────────────── */
/* Thank-you page renders on our blank canvas (no theme header/footer); keep the
   body flush + light so the confirmation card sits cleanly on any theme. */
body.cod-thankyou-canvas { margin: 0; background: #ffffff; }

/* Defensive: a few themes leave a stray top gap above the first section on
   Elementor Canvas pages (the "white band" above the announcement bar). On COD
   storefront pages we pull the content flush to the top. The WP admin-bar offset
   lives on <html>, so it's preserved — only theme-injected body spacing is reset. */
body.elementor-template-canvas { margin-top: 0 !important; }
body.cod-thankyou-canvas .cod-announcement,
body.elementor-template-canvas .elementor > .elementor-section:first-child {
	margin-top: 0 !important;
}

/* ── [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; }

/* ── Imported / pasted product description: keep all media responsive ──────── */
/* The rich body (from the product editor, with images sideloaded into the
   media library) renders inside an Elementor text widget. These rules stop
   wide images, tables and embeds from overflowing the column. TinyMCE / "Add
   Media" insert images with explicit width="…" attributes and inline
   style="width:…px" — !important on max-width caps those to the container so
   the body never exceeds the page limit. */
.cod-rich-body {
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.cod-rich-body img,
.cod-rich-body figure,
.cod-rich-body table,
.cod-rich-body iframe,
.cod-rich-body video,
.cod-rich-body embed,
.cod-rich-body object,
.cod-rich-body pre {
	max-width: 100% !important;
	height: auto;
}
.cod-rich-body figure { margin: 0 0 1em; }
/* Wide tables scroll horizontally inside the column rather than push it out. */
.cod-rich-body table { display: block; overflow-x: auto; }
/* Imported bodies keep their source text-alignment classes (e.g. Storeep's
   st-align-* on headings/paragraphs); honor them so the layout matches the
   original. Block images centre nicely too. */
.cod-rich-body .st-align-center { text-align: center; }
.cod-rich-body .st-align-right { text-align: right; }
.cod-rich-body .st-align-left { text-align: left; }
.cod-rich-body .st-align-justify { text-align: justify; }
.cod-rich-body img { display: block; margin-inline: auto; }
.cod-rich-body p img { display: inline-block; }
/* Also guard bodies recovered from older products that aren't wrapped in
   .cod-rich-body but still render inside an Elementor text widget. */
.elementor-widget-text-editor img { max-width: 100% !important; height: auto; }