/* Telesheds Custom – fixes for the Extra Product Addons configurator.
   Loaded on product pages only. Does not modify the configurator plugin itself. */

/* 1. The configurator's tick and arrow icons point at an external demo site that no longer
      serves them, so they show as empty squares. Hide those images and draw the icons in CSS. */
.wps-ss-container .tab-btn .sel-icon,
.wps-ss-container #togArrow img {
	display: none !important;
}

/* Tick on a tab once the customer has picked a real option there
   (not the default "No Options Required"). Class added by configurator.js. */
.wps-ss-container .tab-btn.tsc-has-choice::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--primary-green, #24918A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l3.5 3.5L12 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 8px no-repeat;
}

.wps-ss-container .tab-btn.active.tsc-has-choice::after {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l3.5 3.5L12 1' fill='none' stroke='%2324918A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Chevron for the "Added Options" toggle */
.wps-ss-container #togArrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-right: 2px solid var(--heading-dark, #261C01);
	border-bottom: 2px solid var(--heading-dark, #261C01);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.wps-ss-container #togArrow:not(.open) {
	transform: rotate(-45deg);
}

.wps-ss-container .added-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

/* 2. Size options without photos (Settings → Telesheds → "Show photos on size options").
      The first configurator tab is always the size tab. */
.tsc-hide-size-images .wps-ss-container .options-panel .tab-pane:first-child .opt-img-wrap {
	position: static;
	min-height: 0;
	padding: 0;
}
.tsc-hide-size-images .wps-ss-container .options-panel .tab-pane:first-child .opt-img-wrap img {
	display: none;
}
.tsc-hide-size-images .wps-ss-container .options-panel .tab-pane:first-child .opt-card {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}
.tsc-hide-size-images .wps-ss-container .options-panel .tab-pane:first-child .opt-info {
	height: auto;
	padding: 20px 48px 20px 20px;
	gap: 10px;
}
.tsc-hide-size-images .wps-ss-container .options-panel .tab-pane:first-child .unsel-circle {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px #C9CBC2;
}