/* ============================================================
   4MUR — Product Cards, Hero, Footer, Checkout & Components
   ============================================================ */

/* ── Product Card ─────────────────────────────────────────── */
.mr-product-card {
  background: var(--mr-surface); border: 1px solid var(--mr-border-light);
  border-radius: var(--mr-radius-lg); overflow: hidden;
  transition: all var(--mr-transition-slow); position: relative;
}
.mr-product-card:hover { box-shadow: var(--mr-shadow-md); transform: translateY(-4px); border-color: var(--mr-border); }
.mr-product-img {
  position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--mr-bg-alt);
}
.mr-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--mr-ease); }
.mr-product-card:hover .mr-product-img img { transform: scale(1.05); }
.mr-product-badges {
  position: absolute; top: var(--mr-sp-2); left: var(--mr-sp-2);
  display: flex; flex-direction: column; gap: var(--mr-sp-1);
}
.mr-product-actions {
  position: absolute; right: var(--mr-sp-2); top: var(--mr-sp-2);
  display: flex; flex-direction: column; gap: var(--mr-sp-1);
  opacity: 0; transform: translateX(8px); transition: all var(--mr-transition);
}
.mr-product-card:hover .mr-product-actions { opacity: 1; transform: translateX(0); }
.mr-product-action-btn {
  width: 36px; height: 36px; border-radius: var(--mr-radius-full);
  background: rgba(255,255,255,0.95); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--mr-text); box-shadow: var(--mr-shadow-sm);
  transition: all var(--mr-transition);
}
.mr-product-action-btn:hover { background: var(--mr-primary); color: #fff; }
.mr-product-body { padding: var(--mr-sp-3) var(--mr-sp-4); }
.mr-product-vendor {
  font-size: 0.7rem; font-weight: 600; color: var(--mr-text-light);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--mr-sp-1);
}
.mr-product-title {
  font-size: 0.875rem; font-weight: 600; color: var(--mr-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: var(--mr-sp-2); line-height: 1.4;
  text-decoration: none;
}
.mr-product-title:hover { color: var(--mr-primary); }
.mr-product-rating { display: flex; align-items: center; gap: var(--mr-sp-1); margin-bottom: var(--mr-sp-2); }
.mr-product-stars { color: var(--mr-accent); font-size: 0.7rem; display: flex; gap: 1px; }
.mr-product-rating-count { font-size: 0.7rem; color: var(--mr-text-light); }
.mr-product-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mr-sp-2);
}
.mr-product-price { font-size: 1rem; font-weight: 800; color: var(--mr-primary); }
.mr-product-original { font-size: 0.8rem; color: var(--mr-text-light); text-decoration: line-through; }
.mr-product-atc {
  width: 36px; height: 36px; border-radius: var(--mr-radius-full);
  background: var(--mr-gradient); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: all var(--mr-transition); flex-shrink: 0;
}
.mr-product-atc:hover { transform: scale(1.1); box-shadow: var(--mr-shadow); }
.mr-urgency {
  font-size: 0.7rem; color: var(--mr-danger); font-weight: 600;
  display: flex; align-items: center; gap: var(--mr-sp-1); margin-bottom: var(--mr-sp-2);
}
.mr-urgency-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mr-danger);
  animation: mr-pulse 1.5s infinite;
}
@keyframes mr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Category Card ────────────────────────────────────────── */
.mr-cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--mr-sp-6) var(--mr-sp-4); background: var(--mr-surface);
  border: 1px solid var(--mr-border-light); border-radius: var(--mr-radius-lg);
  transition: all var(--mr-transition-slow); text-decoration: none; text-align: center;
  gap: var(--mr-sp-3); height: 100%;
}
.mr-cat-card:hover {
  transform: translateY(-6px); box-shadow: var(--mr-shadow-md); border-color: var(--mr-primary);
}
.mr-cat-icon {
  width: 56px; height: 56px; border-radius: var(--mr-radius);
  background: rgba(37,99,235,0.08); color: var(--mr-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.375rem;
  transition: all var(--mr-transition);
}
.mr-cat-card:hover .mr-cat-icon { background: var(--mr-gradient); color: #fff; }
.mr-cat-name { font-size: 0.85rem; font-weight: 700; color: var(--mr-text); }
.mr-cat-count { font-size: 0.7rem; color: var(--mr-text-light); }

/* ── Hero Section ─────────────────────────────────────────── */
.mr-hero {
  background: var(--mr-gradient-hero); color: #fff; position: relative;
  overflow: hidden; padding: var(--mr-sp-16) 0 var(--mr-sp-20);
  min-height: 520px; display: flex; align-items: center;
}
.mr-hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(37,99,235,0.15); filter: blur(80px);
}
.mr-hero-orb-1 { width: 400px; height: 400px; top: -100px; right: -100px; }
.mr-hero-orb-2 { width: 300px; height: 300px; bottom: -80px; left: -60px; background: rgba(245,158,11,0.1); }
.mr-hero-eyebrow { color: rgba(255,255,255,0.6); }
.mr-hero-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: var(--mr-sp-4); }
.mr-hero-gradient {
  display: block; background: linear-gradient(90deg, #818CF8 0%, #C084FC 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mr-hero-sub { font-size: 1.1rem; opacity: 0.85; line-height: 1.7; margin-bottom: var(--mr-sp-6); max-width: 520px; }
.mr-hero-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--mr-sp-2); margin-bottom: var(--mr-sp-8); }
.mr-hero-list li { display: flex; align-items: center; gap: var(--mr-sp-2); font-size: 0.95rem; }
.mr-hero-list i { color: var(--mr-accent); }
.mr-hero-stats { display: flex; gap: var(--mr-sp-8); margin-top: var(--mr-sp-8); }
.mr-hero-stat-val { font-size: 1.75rem; font-weight: 800; }
.mr-hero-stat-label { font-size: 0.75rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.06em; }
.mr-hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 10; }
.mr-hero-wave svg { display: block; width: 100%; height: auto; }

/* ── Trust Ribbon ─────────────────────────────────────────── */
.mr-trust {
  background: var(--mr-surface); border-bottom: 1px solid var(--mr-border-light);
  padding: var(--mr-sp-4) 0;
}
.mr-trust-item {
  display: flex; align-items: center; gap: var(--mr-sp-3); padding: var(--mr-sp-2);
}
.mr-trust-icon {
  width: 44px; height: 44px; border-radius: var(--mr-radius);
  background: rgba(37,99,235,0.08); color: var(--mr-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.mr-trust-label { font-size: 0.8125rem; font-weight: 700; color: var(--mr-text); }
.mr-trust-sub { font-size: 0.72rem; color: var(--mr-text-muted); }

/* ── Newsletter ───────────────────────────────────────────── */
.mr-newsletter {
  background: var(--mr-gradient-hero); color: #fff; padding: var(--mr-sp-16) 0;
  position: relative; overflow: hidden;
}
.mr-newsletter-form {
  display: flex; gap: var(--mr-sp-2); max-width: 460px;
}
.mr-newsletter-form input {
  flex: 1; padding: 0.75rem 1.25rem; border: 2px solid rgba(255,255,255,0.2);
  border-radius: var(--mr-radius-full); background: rgba(255,255,255,0.1);
  color: #fff; font-size: 0.9rem; font-family: var(--mr-font);
}
.mr-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.mr-newsletter-form input:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); }
.mr-newsletter-form button {
  padding: 0.75rem 1.75rem; background: var(--mr-accent); color: #1E293B;
  border: none; border-radius: var(--mr-radius-full); font-weight: 700;
  font-size: 0.875rem; cursor: pointer; white-space: nowrap; transition: all var(--mr-transition);
}
.mr-newsletter-form button:hover { background: var(--mr-accent-dark); }

/* ── Footer ───────────────────────────────────────────────── */
.mr-footer {
  background: var(--mr-bg-dark); color: rgba(255,255,255,0.7); padding: var(--mr-sp-16) 0 var(--mr-sp-4);
}
.mr-footer h5, .mr-footer h4 { color: #fff; font-weight: 700; margin-bottom: var(--mr-sp-4); font-size: 1rem; }
.mr-footer-links { list-style: none; padding: 0; margin: 0; }
.mr-footer-links li { margin-bottom: var(--mr-sp-2); }
.mr-footer-links a { color: rgba(255,255,255,0.6); font-size: 0.85rem; transition: color var(--mr-transition); }
.mr-footer-links a:hover { color: #fff; }
.mr-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--mr-sp-6);
  margin-top: var(--mr-sp-8); text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.4);
}
.mr-footer-social { display: flex; gap: var(--mr-sp-3); }
.mr-footer-social a {
  width: 40px; height: 40px; border-radius: var(--mr-radius-full);
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--mr-transition);
}
.mr-footer-social a:hover { background: var(--mr-primary); color: #fff; }

/* ── Vendor CTA ───────────────────────────────────────────── */
.mr-vendor-cta {
  background: var(--mr-gradient); border-radius: var(--mr-radius-xl);
  padding: var(--mr-sp-10); color: #fff; position: relative; overflow: hidden;
}
.mr-vendor-cta h3 { font-weight: 800; margin-bottom: var(--mr-sp-2); }
.mr-vendor-cta p { opacity: 0.85; margin-bottom: var(--mr-sp-6); }

/* ── Checkout Steps ───────────────────────────────────────── */
.mr-checkout-steps {
  display: flex; justify-content: center; gap: var(--mr-sp-8);
  padding: var(--mr-sp-4) 0; position: relative;
}
.mr-checkout-step {
  display: flex; flex-direction: column; align-items: center; gap: var(--mr-sp-2);
  position: relative; z-index: 1;
}
.mr-step-bubble {
  width: 40px; height: 40px; border-radius: var(--mr-radius-full);
  background: var(--mr-bg-alt); border: 2px solid var(--mr-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; color: var(--mr-text-muted);
  transition: all var(--mr-transition);
}
.mr-checkout-step.active .mr-step-bubble {
  background: var(--mr-gradient); color: #fff; border-color: transparent;
}
.mr-checkout-step.done .mr-step-bubble {
  background: var(--mr-success); color: #fff; border-color: transparent;
}
.mr-step-label { font-size: 0.75rem; font-weight: 600; color: var(--mr-text-muted); }
.mr-checkout-step.active .mr-step-label { color: var(--mr-primary); }

/* ── Payment Method Cards ─────────────────────────────────── */
.mr-payment-card {
  border: 2px solid var(--mr-border); border-radius: var(--mr-radius-lg);
  padding: var(--mr-sp-4); cursor: pointer; transition: all var(--mr-transition);
  margin-bottom: var(--mr-sp-3);
}
.mr-payment-card:hover { border-color: var(--mr-primary-light); }
.mr-payment-card.selected {
  border-color: var(--mr-primary); background: rgba(37,99,235,0.03);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}

/* ── Toast Notifications ──────────────────────────────────── */
.mr-toast-container {
  position: fixed; top: var(--mr-sp-4); right: var(--mr-sp-4);
  z-index: 9999; display: flex; flex-direction: column; gap: var(--mr-sp-3);
  pointer-events: none;
}
.mr-toast {
  position: relative;
  background: var(--mr-surface); border-radius: var(--mr-radius-lg);
  box-shadow: var(--mr-shadow-lg); padding: .875rem 2.5rem .875rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  min-width: 300px; max-width: 440px; font-size: .875rem;
  animation: mr-toast-in .35s var(--mr-ease) forwards;
  border-left: 4px solid var(--mr-primary);
  overflow: hidden;
  pointer-events: auto;
}
.mr-toast-icon { font-size: 1.1rem; flex-shrink: 0; color: var(--mr-primary); }
.mr-toast-msg { flex: 1; color: var(--mr-text); font-weight: 500; line-height: 1.4; }
.mr-toast-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 22px; height: 22px;
  border: none; background: transparent; color: var(--mr-text-light);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all var(--mr-transition);
}
.mr-toast-close:hover { background: var(--mr-bg-alt); color: var(--mr-text); }
.mr-toast-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--mr-primary); opacity: .3;
  transform-origin: left; animation: mr-toast-progress linear forwards;
}
/* Type variants */
.mr-toast-success { border-left-color: var(--mr-success); }
.mr-toast-success .mr-toast-icon { color: var(--mr-success); }
.mr-toast-success .mr-toast-progress { background: var(--mr-success); }
.mr-toast-error { border-left-color: var(--mr-danger); }
.mr-toast-error .mr-toast-icon { color: var(--mr-danger); }
.mr-toast-error .mr-toast-progress { background: var(--mr-danger); }
.mr-toast-warning { border-left-color: var(--mr-warning); }
.mr-toast-warning .mr-toast-icon { color: var(--mr-warning); }
.mr-toast-warning .mr-toast-progress { background: var(--mr-warning); }
.mr-toast-info { border-left-color: var(--mr-primary); }
/* Animations */
@keyframes mr-toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.mr-toast-exit { animation: mr-toast-out .3s var(--mr-ease) forwards; }
@keyframes mr-toast-out { to { opacity: 0; transform: translateX(30px) scale(.95); } }
@keyframes mr-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) {
  .mr-toast-container { left: var(--mr-sp-3); right: var(--mr-sp-3); }
  .mr-toast { min-width: 0; max-width: none; }
}

/* ── Chat Widget ──────────────────────────────────────────── */
.mr-chat-fab {
  position: fixed; bottom: 80px; right: var(--mr-sp-4); z-index: 1040;
  width: 56px; height: 56px; border-radius: var(--mr-radius-full);
  background: var(--mr-gradient); color: #fff; border: none; cursor: pointer;
  box-shadow: var(--mr-shadow-lg); display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem; transition: all var(--mr-transition);
}
.mr-chat-fab:hover { transform: scale(1.1); }
@media (min-width: 992px) { .mr-chat-fab { bottom: var(--mr-sp-6); } }

/* ── Responsive helpers ───────────────────────────────────── */
@media (max-width: 575.98px) {
  .mr-hero { padding: var(--mr-sp-10) 0 var(--mr-sp-16); min-height: auto; }
  .mr-hero-title { font-size: 1.75rem; }
  .mr-hero-stats { gap: var(--mr-sp-4); }
  .mr-hero-stat-val { font-size: 1.25rem; }
  .mr-section { padding: var(--mr-sp-10) 0; }
  .mr-newsletter-form { flex-direction: column; }
}