/**
 * Option quantity bands — builder styling.
 *
 * Bands are nested inside their option's card rather than sitting beside it as extra
 * columns on a flat list. An option is one card: its label, price and stock are typed
 * once in the card header, and its quantity bands live underneath, indented to line up
 * with the header's inputs. Dragging moves the whole card, so a band cannot be separated
 * from the option it belongs to.
 *
 * The stored shape is unchanged — still one flat row per band, all sharing the option's
 * label — so the collector, the save path and the pricing engine are untouched. Only the
 * rendering differs. Band rows carry their label, stock and option id in hidden inputs so
 * every parallel array still receives exactly one value per row, in document order.
 *
 * Measurements follow the approved design (variant 1b): a 32px drag handle plus the 15px
 * header gap is why the bands block is indented 47px.
 */

/* The toggle, the basis selector and the band block are hidden until the field switches
   "Price by quantity" on. With it off the Options tab looks exactly as it did before. */
.epofw-option-band-cols--hidden {
	display: none !important;
}

/* ---- The option card ------------------------------------------------------------- */

.epofw-option-card {
	padding: 15px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	margin-bottom: 10px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.1 );
}

/*
 * The card supplies the border, padding and background. The head row is an existing
 * .epofw-option-row and brings its own set of all three, which drew a bordered box
 * inside a bordered box with doubled padding.
 *
 * !important is deliberate here and is the exception the CSS standards allow for. The
 * rule being overridden -- ".epofw-options-container .epofw-option-row" in
 * epofw-product-addons.css -- declares padding, border and background !important
 * itself, so no amount of specificity wins without matching it.
 */
.epofw-option-card .epofw-option-card-head,
.epofw-options-container .epofw-option-card .epofw-option-card-head {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.epofw-option-card .epofw-option-card-head > .epofw-form-control,
.epofw-option-card .epofw-option-card-head > .option-field {
	flex: 1;
	min-width: 0;
	height: 38px;
	box-sizing: border-box;
}

/*
 * The builder already renders the sortable handle as .heading_nu_move; styling that is
 * what makes dragging work, where a second handle of our own would only look draggable.
 */
.epofw-option-card .heading_nu_move {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	cursor: grab;
	color: #50575e;
}

.epofw-option-card .epofw-remove-option {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* ---- The nested bands block ------------------------------------------------------ */

/*
 * 49px = the 32px drag handle plus its borders plus the 15px header gap, so the grid starts
 * under the option's label field rather than under its handle.
 */
.epofw-option-bands {
	margin: 12px 0 0 49px;
	padding-top: 12px;
	border-top: 1px dashed #dcdcde;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.epofw-option-bands-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.epofw-option-bands-title > span:first-child {
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.epofw-option-bands-hint {
	font-size: 12px;
	color: #8c8f94;
}

/* From | To | Price type | Price | remove */
.epofw-option-band-grid {
	display: grid;
	grid-template-columns: 90px 90px minmax( 0, 300px ) minmax( 0, 240px ) 32px;
	gap: 10px;
	align-items: center;
	justify-content: start;
}

.epofw-option-band-grid > .epofw-form-control {
	width: 100%;
}

.epofw-option-band-labels {
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.epofw-option-band-row {
	padding: 4px;
	margin: -4px;
	border-radius: 6px;
}

.epofw-option-band-row .epofw-form-control {
	height: 34px;
	box-sizing: border-box;
	padding: 6px 10px;
	font-size: 14px;
	min-width: 0;
	margin: 0;
}

.epofw-option-band-remove {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #fecaca;
	background: #fff;
	color: #dc2626;
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
}

.epofw-option-band-remove:hover {
	background: #fef2f2;
}

.epofw-option-band-warning {
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.6;
	color: #8a2c14;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
}

.epofw-option-add-band {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 13px;
	font-family: inherit;
	color: #2271b1;
	background: #fff;
	border: 1px dashed #2271b1;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	width: auto;
	align-self: flex-start;
}

.epofw-option-add-band:hover {
	background: #f0f6fc;
}

.epofw-option-add-band[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- The toolbar above the list -------------------------------------------------- */

.epofw-option-bands-header .epofw-field-input {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.epofw-option-bands-header {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fcfdfe;
	margin-bottom: 14px;
}

.epofw-option-bands-basis {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #50575e;
	white-space: nowrap;
}

.epofw-option-bands-basis label {
	white-space: nowrap;
	margin: 0;
}

.epofw-option-bands-basis select {
	height: 32px;
}

/*
 * A "field quantity" basis needs the field's own Quantity option switched on. Rather than
 * removing the choice, it is offered disabled and says why, so the setting is discoverable
 * from the tab that depends on it.
 */
.epofw-option-bands-basis option[disabled] {
	color: #8c8f94;
}

/* Shown when "field quantity" was chosen but the field has no quantity of its own. */
.epofw-option-bands-fallback {
	flex-basis: 100%;
	font-size: 12px;
	line-height: 1.6;
	color: #8a6d3b;
	background: #fcf8e3;
	border: 1px solid #f0b849;
	border-radius: 4px;
	padding: 6px 10px;
	margin-top: 4px;
}

.epofw-option-bands-duplicate-warning {
	color: #8a6d3b;
	background: #fcf8e3;
	border-left: 4px solid #f0b849;
	padding: 8px 12px;
	margin: 8px 0;
}

@media screen and ( max-width: 782px ) {
	.epofw-option-card .epofw-option-card-head {
		flex-wrap: wrap;
	}

	.epofw-option-bands {
		margin-left: 0;
	}

	.epofw-option-band-grid {
		grid-template-columns: 1fr 1fr;
	}

	.epofw-option-band-labels {
		display: none;
	}
}