/* COD Quick Order — Frontend Styles */

.codqo-wrapper {
	margin-top: 12px;
	clear: both;
}

.codqo-cod-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border-radius: 4px;
	padding: 12px 20px;
	font-weight: 600;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.codqo-cod-button .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.codqo-fee-note {
	font-size: 0.85em;
	color: #666;
	margin: 6px 0 0;
}

.codqo-button-emoji {
	font-size: 1.1em;
	line-height: 1;
}

.codqo-button-icon-img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	vertical-align: middle;
}

/* Body-level rule: hide native Add to Cart button when a product is COD-only,
   while keeping quantity / variation selectors intact. */
body.codqo-hide-addtocart form.cart button.single_add_to_cart_button,
body.codqo-hide-addtocart form.cart .single_add_to_cart_button {
	display: none !important;
}

/* -----------------------------------------------------------------------
 * Inline order form
 * -------------------------------------------------------------------- */

.codqo-form-container {
	margin-top: 16px;
	max-width: 480px;
}

.codqo-order-form {
	padding: 20px;
	border-width: var(--codqo-form-border-width, 1px);
	border-style: solid;
	border-color: var(--codqo-form-border, #e2e2e2);
	border-radius: 8px;
	background: var(--codqo-form-bg, #fafafa);
	box-sizing: border-box;
	overflow-x: hidden;
	max-width: 100%;
	font-family: var(--codqo-form-font-family, inherit);
	line-height: var(--codqo-form-line-height, normal);
	letter-spacing: var(--codqo-form-letter-spacing, normal);
}

@media (max-width: 600px) {
	.codqo-order-form.codqo-has-mobile-font-size {
		font-size: var(--codqo-form-mobile-font-size) !important;
	}
}

.codqo-form-title {
	margin-top: 0;
	font-size: 1.1em;
}

.codqo-product-preview {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.codqo-product-preview--offers-active {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.codqo-product-preview--offers-active:has(.codqo-variation-picker) {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.codqo-product-preview__image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.codqo-product-preview__info {
	flex: 1;
	min-width: 0;
}

.codqo-product-preview__name {
	display: block;
	font-size: 0.98em;
	margin-bottom: 2px;
}

.codqo-product-preview__price {
	display: block;
	font-size: 0.9em;
	color: #555;
	margin-bottom: 6px;
}

.codqo-variation-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.codqo-variation-field label {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
	margin-bottom: 3px;
	text-transform: capitalize;
}

.codqo-variation-field select {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: var(--codqo-field-radius, 4px);
	box-sizing: border-box;
}

.codqo-order-summary {
	background: rgba(0, 0, 0, 0.03);
	border-radius: 6px;
	padding: 10px 14px;
	margin: 4px 0 14px;
	font-size: 0.92em;
}

.codqo-order-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
}

.codqo-order-summary__row--total {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 4px;
	padding-top: 8px;
	font-weight: 700;
	font-size: 1.05em;
}

.codqo-form-messages {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 4px;
	margin-bottom: 12px;
	font-size: 0.92em;
}

.codqo-form-messages.codqo-error {
	display: flex;
	background: #fdecea;
	color: #611a15;
	border: 1px solid #f5c6cb;
}

.codqo-form-messages.codqo-success {
	display: flex;
	background: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #c8e6c9;
}

.codqo-success-check {
	display: none;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.codqo-form-messages.codqo-success .codqo-success-check {
	display: block;
}

.codqo-success-check__circle {
	stroke: #2e7d32;
	stroke-width: 3;
	stroke-miterlimit: 10;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: codqo-check-circle 0.5s ease-out forwards;
}

.codqo-success-check__mark {
	stroke: #2e7d32;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 32;
	stroke-dashoffset: 32;
	animation: codqo-check-mark 0.35s 0.35s ease-out forwards;
}

@keyframes codqo-check-circle {
	to { stroke-dashoffset: 0; }
}
@keyframes codqo-check-mark {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.codqo-success-check__circle,
	.codqo-success-check__mark {
		animation: none;
		stroke-dashoffset: 0;
	}
}

.codqo-fields-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
}

.codqo-field-row {
	margin-bottom: var(--codqo-field-margin, 12px);
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.codqo-field-row.codqo-width-50 {
	flex: 0 0 calc(50% - 6px);
	max-width: calc(50% - 6px);
}

@media (max-width: 480px) {
	.codqo-field-row.codqo-width-50 {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.codqo-field-row label {
	display: block;
	font-weight: var(--codqo-form-font-weight, 600);
	margin-bottom: 4px;
	font-size: 0.9em;
}

.codqo-label-left .codqo-field-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.codqo-label-left .codqo-field-row label {
	flex: 0 0 34%;
	max-width: 34%;
	margin-bottom: 0;
}

.codqo-label-left .codqo-field-row > input,
.codqo-label-left .codqo-field-row > select,
.codqo-label-left .codqo-field-row > .codqo-phone-input-group,
.codqo-label-left .codqo-field-row > .codqo-icon-input-wrap {
	flex: 1 1 auto;
}

/* No per-label-mode icon override needed here anymore — the icon is a
   real flex child centered against the input by the browser itself
   (see .codqo-icon-input-wrap above), which already works correctly
   in both "label above" and "label left" layouts without needing to
   know which one is active. */

.codqo-field-row input[type="text"],
.codqo-field-row input[type="tel"],
.codqo-field-row input[type="email"],
.codqo-field-row input[type="number"],
.codqo-field-row select {
	width: 100%;
	padding: var(--codqo-field-padding, 8px) calc(var(--codqo-field-padding, 8px) + 2px);
	border: 1px solid #ccc;
	border-radius: var(--codqo-field-radius, 4px);
	box-sizing: border-box;
	font-family: inherit;
	box-shadow: var(--codqo-field-shadow, none);
}

.codqo-field-row input::placeholder,
.codqo-field-row select::placeholder {
	font-style: var(--codqo-placeholder-font-style, normal);
	opacity: var(--codqo-placeholder-opacity, 1);
}

.codqo-field-row input[type="text"]:focus,
.codqo-field-row input[type="tel"]:focus,
.codqo-field-row input[type="email"]:focus,
.codqo-field-row input[type="number"]:focus,
.codqo-field-row select:focus {
	outline: none;
	border-color: var(--codqo-focus-color, var(--codqo-form-theme-color, #2e7d32));
	box-shadow: 0 0 0 2px var(--codqo-focus-color, var(--codqo-form-theme-color, #2e7d32));
}

.codqo-field-row input.codqo-invalid,
.codqo-field-row select.codqo-invalid {
	border-color: var(--codqo-error-color, #d63638);
	background: #fff8f8;
}

/* Phone country-dial-code prefix (Behavior → Country-based phone field). */
.codqo-phone-input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.codqo-phone-input-group .codqo-phone-dial-code {
	display: flex;
	align-items: center;
	padding: 0 8px;
	border: 1px solid #ccc;
	border-right: none;
	border-radius: var(--codqo-field-radius, 4px) 0 0 var(--codqo-field-radius, 4px);
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.9em;
	white-space: nowrap;
}

.codqo-phone-input-group input[type="tel"] {
	border-radius: 0 var(--codqo-field-radius, 4px) var(--codqo-field-radius, 4px) 0;
}

/* Builder blocks: heading / divider / spacer / custom HTML banner. */
.codqo-block-heading {
	font-weight: 700;
	font-size: 1.05em;
	margin: 4px 0 10px;
}

.codqo-block-divider {
	border: none;
	border-top: 1px solid var(--codqo-form-border, #e2e2e2);
	margin: 14px 0;
}

.codqo-block-spacer {
	display: block;
	height: 16px;
}

.codqo-block-html {
	margin-bottom: 12px;
}

/* Announcement bar. */
.codqo-announcement-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-radius: var(--codqo-field-radius, 4px);
	font-size: 0.9em;
	margin-bottom: 12px;
}

.codqo-announcement-bar__dismiss {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	color: inherit;
	opacity: 0.7;
}

.codqo-announcement-bar__dismiss:hover {
	opacity: 1;
}

.codqo-announcement-bar__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.codqo-announcement-bar__icon {
	flex-shrink: 0;
	font-size: 1.1em;
	line-height: 1;
}
.codqo-announcement-bar__text {
	min-width: 0;
}
.codqo-announcement-bar__cta {
	flex-shrink: 0;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.12);
	color: inherit;
	font-weight: 700;
	font-size: 0.92em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.codqo-announcement-bar__cta:hover {
	background: rgba(0, 0, 0, 0.22);
	color: inherit;
}

/* Sticky: pins the bar to the very top of the viewport while the page
   scrolls, above everything else on the page (including a theme's own
   sticky header, which is why the z-index is deliberately very high). */
.codqo-announcement-bar--sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}

/* Animations. */
.codqo-announcement-bar--anim-fade { animation: codqoAnnounceFade 0.6s ease both; }
.codqo-announcement-bar--anim-slide { animation: codqoAnnounceSlide 0.5s ease both; }
.codqo-announcement-bar--anim-pulse { animation: codqoAnnouncePulse 1.8s ease-in-out infinite; }
@keyframes codqoAnnounceFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes codqoAnnounceSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes codqoAnnouncePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* Scrolling marquee: the text track scrolls continuously; duplicated in
   the DOM by JS (see cod-frontend.js) so the loop has no visible gap. */
.codqo-announcement-bar--anim-marquee .codqo-announcement-bar__inner {
	overflow: hidden;
	position: relative;
}
.codqo-announcement-bar--anim-marquee .codqo-announcement-bar__text {
	display: inline-flex;
	gap: 60px;
	white-space: nowrap;
	animation: codqoAnnounceMarquee 14s linear infinite;
}
@keyframes codqoAnnounceMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.codqo-announcement-bar--anim-fade,
	.codqo-announcement-bar--anim-slide,
	.codqo-announcement-bar--anim-pulse,
	.codqo-announcement-bar--anim-marquee .codqo-announcement-bar__text {
		animation: none;
	}
}

/* Multi-step form. */
.codqo-step-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 0.85em;
	color: #666;
}

.codqo-step-progress__track {
	flex: 1 1 auto;
	height: 4px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.codqo-step-progress__fill {
	height: 100%;
	background: var(--codqo-form-theme-color, #2e7d32);
	transition: width 0.25s ease;
}

.codqo-step {
	display: none;
}

.codqo-step.is-active {
	display: block;
}

.codqo-step-nav {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.codqo-step-nav .codqo-step-back {
	background: none;
	border: 1px solid var(--codqo-form-border, #ccc);
	border-radius: var(--codqo-field-radius, 4px);
	padding: 10px 18px;
	cursor: pointer;
}

.codqo-step-nav .codqo-step-next {
	background: var(--codqo-submit-bg, #2e7d32);
	color: var(--codqo-submit-text, #fff);
	border: none;
	border-radius: var(--codqo-field-radius, 4px);
	padding: 10px 18px;
	cursor: pointer;
}

/* Sticky mobile submit button (form open, small screens). */
@media (max-width: 600px) {
	.codqo-sticky-submit-mobile .codqo-order-form {
		padding-bottom: 76px;
	}

	.codqo-sticky-submit-mobile .codqo-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100000;
		background: var(--codqo-form-bg, #fff);
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
		margin: 0;
	}

	.codqo-sticky-submit-mobile .codqo-actions .codqo-submit-button {
		width: 100%;
	}
}

.codqo-field-error {
	color: #d63638;
	font-size: 0.8em;
	margin-top: 4px;
	display: block;
}

.codqo-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.required {
	color: #d63638;
}

.codqo-variation-note {
	font-size: 0.85em;
	color: #8a6d3b;
	background: #fcf8e3;
	border: 1px solid #faebcc;
	padding: 8px 10px;
	border-radius: 4px;
}

.codqo-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.codqo-order-form.codqo-multi-step .codqo-final-step-actions {
	display: none;
}

.codqo-order-form.codqo-multi-step.codqo-at-last-step .codqo-final-step-actions {
	display: flex;
}

.codqo-actions .codqo-submit-button,
.codqo-actions .codqo-cancel-button {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	text-align: center;
}

.codqo-privacy-note {
	font-size: 0.78em;
	color: #888;
	margin-top: 10px;
	margin-bottom: 0;
}

.codqo-submit-button {
	background-color: var(--codqo-submit-bg, #2e7d32);
	color: var(--codqo-submit-text, #ffffff);
	padding: var(--codqo-submit-padding, 12px 24px);
	font-size: var(--codqo-submit-font-size, 1em);
	border: 2px solid var(--codqo-submit-bg, #2e7d32);
	border-radius: var(--codqo-field-radius, 4px);
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.codqo-submit-button:hover {
	filter: brightness(0.88);
}

.codqo-submit-button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.codqo-cancel-button {
	background: #fee2e2 !important;
	color: #b91c1c !important;
	border: 1.5px solid #fecaca !important;
	border-radius: var(--codqo-field-radius, 4px);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Keep Cancel visually aligned with the primary action, including inside
 * third-party External Form iframes. Theme/WordPress .button rules must not
 * shrink it relative to the configured COD submit button. */
.codqo-actions .codqo-cancel-button {
	box-sizing: border-box !important;
	min-height: 44px !important;
	padding: 12px 24px !important;
	font-size: var(--codqo-submit-font-size, 1em) !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
}

.codqo-cancel-button:hover {
	background: #fecaca !important;
	color: #991b1b !important;
}

/* -----------------------------------------------------------------------
 * Quantity stepper (lives in the product preview area, not a field row)
 * -------------------------------------------------------------------- */

.codqo-product-preview__qty {
	margin-top: 8px;
}

.codqo-product-preview__qty label {
	display: block;
	font-size: 0.78em;
	font-weight: 600;
	margin-bottom: 4px;
	color: inherit;
}

.codqo-qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.codqo-qty-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	touch-action: manipulation;
}

.codqo-qty-dec {
	border-radius: var(--codqo-field-radius, 4px) 0 0 var(--codqo-field-radius, 4px);
}

.codqo-qty-inc {
	border-radius: 0 var(--codqo-field-radius, 4px) var(--codqo-field-radius, 4px) 0;
}

.codqo-qty-stepper input[type="number"] {
	width: 44px;
	height: 28px;
	text-align: center;
	border: 1px solid #ccc;
	border-left: none;
	border-right: none;
	font-size: 13px;
	font-weight: 600;
	appearance: textfield;
	-moz-appearance: textfield;
}

.codqo-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.codqo-qty-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.codqo-theme-glass .codqo-qty-btn,
.codqo-theme-glass .codqo-qty-stepper input[type="number"] {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

@media (max-width: 480px) {
	.codqo-field-grid {
		grid-template-columns: 1fr;
	}
	.codqo-form-container {
		max-width: 100%;
	}

	/* Compact layout on mobile: smaller text, tighter frame/padding, and
	   smaller input fields so the form doesn't feel oversized on a phone
	   screen. */
	.codqo-order-form {
		padding: 14px;
		font-size: 0.92em;
	}
	.codqo-form-title {
		font-size: 1em;
	}
	.codqo-field-row {
		margin-bottom: 10px;
	}
	.codqo-field-row label {
		font-size: 0.85em;
		margin-bottom: 3px;
	}
	.codqo-field-row input[type="text"],
	.codqo-field-row input[type="tel"],
	.codqo-field-row input[type="email"],
	.codqo-field-row input[type="number"],
	.codqo-field-row select {
		padding: 6px 8px;
		font-size: 0.92em;
	}
	.codqo-has-icon input,
	.codqo-has-icon select {
		padding-left: 30px !important;
	}
	.codqo-field-icon {
		font-size: 13px;
		flex-basis: 28px;
		width: 28px;
		margin-right: -28px;
	}
	.codqo-has-icon .codqo-phone-input-group {
		padding-left: 30px;
	}
	.codqo-submit-button {
		padding: 10px 18px;
		font-size: 0.95em;
	}
	.codqo-wrapper[data-display="modal"] .codqo-modal-backdrop {
		align-items: flex-start;
		padding: 12px 10px;
	}
	.codqo-wrapper[data-display="modal"] .codqo-order-form {
		padding: 20px 16px 16px;
		max-height: none;
		width: 100%;
		margin: 0 auto;
	}
}

/* -----------------------------------------------------------------------
 * Animation presets — subtle and accessible by design.
 * All respect prefers-reduced-motion.
 * -------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	.codqo-anim-pulse {
		animation: codqo-pulse 2.2s ease-in-out infinite;
	}
	@keyframes codqo-pulse {
		0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.35); }
		50% { box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); }
	}

	.codqo-anim-glow {
		animation: codqo-glow 2.4s ease-in-out infinite;
	}
	@keyframes codqo-glow {
		0%, 100% { box-shadow: 0 0 4px rgba(46, 125, 50, 0.4); }
		50% { box-shadow: 0 0 14px rgba(46, 125, 50, 0.75); }
	}

	.codqo-anim-gradient {
		position: relative;
		overflow: hidden;
	}
	.codqo-anim-gradient::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-size: 200% 200%;
		background-image: linear-gradient(90deg, currentColor 0%, transparent 100%);
		opacity: 0.35;
		animation: codqo-gradient 3s ease infinite;
		pointer-events: none;
	}
	@keyframes codqo-gradient {
		0% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}

	.codqo-anim-snake {
		position: relative;
		overflow: hidden;
	}
	.codqo-anim-snake::before {
		content: "";
		position: absolute;
		inset: -2px;
		border-radius: 6px;
		background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.9) 8%, transparent 16%);
		animation: codqo-snake 2.6s linear infinite;
		pointer-events: none;
	}
	@keyframes codqo-snake {
		to { transform: rotate(360deg); }
	}

	/* A tasteful, very small rotation — deliberately NOT a large screen-shake,
	   which hurts usability and accessibility. */
	.codqo-anim-wiggle {
		animation: codqo-wiggle 3.2s ease-in-out infinite;
	}
	@keyframes codqo-wiggle {
		0%, 92%, 100% { transform: rotate(0deg); }
		94% { transform: rotate(-1.5deg); }
		96% { transform: rotate(1.5deg); }
		98% { transform: rotate(-1deg); }
	}

	/* "Shake" kept intentionally tiny (2px max offset) — a gentle nudge,
	   not a distracting vibration. */
	.codqo-anim-shake {
		animation: codqo-shake 3.5s ease-in-out infinite;
	}
	@keyframes codqo-shake {
		0%, 90%, 100% { transform: translateX(0); }
		91% { transform: translateX(-2px); }
		93% { transform: translateX(2px); }
		95% { transform: translateX(-1px); }
		97% { transform: translateX(1px); }
	}

	.codqo-anim-bounce {
		animation: codqo-bounce 2.8s ease-in-out infinite;
	}
	@keyframes codqo-bounce {
		0%, 80%, 100% { transform: translateY(0); }
		90% { transform: translateY(-4px); }
	}

	/* A soft diagonal light sweep across the button. */
	.codqo-anim-shine {
		position: relative;
		overflow: hidden;
	}
	.codqo-anim-shine::after {
		content: "";
		position: absolute;
		top: 0;
		left: -60%;
		width: 40%;
		height: 100%;
		background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
		animation: codqo-shine 3s ease-in-out infinite;
		pointer-events: none;
	}
	@keyframes codqo-shine {
		0% { left: -60%; }
		40%, 100% { left: 130%; }
	}

	/* Ripple only fires on click via JS (.codqo-ripple-effect); this class
	   just prepares the button to contain it. */
	.codqo-anim-ripple {
		position: relative;
		overflow: hidden;
	}

	/* A very small, continuous vibration — distinct from "shake" by being
	   faster and multi-axis, but still capped at ~1px so it stays gentle
	   and accessible rather than a jarring "screen shake". */
	.codqo-anim-vibration {
		animation: codqo-vibration 0.35s ease-in-out infinite;
	}
	@keyframes codqo-vibration {
		0%, 100% { transform: translate(0, 0); }
		25% { transform: translate(1px, -1px); }
		50% { transform: translate(-1px, 1px); }
		75% { transform: translate(1px, 1px); }
	}

	/* A continuous rainbow gradient flowing across the entire button
	   surface — not just a rotating highlight around the edge, which is
	   what a spinning conic-gradient ring (the previous approach here)
	   ends up looking like: color only visible in a narrow moving arc
	   at any given moment. This instead paints the full button with the
	   rainbow palette and animates its position, so color covers the
	   whole surface throughout the animation. Sits behind the button's
	   own text/icon via a negative z-index (see .codqo-anim-gradient
	   above for why that's the reliable way to layer this). */
	.codqo-anim-rainbow {
		position: relative;
		overflow: hidden;
	}
	.codqo-anim-rainbow::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: linear-gradient(
			90deg,
			#ff0000, #ff9900, #ffee00, #33cc33, #3399ff, #9933ff, #ff0000
		);
		background-size: 300% 100%;
		animation: codqo-rainbow-flow 3s linear infinite;
		pointer-events: none;
	}
	@keyframes codqo-rainbow-flow {
		0% { background-position: 0% 50%; }
		100% { background-position: 300% 50%; }
	}
}

.codqo-ripple-effect {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	transform: scale(0);
	animation: codqo-ripple-grow 0.6s ease-out;
	pointer-events: none;
}
@keyframes codqo-ripple-grow {
	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

/* When the OS/browser requests reduced motion, all animation classes
   fall back to a static button — accessibility takes priority. */
@media (prefers-reduced-motion: reduce) {
	.codqo-anim-pulse,
	.codqo-anim-glow,
	.codqo-anim-gradient,
	.codqo-anim-snake,
	.codqo-anim-wiggle,
	.codqo-anim-shake,
	.codqo-anim-bounce,
	.codqo-anim-shine,
	.codqo-anim-vibration,
	.codqo-anim-rainbow {
		animation: none !important;
	}
	.codqo-anim-snake::before,
	.codqo-anim-shine::after,
	.codqo-anim-gradient::before,
	.codqo-anim-rainbow::before {
		display: none !important;
	}
}

/* -----------------------------------------------------------------------
 * Sticky mobile bar
 * -------------------------------------------------------------------- */

.codqo-sticky-bar {
	display: none;
}

@media (max-width: 782px) {
	body.codqo-has-sticky-bar .codqo-sticky-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		padding: 10px 14px;
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
		/* Scales the whole bar (button text, price) down gracefully on
		   narrower phones instead of a single fixed size for all widths. */
		font-size: clamp(0.8rem, 3.2vw, 1rem);
	}
	body.codqo-has-sticky-bar .codqo-sticky-bar__price {
		font-weight: 700;
		white-space: nowrap;
		font-size: 1em;
	}
	body.codqo-has-sticky-bar .codqo-sticky-bar__button {
		flex: 1;
		justify-content: center;
		margin: 0;
		font-size: 1em;
		padding: 10px 14px;
	}
	/* Prevent the sticky bar from covering page content. */
	body.codqo-has-sticky-bar {
		padding-bottom: 64px;
	}

	/* The regular Cash on Delivery button/tab stays visible on mobile —
	   the sticky bar is an *additional* quick-access entry point fixed to
	   the bottom of the screen, not a replacement for it. (An earlier
	   version hid the button/tab's whole container here, which also hid
	   the order form nested inside it — the form could never actually
	   become visible again once opened. Don't hide any of this.) */
}

@media (max-width: 480px) {
	body.codqo-has-sticky-bar .codqo-sticky-bar {
		font-size: clamp(0.72rem, 3.6vw, 0.88rem);
		padding: 8px 10px;
	}
}

/* -----------------------------------------------------------------------
 * Popup / modal form mode
 * -------------------------------------------------------------------- */

.codqo-wrapper[data-display="modal"] .codqo-form-container {
	margin-top: 0;
	max-width: none;
}

.codqo-wrapper[data-display="modal"] .codqo-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.codqo-wrapper[data-display="modal"] .codqo-order-form {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 94vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	border-radius: 12px;
	padding: 30px 24px 22px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	/* Scrolling itself stays fully functional (needed as a safety net on
	   very small screens with many fields) — only the visible scrollbar
	   indicator is removed, so the form never shows a right-side bar. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* On phones, a fixed 20px backdrop inset plus the form's own 24px side
   padding (44px combined per side) ate a disproportionate chunk of a
   ~360px-wide screen, leaving the popup looking narrow with a lot of
   wasted backdrop visible on both sides. Tightening both paddings at
   common phone widths lets the form actually use the available width,
   while keeping enough inset that it still reads as a popup/card rather
   than a full-bleed page. */
@media (max-width: 480px) {
	.codqo-wrapper[data-display="modal"] .codqo-modal-backdrop {
		padding: 10px;
	}
	.codqo-wrapper[data-display="modal"] .codqo-order-form {
		max-width: 100%;
		padding: 22px 16px 18px;
		border-radius: 10px;
	}
}

@media (max-width: 360px) {
	.codqo-wrapper[data-display="modal"] .codqo-modal-backdrop {
		padding: 6px;
	}
	.codqo-wrapper[data-display="modal"] .codqo-order-form {
		padding: 18px 12px 16px;
		border-radius: 8px;
	}
}

.codqo-wrapper[data-display="modal"] .codqo-order-form::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.codqo-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	padding: 4px 8px;
}

.codqo-modal-close:hover {
	color: #222;
}

body.codqo-modal-open {
	overflow: hidden;
}

/* -----------------------------------------------------------------------
 * Success popup — shown after a COD order is placed, auto-closes itself
 * -------------------------------------------------------------------- */

.codqo-success-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100050;
}

.codqo-success-popup.is-visible {
	display: block;
}

.codqo-success-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	animation: codqo-popup-fade-in 0.25s ease;
}

.codqo-success-popup__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 90%;
	max-width: 400px;
	background: #fff;
	border-radius: 16px;
	padding: 34px 28px 26px;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	animation: codqo-popup-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

.codqo-success-popup__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #2e7d32, #43a047, #2e7d32);
	background-size: 200% 100%;
	animation: codqo-popup-shimmer 2.5s linear infinite;
}

.codqo-success-popup__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #aaa;
	cursor: pointer;
	padding: 4px 8px;
}

.codqo-success-popup__close:hover {
	color: #333;
}

.codqo-success-popup__icon {
	width: 68px;
	height: 68px;
	margin: 0 auto 14px;
}

.codqo-success-popup__icon svg {
	width: 100%;
	height: 100%;
}

.codqo-success-popup__circle {
	stroke: #2e7d32;
	stroke-width: 3;
	stroke-miterlimit: 10;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: codqo-check-circle 0.5s ease-out forwards;
}

.codqo-success-popup__check {
	stroke: #2e7d32;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 32;
	stroke-dashoffset: 32;
	animation: codqo-check-mark 0.35s 0.4s ease-out forwards;
}

.codqo-success-popup__title {
	margin: 0 0 8px;
	font-size: 1.3em;
	color: #1b1b1b;
}

.codqo-success-popup__message {
	margin: 0 0 18px;
	color: #555;
	font-size: 0.95em;
	line-height: 1.5;
}

/* -----------------------------------------------------------------------
 * Success popup: social contact icons
 * -------------------------------------------------------------------- */

.codqo-success-popup__product {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	padding: 12px;
	background: #f8fafc;
	border-radius: 10px;
	text-align: left;
}
.codqo-success-popup__product-image {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}
.codqo-success-popup__product-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.codqo-success-popup__product-link {
	font-weight: 700;
	font-size: 0.95em;
	color: #1f2937;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.codqo-success-popup__product-link:hover {
	text-decoration: underline;
}
.codqo-success-popup__product-meta {
	font-size: 0.78em;
	color: #94a3b8;
}
.codqo-success-popup__product-price {
	font-weight: 700;
	color: #2e7d32;
	font-size: 0.95em;
}

.codqo-success-popup__social {
	margin-bottom: 18px;
	padding-top: 4px;
	border-top: 1px solid #eee;
	padding-top: 14px;
}

.codqo-success-popup__social-label {
	margin: 0 0 10px;
	font-size: 0.82em;
	color: #888;
}

.codqo-success-popup__social-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.codqo-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.codqo-social-icon svg {
	width: 20px;
	height: 20px;
}

.codqo-social-icon:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.codqo-social-icon--messenger {
	background: linear-gradient(135deg, #00b2ff, #006aff);
}

.codqo-social-icon--twitter {
	background: #000;
}

.codqo-social-icon--whatsapp {
	background: #25d366;
}

.codqo-success-popup__progress {
	height: 4px;
	background: #eee;
	border-radius: 999px;
	overflow: hidden;
}

.codqo-success-popup__progress-bar {
	display: block;
	height: 100%;
	width: 100%;
	background: #2e7d32;
	border-radius: 999px;
	transform-origin: left;
	animation-name: codqo-popup-countdown;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes codqo-popup-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes codqo-popup-pop-in {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes codqo-popup-shimmer {
	to { background-position: -200% 0; }
}

@keyframes codqo-popup-countdown {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* -----------------------------------------------------------------------
 * Exit Popup Offer
 * -------------------------------------------------------------------- */
.codqo-exit-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100060; /* above the success popup, in case both ever exist */
}

.codqo-exit-popup.is-visible {
	display: block;
}

.codqo-exit-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	animation: codqo-popup-fade-in 0.25s ease;
}

.codqo-exit-popup__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 420px;
	border-radius: 16px;
	padding: 32px 28px 28px;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	animation: codqo-popup-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.codqo-exit-popup__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #aaa;
	cursor: pointer;
	padding: 4px 8px;
}
.codqo-exit-popup__close:hover {
	color: #333;
}

.codqo-exit-popup__icon {
	font-size: 42px;
	line-height: 1;
	margin-bottom: 8px;
}

.codqo-exit-popup__title {
	margin: 0 0 8px;
	font-size: 1.3em;
	font-weight: 700;
	color: #1b1b1b;
}

.codqo-exit-popup__message {
	margin: 0 0 18px;
	color: #555;
	font-size: 0.98em;
	line-height: 1.5;
}

.codqo-exit-popup__coupon {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 20px;
	border: 2px dashed #cbd5e1;
	border-radius: 10px;
	background: #f8fafc;
}

.codqo-exit-popup__coupon-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #1b1b1b;
}

.codqo-exit-popup__coupon-copied {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	background: #1b1b1b;
	color: #fff;
	font-size: 0.8em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.codqo-exit-popup__coupon-copied.is-shown {
	opacity: 1;
}

.codqo-exit-popup__button {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.codqo-exit-popup__button:hover {
	filter: brightness(0.93);
	transform: translateY(-1px);
}

.codqo-exit-popup__dismiss {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	background: none;
	border: none;
	color: #888;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
}
.codqo-exit-popup__dismiss:hover {
	color: #555;
}

body.codqo-exit-popup-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.codqo-success-popup__backdrop,
	.codqo-success-popup__card,
	.codqo-success-popup__card::before,
	.codqo-success-popup__circle,
	.codqo-success-popup__check,
	.codqo-success-popup__progress-bar {
		animation: none !important;
	}
	.codqo-success-popup__circle,
	.codqo-success-popup__check {
		stroke-dashoffset: 0;
	}
	.codqo-exit-popup__backdrop,
	.codqo-exit-popup__card {
		animation: none !important;
	}
}

/* -----------------------------------------------------------------------
 * "Modern" form theme — an optional, more elevated card look (Settings →
 * General → Form design). The "Classic" theme (default) is completely
 * unaffected; these rules only apply inside .codqo-theme-modern.
 * -------------------------------------------------------------------- */

.codqo-theme-modern .codqo-order-form {
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 20px 50px -8px rgba(0, 0, 0, 0.12), 0 0 40px rgba(79, 70, 229, 0.08);
	animation: codqo-modern-fade-up 0.4s ease-out;
}

@keyframes codqo-modern-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.codqo-theme-modern .codqo-form-title {
	font-size: 1.2em;
	letter-spacing: -0.01em;
}

.codqo-theme-modern .codqo-field-row input[type="text"],
.codqo-theme-modern .codqo-field-row input[type="tel"],
.codqo-theme-modern .codqo-field-row input[type="email"],
.codqo-theme-modern .codqo-field-row input[type="number"],
.codqo-theme-modern .codqo-field-row select,
.codqo-theme-modern .codqo-variation-field select {
	border: 1.5px solid #e2e8f0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.codqo-theme-modern .codqo-field-row input:focus,
.codqo-theme-modern .codqo-field-row select:focus,
.codqo-theme-modern .codqo-variation-field select:focus {
	outline: none;
	border-color: var(--codqo-form-theme-color, #6366f1);
	box-shadow: 0 0 0 2px var(--codqo-form-theme-color, #6366f1);
}

.codqo-theme-modern .codqo-field-row label {
	font-weight: 600;
	color: #334155;
}

.codqo-theme-modern .codqo-product-preview {
	background: #f8fafc;
	border-radius: 12px;
	padding: 12px;
	border: 1px solid #e2e8f0;
	margin-bottom: 16px;
}

.codqo-theme-modern .codqo-submit-button {
	border: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.codqo-theme-modern .codqo-submit-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.codqo-theme-modern .codqo-order-form {
		animation: none;
	}
}

/* -----------------------------------------------------------------------
 * "Glass" form theme — dark, frosted glassmorphism card with a soft
 * purple/pink glow, inspired by dark-mode checkout UIs. Optional
 * (Settings → Order Form Fields → Form Design). Classic and Modern are
 * completely unaffected.
 * -------------------------------------------------------------------- */

.codqo-theme-glass .codqo-order-form {
	background: rgba(255, 255, 255, 0.06) !important;
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow:
		0 30px 80px -20px rgba(0, 0, 0, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 60px rgba(88, 60, 255, 0.1);
	animation: codqo-modern-fade-up 0.4s ease-out;
}

.codqo-theme-glass .codqo-form-title {
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.codqo-theme-glass .codqo-field-row label {
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	font-size: 0.72em;
	letter-spacing: 0.03em;
	font-weight: 600;
}

.codqo-theme-glass .codqo-field-row .required {
	color: #f87171;
}

.codqo-theme-glass .codqo-field-row input,
.codqo-theme-glass .codqo-field-row select,
.codqo-theme-glass .codqo-variation-field select {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	transition: all 0.25s ease;
}

.codqo-theme-glass .codqo-field-row input::placeholder {
	color: rgba(255, 255, 255, 0.2);
}

.codqo-theme-glass .codqo-field-row input:focus,
.codqo-theme-glass .codqo-field-row select:focus,
.codqo-theme-glass .codqo-variation-field select:focus {
	outline: none;
	border-color: var(--codqo-form-theme-color, #a78bfa) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	box-shadow: 0 0 0 1px var(--codqo-form-theme-color, #a78bfa), 0 0 16px var(--codqo-form-theme-color, #a78bfa);
}

.codqo-theme-glass .codqo-field-row select option,
.codqo-theme-glass .codqo-variation-field select option {
	background: #1a1d3a;
	color: #fff;
}

.codqo-theme-glass .codqo-product-preview {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.codqo-theme-glass .codqo-product-preview__name {
	color: #fff;
}

.codqo-theme-glass .codqo-product-preview__price {
	color: rgba(255, 255, 255, 0.6);
}

.codqo-theme-glass .codqo-privacy-note,
.codqo-theme-glass .codqo-variation-note {
	color: rgba(255, 255, 255, 0.35);
}

.codqo-theme-glass .codqo-submit-button {
	border: none !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.codqo-theme-glass .codqo-submit-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.codqo-theme-glass .codqo-cancel-button {
	background: rgba(255, 255, 255, 0.04) !important;
	color: rgba(255, 255, 255, 0.5) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.codqo-theme-glass .codqo-modal-close {
	color: rgba(255, 255, 255, 0.4);
}

.codqo-theme-glass .codqo-modal-close:hover {
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.codqo-theme-glass .codqo-order-form {
		animation: none;
	}
}

/* -----------------------------------------------------------------------
 * Quantity discount offer cards ("Buy 1 / Buy 2 & save / Buy 3 & save")
 * -------------------------------------------------------------------- */

.codqo-offer-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 16px;
}

.codqo-offer-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 2px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.codqo-offer-card:hover {
	border-color: #f7931e;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.codqo-offer-card.is-selected {
	border-color: #f7931e;
	background: #fff6d8;
}

.codqo-offer-card__thumb {
	position: relative;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
}

.codqo-offer-card__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
}

.codqo-offer-card__qty-badge {
	position: absolute;
	bottom: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #555;
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}

.codqo-offer-card.is-selected .codqo-offer-card__qty-badge {
	background: #f7931e;
}

.codqo-offer-card__body {
	flex: 1;
	min-width: 0;
}

.codqo-offer-card__title {
	display: block;
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: 4px;
	color: #222;
}

.codqo-offer-card__best {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.78em;
	font-weight: 700;
	color: #d9480f;
	background: #ffe8cc;
	padding: 1px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.codqo-offer-card__prices {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.codqo-offer-card__old {
	font-size: 0.85em;
	color: #999;
	text-decoration: line-through;
}

.codqo-offer-card__new {
	font-size: 1em;
	font-weight: 700;
	color: #222;
}

.codqo-offer-card__save {
	font-size: 0.75em;
	font-weight: 700;
	color: #1db954;
	background: #e8f9ee;
	padding: 1px 8px;
	border-radius: 999px;
}

.codqo-offer-card__radio {
	flex-shrink: 0;
}

.codqo-offer-card__radio input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: #f7931e;
	cursor: pointer;
}

/* -----------------------------------------------------------------------
 * Icon-based fields
 * -------------------------------------------------------------------- */

.codqo-has-icon label {
	display: block;
}

/* The icon and the input/select are real flex children of the same
   row, centered against each other by the browser's own flex layout —
   not by guessing a height value per theme/label-mode and hoping it
   matches. This is what actually guarantees correct vertical centering
   on every theme, at every font size, in both "label above" and
   "label left" layouts, with zero per-theme overrides needed. */
.codqo-icon-input-wrap {
	display: flex;
	align-items: center;
	position: relative;
	min-width: 0;
}
.codqo-has-icon .codqo-icon-input-wrap {
	flex: 1 1 auto;
}

.codqo-field-icon {
	flex: 0 0 34px;
	width: 34px;
	margin-right: -34px; /* pulls the input/select back under the icon */
	z-index: 1;
	text-align: center;
	pointer-events: none;
	font-size: 15px;
	line-height: 1;
}

.codqo-has-icon input,
.codqo-has-icon select {
	padding-left: 36px !important;
	box-sizing: border-box;
	width: 100%;
}

/* The phone field nests its dial-code + input one level deeper — the
   icon still only needs to reserve space once, on the outer group. */
.codqo-has-icon .codqo-phone-input-group {
	flex: 1 1 auto;
	padding-left: 36px;
	box-sizing: border-box;
}
.codqo-has-icon .codqo-phone-input-group input {
	padding-left: 0 !important;
	width: auto;
}

.codqo-theme-glass .codqo-field-icon {
	color: rgba(255, 255, 255, 0.5);
}

/* -----------------------------------------------------------------------
 * Submit button: loading spinner + success state
 * -------------------------------------------------------------------- */

.codqo-submit-button {
	position: relative;
}

.codqo-submit-button.is-loading {
	color: transparent !important;
	pointer-events: none;
}

.codqo-submit-button.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: codqo-btn-spin 0.7s linear infinite;
}

.codqo-submit-button.is-success {
	background-color: #1db954 !important;
	border-color: #1db954 !important;
}

@keyframes codqo-btn-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.codqo-submit-button.is-loading::after {
		animation: none;
	}
}

/* -----------------------------------------------------------------------
 * Payment Method Tabs — "Cash on Delivery" / "Online Payment (Card)"
 * -------------------------------------------------------------------- */

.codqo-payment-tabs-wrapper {
	margin-top: 12px;
	clear: both;
}

.codqo-payment-tabs-nav {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #e2e2e2;
	margin-bottom: 14px;
}

.codqo-payment-tab-btn {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 10px 18px;
	margin-bottom: -2px;
	font-weight: 600;
	font-size: 0.98em;
	color: #666;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.codqo-payment-tab-btn:hover {
	color: #2e7d32;
}

.codqo-payment-tab-btn.is-active {
	color: #2e7d32;
	border-bottom-color: #2e7d32;
}

.codqo-payment-tab-panel .codqo-wrapper {
	margin-top: 0;
}

/* Payment tabs: hide the native Add to Cart form in its original page
   position (it will be moved into the Online Payment tab by JS) — but
   only until it's actually inside our tab panel, where the panel's own
   show/hide governs visibility instead. Prevents a flash of the form
   appearing in its normal spot before JS relocates it. */
body.codqo-payment-tabs-active form.cart {
	display: none;
}
body.codqo-payment-tabs-active .codqo-payment-tab-panel form.cart {
	display: block;
}

.codqo-native-loading-note {
	color: #999;
	font-size: 0.85em;
	font-style: italic;
}

.codqo-payment-tab-panel[data-tab-panel="online"] .cart {
	margin-top: 4px;
}

.codqo-online-nudge {
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 14px;
	font-weight: 700;
	color: #a61b1b;
	line-height: 1.5;
}

.codqo-price-highlight {
	position: relative;
	display: inline-block;
	font-weight: 800;
	/* The base rule intentionally has no background — "None" and the
	   inline color style (always applied) are enough on their own. Each
	   effect below layers a background/box-shadow treatment on top. */
}

/* Highlight: soft, pale background behind the price. */
.codqo-price-effect-highlight {
	background: rgba(184, 134, 11, 0.15);
	padding: 1px 6px;
	border-radius: 4px;
}

/* Solid: a solid background using the chosen text color, with white text
   so it stays readable regardless of which color is picked. */
.codqo-price-effect-solid {
	background: currentColor;
	padding: 2px 8px;
	border-radius: 4px;
}
.codqo-price-effect-solid .codqo-price-highlight__text {
	color: #fff;
}

/* Gradient: background-image set inline (start/end colors), white text
   for contrast. */
.codqo-price-effect-gradient {
	padding: 2px 8px;
	border-radius: 4px;
}
.codqo-price-effect-gradient .codqo-price-highlight__text {
	color: #fff;
}

/* Badge: pill-shaped, bold, with a solid background derived from the
   chosen color. */
.codqo-price-effect-badge {
	background: currentColor;
	padding: 2px 10px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.codqo-price-effect-badge .codqo-price-highlight__text {
	color: #fff;
}

/* Glow: a soft pulsing shadow around the price text, no background. */
.codqo-price-effect-glow {
	animation: codqo-price-glow-pulse 1.8s ease-in-out infinite;
	padding: 1px 4px;
	border-radius: 4px;
}

@keyframes codqo-price-glow-pulse {
	0%, 100% { text-shadow: 0 0 4px currentColor; }
	50% { text-shadow: 0 0 12px currentColor, 0 0 4px currentColor; }
}

/* Rainbow: solid background in the chosen color plus an animated
   rainbow border-chase, matching the button's rainbow animation style. */
.codqo-price-effect-rainbow {
	background: currentColor;
	padding: 2px 8px;
	border-radius: 4px;
	overflow: hidden;
	z-index: 0;
}
.codqo-price-effect-rainbow .codqo-price-highlight__text {
	color: #fff;
}

.codqo-price-effect-rainbow::before {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		#ff0000 4%,
		#ff9900 9%,
		#ffee00 14%,
		#33cc33 19%,
		#3399ff 24%,
		#9933ff 29%,
		transparent 34%
	);
	animation: codqo-price-highlight-rainbow 2.5s linear infinite;
	pointer-events: none;
}

@keyframes codqo-price-highlight-rainbow {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.codqo-price-effect-rainbow::before,
	.codqo-price-effect-glow {
		animation: none;
	}
}

.codqo-online-pay-price {
	font-weight: 600;
	margin: 0 0 12px;
}

.codqo-online-pay-original {
	color: #999;
	font-weight: 400;
	margin-left: 6px;
}

.codqo-anim-vibration-text {
	display: inline-block;
	animation: codqo-vibration 0.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.codqo-anim-vibration-text {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.codqo-payment-tab-btn {
		transition: none;
	}
}

/* Free plan monthly order limit reached */
.codqo-limit-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 12px 14px;
	background: #fff8e1;
	border: 1px solid #f0d78c;
	border-radius: 6px;
	color: #5d4a06;
	font-size: 0.95em;
	line-height: 1.4;
}

.codqo-limit-notice .dashicons {
	flex: 0 0 auto;
	color: #a17f00;
}

.codqo-limit-notice__admin-hint {
	margin: 8px 0 0;
	padding: 8px 10px;
	background: #f0f6ff;
	border: 1px dashed #99b9e8;
	border-radius: 6px;
	font-size: 0.85em;
	color: #1d3f6e;
}

.codqo-limit-notice__admin-hint a {
	font-weight: 600;
}

/* -----------------------------------------------------------------
 * Coupon Code field
 * -------------------------------------------------------------- */
.codqo-coupon-input-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
}
.codqo-coupon-input-group input[type="text"] {
	flex: 1 1 auto;
	min-width: 0; /* lets the input actually shrink in a flex row instead of forcing its own overflow */
}
.codqo-apply-coupon-btn {
	flex: 0 0 auto; /* never shrinks or wraps to its own line, regardless of theme button resets */
	white-space: nowrap;
}
.codqo-coupon-result {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
}
.codqo-coupon-result--success {
	background: #ecfdf3;
	color: #15803d;
	border: 1px solid #b8f0cf;
}
.codqo-coupon-result--error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* Shipping Method field removed — shipping is now shown as a plain
 * Free/paid row in the order summary, styled just above. */

/* -----------------------------------------------------------------
 * Visual refinement to match the requested reference design: a
 * softly-tinted order summary "card" with the coupon apply row
 * merged directly into it (divider, no gap) when the admin places
 * the Coupon field immediately after the summary in Form Fields —
 * the common, recommended position — while still looking complete
 * on its own if placed elsewhere. Colors follow whatever theme color
 * the admin already picked in Settings → Button Appearance, the same
 * variable the submit button and focus rings use, so this always
 * matches the rest of the form rather than a hard-coded color.
 * -------------------------------------------------------------- */
.codqo-order-summary {
	background: #f8f9ff;
	background: color-mix(in srgb, var(--codqo-form-theme-color, #2563eb) 6%, #fff);
	border-radius: 12px;
	padding: 16px 18px;
}
.codqo-order-summary__row--total {
	border-top-color: color-mix(in srgb, var(--codqo-form-theme-color, #2563eb) 18%, transparent);
}
.codqo-order-summary__final-total {
	color: var(--codqo-form-theme-color, #2563eb);
}

.codqo-order-summary__free-shipping {
	color: #16a34a;
	font-weight: 700;
}
.codqo-order-summary__was-price {
	text-decoration: line-through;
	color: #94a3b8;
}

.codqo-order-summary__coupon-discount {
	color: #16a34a;
	font-weight: 700;
}

.codqo-order-summary .codqo-coupon-row {
	margin-top: 12px;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--codqo-form-theme-color, #2563eb) 15%, transparent);
}

.codqo-coupon-input-group input[type="text"] {
	padding: 8px 12px;
	font-size: 0.92em;
	border: 1px solid #e2e8f0;
	border-radius: var(--codqo-field-radius, 8px);
	background: #fff;
}
.codqo-apply-coupon-btn {
	background: var(--codqo-form-theme-color, #2563eb) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--codqo-field-radius, 8px) !important;
	padding: 0 16px !important;
	font-size: 0.92em !important;
	font-weight: 600 !important;
}
.codqo-apply-coupon-btn:hover {
	filter: brightness(0.92);
}

/* Quantity Discount Offers shown on the regular product page (Online
   Payment) — reuses all the .codqo-offer-card styling above verbatim,
   just needs its own spacing since it sits directly in the product
   summary rather than inside the COD form/modal. */
.codqo-online-offer-cards {
	margin: 16px 0 20px;
}

/* -----------------------------------------------------------------------
 * Social Buttons (WhatsApp, Messenger, custom) — sit right after the COD
 * button, sharing whatever animation class it uses (see .codqo-anim-*
 * above) so they read as one consistent set.
 * -------------------------------------------------------------------- */
.codqo-social-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}
.codqo-social-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95em;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.codqo-social-button:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
}
.codqo-social-button__icon {
	font-size: 1.1em;
	line-height: 1;
}
.codqo-social-whatsapp {
	background: #25d366;
	color: #fff;
}
.codqo-social-messenger {
	background: #0084ff;
	color: #fff;
}
.codqo-social-custom {
	background: #444;
	color: #fff;
}

.codqo-coupon-hint {
	margin: 0 0 8px;
	font-size: 0.85em;
	font-weight: 600;
	color: #15803d;
}


/* -------------------------------------------------------------------------
 * Currency switcher / authoritative server-side pricing feedback
 * ------------------------------------------------------------------------- */
.codqo-currency-switcher {
	margin: 14px 0 16px;
	padding: 12px 14px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
	background: rgba(127,127,127,.04);
}
.codqo-currency-switcher > label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
}
.codqo-currency-search {
	width: 100%;
	min-height: 38px;
	margin-bottom: 7px;
	padding: 7px 10px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
}
.codqo-currency-select-wrap {
	position: relative;
}
.codqo-currency-select {
	width: 100%;
	min-height: 42px;
	padding: 8px 38px 8px 12px;
	border: 1px solid rgba(0,0,0,.14);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}
.codqo-currency-rate-note {
	display: block;
	margin-top: 6px;
	opacity: .68;
	font-size: 11px;
}
.codqo-currency-rate-note.is-loading {
	opacity: .45;
}
.codqo-currency-spinner {
	display: none;
	position: absolute;
	right: 12px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: codqo-currency-spin .65s linear infinite;
	pointer-events: none;
}
.codqo-order-summary.is-recalculating {
	opacity: .72;
	transition: opacity .15s ease;
}
@keyframes codqo-currency-spin {
	to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
	.codqo-currency-switcher {
		padding: 10px 12px;
	}
}

.codqo-currency-debug-panel {
	margin: 0 0 12px;
	padding: 8px 10px;
	border: 1px dashed currentColor;
	border-radius: 7px;
	font: 11px/1.4 monospace;
	opacity: .8;
	overflow-wrap: anywhere;
}

/* v3.36.13: compact clickable currency picker with visible country flags. */
.codqo-currency-dropdown {
	position: relative;
}
.codqo-currency-trigger {
	width: 100%;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid rgba(0,0,0,.14);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
}
.codqo-currency-trigger:hover,
.codqo-currency-dropdown.is-open .codqo-currency-trigger {
	border-color: rgba(0,0,0,.28);
}
.codqo-currency-trigger__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.codqo-currency-trigger__label > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.codqo-currency-trigger__flag,
.codqo-currency-option__flag {
	font-size: 18px;
	line-height: 1;
	flex: 0 0 auto;
}
.codqo-currency-trigger__chevron {
	font-size: 18px;
	line-height: 1;
	opacity: .65;
	transition: transform .15s ease;
}
.codqo-currency-dropdown.is-open .codqo-currency-trigger__chevron {
	transform: rotate(180deg);
}
.codqo-currency-options {
	display: none;
	position: absolute;
	z-index: 99999;
	left: 0;
	right: 0;
	top: calc(100% + 5px);
	max-height: 300px;
	overflow-y: auto;
	padding: 5px;
	border: 1px solid rgba(0,0,0,.14);
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.codqo-currency-dropdown.is-open .codqo-currency-options {
	display: block;
}
.codqo-currency-option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	text-align: left;
	font-size: 13px;
	cursor: pointer;
}
.codqo-currency-option:hover,
.codqo-currency-option.is-selected {
	background: rgba(46,125,50,.08);
}
.codqo-currency-option__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.codqo-currency-options {
		max-height: 260px;
	}
}

/* v3.36.15: searchable currency picker + main product-page currency layer. */
.codqo-currency-options__search {
	padding: 8px;
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
}
.codqo-currency-options__search-input {
	width: 100%;
	box-sizing: border-box;
	min-height: 36px;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	padding: 7px 10px;
	background: #fff;
}
.codqo-currency-options__list {
	max-height: 290px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.codqo-currency-options__empty {
	padding: 12px;
	font-size: 13px;
	color: #6b7280;
	text-align: center;
}
.codqo-product-currency-switcher {
	margin: 0 0 12px;
	position: relative;
	z-index: 20;
}
.codqo-product-currency-switcher > label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 6px;
}
.codqo-product-currency-dropdown {
	max-width: 420px;
}
.codqo-product-currency-switcher .codqo-currency-options {
	z-index: 10050;
}
.codqo-product-currency-switcher .codqo-currency-options__list {
	max-height: 280px;
}
@media (max-width: 600px) {
	.codqo-product-currency-dropdown { max-width: 100%; }
}
.codqo-currency-dropdown .codqo-currency-options {
	max-height: 360px;
	overflow: hidden;
}

/* Product-page currency: compact floating control matching the supplied design. */
.codqo-product-currency-switcher { position:fixed !important; z-index:99999; font-size:clamp(11px,0.95vw,14px); line-height:1.2; max-width:min(92vw,250px); pointer-events:none; }
.codqo-product-currency-switcher .floating-currency { pointer-events:auto; position:relative; }
.codqo-floating-currency-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; min-height:clamp(34px,3vw,44px); max-width:min(92vw,250px); padding:clamp(8px,.7vw,11px) clamp(11px,.9vw,16px); border:0; background:#111; color:#fff; border-radius:30px; cursor:pointer; box-shadow:0 8px 25px rgba(0,0,0,.20); font:inherit; font-weight:700; }
.codqo-floating-currency-trigger__label { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.codqo-floating-currency-trigger__flag { font-size:1.15em; line-height:1; flex:0 0 auto; }
.codqo-floating-currency-trigger__code { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.codqo-floating-currency-trigger__chevron { opacity:.8; flex:0 0 auto; }
.codqo-floating-currency-menu { display:none; position:absolute; min-width:180px; max-width:min(260px,calc(100vw - 24px)); max-height:min(52vh,360px); overflow-y:auto; background:rgba(255,255,255,.98); border:1px solid rgba(15,23,42,.10); border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,.20); padding:5px; backdrop-filter:blur(12px); }
.codqo-product-currency-switcher .floating-currency.is-open .codqo-floating-currency-menu { display:block; }
.codqo-floating-currency-option { display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent; color:#111827; text-align:left; padding:9px 10px; border-radius:8px; cursor:pointer; font:inherit; }
.codqo-floating-currency-option:hover,.codqo-floating-currency-option.is-selected { background:#f3f4f6; }
.codqo-floating-currency-option__flag { font-size:1.1em; flex:0 0 auto; }
.codqo-floating-currency-option__text { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.codqo-product-currency-position-left_top { left:12px; top:12px; }
.codqo-product-currency-position-left_center { left:12px; top:50%; transform:translateY(-50%); }
.codqo-product-currency-position-left_bottom { left:12px; bottom:12px; }
.codqo-product-currency-position-right_top { right:12px; top:12px; }
.codqo-product-currency-position-right_center { right:12px; top:50%; transform:translateY(-50%); }
.codqo-product-currency-position-right_bottom { right:12px; bottom:12px; }
.codqo-product-currency-position-left_top .codqo-floating-currency-menu,.codqo-product-currency-position-left_center .codqo-floating-currency-menu,.codqo-product-currency-position-left_bottom .codqo-floating-currency-menu { left:calc(100% + 7px); top:50%; transform:translateY(-50%); }
.codqo-product-currency-position-right_top .codqo-floating-currency-menu,.codqo-product-currency-position-right_center .codqo-floating-currency-menu,.codqo-product-currency-position-right_bottom .codqo-floating-currency-menu { right:calc(100% + 7px); top:50%; transform:translateY(-50%); }
@media (max-width:782px) { .codqo-product-currency-switcher{font-size:clamp(10px,3.2vw,13px);max-width:calc(100vw - 12px)} .codqo-floating-currency-trigger{min-height:34px;max-width:calc(100vw - 16px);padding:8px 11px;gap:6px} .codqo-floating-currency-menu{min-width:165px;max-width:calc(100vw - 20px);max-height:48vh} .codqo-product-currency-position-top_header{top:8px}.codqo-product-currency-position-left_center{left:6px}.codqo-product-currency-position-right_center{right:6px}.codqo-product-currency-position-bottom{bottom:8px} }
@media (max-width:480px) { .codqo-product-currency-position-left_center .codqo-floating-currency-menu{left:calc(100% + 5px)} .codqo-product-currency-position-right_center .codqo-floating-currency-menu{right:calc(100% + 5px)} }
body.admin-bar .codqo-product-currency-position-top_header{top:44px}@media (max-width:782px){body.admin-bar .codqo-product-currency-position-top_header{top:54px}}

/* v3.36.18: admin-controlled responsive currency button sizing. */
.codqo-product-currency-switcher .codqo-floating-currency-trigger {
	font-size: var(--cqo-currency-font-desktop, 14px);
	padding: var(--cqo-currency-pad-y-desktop, 11px) var(--cqo-currency-pad-x-desktop, 16px);
}
.codqo-currency-shortcode-anchor { display: none !important; }
@media (max-width:782px) {
	.codqo-product-currency-switcher .codqo-floating-currency-trigger {
		font-size: var(--cqo-currency-font-mobile, 12px);
		padding: var(--cqo-currency-pad-y-mobile, 8px) var(--cqo-currency-pad-x-mobile, 11px);
	}
}

/* v3.36.22: currency switcher visual controls from the reference UI. */
.codqo-product-currency-switcher .codqo-floating-currency-trigger{color:var(--cqo-currency-text,#111827);background:var(--cqo-currency-bg,#fff);border:1px solid var(--cqo-currency-border,#e5e7eb);border-radius:var(--cqo-currency-radius,12px);box-shadow:0 8px 24px rgba(15,23,42,.14)}
.codqo-product-currency-switcher[data-cqo-appearance='card'] .codqo-floating-currency-trigger{border-radius:var(--cqo-currency-radius,12px);box-shadow:0 10px 28px rgba(15,23,42,.12)}
.codqo-product-currency-switcher[data-cqo-appearance='minimal'] .codqo-floating-currency-trigger{box-shadow:none;background:transparent;border-color:transparent}
.codqo-floating-currency-option:hover,.codqo-floating-currency-option.is-selected{background:color-mix(in srgb,var(--cqo-currency-active,#2563eb) 10%,#fff);color:var(--cqo-currency-active,#2563eb)}
@media(max-width:782px){.codqo-product-currency-position-left_top{left:6px;top:8px}.codqo-product-currency-position-left_center{left:6px}.codqo-product-currency-position-left_bottom{left:6px;bottom:8px}.codqo-product-currency-position-right_top{right:6px;top:8px}.codqo-product-currency-position-right_center{right:6px}.codqo-product-currency-position-right_bottom{right:6px;bottom:8px}}
body.admin-bar .codqo-product-currency-position-left_top,body.admin-bar .codqo-product-currency-position-right_top{top:44px}@media(max-width:782px){body.admin-bar .codqo-product-currency-position-left_top,body.admin-bar .codqo-product-currency-position-right_top{top:54px}}

/* v3.36.24: inline fixed currency menu; hidden scrollbar chrome. */
.codqo-product-currency-switcher .codqo-floating-currency-menu,.codqo-currency-dropdown .codqo-currency-options{scrollbar-width:none;-ms-overflow-style:none;}
.codqo-product-currency-switcher .codqo-floating-currency-menu::-webkit-scrollbar,.codqo-currency-dropdown .codqo-currency-options::-webkit-scrollbar,.codqo-currency-dropdown .codqo-currency-options__list::-webkit-scrollbar{width:0;height:0;display:none;}
.codqo-product-currency-switcher .floating-currency,.codqo-product-currency-switcher .codqo-floating-currency-trigger{white-space:nowrap;}
.codqo-floating-currency-menu.codqo-menu-open-down{top:calc(100% + 7px)!important;bottom:auto!important;left:0!important;right:auto!important;transform:none!important;}
.codqo-floating-currency-menu.codqo-menu-open-up{bottom:calc(100% + 7px)!important;top:auto!important;left:0!important;right:auto!important;transform:none!important;}
.codqo-product-currency-position-right_top .codqo-floating-currency-menu.codqo-menu-open-down,.codqo-product-currency-position-right_center .codqo-floating-currency-menu.codqo-menu-open-down,.codqo-product-currency-position-right_bottom .codqo-floating-currency-menu.codqo-menu-open-down,.codqo-product-currency-position-right_top .codqo-floating-currency-menu.codqo-menu-open-up,.codqo-product-currency-position-right_center .codqo-floating-currency-menu.codqo-menu-open-up,.codqo-product-currency-position-right_bottom .codqo-floating-currency-menu.codqo-menu-open-up{right:0!important;left:auto!important;}
@media(max-width:782px){.codqo-product-currency-switcher .codqo-floating-currency-menu{max-height:min(55vh,420px);}}

/* External Form — admin-authored thank-you HTML popup. */
.codqo-external-thankyou-popup{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;}
.codqo-external-thankyou-popup__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);}
.codqo-external-thankyou-popup__card{position:relative;z-index:1;width:min(520px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 18px 55px rgba(0,0,0,.25);box-sizing:border-box;}
.codqo-external-thankyou-popup__content{padding:28px;box-sizing:border-box;}
.codqo-external-thankyou-popup__close{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:#f3f4f6;color:#111;font-size:24px;line-height:34px;cursor:pointer;}
.codqo-external-thankyou-open{overflow:hidden!important;}

/* v3.37.17: render currency flags as real image icons instead of emoji/text glyphs. */
.codqo-currency-trigger__flag img,.codqo-currency-option__flag img,.codqo-floating-currency-trigger__flag img,.codqo-floating-currency-option__flag img{display:block;width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.codqo-currency-trigger__flag,.codqo-currency-option__flag,.codqo-floating-currency-trigger__flag,.codqo-floating-currency-option__flag{display:inline-flex;align-items:center;justify-content:center}
/* v3.37.17: External Form payment choice uses the same visual language as the COD form. */
.codqo-external-payment-choice{margin:0 0 14px;padding:12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:rgba(255,255,255,.72);box-sizing:border-box}
.codqo-external-payment-choice__title{display:block;margin:0 0 8px;font-size:.95em}
.codqo-external-payment-choice__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.codqo-external-payment-option{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:10px 14px;border:1px solid rgba(0,0,0,.18);border-radius:8px;background:#fff;color:inherit;font:inherit;font-weight:600;cursor:pointer;box-sizing:border-box}.codqo-external-payment-option input{margin:0}.codqo-external-payment-option.is-active{border-color:var(--codqo-submit-bg,#2563eb);background:var(--codqo-submit-bg,#2563eb);color:#fff}
.codqo-external-payment-btn.is-active{border-color:var(--codqo-submit-bg,#2563eb);background:var(--codqo-submit-bg,#2563eb);color:#fff}
@media(max-width:480px){.codqo-external-payment-choice__options{grid-template-columns:1fr}.codqo-external-payment-option{min-height:42px}}