/**
 * MV Square Shop — Cart CSS
 *
 * Namespaced (.mvsq-cart-*, .mvsq-cart-*) — no global overrides.
 * Mobile-first. CSS custom properties for theming (inherits from storefront.css vars).
 * At < 768 px: the cart rail becomes a bottom drawer (full-width sheet).
 *
 * @package Mindfeeder\MVSquareShop
 */

/* =========================================================================
   Cart shared variables (extend storefront.css vars)
   ========================================================================= */

.mvsq-cart {
	--mvsq-cart-bg:           var( --mvsq-color-surface, #fff );
	--mvsq-cart-border:       var( --mvsq-color-border, #e5e5e5 );
	--mvsq-cart-radius:       var( --mvsq-radius, 12px );
	--mvsq-cart-pad:          var( --mvsq-space-md, 1.25rem );
	--mvsq-cart-item-gap:     var( --mvsq-space-sm, 0.75rem );
	--mvsq-checkout-bg:       var( --mvsq-color-primary, #c0392b );
	--mvsq-checkout-bg-hover: var( --mvsq-color-primary-dark, #a93226 );
	--mvsq-checkout-color:    #fff;
	--mvsq-remove-color:      var( --mvsq-color-muted, #888 );
	--mvsq-remove-hover:      var( --mvsq-color-danger, #c0392b );
}

/* =========================================================================
   Cart rail (full inline cart)
   ========================================================================= */

.mvsq-cart--rail {
	background:    var( --mvsq-cart-bg );
	border:        1px solid var( --mvsq-cart-border );
	border-radius: var( --mvsq-cart-radius );
	padding:       var( --mvsq-cart-pad );
	display:       flex;
	flex-direction: column;
	gap:           var( --mvsq-space-md, 1.25rem );
}

.mvsq-cart__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.mvsq-cart__title {
	margin:      0;
	font-size:   1.1rem;
	font-weight: 600;
	display:     flex;
	align-items: center;
	gap:         0.4rem;
}

.mvsq-cart__count-label {
	font-size:   0.9rem;
	font-weight: 400;
	color:       var( --mvsq-color-muted, #888 );
}

/* =========================================================================
   Line items
   ========================================================================= */

.mvsq-cart__items {
	display:        flex;
	flex-direction: column;
	gap:            var( --mvsq-cart-item-gap );
	min-height:     2rem;
}

.mvsq-cart__empty-msg {
	color:     var( --mvsq-color-muted, #888 );
	font-size: 0.9rem;
	margin:    0;
	text-align: center;
	padding:   1rem 0;
}

.mvsq-cart-item {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             0.5rem;
	padding-bottom:  var( --mvsq-cart-item-gap );
	border-bottom:   1px solid var( --mvsq-cart-border );
}

.mvsq-cart-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.mvsq-cart-item__name-wrap {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            0.15rem;
}

.mvsq-cart-item__name {
	font-weight: 500;
	font-size:   0.95rem;
}

.mvsq-cart-item__variation {
	font-size: 0.82rem;
	color:     var( --mvsq-color-muted, #888 );
}

.mvsq-cart-item__mods {
	font-size:  0.8rem;
	color:      var( --mvsq-color-muted, #888 );
	font-style: italic;
}

.mvsq-cart-item__controls {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	flex-shrink: 0;
}

.mvsq-cart-item__price {
	font-weight: 500;
	font-size:   0.95rem;
	min-width:   3.5rem;
	text-align:  right;
}

.mvsq-cart-item__remove {
	background: none;
	border:     none;
	cursor:     pointer;
	color:      var( --mvsq-remove-color );
	font-size:  1.1rem;
	line-height: 1;
	padding:    0.2rem 0.3rem;
	border-radius: 3px;
	transition: color 0.15s ease;
}

.mvsq-cart-item__remove:hover,
.mvsq-cart-item__remove:focus-visible {
	color:   var( --mvsq-remove-hover );
	outline: 2px solid var( --mvsq-remove-hover );
}

/* =========================================================================
   Stepper (cart qty controls — shared with storefront stepper)
   ========================================================================= */

.mvsq-stepper--cart {
	display:      flex;
	align-items:  center;
	gap:          0;
	border:       1px solid var( --mvsq-cart-border );
	border-radius: 6px;
	overflow:     hidden;
}

.mvsq-stepper--cart .mvsq-stepper__btn {
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    0.3rem 0.55rem;
	font-size:  1rem;
	line-height: 1;
	color:      var( --mvsq-color-text, #222 );
	transition: background 0.12s ease;
}

.mvsq-stepper--cart .mvsq-stepper__btn:hover,
.mvsq-stepper--cart .mvsq-stepper__btn:focus-visible {
	background: var( --mvsq-color-bg, #f8f8f8 );
	outline:    none;
}

.mvsq-stepper--cart .mvsq-stepper__qty {
	min-width:  1.6rem;
	text-align: center;
	font-size:  0.9rem;
	font-weight: 500;
}

/* =========================================================================
   Pickup row
   ========================================================================= */

.mvsq-cart__pickup-row {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	padding:     0.75rem;
	background:  var( --mvsq-color-bg, #f8f8f8 );
	border-radius: 8px;
	border:      1px solid var( --mvsq-cart-border );
}

.mvsq-cart__pickup-btn {
	background: none;
	border:     none;
	cursor:     pointer;
	font-size:  0.9rem;
	color:      var( --mvsq-color-primary, #c0392b );
	text-decoration: underline;
	padding:    0;
}

.mvsq-cart__pickup-btn:focus-visible {
	outline:        2px solid var( --mvsq-color-primary, #c0392b );
	outline-offset: 2px;
}

/* =========================================================================
   Totals
   ========================================================================= */

.mvsq-cart__totals {
	display:        flex;
	flex-direction: column;
	gap:            0.4rem;
	border-top:     1px solid var( --mvsq-cart-border );
	padding-top:    var( --mvsq-cart-pad );
}

.mvsq-cart__totals-row {
	display:         flex;
	justify-content: space-between;
	font-size:       0.9rem;
}

.mvsq-cart__totals-row--total {
	font-size: 1rem;
}

/* =========================================================================
   Actions / checkout button
   ========================================================================= */

.mvsq-cart__actions {
	display:        flex;
	flex-direction: column;
	gap:            0.6rem;
}

.mvsq-cart__checkout-btn,
.mvsq-btn--checkout {
	display:         block;
	width:           100%;
	padding:         0.85rem 1.5rem;
	background:      var( --mvsq-checkout-bg );
	color:           var( --mvsq-checkout-color );
	border:          none;
	border-radius:   8px;
	font-size:       1rem;
	font-weight:     600;
	cursor:          pointer;
	text-align:      center;
	transition:      background 0.15s ease, opacity 0.15s ease;
}

.mvsq-cart__checkout-btn:hover:not(:disabled),
.mvsq-btn--checkout:hover:not(:disabled) {
	background: var( --mvsq-checkout-bg-hover );
}

.mvsq-cart__checkout-btn:disabled,
.mvsq-btn--checkout:disabled,
.mvsq-cart__checkout-btn[aria-disabled="true"],
.mvsq-btn--checkout[aria-disabled="true"] {
	opacity: 0.5;
	cursor:  not-allowed;
}

.mvsq-btn--full {
	width: 100%;
}

.mvsq-cart__secure-note {
	display:    flex;
	align-items: center;
	justify-content: center;
	gap:        0.3rem;
	font-size:  0.78rem;
	color:      var( --mvsq-color-muted, #888 );
	margin:     0;
}

/* =========================================================================
   Summary mode
   ========================================================================= */

.mvsq-cart--summary {
	background:    var( --mvsq-cart-bg );
	border:        1px solid var( --mvsq-cart-border );
	border-radius: var( --mvsq-cart-radius );
	padding:       var( --mvsq-cart-pad );
	display:       flex;
	flex-direction: column;
	gap:           var( --mvsq-space-sm, 0.75rem );
	box-shadow:    0 2px 12px rgba( 0, 0, 0, 0.08 );
}

.mvsq-cart__summary-header {
	display:        flex;
	flex-direction: column;
	gap:            0.3rem;
}

.mvsq-cart__summary-title {
	margin:      0;
	font-size:   1rem;
	font-weight: 600;
}

.mvsq-cart__summary-location,
.mvsq-cart__summary-time {
	display:     flex;
	align-items: center;
	gap:         0.3rem;
	font-size:   0.85rem;
	color:       var( --mvsq-color-muted, #888 );
	margin:      0;
}

.mvsq-cart__summary-icon {
	font-size: 0.95rem;
}

/* =========================================================================
   Mini mode
   ========================================================================= */

.mvsq-cart--mini {
	display: inline-flex;
}

.mvsq-cart__mini-btn {
	display:     flex;
	align-items: center;
	gap:         0.4rem;
	background:  none;
	border:      1px solid var( --mvsq-cart-border );
	border-radius: 6px;
	padding:     0.4rem 0.75rem;
	cursor:      pointer;
	font-size:   0.9rem;
	color:       var( --mvsq-color-text, #222 );
	transition:  background 0.12s ease;
}

.mvsq-cart__mini-btn:hover,
.mvsq-cart__mini-btn:focus-visible {
	background: var( --mvsq-color-bg, #f8f8f8 );
	outline:    2px solid var( --mvsq-color-primary, #c0392b );
}

.mvsq-cart__mini-count {
	background:    var( --mvsq-color-primary, #c0392b );
	color:         #fff;
	border-radius: 999px;
	min-width:     1.3rem;
	height:        1.3rem;
	font-size:     0.72rem;
	font-weight:   700;
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0 0.3rem;
}

/* =========================================================================
   Pill mode
   ========================================================================= */

.mvsq-cart--pill {
	display: inline-flex;
}

.mvsq-cart__pill-btn {
	display:       flex;
	align-items:   center;
	gap:           0.4rem;
	background:    var( --mvsq-color-primary, #c0392b );
	color:         #fff;
	border:        none;
	border-radius: 999px;
	padding:       0.45rem 1rem;
	cursor:        pointer;
	font-size:     0.9rem;
	font-weight:   500;
	transition:    background 0.15s ease;
}

.mvsq-cart__pill-btn:hover,
.mvsq-cart__pill-btn:focus-visible {
	background: var( --mvsq-checkout-bg-hover );
	outline:    2px solid #fff;
}

.mvsq-cart__pill-count {
	font-weight: 700;
}

/* =========================================================================
   Sticky bottom bar (mobile — injected by CartRender::inject_bottom_bar)
   ========================================================================= */

.mvsq-cart-bar {
	position:        fixed;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         400;
	background:      var( --mvsq-checkout-bg );
	color:           #fff;
	padding:         0.75rem 1.25rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 -2px 12px rgba( 0, 0, 0, 0.18 );
	/* Hidden by default — cart.js adds .mvsq-cart-bar--visible when item_count > 0 */
	transform:       translateY( 100% );
	transition:      transform 0.25s ease;
}

.mvsq-cart-bar--visible {
	transform: translateY( 0 );
}

.mvsq-cart-bar__btn {
	background: none;
	border:     none;
	cursor:     pointer;
	color:      inherit;
	display:    flex;
	align-items: center;
	justify-content: space-between;
	width:      100%;
	max-width:  480px;
	gap:        1rem;
	font-size:  1rem;
	font-weight: 600;
}

.mvsq-cart-bar__label {
	display:     flex;
	align-items: center;
	gap:         0.4rem;
}

/* =========================================================================
   Cart drawer (slide-in panel — mobile)
   ========================================================================= */

.mvsq-cart-drawer {
	position: fixed;
	inset:    0;
	z-index:  500;
}

.mvsq-cart-drawer[hidden] {
	display: none;
}

.mvsq-cart-drawer__overlay {
	position:   absolute;
	inset:      0;
	background: rgba( 0, 0, 0, 0.45 );
}

.mvsq-cart-drawer__panel {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	background:      var( --mvsq-cart-bg );
	border-radius:   var( --mvsq-cart-radius ) var( --mvsq-cart-radius ) 0 0;
	padding:         var( --mvsq-cart-pad );
	display:         flex;
	flex-direction:  column;
	gap:             var( --mvsq-space-md, 1.25rem );
	max-height:      90vh;
	overflow-y:      auto;
	box-shadow:      0 -4px 24px rgba( 0, 0, 0, 0.16 );
	transform:       translateY( 0 );
	animation:       mvsq-drawer-in 0.25s ease;
}

@keyframes mvsq-drawer-in {
	from { transform: translateY( 100% ); }
	to   { transform: translateY( 0 ); }
}

.mvsq-cart-drawer__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.mvsq-cart-drawer__title {
	margin:      0;
	font-size:   1.1rem;
	font-weight: 600;
}

.mvsq-cart-drawer__close {
	background: none;
	border:     none;
	cursor:     pointer;
	font-size:  1.4rem;
	color:      var( --mvsq-color-muted, #888 );
	padding:    0.2rem 0.4rem;
	line-height: 1;
	border-radius: 4px;
}

.mvsq-cart-drawer__close:focus-visible {
	outline: 2px solid var( --mvsq-color-primary, #c0392b );
}

.mvsq-cart-drawer__items {
	flex:       1;
	overflow-y: auto;
}

.mvsq-cart-drawer__totals {
	border-top:  1px solid var( --mvsq-cart-border );
	padding-top: 0.75rem;
}

.mvsq-cart-drawer__actions {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

/* Prevent background scroll when drawer is open */
body.mvsq-drawer-open {
	overflow: hidden;
}

/* =========================================================================
   Desktop: rail mode goes inline (no drawer)
   ========================================================================= */

@media ( min-width: 768px ) {
	/* Hide the bottom bar on desktop — cart is inline (rail mode). */
	.mvsq-cart-bar {
		display: none !important;
	}
}

/* =========================================================================
   Header cart icon ([mvsq_cart_icon] shortcode)

   Design goals:
   - Sized in em so it scales with whatever header font-size the theme sets.
   - Badge overlaps top-right of the icon, pill shape.
   - Subtotal is inline after the icon + badge stack.
   - No forced color: inherits the header text color via currentColor.
   - Low specificity (:where()) where practical so theme headers can restyle.
   - Pulse animation disabled under prefers-reduced-motion.
   ========================================================================= */

/* Badge color variables — override in :root or a parent element to theme. */
:root {
	--mvsq-badge-bg: var( --mvsq-color-primary, #c0392b );
	--mvsq-badge-fg: #fff;
}

/* Wrapper — inline-flex so it sits naturally in header flex rows. */
:where( .mvsq-cart-icon ) {
	display:         inline-flex;
	align-items:     center;
	position:        relative;
	line-height:     1;
}

/* The interactive element (button or anchor). */
:where( .mvsq-cart-icon__trigger ) {
	display:         inline-flex;
	align-items:     center;
	gap:             0.35em;
	background:      none;
	border:          none;
	cursor:          pointer;
	color:           inherit;
	font-size:       inherit;
	font-family:     inherit;
	padding:         0.25em;
	border-radius:   0.25em;
	text-decoration: none;
	position:        relative;
	line-height:     1;
	transition:      opacity 0.15s ease;
}

:where( .mvsq-cart-icon__trigger:hover ) {
	opacity: 0.8;
}

:where( .mvsq-cart-icon__trigger:focus-visible ) {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* Icon SVG — 1.5em so it scales with the header font. */
:where( .mvsq-cart-icon__svg ) {
	width:       1.5em;
	height:      1.5em;
	flex-shrink: 0;
	/* currentColor is set on the <path> elements — no override needed. */
}

/* Count badge — absolute positioned over top-right of the icon. */
:where( .mvsq-cart-icon__badge ) {
	position:        absolute;
	top:             -0.35em;
	right:           -0.35em;
	background:      var( --mvsq-badge-bg );
	color:           var( --mvsq-badge-fg );
	border-radius:   999px;
	min-width:       1.25em;
	height:          1.25em;
	font-size:       0.65em;
	font-weight:     700;
	line-height:     1;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0 0.3em;
	pointer-events:  none;
	/* Ensure the badge sits above the SVG in stacking order. */
	z-index:         1;
}

/* Keep the icon + badge together so the subtotal floats after the pair. */
:where( .mvsq-cart-icon__trigger ) {
	/* The trigger already has position:relative; the badge is positioned inside it. */
}

/* Subtotal — inline, inherits color. */
:where( .mvsq-cart-icon__subtotal ) {
	font-size:   0.85em;
	font-weight: 500;
	white-space: nowrap;
	/* A small gap between the icon-button block and the subtotal text. */
	margin-left: 0.2em;
}

/* Hide the subtotal when empty (cart.js sets textContent to ''). */
:where( .mvsq-cart-icon__subtotal:empty ) {
	display: none;
}

/* -------------------------------------------------------------------------
   Badge pulse animation — fires when cart.js detects a count increase.
   cart.js adds .mvsq-badge-pulse, removes it after the animation ends.
   Fully disabled under prefers-reduced-motion.
   ------------------------------------------------------------------------- */

@keyframes mvsq-badge-pulse {
	0%   { transform: scale( 1 );   }
	35%  { transform: scale( 1.5 ); }
	65%  { transform: scale( 0.9 ); }
	100% { transform: scale( 1 );   }
}

:where( .mvsq-cart-icon__badge.mvsq-badge-pulse ) {
	animation: mvsq-badge-pulse 0.4s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	:where( .mvsq-cart-icon__badge.mvsq-badge-pulse ) {
		animation: none;
	}
}

/* =========================================================================
   Accessibility: screen reader only utility
   (mirrors WP's .screen-reader-text but namespaced so we don't rely on theme)
   ========================================================================= */

.mvsq-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;
}