/* ==========================================================================
   GYS Recommended Add-ons — Frontend (v1.1.0 redesign)
   RTL-first, accessible, theme-neutral add-on picker for the product page.
   ========================================================================== */

.gys-recommended-addons-wrapper {
	/* ---- Design tokens (overridden by the inline block in addons.php) ---- */
	--gys-ink: #111827;
	--gys-ink-soft: #6b7280;
	--gys-accent: #4f46e5;
	--gys-accent-ink: #ffffff;
	--gys-accent-soft: rgba(79, 70, 229, 0.09);
	--gys-accent-ring: rgba(79, 70, 229, 0.32);
	/* Button + check colours; all five are overridable from the settings screen. */
	--gys-btn-bg: #f7f8fa;
	--gys-btn-ink: #111827;
	--gys-check: #4f46e5;
	--gys-success: #15803d;
	--gys-success-soft: rgba(21, 128, 61, 0.10);
	--gys-danger: #dc2626;
	--gys-danger-soft: rgba(220, 38, 38, 0.09);
	--gys-line: #e6e8ec;
	--gys-surface: #ffffff;
	--gys-surface-alt: #f7f8fa;
	--gys-radius: 14px;
	--gys-radius-sm: 9px;
	--gys-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
	--gys-shadow-lg: 0 10px 22px rgba(16, 24, 40, .10), 0 22px 48px rgba(16, 24, 40, .10);
	--gys-ease: cubic-bezier(.4, 0, .2, 1);

	margin: 1.75em 0;
	padding: 22px;
	background: var(--gys-surface);
	border: 1px solid var(--gys-line);
	border-radius: calc(var(--gys-radius) + 4px);
	box-shadow: var(--gys-shadow);
	color: var(--gys-ink);
}

.gys-recommended-addons-wrapper *,
.gys-recommended-addons-wrapper *::before,
.gys-recommended-addons-wrapper *::after { box-sizing: border-box; }

/* ---------- Header ------------------------------------------------------ */
.gys-addons-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.gys-addons-heading { min-width: 0; }

.gys-recommended-addons-wrapper .gys-addons-title {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--gys-ink);
}

.gys-addons-subtitle {
	margin: 5px 0 0;
	font-size: .88em;
	line-height: 1.45;
	color: var(--gys-ink-soft);
}

.gys-addons-select-all-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--gys-line);
	background: var(--gys-surface);
	color: var(--gys-accent);
	font: inherit;
	font-size: .85em;
	font-weight: 600;
	line-height: 1;
	padding: 9px 15px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s var(--gys-ease), border-color .18s var(--gys-ease);
}
.gys-addons-select-all-btn:hover {
	background: var(--gys-accent-soft);
	border-color: var(--gys-accent);
}

/* ---------- Group ------------------------------------------------------- */
.gys-addon-group { margin-bottom: 22px; }
.gys-addon-group:last-child { margin-bottom: 0; }

.gys-addon-group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.gys-recommended-addons-wrapper .gys-addon-group-title {
	margin: 0;
	font-size: 1.02em;
	font-weight: 700;
	color: var(--gys-ink);
}

/* min/max requirement chip */
.gys-addon-group-badge {
	display: inline-flex;
	align-items: center;
	font-size: .74em;
	font-weight: 700;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--gys-surface-alt);
	color: var(--gys-ink-soft);
	white-space: nowrap;
}
.gys-addon-group-badge.is-required {
	background: var(--gys-danger-soft);
	color: var(--gys-danger);
}

.gys-addon-group-desc {
	margin: 0 0 14px;
	font-size: .88em;
	line-height: 1.5;
	color: var(--gys-ink-soft);
}

/* ---------- Layouts ----------------------------------------------------- */
.gys-addon-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--gys-addon-card-width, 190px), 1fr));
	gap: 14px;
	align-items: stretch;
}

/* Carousel */
.gys-addon-items.gys-layout-carousel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.gys-layout-carousel .gys-addon-item {
	scroll-snap-align: start;
	flex: 0 0 var(--gys-addon-card-width, 190px);
}
.gys-layout-carousel::-webkit-scrollbar { height: 8px; }
.gys-layout-carousel::-webkit-scrollbar-track { background: var(--gys-surface-alt); border-radius: 10px; }
.gys-layout-carousel::-webkit-scrollbar-thumb { background: #ccd1d9; border-radius: 10px; }
.gys-layout-carousel::-webkit-scrollbar-thumb:hover { background: #aeb5c0; }

/* List */
.gys-addon-items.gys-layout-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.gys-layout-list .gys-addon-item {
	flex-direction: row;
	align-items: center;
	text-align: start;
	padding: 12px 14px;
	gap: 14px;
}
.gys-layout-list .gys-addon-media {
	width: 66px;
	height: 66px;
	margin: 0;
	flex: 0 0 auto;
}
.gys-layout-list .gys-addon-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.gys-layout-list .gys-addon-title { margin: 0; }
.gys-layout-list .gys-addon-price { margin: 0; white-space: nowrap; }
.gys-layout-list .gys-addon-action { width: auto; margin: 0; flex: 0 0 auto; }
.gys-layout-list .gys-addon-checkbox-label { min-width: 130px; }

/* ---------- Card -------------------------------------------------------- */
.gys-addon-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--gys-surface);
	border: 1.5px solid var(--gys-line);
	border-radius: var(--gys-radius);
	padding: 14px;
	transition: transform .18s var(--gys-ease), box-shadow .18s var(--gys-ease),
	            border-color .18s var(--gys-ease), background .18s var(--gys-ease);
}

.gys-addon-item:hover {
	border-color: #d5d9e0;
	box-shadow: var(--gys-shadow);
	transform: translateY(-2px);
}

.gys-addon-item.selected {
	border-color: var(--gys-accent);
	background: linear-gradient(180deg, var(--gys-accent-soft), transparent 55%);
	box-shadow: var(--gys-shadow);
}

/* Keyboard focus ring driven by the visually-hidden checkbox */
.gys-addon-item:focus-within {
	outline: 2px solid var(--gys-accent);
	outline-offset: 2px;
}

/* Disabled because the group max was reached */
.gys-addon-item.is-disabled {
	opacity: .5;
	pointer-events: none;
}
.gys-addon-item.is-disabled .gys-addon-zoom { pointer-events: auto; }

/* Discount badge */
.gys-addon-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	background: var(--gys-danger);
	color: #fff;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(220, 38, 38, .32);
}

/* Selected check mark */
.gys-addon-check {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	width: 23px;
	height: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gys-check);
	color: var(--gys-accent-ink);
	transform: scale(0);
	transition: transform .2s var(--gys-ease);
	pointer-events: none;
}
.gys-addon-item.selected .gys-addon-check { transform: scale(1); }

/* ---------- Media ------------------------------------------------------- */
.gys-addon-media {
	position: relative;
	width: 100%;
	height: var(--gys-addon-img-size, 118px);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	border-radius: var(--gys-radius-sm);
	overflow: hidden;
}
.gys-addon-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .25s var(--gys-ease);
}
.gys-addon-item:hover .gys-addon-media img { transform: scale(1.04); }

/* Zoom button */
.gys-addon-zoom {
	position: absolute;
	bottom: 6px;
	inset-inline-end: 6px;
	z-index: 3;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--gys-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--gys-ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .18s var(--gys-ease), transform .18s var(--gys-ease), background .18s var(--gys-ease);
}
.gys-addon-item:hover .gys-addon-zoom,
.gys-addon-zoom:focus-visible { opacity: 1; transform: translateY(0); }
.gys-addon-zoom:hover { background: #fff; color: var(--gys-accent); }

/* Touch devices have no hover: keep the zoom affordance visible */
@media (hover: none) {
	.gys-addon-zoom { opacity: 1; transform: none; }
}

/* ---------- Details ----------------------------------------------------- */
.gys-addon-details {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.gys-recommended-addons-wrapper .gys-addon-title {
	margin: 0 0 6px;
	font-size: var(--gys-addon-title-size, .95em);
	font-weight: 600;
	line-height: 1.35;
	color: var(--gys-ink);
	overflow-wrap: anywhere;
}

.gys-addon-desc {
	font-size: .8em;
	line-height: 1.45;
	color: var(--gys-ink-soft);
	margin-bottom: 8px;
}

.gys-addon-price {
	margin: auto 0 12px;
	font-size: var(--gys-addon-price-size, 1.02em);
	font-weight: 700;
	color: var(--gys-ink);
}
.gys-addon-price del {
	margin-inline-end: 6px;
	font-size: .8em;
	font-weight: 500;
	color: var(--gys-ink-soft);
	text-decoration: line-through;
}
.gys-addon-price ins {
	background: none;
	text-decoration: none;
	color: var(--gys-success);
}
/* "Free" pill when the addon costs nothing */
.gys-addon-price-free {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gys-success-soft);
	color: var(--gys-success);
	font-size: .85em;
	font-weight: 700;
}

/* ---------- Action ------------------------------------------------------ */
.gys-addon-action { width: 100%; margin-top: auto; }

.gys-addon-checkbox-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1.5px solid var(--gys-line);
	border-radius: 999px;
	background: var(--gys-btn-bg);
	color: var(--gys-btn-ink);
	font-size: var(--gys-addon-btn-size, 13px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background .18s var(--gys-ease), color .18s var(--gys-ease),
	            border-color .18s var(--gys-ease), transform .08s var(--gys-ease);
}
.gys-addon-checkbox-label:hover {
	border-color: var(--gys-accent);
	color: var(--gys-accent);
}
.gys-addon-checkbox-label:active { transform: scale(.985); }

.gys-addon-item.selected .gys-addon-checkbox-label {
	background: var(--gys-accent);
	border-color: var(--gys-accent);
	color: var(--gys-accent-ink);
}

/* Visually hide the native checkbox but keep it focusable for screen readers */
.gys-addon-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* +/✓ affordance in front of the button text */
.gys-addon-checkbox-text::before {
	content: "+";
	display: inline-block;
	margin-inline-end: 5px;
	font-weight: 800;
}
.gys-addon-item.selected .gys-addon-checkbox-text::before { content: "✓"; }

/* ---------- Accordion --------------------------------------------------- */
.gys-accordion-group {
	border: 1px solid var(--gys-line);
	border-radius: var(--gys-radius);
	overflow: hidden;
	background: var(--gys-surface);
	margin-bottom: 12px;
}

.gys-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 14px 18px;
	background: var(--gys-surface-alt);
	border: 0;
	font: inherit;
	text-align: start;
	color: var(--gys-ink);
	cursor: pointer;
	transition: background .18s var(--gys-ease);
}
.gys-accordion-header:hover { background: #eef0f4; }
.gys-accordion-header:focus-visible { outline: 2px solid var(--gys-accent); outline-offset: -2px; }

.gys-accordion-header .gys-addon-group-head { margin: 0; }

.gys-accordion-icon {
	flex: 0 0 auto;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gys-accent);
	color: var(--gys-accent-ink);
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	transition: transform .2s var(--gys-ease);
}
.gys-accordion-group.is-open .gys-accordion-icon { transform: rotate(45deg); }

/* Only the real accordion gets the inset body; in flat layout the body is a bare wrapper. */
.gys-accordion-group .gys-accordion-body {
	padding: 16px 18px;
	border-top: 1px solid var(--gys-line);
}

/* ---------- Tabs -------------------------------------------------------- */
.gys-addons-tab-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gys-line);
}

.gys-addon-tab-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 9px 15px;
	border: 1.5px solid var(--gys-line);
	border-radius: 999px;
	background: var(--gys-surface);
	color: var(--gys-ink-soft);
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s var(--gys-ease), color .18s var(--gys-ease),
	            border-color .18s var(--gys-ease);
}
.gys-addon-tab-link:hover {
	border-color: var(--gys-accent);
	color: var(--gys-accent);
}
.gys-addon-tab-link:focus-visible {
	outline: 2px solid var(--gys-accent);
	outline-offset: 2px;
}
.gys-addon-tab-link.is-active {
	background: var(--gys-accent);
	border-color: var(--gys-accent);
	color: var(--gys-accent-ink);
}

.gys-addon-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--gys-surface-alt);
	color: var(--gys-ink-soft);
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
}
.gys-addon-tab-link.is-active .gys-addon-tab-count {
	background: var(--gys-accent-ring);
	color: var(--gys-accent-ink);
}

/* Marks a tab whose group has a required minimum */
.gys-addon-tab-required {
	color: var(--gys-danger);
	font-weight: 800;
	line-height: 1;
}
.gys-addon-tab-link.is-active .gys-addon-tab-required { color: var(--gys-accent-ink); }

/* A tab whose group still fails its minimum */
.gys-addon-tab-link.has-error {
	border-color: var(--gys-danger);
	color: var(--gys-danger);
}
.gys-addon-tab-link.has-error.is-active {
	background: var(--gys-danger);
	border-color: var(--gys-danger);
	color: #fff;
}

.gys-addon-tab-pane[hidden] { display: none; }

/* Inside a tab the group heading is the tab itself, so only the badge remains */
.gys-addon-group-head--tab { margin-bottom: 12px; }
.gys-addon-group-head--tab:empty { display: none; }

@media (max-width: 600px) {
	.gys-addon-tab-link { padding: 8px 12px; font-size: .85em; }
}

/* ---------- Validation message ------------------------------------------ */
.gys-group-validation-msg {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	padding: 9px 13px;
	border-radius: var(--gys-radius-sm);
	font-size: .86em;
	font-weight: 600;
	line-height: 1.4;
}
.gys-group-validation-msg.is-error { background: var(--gys-danger-soft); color: var(--gys-danger); }
.gys-group-validation-msg.is-ok { background: var(--gys-success-soft); color: var(--gys-success); }

/* ---------- Summary ----------------------------------------------------- */
.gys-addons-summary {
	margin-top: 20px;
	padding: 15px 18px;
	border: 1px solid var(--gys-line);
	border-radius: var(--gys-radius);
	background: var(--gys-surface-alt);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gys-addons-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: .93em;
}
.gys-addons-summary-label { color: var(--gys-ink-soft); }
.gys-addons-summary-price { font-weight: 600; color: var(--gys-ink); }

.gys-addons-summary-total-row {
	margin-top: 5px;
	padding-top: 12px;
	border-top: 1px dashed #d6dae1;
	font-size: 1.14em;
	font-weight: 800;
}
.gys-addons-summary-total-row .gys-addons-summary-label { color: var(--gys-ink); }
.gys-addons-summary-total-row .gys-addons-summary-price { color: var(--gys-accent); }

/* Locked add-to-cart button while a required group is unsatisfied */
.single_add_to_cart_button.gys-addons-disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* ---------- Lightbox ---------------------------------------------------- */
.gys-addon-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 18, 25, .78);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.gys-addon-lightbox-content {
	position: relative;
	max-width: min(90vw, 640px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: var(--gys-radius, 14px);
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.gys-addon-lightbox-content img {
	max-width: 100%;
	max-height: 72vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 9px;
}
.gys-addon-lightbox-title {
	font-size: .95em;
	font-weight: 600;
	text-align: center;
	color: #111827;
}
.gys-addon-lightbox-close {
	position: absolute;
	top: -14px;
	inset-inline-end: -14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111827;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.gys-addon-lightbox-close:hover { background: #f1f2f5; }

/* ---------- Cart child rows --------------------------------------------- */
.gys-addon-cart-child > td { background: rgba(79, 70, 229, .035); }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 600px) {
	.gys-recommended-addons-wrapper { padding: 16px; }
	.gys-addon-items { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; }
	.gys-addons-header { gap: 10px; }
	.gys-addons-select-all-btn { width: 100%; justify-content: center; }
	.gys-layout-list .gys-addon-details { flex-direction: column; align-items: flex-start; gap: 6px; }
	.gys-layout-list .gys-addon-action { width: 100%; }
	.gys-layout-list .gys-addon-checkbox-label { min-width: 0; }
}

/* ---------- Motion / contrast preferences -------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gys-recommended-addons-wrapper *,
	.gys-addon-lightbox * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.gys-addon-item:hover { transform: none; }
	.gys-addon-item:hover .gys-addon-media img { transform: none; }
}