.xb-block-checkout {
	background: #fff;
	border-radius: 12px;
	margin: 8px 4px; /* Slight margin for near full width on mobile */
	border: 1px solid var(--xb-brand-color, #007953);
	padding: 10px;
}
.xb-cta-section {
	width: 100%;
	padding: 16px 10px;
}
.xb-input-group {
	display: flex;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s ease;
}
.xb-input-group:hover,
.xb-input-group:focus-within {
	border-color: var(--xb-brand-color, #007953);
}
.xb-icon-box {
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9f9f9;
	border-right: 1px solid #eaeaea;
}
[dir="rtl"] .xb-icon-box {
	border-right: none;
	border-left: 1px solid #eaeaea;
}
.xb-input-group input,
.xb-input-group select {
	/* Explicit, not inherited: browsers' UA stylesheet gives form controls their
	   own default font rather than inheriting from the page. Left unset, Arabic
	   text falls back to the platform's own Arabic system font, which renders
	   noticeably larger/heavier than Cairo at the same font-size — the "RTL
	   makes the fields huge" symptom is really just this missing declaration. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	flex: 1;
	min-width: 0; /* flex items default to min-width:auto, which lets a <select> with
	                 long option text (e.g. Arabic wilaya names) overflow past the
	                 group's overflow:hidden edge instead of shrinking to fit */
	padding: 12px 15px;
	border: none;
	outline: none;
	font-size: 16px; /* Prevents iOS Safari auto-zoom */
	background: #fff;
	color: #333;
	box-shadow: none; /* WP reset */
}
.xb-input-group select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
}
[dir="rtl"] .xb-input-group select {
	padding-right: 15px;
	padding-left: 36px;
	background-position: left 12px center;
}
[dir="rtl"] .xb-input-group input {
	text-align: right;
}
[dir="rtl"] .xb-input-group input[type="tel"] {
	text-align: right;
	direction: ltr; /* Keeps the phone number digits LTR while aligning right */
}
.xb-input-group input:focus,
.xb-input-group select:focus {
	box-shadow: none;
	border: none;
}
/* Wilaya shipping: Domicile / Bureau (Stop Desk) delivery-type cards */
.xb-delivery-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin-bottom: 10px;
	transition: opacity 0.2s ease;
}
.xb-delivery-types-hidden {
	display: none;
}
.xb-delivery-card {
	position: relative;
	display: block;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.xb-delivery-card:hover {
	border-color: var(--xb-brand-color, #007953);
}
.xb-delivery-card.selected {
	border-color: var(--xb-brand-color, #007953);
	background-color: var(--xb-brand-color-bg, rgba(0, 121, 83, 0.05));
}
.xb-delivery-card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.xb-delivery-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.xb-delivery-title {
	font-size: 12px;
	font-weight: 600;
	color: #333;
}
.xb-delivery-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--xb-brand-color, #007953);
}
@media (max-width: 400px) {
	.xb-delivery-types {
		grid-template-columns: 1fr;
	}
}
.xb-field-error {
	border-color: #e53e3e !important;
	background-color: #fff5f5 !important;
	animation: xb-shake 0.4s ease-in-out;
}
@keyframes xb-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
.xb-summary {
	background: #f9fafa;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 15px;
}
.xb-summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 13px;
	color: #555;
}
.xb-summary-total {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #eaeaea;
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.xb-summary-total span:last-child {
	color: #007953;
}
.xb-submit-btn {
	/* Explicit, not inherited: browsers' UA stylesheet gives <button> its own
	   default font rather than inheriting from the page — see the matching
	   note on .xb-input-group input above. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	width: 100%;
	padding: 12px;
	background: #007953;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease;
}
.xb-submit-btn:hover {
	transform: translateY(-1px);
}
.xb-submit-btn:active {
	transform: translateY(0);
}
.xb-submit-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	animation: none;
	transform: none;
}
@keyframes xb-btn-pulse {
	0%,
	82%,
	100% {
		transform: translateX(0);
	}
	85% {
		transform: translateX(-4px);
	}
	88% {
		transform: translateX(4px);
	}
	91% {
		transform: translateX(-3px);
	}
	94% {
		transform: translateX(3px);
	}
	97% {
		transform: translateX(-1px);
	}
}
.xb-btn-spinner {
	display: none;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: xb-btn-spin 0.7s linear infinite;
}
@keyframes xb-btn-spin {
	to {
		transform: rotate(360deg);
	}
}
.xb-submit-btn.loading .xb-btn-spinner {
	display: block;
}
.xb-submit-btn.loading .xb-btn-icon {
	display: none;
}
.xb-btn-text-wrap {
	text-align: left;
}
.xb-btn-title {
	font-size: 15px;
	font-weight: 700;
}
.xb-btn-subtitle {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.9;
}
.xb-error-msg {
	color: #e63946;
	font-size: 13px;
	margin-top: -5px;
	margin-bottom: 10px;
	display: none;
}

/* Quantity Offers */
.xb-offers-card {
	margin-bottom: 12px;
}
.xb-offers-list.xb-offers-classic {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.xb-offer-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.xb-offer-row:hover {
	border-color: var(--xb-brand-color, #007953);
}
.xb-offer-row.selected {
	border-color: var(--xb-brand-color, #007953);
	background-color: var(--xb-brand-color-bg, rgba(0, 121, 83, 0.05));
}
.xb-offer-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.xb-offer-badge {
	position: absolute;
	top: -10px;
	right: 10px;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.xb-offer-image {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	overflow: hidden;
	background: #f4f4f4;
}
.xb-offer-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.xb-offer-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.xb-offer-subtitle {
	font-size: 10px;
	color: #888;
}
.xb-offer-label {
	font-size: 12px;
	font-weight: 700;
	color: #222;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xb-offer-price {
	flex: 0 0 auto;
	text-align: right;
}
.xb-offer-price-current {
	display: block;
	font-size: 14px;
	font-weight: 700;
}
.xb-offer-price-compare {
	display: block;
	font-size: 10px;
	color: #999;
	text-decoration: line-through;
}
.xb-offers-list.xb-offers-vertical {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.xb-offers-vertical .xb-offer-row {
	flex-direction: column;
	text-align: center;
	padding: 8px 6px;
	gap: 4px;
}
.xb-offers-vertical .xb-offer-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}
.xb-offers-vertical .xb-offer-label {
	white-space: normal;
	line-height: 1.2;
}
.xb-offers-vertical .xb-offer-text {
	align-items: center;
}
.xb-offers-vertical .xb-offer-price {
	text-align: center;
}

/* Variation Attributes */
.xb-attr-group {
	margin-bottom: 12px;
}
.xb-attr-label {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
}
.xb-attr-selected-value {
	font-weight: 700;
	color: var(--xb-brand-color, #007953);
}
.xb-attr-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.xb-attr-option {
	/* Explicit, not inherited: browsers' UA stylesheet gives <button> its own
	   default font rather than inheriting from the page — see the matching
	   note on .xb-input-group input above. */
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	position: relative;
	border: 2px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.xb-attr-option.active {
	border-color: var(--xb-brand-color, #007953);
}
.xb-attr-option.has-color,
.xb-attr-option.has-image {
	width: 36px !important;
	height: 36px !important;
	flex: 0 0 36px;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
}
.xb-attr-swatch-color,
.xb-attr-swatch-image {
	display: block;
	width: 100%;
	height: 100%;
}
/* !important guards against WordPress core adding its own width/height/
   aspect-ratio to the <img> (wp_get_attachment_image() sets HTML width/
   height attributes, and some WP versions add an inline aspect-ratio style
   for layout-shift prevention) — without it the swatch stretches into the
   source photo's own aspect ratio instead of staying a fixed 48x48 square. */
.xb-attr-swatch-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	display: block;
}
.xb-attr-option.has-text {
	min-width: 40px;
	padding: 8px 14px;
}
.xb-attr-swatch-text {
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

/* Floating CTA */
.xb-floating-cta-wrap {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 6px);
	width: auto;
	max-width: calc(100% - 32px);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.xb-floating-cta-wrap.visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.xb-floating-cta {
	width: auto;
	max-width: 100%;
	padding: 8px 16px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	animation: xb-btn-pulse 3s ease-in-out infinite;
}
.xb-floating-cta .xb-btn-text-wrap {
	overflow: hidden;
}
.xb-floating-cta .xb-btn-title {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.xb-floating-cta .xb-btn-subtitle {
	display: none;
}
.xb-floating-cta svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Product Sticky Bar (product templates only): thumbnail + name + price +
   CTA, fixed to the viewport bottom, shown/hidden via IntersectionObserver
   in product-template.php based on whether the hero or footer is in view. */
.xb-sticky-bar {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 12px);
	width: calc(100% - 32px);
	max-width: 460px;
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 10px;
}
.xb-sticky-bar.visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.xb-sticky-bar-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.xb-sticky-bar-info {
	flex: 1;
	min-width: 0;
}
.xb-sticky-bar-title {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.xb-sticky-bar-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	white-space: nowrap;
}
.xb-sticky-bar-price del {
	color: #999;
	font-size: 12px;
}
.xb-sticky-bar-price ins {
	text-decoration: none;
	font-weight: 700;
	color: var(--xb-brand-color, #111);
}
.xb-sticky-bar-cta {
	flex: 0 0 auto;
	background: var(--xb-brand-color, #111);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 18px;
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	cursor: pointer;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.xb-sticky-bar {
		width: calc(100% - 16px);
		max-width: 100%;
		bottom: max(8px, env(safe-area-inset-bottom, 0px));
		padding: 4px 4px 4px 8px;
		gap: 8px;
	}
	.xb-sticky-bar-thumb {
		width: 32px;
		height: 32px;
	}
	.xb-sticky-bar-title {
		font-size: 11px;
		max-width: 90px;
	}
	.xb-sticky-bar-price {
		font-size: 11px;
	}
	.xb-sticky-bar-price del {
		font-size: 10px;
	}
	.xb-sticky-bar-cta {
		padding: 8px 12px;
		font-size: 10px;
	}
}

/* Button Animations (5s active, 3s paused = 8s total) */
.xb-submit-btn.xb-anim-pulse {
	animation: xb-btn-pulse 8s infinite;
}
.xb-submit-btn.xb-anim-bounce {
	animation: xb-btn-bounce 8s infinite;
}
.xb-submit-btn.xb-anim-shake {
	animation: xb-btn-shake 8s infinite;
}
.xb-submit-btn.xb-anim-tada {
	animation: xb-btn-tada 8s infinite;
}
.xb-submit-btn.xb-anim-heartbeat {
	animation: xb-btn-heartbeat 8s infinite;
}
.xb-submit-btn.xb-anim-flash {
	animation: xb-btn-flash 8s infinite;
}

@keyframes xb-btn-pulse {
	0%, 62.5%, 100% { transform: scale(1); }
	31.25% { transform: scale(1.03); }
}
@keyframes xb-btn-bounce {
	0%, 12.5%, 31.25%, 50%, 62.5%, 100% { transform: translateY(0); }
	25% { transform: translateY(-10px); }
	37.5% { transform: translateY(-5px); }
}
@keyframes xb-btn-shake {
	0%, 62.5%, 100% { transform: translateX(0); }
	6.25%, 18.75%, 31.25%, 43.75%, 56.25% { transform: translateX(-4px); }
	12.5%, 25%, 37.5%, 50% { transform: translateX(4px); }
}
@keyframes xb-btn-tada {
	0%, 62.5%, 100% { transform: scale3d(1, 1, 1); }
	6.25%, 12.5% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
	18.75%, 31.25%, 43.75%, 56.25% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	25%, 37.5%, 50% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
}
@keyframes xb-btn-heartbeat {
	0%, 62.5%, 100% { transform: scale(1); }
	8.75%, 26.25% { transform: scale(1.05); }
	17.5%, 43.75% { transform: scale(1); }
}
@keyframes xb-btn-flash {
	0%, 31.25%, 62.5%, 100% { opacity: 1; }
	15.625%, 46.875% { opacity: 0.7; }
}

/* Premium Product Template Styles */
:root {
	--xb-premium-bg: #faf6f1;
	--xb-premium-text: #333333;
	--xb-premium-accent: #007953;
	--xb-premium-accent-hover: #005c3f;
	--xb-premium-brown: #a57d59;
}

body.xb-product-template-body {
	background: var(--xb-premium-bg);
	color: var(--xb-premium-text);
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
}