/**
 * Build Your Own Box — builder UI.
 *
 * Palette is derived from the theme's existing greys (#4d4f50 body, #3c3c3c
 * headings) with the theme's success green as the accent. Retune via the
 * custom properties below.
 */

.gl-box-form {
	--gl-accent: #6dab3c;
	--gl-accent-dark: #5c9232;
	--gl-accent-soft: #f1f8ec;
	--gl-ink: #3c3c3c;
	--gl-muted: #767676;
	--gl-line: #e4e6e4;
	--gl-surface: #ffffff;
	--gl-radius: 12px;

	margin-top: 1.5rem;
}

/* main-style.css sets `.woocommerce div.product form.cart { display: flex }`,
   which would lay our two steps side by side. Beat that specificity (0,2,2)
   so the builder keeps normal block flow. */
.woocommerce div.product form.cart.gl-box-form {
	display: block;
	width: 100%;
}

.woocommerce div.product form.cart.gl-box-form > * {
	float: none;
	width: auto;
}

/* ----------------------------------------------------------------- Steps */

.gl-box-step {
	margin-bottom: 2rem;
}

.gl-box-step[hidden] {
	display: none;
}

.gl-box-step__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	font-size: 1.05rem;
	color: var(--gl-ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gl-box-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--gl-accent);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	flex: 0 0 auto;
}

/* --------------------------------------------------------- Step 1: sizes */

.gl-box-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.85rem;
}

.gl-box-size-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 1.15rem 0.75rem;
	background: var(--gl-surface);
	border: 2px solid var(--gl-line);
	border-radius: var(--gl-radius);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.gl-box-size-card:hover {
	border-color: var(--gl-accent);
	transform: translateY(-2px);
}

.gl-box-size-card:focus-visible {
	outline: 2px solid var(--gl-accent);
	outline-offset: 2px;
}

.gl-box-size-card.is-selected {
	border-color: var(--gl-accent);
	background: var(--gl-accent-soft);
	box-shadow: 0 4px 14px rgba(109, 171, 60, 0.18);
}

.gl-box-size-card__count {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--gl-ink);
}

.gl-box-size-card__items {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gl-muted);
}

.gl-box-size-card__label {
	margin-top: 0.35rem;
	font-weight: 600;
	color: var(--gl-ink);
}

.gl-box-size-card__price {
	font-size: 0.95rem;
	color: var(--gl-accent-dark);
	font-weight: 600;
}

/* ------------------------------------------------------ Step 2: flavours */

.gl-box-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.85rem;
}

.gl-box-flavour {
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
	background: var(--gl-surface);
	border: 2px solid var(--gl-line);
	border-radius: var(--gl-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gl-box-flavour.has-qty {
	border-color: var(--gl-accent);
	box-shadow: 0 3px 12px rgba(109, 171, 60, 0.15);
}

.gl-box-flavour.is-oos {
	opacity: 0.5;
}

.gl-box-flavour__media {
	position: relative;
	margin-bottom: 0.6rem;
}

.gl-box-flavour__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.gl-box-flavour__badge {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	padding: 0.2rem 0.5rem;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 4px;
}

.gl-box-flavour__name {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--gl-ink);
	text-align: center;
	/* Keep counters aligned across cards with different title lengths. */
	flex: 1 0 auto;
}

.gl-box-flavour__counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.gl-box-qty {
	/* 44px minimum for comfortable tapping. */
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border: 1px solid var(--gl-line);
	border-radius: 50%;
	background: #fff;
	color: var(--gl-ink);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gl-box-qty:hover:not(:disabled) {
	background: var(--gl-accent);
	border-color: var(--gl-accent);
	color: #fff;
}

.gl-box-qty:focus-visible {
	outline: 2px solid var(--gl-accent);
	outline-offset: 2px;
}

.gl-box-qty:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.gl-box-flavour__qty {
	flex: 1 1 auto;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gl-ink);
}

/* ------------------------------------------------------------ Sticky bar */

.gl-box-bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5rem;
	padding: 1rem;
	background: var(--gl-surface);
	border: 1px solid var(--gl-line);
	border-radius: var(--gl-radius);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07);
}

.gl-box-bar__track {
	position: relative;
	flex: 1 1 100%;
	height: 8px;
	background: var(--gl-line);
	border-radius: 999px;
	overflow: hidden;
}

.gl-box-bar__fill {
	height: 100%;
	width: 0;
	background: var(--gl-accent);
	border-radius: 999px;
	transition: width 0.3s ease;
}

.gl-box-bar__info {
	flex: 1 1 auto;
	min-width: 0;
}

.gl-box-bar__status {
	margin: 0;
	font-weight: 700;
	color: var(--gl-ink);
}

.gl-box-bar__msg {
	margin: 0;
	font-size: 0.85rem;
	color: var(--gl-muted);
}

.gl-box-form.is-complete .gl-box-bar__msg {
	color: var(--gl-accent-dark);
	font-weight: 600;
}

.gl-box-submit.gl-box-submit {
	flex: 0 0 auto;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
}

.gl-box-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.gl-box-bar__price {
	margin-left: 0.4rem;
	font-weight: 700;
}

/* --------------------------------------------------------------- Notices */

.gl-box-notice {
	padding: 0.9rem 1.1rem;
	background: #fdf6e6;
	border-left: 3px solid #e0a800;
	border-radius: 4px;
	color: var(--gl-ink);
}

/* ---------------------------------------------- Cart / order item listing */

.gl-box-contents {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.gl-box-contents li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.85rem;
	line-height: 1.6;
}

.gl-box-item-qty {
	font-weight: 600;
	white-space: nowrap;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 575px) {
	.gl-box-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 0.6rem;
	}

	.gl-box-sizes {
		grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
		gap: 0.5rem;
	}

	.gl-box-size-card {
		padding: 0.9rem 0.5rem;
	}

	.gl-box-size-card__count {
		font-size: 1.6rem;
	}

	/* Full-width bar pinned to the bottom of the viewport on phones. The
	   negative margins break out of the theme's container gutter, so the
	   padding has to put the gutter back or the text clips at the edge. */
	.gl-box-bar {
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.gl-box-submit.gl-box-submit {
		flex: 1 1 100%;
	}
}