/* ==========================================================================
   La Rana Order — Cart Styles  (tlr-cart.css)
   Loaded on every page that contains the [tlr_mini_cart] shortcode.
   ========================================================================== */

/* ── CSS custom properties (duplicates tlr-menu.css for standalone use) ─── */

:root {
	/* Design tokens — mirror the Tacos La Rana theme (theme.json presets). */
	--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-radius:           10px;
	--tlr-transition:       0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* ── Mini-cart trigger (floating button) ─────────────────────────────────── */

.tlr-mini-cart-trigger-wrap {
	display: inline-block;
}

.tlr-mini-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --tlr-color-primary );
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 52px;
	height: 52px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.2 );
	transition: background-color var( --tlr-transition ), transform var( --tlr-transition );
}

.tlr-mini-cart-trigger:hover {
	background-color: var( --tlr-color-primary-dk );
	transform: scale( 1.05 );
}

.tlr-mini-cart-trigger__count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #fff;
	color: var( --tlr-color-primary );
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid var( --tlr-color-primary );
	padding: 0 3px;
}

.tlr-mini-cart-trigger__count--empty {
	display: none;
}

/* Structural guarantee: a badge with no digit can never be shown.
   (:empty matches only a truly text-less node — the exact broken state.) */
.tlr-mini-cart-trigger__count:empty {
	display: none !important;
}

/* Pop animation when an item is added (class toggled by tlr-cart.js). */
.tlr-cart-bump {
	animation: tlr-cart-bump 0.4s cubic-bezier( 0.5, 1.6, 0.5, 1 );
}

@keyframes tlr-cart-bump {
	0%   { transform: scale( 1 ); }
	40%  { transform: scale( 1.45 ); }
	100% { transform: scale( 1 ); }
}

/* ── Slide-out panel ─────────────────────────────────────────────────────── */

.tlr-mini-cart-panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	visibility: hidden;
}

.tlr-mini-cart-panel--open {
	pointer-events: all;
	visibility: visible;
}

/* Semi-transparent overlay */
.tlr-mini-cart-panel__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	opacity: 0;
	transition: opacity var( --tlr-transition );
}

.tlr-mini-cart-panel--open .tlr-mini-cart-panel__overlay {
	opacity: 1;
}

/* Drawer */
.tlr-mini-cart-panel__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 380px, 100vw );
	background: var( --tlr-color-bg );
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform 0.28s cubic-bezier( 0.4, 0, 0.2, 1 );
	box-shadow: -4px 0 24px rgba( 0, 0, 0, 0.12 );
}

.tlr-mini-cart-panel--open .tlr-mini-cart-panel__drawer {
	transform: translateX( 0 );
}

/* Header */
.tlr-mini-cart-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var( --tlr-color-border );
	flex-shrink: 0;
}

.tlr-mini-cart-panel__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.tlr-mini-cart-panel__close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var( --tlr-color-muted );
	line-height: 1;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color var( --tlr-transition );
}

.tlr-mini-cart-panel__close:hover {
	color: var( --tlr-color-text );
}

/* Body / item list */
.tlr-mini-cart-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

.tlr-mini-cart-panel__empty {
	color: var( --tlr-color-muted );
	font-style: italic;
	text-align: center;
	margin-top: 40px;
}

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

.tlr-mini-cart-panel__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.tlr-mini-cart-panel__item-image {
	flex-shrink: 0;
}

.tlr-mini-cart-panel__item-thumb {
	width: 60px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.tlr-mini-cart-panel__item-details {
	flex: 1;
}

.tlr-mini-cart-panel__item-name {
	font-weight: 600;
	margin: 0 0 3px;
	font-size: 0.9rem;
}

.tlr-mini-cart-panel__item-addons {
	list-style: none;
	margin: 0 0 3px;
	padding: 0;
	font-size: 0.8rem;
	color: var( --tlr-color-muted );
}

.tlr-addon-price {
	color: var( --tlr-color-primary );
	margin-left: 4px;
}

.tlr-mini-cart-panel__item-meta {
	margin: 0;
	font-size: 0.85rem;
	color: var( --tlr-color-muted );
}

/* Footer */
.tlr-mini-cart-panel__footer {
	padding: 16px 20px;
	border-top: 1px solid var( --tlr-color-border );
	flex-shrink: 0;
}

.tlr-mini-cart-panel__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 12px;
	font-size: 1rem;
}

.tlr-btn--checkout {
	display: block;
	width: 100%;
	background: var( --tlr-color-primary );
	color: #fff;
	padding: 12px 18px;
	border-radius: 5px;
	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color var( --tlr-transition );
}

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


/* ── Mobile mini-cart ────────────────────────────────────────────────────────
   Full-width panel on phones, larger tap targets, and safe-area padding so
   the checkout button clears the iOS home indicator. */

@media ( max-width: 480px ) {
	.tlr-mini-cart-panel__drawer {
		width: 100vw !important;
	}
}

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

	.tlr-mini-cart-panel__close {
		min-width: 44px;
		min-height: 44px;
	}
}

@supports ( padding: env( safe-area-inset-bottom ) ) {
	.tlr-mini-cart-panel__footer {
		padding-bottom: calc( 16px + env( safe-area-inset-bottom ) );
	}
}

/* ── Mini-cart line quantity steppers ────────────────────────────────────────
   Each cart line gets a ±1 stepper. Styles are self-contained (the panel can
   appear on pages that don't load tlr-menu.css) and mirror the menu stepper. */

.tlr-mini-cart-panel__item-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
}

.tlr-mini-cart-panel__item-total {
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}

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

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

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

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

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

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

.tlr-mini-cart-panel .tlr-qty-stepper__qty {
	min-width: 24px;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

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

/* Glyphs: minus / trash / plus, plus per-button spinner. */
.tlr-mini-cart-panel .tlr-qty-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.tlr-mini-cart-panel .tlr-qty-glyph--trash {
	display: none;
	color: #B23B2E;
}

.tlr-mini-cart-panel .tlr-qty-stepper--single .tlr-qty-minus .tlr-qty-glyph--minus {
	display: none;
}

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

.tlr-mini-cart-panel .tlr-qty-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: tlr-spin 0.6s linear infinite;
}

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

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

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

/* Touch devices: bigger tap targets inside the panel. */
@media ( hover: none ) and ( pointer: coarse ) {
	.tlr-mini-cart-panel .tlr-qty-stepper__btn {
		width: 40px;
		height: 40px;
	}
}

/* ── Per-item special request in the panel ──────────────────────────────────── */

.tlr-mini-cart-panel__item-note {
	margin: 4px 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var( --tlr-color-primary );
}


/* ── Scroll fix: the contents wrapper must join the drawer's flex chain, or
   the body never scrolls and long carts push the checkout button off-screen. */

.tlr-mini-cart-panel__contents {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.tlr-mini-cart-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
}

.tlr-mini-cart-panel__footer {
	flex-shrink: 0;
}

/* ── Per-line note editor (add/edit special requests from the cart) ────────── */

.tlr-line-note {
	margin-top: 4px;
}

.tlr-line-note__toggle {
	background: none;
	border: none;
	padding: 2px 0;
	font-size: 0.76rem;
	font-weight: 600;
	color: var( --tlr-color-muted );
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.tlr-line-note__toggle:hover {
	color: var( --tlr-color-primary );
}

.tlr-line-note__editor {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.tlr-line-note__editor[hidden] {
	display: none;
}

.tlr-line-note__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var( --tlr-color-border );
	border-radius: 8px;
	font-size: 16px; /* prevent iOS focus-zoom */
	min-height: 40px;
}

.tlr-line-note__input:focus {
	outline: none;
	border-color: var( --tlr-color-primary );
}

.tlr-line-note__save {
	flex-shrink: 0;
	min-height: 40px;
}

/* ── Line-note editor: polished (overrides the base + WP .button gray) ────── */

.tlr-mini-cart-panel .tlr-line-note__editor {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: 8px;
}

.tlr-mini-cart-panel .tlr-line-note__editor[hidden] {
	display: none;
}

.tlr-mini-cart-panel .tlr-line-note__input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 10px 16px;
	border: 1px solid var( --tlr-color-border, #E4E3DC );
	border-radius: 99px;
	background: var( --wp--preset--color--base, #FAFAF7 );
	color: var( --tlr-color-text, #16150F );
	font-size: 16px; /* prevent iOS focus-zoom */
	min-height: 42px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tlr-mini-cart-panel .tlr-line-note__input::placeholder {
	color: var( --tlr-color-muted, #5B5A50 );
	opacity: 0.7;
}

.tlr-mini-cart-panel .tlr-line-note__input:focus {
	outline: none;
	border-color: var( --tlr-color-primary, #5E9418 );
	box-shadow: 0 0 0 3px var( --wp--preset--color--green-soft, #EDF3E0 );
}

.tlr-mini-cart-panel .button.tlr-line-note__save,
.tlr-mini-cart-panel .tlr-line-note__save {
	flex-shrink: 0;
	min-height: 42px;
	padding: 0 20px;
	background: var( --tlr-color-primary, #5E9418 );
	color: #fff;
	border: none;
	border-radius: 99px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: background 0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 ), transform 0.25s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.tlr-mini-cart-panel .button.tlr-line-note__save:hover:not( :disabled ),
.tlr-mini-cart-panel .tlr-line-note__save:hover:not( :disabled ) {
	background: var( --tlr-color-primary-dk, #16150F );
	color: #fff;
	transform: translateY( -1px );
}

.tlr-mini-cart-panel .button.tlr-line-note__save:disabled,
.tlr-mini-cart-panel .tlr-line-note__save:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none;
}