/* ==========================================================================
   La Rana Order — Menu Styles  (tlr-menu.css)
   Loaded only on pages containing [tlr_menu] or [tlr_menu_category].
   ========================================================================== */

/* ── CSS custom properties ───────────────────────────────────────────────── */

:root {
	/* Design tokens — mirror the Tacos La Rana theme (theme.json presets).
	   Fallback hex values keep the plugin on-brand under any other theme. */
	--tlr-color-primary:     var( --wp--preset--color--rana-green, #5E9418 );
	--tlr-color-primary-dk:  var( --wp--preset--color--contrast, #16150F );
	--tlr-color-text:        var( --wp--preset--color--contrast, #16150F );
	--tlr-color-muted:       var( --wp--preset--color--muted, #5B5A50 );
	--tlr-color-border:      var( --wp--preset--color--line, #E4E3DC );
	--tlr-color-bg:          var( --wp--preset--color--surface, #FFFFFF );
	--tlr-color-soldout-bg:  rgba( 22, 21, 15, 0.55 );
	--tlr-radius:            10px;
	--tlr-shadow:            0 2px 8px rgba( 22, 21, 15, 0.08 );
	--tlr-transition:        0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* ── Menu container ──────────────────────────────────────────────────────── */

.tlr-menu {
	width: 100%;
	margin: 0 0 2em;
}

.tlr-no-items {
	color: var( --tlr-color-muted );
	font-style: italic;
}

/* ── Grid layout ─────────────────────────────────────────────────────────── */

.tlr-items--grid {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24px;
}

.tlr-items--cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.tlr-items--cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.tlr-items--cols-4 { grid-template-columns: repeat( 4, 1fr ); }

@media ( max-width: 900px ) {
	.tlr-items--cols-3,
	.tlr-items--cols-4 { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 600px ) {
	.tlr-items--grid { grid-template-columns: 1fr !important; }
}

/* ── List layout ─────────────────────────────────────────────────────────── */

.tlr-items--list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tlr-item--list {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var( --tlr-color-bg );
	border: 1px solid var( --tlr-color-border );
	border-radius: var( --tlr-radius );
	padding: 12px;
}

.tlr-item--list .tlr-item__image-wrap {
	flex: 0 0 80px;
}

.tlr-item--list .tlr-item__body {
	flex: 1;
}

.tlr-item--list .tlr-item__price-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

@media ( max-width: 480px ) {
	.tlr-item--list {
		flex-wrap: wrap;
	}
	.tlr-item--list .tlr-item__price-action {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

/* ── Shared item card styles ─────────────────────────────────────────────── */

.tlr-item--grid {
	display: flex;
	flex-direction: column;
	background: var( --tlr-color-bg );
	border: 1px solid var( --tlr-color-border );
	border-radius: var( --tlr-radius );
	overflow: hidden;
	box-shadow: var( --tlr-shadow );
	transition: box-shadow var( --tlr-transition );
}

.tlr-item--grid:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.13 );
}

/* Image */
.tlr-item__image-wrap {
	position: relative;
}

.tlr-item__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.tlr-item__image-placeholder {
	width: 100%;
	aspect-ratio: 3 / 2;
	background: #f5f5f5;
}

/* Sold-out badge overlay */
.tlr-item__badge--soldout {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var( --tlr-color-soldout-bg );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 4px;
	pointer-events: none;
}

/* Body */
.tlr-item--grid .tlr-item__body {
	padding: 12px 14px 8px;
	flex: 1;
}

.tlr-item__name {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 4px;
	color: var( --tlr-color-text );
	line-height: 1.3;
}

.tlr-item__description {
	font-size: 0.875rem;
	color: var( --tlr-color-muted );
	margin: 0 0 6px;
	line-height: 1.4;
}

.tlr-item__price {
	font-size: 1rem;
	font-weight: 600;
	color: var( --tlr-color-primary );
	margin: 0;
}

/* Footer / CTA */
.tlr-item--grid .tlr-item__footer {
	padding: 10px 14px 14px;
}

/* Sold-out item opacity */
.tlr-item--soldout {
	opacity: 0.7;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.tlr-btn {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 5px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background-color var( --tlr-transition ), opacity var( --tlr-transition );
	border: none;
	text-decoration: none;
}

.tlr-btn--cart,
.tlr-btn--options {
	background-color: var( --tlr-color-primary );
	color: #fff;
	width: 100%;
}

.tlr-btn--cart:hover,
.tlr-btn--options:hover {
	background-color: var( --tlr-color-primary-dk );
	color: #fff;
}

.tlr-btn--soldout {
	background-color: #ccc;
	color: #666;
	width: 100%;
	cursor: not-allowed;
}

.tlr-btn--loading {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ── Tabbed layout ───────────────────────────────────────────────────────── */

.tlr-menu--tabs {
	margin-top: 0;
}

.tlr-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 2px solid var( --tlr-color-border );
}

.tlr-tabs-nav__item a {
	display: block;
	padding: 8px 16px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var( --tlr-color-muted );
	text-decoration: none;
	border-radius: 5px 5px 0 0;
	border: 2px solid transparent;
	border-bottom: none;
	margin-bottom: -2px;
	transition: color var( --tlr-transition );
}

.tlr-tabs-nav__item a:hover {
	color: var( --tlr-color-primary );
}

.tlr-tabs-nav__item--active a {
	color: var( --tlr-color-primary );
	border-color: var( --tlr-color-border ) var( --tlr-color-border ) var( --tlr-color-bg );
	background: var( --tlr-color-bg );
}

.tlr-tab-panel[hidden] {
	display: none;
}

/* ── Time-based availability (Week 7) ─────────────────────────────────────── */

/* Amber badge — shown instead of "Sold Out" for time-restricted items */
.tlr-item__badge--time {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba( 180, 100, 0, 0.85 );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 4px;
	pointer-events: none;
}

/* Time-restricted card: same opacity as sold-out but amber tint */
.tlr-item--time-restricted {
	opacity: 0.75;
}

/* Availability window note below the disabled button */
.tlr-item__avail-note {
	font-size: 0.78rem;
	color: var( --tlr-color-muted );
	margin: 5px 0 0;
	text-align: center;
}

/* Tab header time-window label */
.tlr-tab-avail-note {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: var( --tlr-color-muted );
	line-height: 1.2;
	margin-top: 2px;
}

/* Screen-reader-only utility — visually hidden but accessible to AT.
   Used for aria-live announcement regions injected by JS.
   Mirrors WordPress core .screen-reader-text but under our own namespace
   so it is guaranteed to exist regardless of the active theme. */
.tlr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}


/* ── Mobile ordering — touch targets ─────────────────────────────────────────
   Add-to-cart is the money button: guarantee a 44px tap target on touch
   devices and full-width buttons on phones so one-thumb ordering is easy. */

@media ( hover: none ) and ( pointer: coarse ) {
	.tlr-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

@media ( max-width: 600px ) {
	.tlr-item--grid .tlr-btn,
	.tlr-item--grid .tlr-btn--cart,
	.tlr-item--grid .tlr-btn--options {
		width: 100%;
	}

	.tlr-tabs-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.tlr-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	.tlr-tabs-nav > * {
		flex-shrink: 0;
	}
}


/* ── Quantity stepper (+/- on menu cards) ─────────────────────────────────── */

.tlr-qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var( --tlr-color-border );
	border-radius: 99px;
	background: var( --tlr-color-bg );
	transition: border-color 0.2s ease;
}

.tlr-qty-stepper--active {
	border-color: var( --tlr-color-primary );
}

.tlr-qty-stepper--busy {
	opacity: 0.65;
}

.tlr-qty-stepper__btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var( --tlr-color-text );
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tlr-qty-stepper__btn:hover:not( :disabled ) {
	background: var( --wp--preset--color--green-soft, #EDF3E0 );
}

.tlr-qty-stepper__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.tlr-qty-stepper__qty {
	min-width: 28px;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.tlr-qty-stepper--active .tlr-qty-stepper__qty {
	color: var( --tlr-color-primary );
}

.tlr-qty-pop {
	animation: tlr-qty-pop 0.3s cubic-bezier( 0.5, 1.6, 0.5, 1 );
}

@keyframes tlr-qty-pop {
	0%   { transform: scale( 1 ); }
	50%  { transform: scale( 1.35 ); }
	100% { transform: scale( 1 ); }
}

/* Grid cards: stepper spans the footer like the old button did. */
.tlr-item--grid .tlr-qty-stepper {
	width: 100%;
	justify-content: space-between;
}

/* Touch devices: 44px stepper buttons. */
@media ( hover: none ) and ( pointer: coarse ) {
	.tlr-qty-stepper__btn {
		width: 44px;
		height: 44px;
	}
}

/* ── Stepper glyphs: minus / trash / plus / spinner ──────────────────────────
   The minus button holds both a "−" glyph and a trash icon, stacked; the
   stepper's --single state (quantity === 1) swaps minus → trash so a further
   press removes the line. A spinner overlays whichever glyph is active while
   an AJAX cart write is in flight. */

.tlr-qty-stepper__btn {
	position: relative;
}

.tlr-qty-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.tlr-qty-glyph--trash {
	display: none;
	color: #B23B2E; /* Soft danger cue for "remove". */
}

/* At quantity 1 the minus button becomes a remove/trash control. */
.tlr-qty-stepper--single .tlr-qty-minus .tlr-qty-glyph--minus {
	display: none;
}

.tlr-qty-stepper--single .tlr-qty-minus .tlr-qty-glyph--trash {
	display: inline-flex;
}

/* Per-button loading spinner. */
.tlr-qty-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: tlr-spin 0.6s linear infinite;
}

.tlr-qty-stepper__btn.is-loading .tlr-qty-glyph {
	visibility: hidden;
}

.tlr-qty-stepper__btn.is-loading .tlr-qty-spinner {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7.5px 0 0 -7.5px;
	color: var( --tlr-color-text );
}

@keyframes tlr-spin {
	to { transform: rotate( 360deg ); }
}

/* Add-to-Cart button: spinner appended after the "Adding…" label. */
.tlr-btn--loading {
	position: relative;
}

.tlr-btn--loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: tlr-spin 0.6s linear infinite;
}

/* ── No-photo cards: inline availability badge ─────────────────────────────
   When an item has no photo the image box is skipped entirely; the
   Sold Out / Not Available badge renders in the card flow instead of
   absolutely positioned over a (nonexistent) image. */

.tlr-item__badge--inline {
	position: static;
	display: inline-block;
	align-self: flex-start;
	margin: 12px 14px 0;
}

/* Defensive: the tab JS + PHP hide panels via the `hidden` attribute —
   make sure no other display rule can override it. */
.tlr-tab-panel[hidden] {
	display: none !important;
}

/* ── Orders paused ──────────────────────────────────────────────────────────
   Banner shown above the menu when "Pause All Orders" is on, and visual
   disabling of the ordering controls. The real gates are server-side. */

.tlr-paused-notice {
	background: #FCF9E8;
	border: 1px solid #DBA617;
	border-radius: 10px;
	padding: 14px 20px;
	margin: 0 0 28px;
	color: #4a3800;
	font-size: 0.95rem;
}

.tlr-paused-notice__label {
	display: inline-block;
	font-family: var( --wp--preset--font-family--mono, monospace );
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: #DBA617;
	color: #fff;
	padding: 3px 10px;
	border-radius: 99px;
	margin-right: 10px;
	vertical-align: middle;
}

/* Disable ordering controls while paused (banner precedes the menu). */
.tlr-paused-notice ~ .tlr-menu .tlr-qty-stepper,
.tlr-paused-notice ~ .tlr-menu .tlr-add-to-cart,
.tlr-paused-notice ~ .tlr-menu .tlr-btn--options {
	opacity: 0.4;
	pointer-events: none;
	filter: grayscale( 1 );
}

/* ── Customize link on simple menu cards ────────────────────────────────────── */

.tlr-customize-link {
	display: block;
	margin: 8px auto 0;
	background: none;
	border: none;
	padding: 6px 10px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --tlr-color-muted );
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.tlr-customize-link:hover {
	color: var( --tlr-color-primary );
}

.tlr-item--list .tlr-customize-link {
	display: inline-block;
	margin: 4px 0 0;
}

/* ── Card layout consistency ────────────────────────────────────────────────
   Every card now carries Customize under the stepper; pin the footer to the
   card bottom so steppers + Customize align across a row regardless of
   image/description height differences. */

.tlr-item--grid {
	display: flex;
	flex-direction: column;
}

.tlr-item--grid .tlr-item__body {
	flex: 1 1 auto;
}

.tlr-item--grid .tlr-item__footer {
	margin-top: auto;
}