/* =============================================================================
   Bogdanbor Child — Mini Cart Slideout
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Custom properties
   ----------------------------------------------------------------------------- */
:root {
	--mini-cart-width:      420px;
	--mini-cart-bg:         #ffffff;
	--mini-cart-overlay-bg: rgba(0, 0, 0, 0.45);
	--mini-cart-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	--wine-red:             #7b3b2f;
	--text-primary:         #1a1a1a;
	--text-muted:           #999;
	--border-color:         rgba(0, 0, 0, 0.07);
}

/* -----------------------------------------------------------------------------
   Panel root — fixed, full-screen, hidden by default
   ----------------------------------------------------------------------------- */
.mini-cart-panel {
	position:   fixed;
	/* Start below the fixed site header (.site-header z-index: 2001) so:
	   – the cart trigger in the header is never covered by the drawer,
	   – the panel's own close button and title are fully visible, and
	   – the overlay dims only the scrollable page content area.
	   --header-height is 180px on desktop, 64px on mobile (≤900px). */
	top:        var(--header-height);
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    2000;
	display:    flex;
	justify-content: flex-end;
}

/* Explicitly honour the [hidden] attribute — author display: flex would otherwise
   override the browser default display: none that [hidden] relies on. */
.mini-cart-panel[hidden] {
	display: none;
}

/* While the drawer is sliding closed, prevent the transparent overlay from
   blocking clicks on the page underneath. */
.mini-cart-panel:not(.is-open) .mini-cart-overlay {
	pointer-events: none;
}

/* When hidden attribute is removed but .is-open not yet added:
   overlay is invisible and drawer is off-screen */
.mini-cart-overlay {
	position:         absolute;
	inset:            0;
	background-color: var(--mini-cart-overlay-bg);
	opacity:          0;
	transition:       opacity var(--mini-cart-transition);
	cursor:           pointer;
}

.mini-cart-drawer {
	position:         relative;
	display:          flex;
	flex-direction:   column;
	width:            var(--mini-cart-width);
	max-width:        100vw;
	height:           100%;
	background-color: var(--mini-cart-bg);
	box-shadow:       -4px 0 40px rgba(0, 0, 0, 0.12);
	transform:        translateX(100%);
	transition:       transform var(--mini-cart-transition);
	overflow:         hidden;
}

/* Open state — added by mini-cart.js */
.mini-cart-panel.is-open .mini-cart-overlay {
	opacity: 1;
}

.mini-cart-panel.is-open .mini-cart-drawer {
	transform: translateX(0);
}

/* Prevent body scroll when panel is open */
body.mini-cart-open {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Drawer header
   ----------------------------------------------------------------------------- */
.mini-cart-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1.5rem 1.75rem;
	border-bottom:   1px solid var(--border-color);
	flex-shrink:     0;
}

.mini-cart-title {
	font-family:    Georgia, 'Times New Roman', serif;
	font-size:      1rem;
	font-weight:    400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--text-primary);
	margin:         0;
}

.mini-cart-close {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            36px;
	height:           36px;
	background:       none;
	border:           none;
	cursor:           pointer;
	color:            var(--text-primary);
	border-radius:    50%;
	transition:       background-color 0.2s, color 0.2s;
	flex-shrink:      0;
}

.mini-cart-close:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color:            var(--wine-red);
}

/* -----------------------------------------------------------------------------
   Mini cart body (fragment target)
   ----------------------------------------------------------------------------- */
.mini-cart-body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	overflow:       hidden; /* scroll is on .mini-cart-scroll */
}

/* Loading state while AJAX runs */
.mini-cart-body.is-loading {
	pointer-events: none;
	opacity:        0.5;
	transition:     opacity 0.2s;
}

/* -----------------------------------------------------------------------------
   Empty state
   ----------------------------------------------------------------------------- */
.mini-cart-empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             1rem;
	flex:            1;
	padding:         3rem 2rem;
	text-align:      center;
	color:           var(--text-muted);
}

.mini-cart-empty svg {
	opacity: 0.35;
}

.mini-cart-empty-title {
	font-family:    Georgia, serif;
	font-size:      1rem;
	color:          var(--text-primary);
	margin:         0;
}

.mini-cart-empty-text {
	font-size:   0.875rem;
	line-height: 1.7;
	margin:      0;
}

.btn-browse-wines {
	display:         inline-block;
	margin-top:      0.5rem;
	padding:         0.625rem 1.5rem;
	border:          1px solid var(--text-primary);
	font-size:       0.6875rem;
	letter-spacing:  0.14em;
	text-transform:  uppercase;
	text-decoration: none;
	color:           var(--text-primary);
	transition:      background 0.25s, color 0.25s;
}

.btn-browse-wines:hover {
	background: var(--text-primary);
	color:      #ffffff;
}

/* -----------------------------------------------------------------------------
   Cart items — scrollable list
   ----------------------------------------------------------------------------- */
.mini-cart-scroll {
	flex:       1;
	overflow-y: auto;
	padding:    0.5rem 0;
	/* Custom minimal scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.mini-cart-scroll::-webkit-scrollbar { width: 4px; }
.mini-cart-scroll::-webkit-scrollbar-track { background: transparent; }
.mini-cart-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.mini-cart-items {
	list-style: none;
	margin:     0;
	padding:    0;
}

/* -----------------------------------------------------------------------------
   Single cart item
   ----------------------------------------------------------------------------- */
.mini-cart-item {
	display:       flex;
	gap:           1rem;
	padding:       1.25rem 1.75rem;
	border-bottom: 1px solid var(--border-color);
	align-items:   flex-start;
	transition:    background 0.2s;
}

.mini-cart-item:last-child {
	border-bottom: none;
}

/* Thumbnail */
.mini-cart-item-image {
	flex-shrink: 0;
	width:       72px;
}

.mini-cart-item-image a {
	display: block;
}

.mini-cart-item-image img {
	display:      block;
	width:        72px;
	height:       96px;
	object-fit:   cover;
	border-radius: 2px;
	background:   #f0ede8;
}

/* Details column */
.mini-cart-item-details {
	flex:    1;
	display: flex;
	flex-direction: column;
	gap:     0.5rem;
	min-width: 0; /* prevent text overflow breaking flex */
}

/* Top row: name + remove */
.mini-cart-item-top {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             0.5rem;
}

.mini-cart-item-name {
	font-family: Georgia, serif;
	font-size:   0.875rem;
	line-height: 1.45;
	color:       var(--text-primary);
	margin:      0;
	flex:        1;
}

.mini-cart-item-name a {
	color:           inherit;
	text-decoration: none;
	transition:      color 0.2s;
}

.mini-cart-item-name a:hover {
	color: var(--wine-red);
}

/* Remove button */
.mini-cart-item-remove {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            24px;
	height:           24px;
	flex-shrink:      0;
	color:            var(--text-muted);
	text-decoration:  none;
	transition:       color 0.2s;
	border-radius:    50%;
}

.mini-cart-item-remove:hover {
	color: var(--wine-red);
}

/* Variable product attributes */
.mini-cart-item-details .wc-item-meta {
	font-size:   0.75rem;
	color:       var(--text-muted);
	line-height: 1.5;
}

/* Bottom row: qty + price */
.mini-cart-item-bottom {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      auto;
}

/* Quantity controls */
.mini-cart-qty {
	display:     flex;
	align-items: center;
	gap:         0;
	border:      1px solid var(--border-color);
	height:      30px;
}

.qty-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            30px;
	height:           100%;
	background:       none;
	border:           none;
	cursor:           pointer;
	color:            var(--text-primary);
	transition:       background 0.2s, color 0.2s;
	flex-shrink:      0;
}

.qty-btn:hover {
	background: var(--text-primary);
	color:      #ffffff;
}

.qty-btn:disabled {
	color:          #ccc;
	cursor:         not-allowed;
	pointer-events: none;
}

.qty-value {
	min-width:   28px;
	text-align:  center;
	font-size:   0.8125rem;
	color:       var(--text-primary);
	border-left:  1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	line-height:  30px;
	height:       100%;
}

/* Item price */
.mini-cart-item-price {
	font-family: Georgia, serif;
	font-size:   0.875rem;
	color:       var(--text-primary);
}

.mini-cart-item-price .woocommerce-Price-amount {
	color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   Subtotal
   ----------------------------------------------------------------------------- */
.mini-cart-subtotal {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1.25rem 1.75rem;
	border-top:      1px solid var(--border-color);
	flex-shrink:     0;
}

.mini-cart-subtotal-label {
	font-size:      0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--text-muted);
}

.mini-cart-subtotal-value {
	font-family: Georgia, serif;
	font-size:   1rem;
	color:       var(--text-primary);
}

.mini-cart-subtotal-value .woocommerce-Price-amount {
	color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   Action buttons
   ----------------------------------------------------------------------------- */
.mini-cart-actions {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	padding:        1.25rem 1.75rem 2rem;
	flex-shrink:    0;
}

.btn-view-cart,
.btn-checkout-now {
	display:         block;
	padding:         0.875rem 1rem;
	text-align:      center;
	font-size:       0.6875rem;
	letter-spacing:  0.16em;
	text-transform:  uppercase;
	text-decoration: none;
	transition:      background 0.25s, color 0.25s, border-color 0.25s;
}

.btn-view-cart {
	border:  1px solid var(--text-primary);
	color:   var(--text-primary);
	background: transparent;
}

.btn-view-cart:hover {
	background: var(--text-primary);
	color:      #ffffff;
}

.btn-checkout-now {
	background:  var(--wine-red);
	border:      1px solid var(--wine-red);
	color:       #ffffff;
}

.btn-checkout-now:hover {
	background:  #6a2e23;
	border-color: #6a2e23;
}

/* -----------------------------------------------------------------------------
   Mobile adjustments
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--mini-cart-width: 100vw;
	}

	.mini-cart-drawer {
		border-radius: 0;
	}
}

/* -----------------------------------------------------------------------------
   Reduced motion support
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mini-cart-drawer,
	.mini-cart-overlay {
		transition: none;
	}
}