/* A&H Print Options: add-on fields with the class "ah-po". Colours and borders are the size buttons' (CartFlows swatches). */

.wcpa_field_wrap.ah-po {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

/* heading like "مقاسات الأطفال" (the site-wide add-on CSS makes these yellow) */
.wcpa_field_wrap.ah-po legend.wcpa_field_label,
.wcpa_field_wrap.ah-po label.wcpa_field_label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	color: #3a4f66;
}
.wcpa_field_wrap.ah-po .wcpa_required_ast {
	color: #d63638;
}
.wcpa_field_wrap.ah-po .wcpa_field_desc {
	margin: 0 0 10px;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7a8c;
}

/* text choices (no picture, e.g. "front" / "back"): equal buttons, side by side, both always visible (not a dropdown);
   same border / selected colour as the picture cards below, so the two kinds of choice read as one family. */
.wcpa_field_wrap.ah-po .wcpa_group_field:not(.wcpa_has_image) {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
/* the field itself fills its row: as a flex item it shrank to the width of its texts, so two short choices ("On the front" /
   "On the back") ended up stacked in a narrow column */
.wcpa_row > .wcpa_field_wrap.ah-po.wcpa_type_radio-group {
	flex: 1 1 100%;
	min-width: 0;
}
.wcpa_field_wrap.ah-po .wcpa_radio {
	flex: 1 1 120px; /* two options stay side by side down to a narrow phone; a third would wrap under them, not stack one per row */
	margin: 0 !important;
}
.wcpa_field_wrap.ah-po .wcpa_radio > label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	margin: 0;
	padding: 10px 16px;
	border: 2px solid rgba(0, 0, 0, 0.125);
	border-radius: 10px;
	background: #fff;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #3a4f66;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.wcpa_field_wrap.ah-po .wcpa_radio > label:hover {
	border-color: rgba(0, 0, 0, 0.3);
}
.wcpa_field_wrap.ah-po .wcpa_radio > label:has(input:checked) {
	border-color: #ffbb00;
}
.wcpa_field_wrap.ah-po .wcpa_radio > label:has(input:focus-visible) {
	outline: 2px solid #3a4f66;
	outline-offset: 2px;
}
/* Which button is chosen is read from the radio itself (input:checked, the same way as the picture cards below), never from the
   add-on plugin's "wcpa_selected" class. Cause of the stuck highlight, read in the plugin's source 2026-11-09 (front-end.js,
   handleChange): for a plain radio group it stores the new value but only redraws the field on the very first choice, so that
   class stays on the option picked first while the radio itself has already moved on; the plugin's own look has the same
   rule (input:checked + .wcpa_radio_custom). The input is the whole button area, invisible and on top, so a tap, a mouse click
   and the keyboard all reach the real control directly. */
.wcpa_field_wrap.ah-po .wcpa_radio input[type="radio"] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: auto;
	height: auto;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.wcpa_field_wrap.ah-po .wcpa_radio_custom {
	display: none;
}
.wcpa_field_wrap.ah-po .wcpa_radio .wcpa_option_price {
	direction: ltr; /* "+2.000 د.ك" keeps the plus in front of the number inside Arabic text */
	unicode-bidi: isolate;
	font-size: 13px;
	font-weight: 600;
	color: #6b7a8c;
	white-space: nowrap;
}

/* picture choices: three equal cards */
.wcpa_field_wrap.ah-po .wcpa_group_field.wcpa_has_image {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch !important; /* the add-on plugin sets flex-start: cards would end at different heights */
	gap: 8px;
	margin: 0;
}
.wcpa_field_wrap.ah-po .wcpa_image {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wcpa_field_wrap.ah-po .wcpa_image > label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	height: 100%;
	margin: 0;
	padding: 6px 6px 8px;
	border: 2px solid rgba(0, 0, 0, 0.125);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.wcpa_field_wrap.ah-po .wcpa_image > label:hover {
	border-color: rgba(0, 0, 0, 0.3);
}
.wcpa_field_wrap.ah-po .wcpa_image > label:has(input:checked) {
	border-color: #ffbb00;
}
.wcpa_field_wrap.ah-po .wcpa_image > label:has(input:focus-visible) {
	outline: 2px solid #3a4f66;
	outline-offset: 2px;
}
/* the radio stays in the page for keyboards and screen readers, the card shows the choice */
.wcpa_field_wrap.ah-po .wcpa_image input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.wcpa_field_wrap.ah-po .wcpa_img_wrap {
	position: relative;
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 7px;
	overflow: hidden;
	outline: 0 !important; /* the add-on plugin's own "chosen" outline; the card border shows it instead */
	box-shadow: none !important;
	background: #f0f0ee; /* the sample pictures' background */
}
.wcpa_field_wrap.ah-po .wcpa_img_wrap img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0 !important;
}
.wcpa_field_wrap.ah-po .wcpa_selected_tick {
	display: none !important;
}

/* zoom button on the picture: opens the add-on plugin's own popup (full picture, arrows to the next one, "choose" button) */
.wcpa_field_wrap.ah-po .wcpa_mag_icon {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important; /* top right: empty background in the mockups (the back shirt starts lower), so the shirts stay visible */
	bottom: auto !important;
	left: auto !important;
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	opacity: 1 !important;
	visibility: visible !important; /* the add-on plugin shows it only on mouse hover, so phones never see it */
	cursor: zoom-in;
}
/* bigger touch area than the visible circle (44 px) */
.wcpa_field_wrap.ah-po .wcpa_mag_icon::after {
	content: "";
	position: absolute;
	inset: -8px;
}
/* Lucide "maximize-2" icon (ISC licence) */
.wcpa_field_wrap.ah-po .wcpa_mag_icon::before {
	content: "" !important;
	display: block;
	width: 16px;
	height: 16px;
	background: #3a4f66 !important;
	border: 0 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: none !important;
}
.wcpa_field_wrap.ah-po .wcpa_image_label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0 2px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #3a4f66;
}
.wcpa_field_wrap.ah-po .wcpa_option_price {
	direction: ltr; /* "+2.000 د.ك" keeps the plus in front of the number inside Arabic text */
	unicode-bidi: isolate;
	font-size: 13px;
	font-weight: 600;
	color: #6b7a8c;
	white-space: nowrap;
}

/* name and number on one line: name wide, number narrow */
.wcpa_row:has(> .ah-po-text) {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 8px;
}
.wcpa_row > .wcpa_field_wrap.ah-po-text {
	flex: 1 1 0;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
}
.wcpa_row > .wcpa_field_wrap.ah-po-text.ah-po-short {
	flex: 0 0 96px;
}
.wcpa_field_wrap.ah-po input.wcpa_field {
	width: 100%;
	height: 50px;
	padding: 0 12px;
	font-size: 16px; /* 16px keeps iPhones from zooming in */
	border: 2px solid rgba(0, 0, 0, 0.125);
	border-radius: 10px;
	background: #fff;
	color: #3a4f66;
	box-shadow: none;
}
.wcpa_field_wrap.ah-po input.wcpa_field:focus {
	border-color: #ffbb00 !important;
	box-shadow: none !important;
	outline: none;
}
.wcpa_field_wrap.ah-po-short input.wcpa_field {
	text-align: center;
}
.wcpa_field_wrap.ah-po .wcpa_error_msg,
.wcpa_field_wrap.ah-po .wcpa_field_error {
	font-size: 13px;
}

/* the total line of a form with these fields: one plain line, no box */
.wcpa_form_outer:has(.ah-po) .wcpa_price_summary {
	margin: 4px 0 16px;
	padding: 12px 0 0;
	border: 0; /* no line of its own: the page already has one above the total */
	background: none;
}
.wcpa_form_outer:has(.ah-po) .wcpa_total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	padding-top: 0;
	border: 0 !important; /* the add-on plugin's line above the total; the owner wants no line under the choices */
	font-size: 16px;
	font-weight: 700;
	color: #3a4f66;
}

/* the add-on plugin's picture popup (opened by the zoom button). It sits outside the form, so these rules cover every add-on
   picture popup; on 2026-10-26 only the "ah-po" forms use pictures. Bigger, clearer buttons: close, previous / next, choose. */
.wcpa_popup_outer .wcpa_preview_box {
	border-radius: 12px;
	overflow: hidden;
}
/* click on the dark area around the picture closes the popup: the plugin's close layer (wcpa_popup_mask, which closes on click)
   is 0 x 0 pixels, so it gets stretched over the whole popup, under the picture */
.wcpa_popup_outer .wcpa_popup_mask {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	cursor: pointer;
}
.wcpa_popup_outer .wcpa_preview_area {
	position: relative;
	z-index: 1;
}
.wcpa_popup_outer .wcpa_popup_close,
.wcpa_popup_outer .wcpa_nav span {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	background: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.wcpa_popup_outer .wcpa_popup_close {
	top: calc(5vh + 12px) !important; /* the picture box starts 5vh down (the plugin's margin-top), so the X stays in its corner */
	right: 12px !important;
	left: auto !important;
	z-index: 3;
}
.wcpa_popup_outer .wcpa_popup_close::before,
.wcpa_popup_outer .wcpa_popup_close::after {
	background-color: #3a4f66 !important;
	border-color: #3a4f66 !important;
}
.wcpa_popup_outer .wcpa_nav {
	padding: 0 12px;
	box-sizing: border-box;
}
.wcpa_popup_outer .wcpa_nav span::before,
.wcpa_popup_outer .wcpa_nav span::after {
	border-color: #3a4f66 !important;
}
.wcpa_popup_outer .wcpa_nav span.wcpa_disable {
	visibility: hidden;
}
/* right to left: the plugin swaps the two buttons but not their arrows, so both pointed inwards */
[dir="rtl"] .wcpa_popup_outer .wcpa_nav span {
	transform: scaleX(-1);
}
/* "choose" button: a pill with words instead of an empty circle (selector with the id, box and tag: the plugin's own rule
   "#wcpa_img_preview .wcpa_img_check" sets padding 0 !important, so the words touched the border) */
#wcpa_img_preview .wcpa_preview_box button.wcpa_img_check {
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	height: 44px !important;
	padding: 0 16px !important;
	border: 2px solid rgba(0, 0, 0, 0.125) !important;
	border-radius: 22px !important;
	background: #fff !important;
	font: 700 15px/1 Cairo, sans-serif;
	color: #3a4f66;
	z-index: 3;
	cursor: pointer;
}
#wcpa_img_preview .wcpa_preview_box button.wcpa_img_check.wcpa_checked {
	border-color: #ffbb00 !important;
}
.wcpa_popup_outer .wcpa_img_check .wcpa_check {
	display: none;
}
.wcpa_popup_outer .wcpa_img_check::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid #3a4f66;
	border-radius: 50%;
	box-sizing: border-box;
}
.wcpa_popup_outer .wcpa_img_check.wcpa_checked::before {
	border: 5px solid #ffbb00;
}
html[lang^="ar"] .wcpa_popup_outer .wcpa_img_check::after { content: "اختار هذا"; }
html[lang^="ar"] .wcpa_popup_outer .wcpa_img_check.wcpa_checked::after { content: "تم الاختيار"; }
html:not([lang^="ar"]) .wcpa_popup_outer .wcpa_img_check::after { content: "Choose this"; }
html:not([lang^="ar"]) .wcpa_popup_outer .wcpa_img_check.wcpa_checked::after { content: "Chosen"; }

/* phones: a smaller "choose" button so it does not cover much of the picture */
@media (max-width: 600px) {
	#wcpa_img_preview .wcpa_preview_box button.wcpa_img_check {
		top: 8px !important;
		left: 8px !important;
		height: 34px !important;
		gap: 5px;
		padding: 0 11px !important;
		font-size: 13px;
	}
	.wcpa_popup_outer .wcpa_img_check::before {
		width: 14px;
		height: 14px;
	}
	.wcpa_popup_outer .wcpa_img_check.wcpa_checked::before {
		border-width: 4px;
	}
}