/* WCSATT Subscription Options as Buttons
 * ----------------------------------------
 * Part 1: "One-Time Purchase / Subscribe" radios.
 * These are left as real radio inputs (so WCS-ATT's own change handlers
 * keep firing) — we just hide the circle and style the wrapping <label>
 * as a pill button. The JS adds/removes "is-checked" on the label.
 */

.wcsatt-options-wrapper .wcsatt-options-prompt-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.wcsatt-options-wrapper .wcsatt-options-prompt-radio {
	margin: 0;
}

.wcsatt-options-wrapper .wcsatt-options-prompt-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65em 1.4em;
	border: 1px solid #d5d8dc;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-weight: 500;
	font-size: 0.95em;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wcsatt-options-wrapper .wcsatt-options-prompt-label:hover {
	border-color: #a8acb2;
}

.wcsatt-options-wrapper .wcsatt-options-prompt-action-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.wcsatt-options-wrapper .wcsatt-options-prompt-label:focus-within {
	box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.35);
}

.wcsatt-options-wrapper .wcsatt-options-prompt-label.is-checked {
	background-color: #007cba;
	border-color: #007cba;
	color: #fff;
}

/* Part 2: delivery-frequency buttons.
 * The original <select> + <label> stay in the DOM (hidden) so the form
 * still has the field WCS-ATT expects; the JS-built buttons next to them
 * are what the shopper actually sees and clicks.
 */

.wcsatt-freq-buttons-wrapper {
	margin: 0 0 1em;
}

.wcsatt-freq-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.wcsatt-freq-button {
	padding: 0.65em 1.4em;
	border: 1px solid #d5d8dc;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-weight: 500;
	font-size: 0.95em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wcsatt-freq-button:hover {
	border-color: #a8acb2;
}

.wcsatt-freq-button:focus-visible {
	outline: 2px solid rgba(0, 124, 186, 0.5);
	outline-offset: 2px;
}

.wcsatt-freq-button.is-active {
	background-color: #007cba;
	border-color: #007cba;
	color: #fff;
}

.wcsatt-freq-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hide the native select/label once the JS has built buttons for them,
 * but keep them in the layout flow (not display:none) so WCS-ATT's own
 * scripts, which may read their values, are unaffected.
 */
.wcsatt-options-product-dropdown.wcsatt-buttons-enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.wcsatt-options-product-dropdown-label.wcsatt-buttons-enhanced {
	display: none;
}

/* Part 3: cart-table subscription options.
 * The real <ul>, <label>, and <input> elements are moved (not copied)
 * out of the cramped Price cell into a full-width row below the
 * product — confirmed safe to relocate since WCS-ATT's actual cart.js
 * has no listener at all for these radios. The <td> keeps its default
 * table-cell display so colspan still spans the row; the label and
 * list are flowed inline via an inner <div> instead of flexing the
 * <td> itself (overriding a table cell's own display silently breaks
 * colspan). Each radio is styled as a pill button, same technique as
 * Part 1.
 */

tr.wcsatt-buttons-row td {
	border-top: 1px dashed #e2e4e7;
	background: #fafafa;
	padding: 0.75em 1em;
}

.wcsatt-buttons-row-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
}

.wcsatt-buttons-row-label {
	margin: 0;
	font-size: 0.8em;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

ul.wcsatt-options.wcsatt-buttons-styled {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.wcsatt-options.wcsatt-buttons-styled li {
	margin: 0;
}

ul.wcsatt-options.wcsatt-buttons-styled label {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.4em 0.9em;
	border: 1px solid #d5d8dc;
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

ul.wcsatt-options.wcsatt-buttons-styled label:hover {
	border-color: #a8acb2;
}

ul.wcsatt-options.wcsatt-buttons-styled input[type='radio'] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

ul.wcsatt-options.wcsatt-buttons-styled label:focus-within {
	box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.35);
}

ul.wcsatt-options.wcsatt-buttons-styled li.is-checked label {
	background-color: #007cba;
	border-color: #007cba;
	color: #fff;
}