/* ==========================================================================
   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 {
	--tlr-color-primary:    #c0392b;
	--tlr-color-primary-dk: #a93226;
	--tlr-color-text:       #333;
	--tlr-color-muted:      #666;
	--tlr-color-border:     #e0e0e0;
	--tlr-color-bg:         #fff;
	--tlr-radius:           8px;
	--tlr-transition:       0.2s ease;
}

/* ── 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;
}

/* ── 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;
}