/* Riza Order Now — loop button + variation popup. RTL-aware (site runs .rtl). */

/* ---------------------------------------------------------------- */
/* Loop "Order Now" button                                          */
/* ---------------------------------------------------------------- */
.riza-order-now.button,
a.riza-order-now.button {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
	margin: 8px 0 0 !important;
	padding: 11px 14px;
	text-align: center;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 4px;
	background: #1a1a1a !important;
	color: #fff !important;
	border: 1px solid #1a1a1a !important;
	transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

/* Hover gold only on real-hover devices (desktop). On touch this prevents the
   colour from "sticking" on the product whose popup was just opened. There is
   deliberately NO :focus rule — focus returns to this button when the popup
   closes, and :focus would otherwise keep it gold. */
@media (hover: hover) {
	.riza-order-now.button:hover {
		background: #c39348 !important;
		color: #fff !important;
		border-color: #c39348 !important;
	}
}

/* ---------------------------------------------------------------- */
/* Popup                                                            */
/* ---------------------------------------------------------------- */
body.riza-onm-open {
	overflow: hidden;
}

.riza-onm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility .15s ease;
}
.riza-onm.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.riza-onm__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

/* The dialog clips its content (overflow:hidden), so every corner keeps the
   same 8px radius in both LTR and RTL — the scrollbar lives on the inner
   .riza-onm__content and can no longer square off the left edge. */
.riza-onm__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.riza-onm__content {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 22px 20px 20px;
	-webkit-overflow-scrolling: touch;
}
.riza-onm__content,
.riza-onm-product,
.riza-onm-form,
.riza-onm-form table.variations {
	max-width: 100%;
	box-sizing: border-box;
}
.riza-onm-form table.variations {
	width: 100%;
}

.riza-onm__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 22px;
	line-height: 34px;
	text-align: center;
	color: #777;
	cursor: pointer;
	z-index: 3;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease, color .2s ease;
}
.rtl .riza-onm__close {
	right: auto;
	left: 10px;
}
.riza-onm__close:hover,
.riza-onm__close:focus {
	background: #c39348 !important;
	color: #fff !important;
	border-radius: 50% !important;
}

.riza-onm__loading,
.riza-onm__error {
	padding: 30px 10px;
	text-align: center;
	color: #555;
}

/* --- Injected product content --- */
.riza-onm-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eee;
}
.riza-onm-thumb {
	flex: 0 0 80px;
	width: 80px;
}
.riza-onm-thumb img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}
.riza-onm-info {
	flex: 1 1 auto;
	min-width: 0;
}
.riza-onm-title {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.35;
}
.riza-onm-price {
	font-size: 15px;
}

/* Keep the variations form readable inside the dialog. */
.riza-onm-form {
	margin: 0 0 8px;
}
.riza-onm-form .quantity {
	margin-bottom: 12px;
}
/* The theme prints its own add-to-cart button inside the form; we drive the
   buy-now flow with our own button, so hide the in-form one to avoid two CTAs. */
.riza-onm-form .single_add_to_cart_button {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Hide the theme's "selected value" text that main.js appends next to each
   attribute label (e.g. the active colour name under "اللون"). */
.riza-onm-form .variations .label .selected-value {
	display: none !important;
}

/* Show each colour's name as plain text UNDER its swatch (like the single
   product page). The name is positioned just below the swatch box so the
   swatch's own border/box-shadow stays around the image only — no box around
   the text. Each <li> already carries the exact name in data-title; the
   selected tick uses .variable-item-contents::before, so ::after here is free.

   The name is out of flow, so it is the swatch's own footprint — and nothing
   else — that keeps one name from running into the next. woo-variation-swatches
   sizes items from --wvs-single-product-item-width (30px here) with a 4px
   gutter, which leaves a ~38px pitch: far narrower than a name like "Off white",
   so the labels overlapped. Inside the popup the item box and gutters are
   therefore pinned to a pitch that matches the label column exactly:
   44px box + 2 × 8px gutter = 60px = the label width. Longer names wrap
   inside their column instead of spilling into the neighbour's.

   The pitch is deliberately held near 60px: the dialog is 460px wide at most
   and much narrower on a phone, so a wider pitch would drop a swatch off each
   row. The 44px box is what is left to spend on the image itself, and the
   source is the 88×100 tooltip-size file, so it stays sharp.

   The bottom margin is the label's gutter, not decoration: 6px of clearance
   plus one 15px line of text needs 21px, so 24px leaves the row 3px of slack
   and nothing more. Every colour name in the catalogue (longest: "Off white")
   fits one line at this width; a longer name added later wraps to a second
   line and eats into the gap below rather than overlapping the next row. */
.riza-onm-form .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 !important;
	padding: 0 !important;
}
.riza-onm-form .variable-items-wrapper li.variable-item.image-variable-item,
.riza-onm-form .variable-items-wrapper li.variable-item.color-variable-item {
	position: relative;
	overflow: visible !important;
	box-sizing: border-box;
	width: 44px !important;
	height: 44px !important;
	/* Symmetric side gutters — also overrides the plugin's `last-child
	   { margin-right: 0 }`, which would shrink the pitch of the last column.
	   The bottom value is the label's gutter; see the note above. */
	margin: 4px 8px 24px !important;
}
/* The plugin only sets `width: 100%` on the swatch image, so an image that is
   not square (the tooltip size is a 100×100 hard crop, but a narrow source file
   yields e.g. 88×100) ends up taller than its box — and the popup sets
   `overflow: visible` on the item so the name below is not clipped, so that
   extra height spills into the name's gutter. Pinning the height and cropping
   keeps every swatch exactly the size of its box, whatever the source ratio.
   Swap `cover` for `contain` to letterbox the whole photo instead. */
.riza-onm-form .variable-items-wrapper li.variable-item.image-variable-item img {
	height: 100% !important;
	object-fit: cover;
}
.riza-onm-form .variable-items-wrapper li.variable-item.image-variable-item::after,
.riza-onm-form .variable-items-wrapper li.variable-item.color-variable-item::after {
	content: attr(data-title);
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	color: #333;
	white-space: normal;
	overflow-wrap: break-word;
	pointer-events: none;
}

/* --- Sections the single-product page hooks into the add-to-cart form ----- */
/* The feature strip (riza-feature-strip) and stock line (riza-stock-line) are
   printed by WPCode snippets on woocommerce_before_add_to_cart_form /
   _quantity, so they render inside this popup too. Those snippets now ship
   their own CSS with their markup, and their responsive rules key off the
   viewport — but here the strip lives in a ~420px dialog no matter how wide the
   viewport is. These rules re-fit it to the dialog, and repeat the structural
   bits so the popup stays correct on its own. */
.riza-onm__content .riza-feature-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: 4px;
	margin: 0 0 14px;
	padding: 12px 6px;
	background: #faf7f2;
	border: 1px solid #f1e7d7;
	border-radius: 8px;
}
.riza-onm__content .riza-feature-strip .rfs-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
	padding: 0 2px;
}
.riza-onm__content .riza-feature-strip .rfs-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	line-height: 0;
}
.riza-onm__content .riza-feature-strip .rfs-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.riza-onm__content .riza-feature-strip .rfs-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-top: 4px;
}
.riza-onm__content .riza-feature-strip .rfs-title {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #3a3a3a;
}
.riza-onm__content .riza-feature-strip .rfs-sub {
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.25;
	color: #8a8a8a;
}

.riza-onm__content .riza-stock-line {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 2px 0 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #1f9d57;
}
.riza-onm__content .riza-stock-line .rsl-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #1f9d57;
}
.riza-onm__content .riza-stock-line .rsl-sep {
	opacity: .75;
}

/* --- Buy-now button inside the popup --- */
.riza-onm-buy-now.button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 6px 0 0;
	padding: 13px 16px;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	border-radius: 4px;
	background: #1a1a1a;
	color: #fff;
	border: 1px solid #1a1a1a;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}
.riza-onm-buy-now.button:hover {
	background: #c39348;
	color: #fff;
}
.riza-onm-buy-now.button.disabled {
	opacity: .45;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.riza-onm__dialog {
		padding: 20px 16px 16px;
	}
	.riza-onm-thumb {
		flex-basis: 64px;
		width: 64px;
	}
	.riza-onm__content .riza-feature-strip {
		gap: 2px;
		padding: 10px 4px;
	}
	.riza-onm__content .riza-feature-strip .rfs-icon {
		width: 34px;
		height: 34px;
	}
	.riza-onm__content .riza-feature-strip .rfs-title {
		font-size: 10.5px;
	}
	.riza-onm__content .riza-feature-strip .rfs-sub {
		font-size: 9.5px;
	}
}