/**
 * Order form product-side styles
 *
 * Used by VenuesLive\SatelliteCatering\OrderForm\ProductForm:
 *   - .sc-delivery-time-wrap   : wrapper around the per-row time select
 *   - .sc-delivery-time-select : the 15-min <select> with AM/PM optgroups
 *   - .sc-cat-nav              : the chip-bar of jump links above the
 *                                category list
 *   - .sc-cat-nav__link        : individual category link inside the nav
 *   - .sc-cat-heading          : the h3 heading above each Barn2 product
 *                                table (anchor target for the nav links)
 *   - .sc-info-block           : margin reset for woocommerce-info notices
 *                                shown when no event/booking is open (also
 *                                defined in order-form-selectors.css for
 *                                decoupling — duplicate is intentional, both
 *                                files load on the order form page)
 *
 * Theme integration: uses --color-*, --font-* CSS custom properties from
 * the active theme, with fallbacks for themes that don't supply them.
 */

/* ---- Delivery time picker (add-to-cart form) ------------------------------
   Wrapper keeps the select vertically centred relative to the qty + add-to-
   cart button it sits next to in Barn2's last table column. */
.sc-delivery-time-wrap {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0 6px 0 0;
}

/* 15-min-stepped <select> with AM/PM optgroups.
   `appearance: menulist` forces the native dropdown chevron in case
   the parent theme has reset selects to a custom style. */
.sc-delivery-time-select {
	padding: 8px 10px;
	border: 1px solid var(--color-border, rgba(0, 0, 0, .08));
	border-radius: 6px;
	font-size: 14px;
	font: inherit;
	color: var(--color-text, #1a1a2e);
	background: var(--color-bg, #fff);
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.sc-delivery-time-select:focus {
	outline: none;
	border-color: var(--color-primary, #00a3ad);
	box-shadow: 0 0 0 3px rgba(0, 163, 173, 0.15);
}

/* ---- Category quick-jump nav --------------------------------------------
   Chip-bar of anchor links above the first product table. Renders inline
   above the categories so the user can skim and jump on long order forms
   without scrolling past every section. Not sticky for now — if it becomes
   useful to keep visible on scroll, change `position: static` to
   `position: sticky; top: var(--header-height, 91px)` and adjust
   scroll-margin-top on .sc-cat-heading to match. */
.sc-cat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, .08));
}

.sc-cat-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, rgba(0, 0, 0, .12));
	border-radius: var(--button-radius, 9999px);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text, #1a1a2e);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, color .15s, border-color .15s;
}

.sc-cat-nav__link:hover,
.sc-cat-nav__link:focus {
	background: var(--color-primary, #00a3ad);
	border-color: var(--color-primary, #00a3ad);
	color: #fff;
	outline: none;
}

/* ---- Category headings above product tables ------------------------------
   `scroll-margin-top` offsets the in-page anchor jump so the heading lands
   below the sticky page header (~91px) instead of being covered by it.
   Adjust if the header height changes. */
.sc-cat-heading {
	margin: 28px 0 8px;
	font-size: 18px;
	color: var(--color-text, #1a1a2e);
	border-bottom: 2px solid var(--color-primary, #00a3ad);
	padding-bottom: 6px;
	scroll-margin-top: 110px;
}

/* Category description (Woo product_cat term description) shown under the
   heading, above the Barn2 product table. */
.sc-cat-description {
	margin: 0 0 14px;
	color: var(--color-muted, #555);
	font-size: 14px;
	line-height: 1.5;
}
.sc-cat-description p { margin: 0 0 8px; }
.sc-cat-description p:last-child { margin-bottom: 0; }

/* Smooth scrolling for in-page anchor jumps. Scoped via :root so it doesn't
   override per-page overrides downstream; `overflow-x: clip` on html is
   already set in the theme stylesheet so smooth-scroll works horizontally
   too if anchor targets ever go off-axis. */
:root {
	scroll-behavior: smooth;
}

/* ---- Info / status blocks (gating notices) -------------------------------
   Same rule as in order-form-selectors.css — duplicated intentionally so
   each module's stylesheet is self-contained. */
.sc-info-block {
	margin: 0 0 15px 0;
}