/**
 * -----------------------------------------
 * SAYR WATCHES
 * Cart Sidebar Stylesheet
 *
 * Responsibility:
 * Layout and animation configurations for the sliding shopping cart drawer panel.
 *
 * Dependencies:
 * css/variables.css
 *
 * Ownership Boundary:
 * Premium Storefront (Cart Component Styling)
 * -----------------------------------------
 */

.cart-modal {
  position: fixed; top: 0; right: 0; transform: translateX(100%); width: 100%; max-width: 460px; height: 100vh; height: 100dvh;
  background: var(--charcoal-soft); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(15,53,88,0.10); z-index: 2500;
  transition: transform var(--duration-slow) var(--ease-luxury);
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-modal.active { transform: translateX(0); }

#cartItems {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#promoSection,
#cartFooter {
  flex-shrink: 0;
}

.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 2490; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.cart-overlay.active { opacity: 1; pointer-events: all; }

@media (max-width: 640px) {
  .cart-modal { max-width: 100%; border-left: none; border-top: 1px solid var(--border); height: 100dvh; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .pay-option { padding: 18px 16px; }
}

/* ─── STICKY CTA safe-area padding ──────────────────────── */
@media (max-width: 640px) {
  #stickyCTA { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}