/**
 * Cart-page styles
 *
 * Used by VenuesLive\SatelliteCatering\Cart.
 *
 * Note: Sidebar mini-cart styles (.sc-cart-summary and child classes) are
 * NOT here — they live in the active theme since they're appearance, not
 * behaviour. This stylesheet contains only functional fixes/normalisations
 * that the plugin's behaviour depends on.
 *
 * The !important rules below are because WC's default cart styles are
 * aggressive and would otherwise stretch/restyle our editor select.
 */

/* ---- Cart table column tuning ------------------------------------------- */
/* Universal product image suppression (Images.php) leaves WC's cart template
   emitting an empty th.product-thumbnail and td.product-thumbnail. Hide both
   so the freed space goes to the columns that carry actual content.
   Scoped to .woocommerce-cart-form so this never touches the mini-cart or
   any other shop_table that does carry thumbnails. */
.woocommerce-cart-form th.product-thumbnail,
.woocommerce-cart-form td.product-thumbnail {
	display: none !important;
}

/* Product cell becomes a two-column flex layout: product name on the left,
   the delivery-time editor pinned to the right. Visually reads as a separate
   "Delivery time" column without changing the underlying table structure.
   Stacks below 700px so phones don't squash the picker. */
.woocommerce-cart-form td.product-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.woocommerce-cart-form td.product-name > a {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 700px) {
	.woocommerce-cart-form td.product-name {
		display: table-cell;
	}
}

/* ---- Cart line-item delivery time editor --------------------------------- */
.sc-cart-delivery-time {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

@media (max-width: 700px) {
	.sc-cart-delivery-time {
		margin-top: 8px;
	}
}

.sc-cart-delivery-time-label {
	font-size: 12px;
	font-weight: 600;
}

/* 15-min-stepped <select>. !important defends against WC's cart-form
   width/padding rules that would otherwise stretch the editor full-width. */
.sc-cart-delivery-time-select {
	display: inline-block !important;
	width: auto !important;
	max-width: 220px;
	padding: 6px 10px !important;
	border: 1px solid var(--color-border, rgba(0, 0, 0, .2)) !important;
	border-radius: 6px !important;
	background: var(--color-bg, #fff) !important;
	color: inherit !important;
	line-height: 1.2 !important;
	font: inherit !important;
	-webkit-appearance: menulist !important;
	-moz-appearance: menulist !important;
	appearance: menulist !important;
	background-image: none !important;
	box-shadow: none !important;
}

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

/* ---- Cart actions row ---------------------------------------------------- */
/* The cart-actions row is a single <td class="actions" colspan="6"> spanning
   the full table width. "Continue ordering" (added by our plugin) sits on
   the left, "Update cart" on the right.

   IMPORTANT — do NOT set display:flex on td.actions. A <td> with display:flex
   stops being a table-cell, which means it stops respecting colspan and
   shrinks to its content width (only ~230px instead of the full row).
   We saw this in production: both buttons got crammed into the leftmost
   columns. Keep the td as table-cell and use float-based positioning of
   its children instead. */

.woocommerce-cart-form td.actions {
	/* Override the !important display:flex that some earlier rules and the
	   parent theme may apply. table-cell keeps colspan honoured. */
	display: table-cell !important;
	text-align: right;  /* default-right-aligns the Update cart button */
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Clearfix so the row's height accommodates the floated continue link. */
.woocommerce-cart-form td.actions::after {
	content: "";
	display: block;
	clear: both;
}

/* Phones: stack the two actions vertically. Drop text-align:right so the
   continue link doesn't sit awkwardly right-aligned after the float clears. */
@media (max-width: 600px) {
	.woocommerce-cart-form td.actions {
		text-align: left;
	}
	.woocommerce-cart-form td.actions .sc-cart-continue {
		float: none;
		display: block;
		margin-top: 12px;
	}
}

/* Subtle back-link styling — deliberately NOT a button. The back-to-ordering
   action is navigation, not a cart operation; visually outranking Update
   cart or Proceed to checkout would muddle the hierarchy. Plain teal text
   with arrow, underline on hover.

   Floated left so the Update cart button (still inherits text-align:right
   from the td) stays at the right edge of the row. */
.woocommerce-cart-form td.actions .sc-cart-continue {
	float: left;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;  /* approximate optical centring with the pill button */
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-primary, #00a3ad);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: color .15s;
}

.woocommerce-cart-form td.actions .sc-cart-continue:hover,
.woocommerce-cart-form td.actions .sc-cart-continue:focus {
	color: var(--color-primary-dark, #007a82);
	text-decoration: underline;
	outline: none;
}

/* Update cart button — pinned to the right of the actions row.
   float:right defends against any theme/cf-cached parent styles that would
   otherwise centre or left-align it. Pairs with the float:left .sc-cart-continue
   and the clearfix on td.actions. Keep natural width — no theme flex/grid
   shrinkage. */
.woocommerce-cart-form td.actions button[name="update_cart"],
.woocommerce-cart-form td.actions input[name="update_cart"] {
	float: right;
	white-space: nowrap;
	width: auto;
}

@media (max-width: 600px) {
	.woocommerce-cart-form td.actions button[name="update_cart"],
	.woocommerce-cart-form td.actions input[name="update_cart"] {
		float: none;
		display: block;
		margin-top: 12px;
	}
}