/* ══════════════════════════════════════════════════════════════════
   SECURITPRO — Premium UX Layer  v1.0.0
   Cart Drawer · ATC Animation · Toast · Price tokens
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Syne:wght@700;800&display=swap');

/* ── Price display tokens ── */
:root {
  --ux-amber:   #F59E0B;
  --ux-amber-dk:#D97706;
  --ux-amber-lt:#FFFBEB;
  --ux-dark:    #0D111A;
  --ux-text:    #0F172A;
  --ux-muted:   #64748B;
  --ux-border:  #E2E8F0;
  --ux-bg:      #F8FAFC;
  --ux-white:   #FFFFFF;
  --ux-success: #10B981;
  --ux-danger:  #EF4444;
  --ux-font:    'DM Sans', system-ui, sans-serif;
  --ux-ease:    cubic-bezier(.22,1,.36,1);
  --ux-bounce:  cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════════════════════
   GLOBAL PRICE STYLES
══════════════════════════════════════════════════════ */
.spmm-from-label {
  font-size: .72em; font-weight: 500; color: var(--ux-muted);
  display: block; margin-bottom: 1px; text-transform: lowercase;
  letter-spacing: .02em;
}
.spmm-from-amount { font-weight: 700; color: var(--ux-amber-dk); }
.spmm-price-from  { display: flex; flex-direction: column; line-height: 1.3; }
.spmm-price-single{ font-weight: 700; color: var(--ux-amber-dk); }
.spmm-price-del   { font-size: .82em; font-weight: 500; color: #94A3B8; text-decoration: line-through; }
.spmm-price-ins   { font-weight: 700; color: var(--ux-amber-dk); text-decoration: none; }
.spmm-ttc-badge   {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ux-amber-dk);
  background: var(--ux-amber-lt); border: 1px solid rgba(245,158,11,.22);
  padding: 1px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px;
}

/* ══════════════════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════════════════ */
#spmm-cart-drawer {
  position: fixed; inset: 0; z-index: 99990;
  pointer-events: none; visibility: hidden;
}
#spmm-cart-drawer.open {
  pointer-events: all; visibility: visible;
}

/* Overlay */
.spmm-cd-overlay {
  position: absolute; inset: 0;
  background: rgba(15,23,42,.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s var(--ux-ease);
}
#spmm-cart-drawer.open .spmm-cd-overlay { opacity: 1; }

/* Panel */
.spmm-cd-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--ux-white);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 48px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .4s var(--ux-ease);
}
#spmm-cart-drawer.open .spmm-cd-panel { transform: none; }

/* Header */
.spmm-cd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--ux-border);
  flex-shrink: 0;
}
.spmm-cd-title {
  font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800;
  color: var(--ux-text); display: flex; align-items: center; gap: 10px;
}
.spmm-cd-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--ux-amber); color: var(--ux-dark);
  font-family: var(--ux-font); font-size: 11px; font-weight: 700;
  border-radius: 100px;
}
.spmm-cd-close {
  width: 36px; height: 36px; border: none; background: var(--ux-bg);
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ux-muted); font-size: 16px;
  transition: background .15s, color .15s, transform .15s;
}
.spmm-cd-close:hover { background: var(--ux-amber-lt); color: var(--ux-amber-dk); transform: rotate(90deg); }

/* Body */
.spmm-cd-body {
  flex: 1; overflow-y: auto; padding: 0;
  -webkit-overflow-scrolling: touch;
}
.spmm-cd-body::-webkit-scrollbar { width: 4px; }
.spmm-cd-body::-webkit-scrollbar-track { background: transparent; }
.spmm-cd-body::-webkit-scrollbar-thumb { background: var(--ux-border); border-radius: 4px; }

/* Empty state */
.spmm-cd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 32px; text-align: center; height: 100%;
}
.spmm-cd-empty i { font-size: 48px; color: var(--ux-border); }
.spmm-cd-empty h3 { font-family: 'Syne',sans-serif; font-size: 18px; font-weight: 700; color: var(--ux-text); margin: 0; }
.spmm-cd-empty p { font-size: 14px; color: var(--ux-muted); margin: 0; }
.spmm-cd-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ux-dark); color: white;
  font-family: var(--ux-font); font-size: 13px; font-weight: 700;
  padding: 12px 22px; border-radius: 10px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.spmm-cd-empty-btn:hover { background: var(--ux-amber); color: var(--ux-dark); transform: translateY(-2px); }

/* Cart items */
.spmm-cd-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px; align-items: start;
  padding: 16px 20px; border-bottom: 1px solid var(--ux-bg);
  animation: cdItemIn .3s var(--ux-ease);
  position: relative;
}
@keyframes cdItemIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
.spmm-cd-item.removing {
  animation: cdItemOut .3s var(--ux-ease) forwards;
}
@keyframes cdItemOut { to { opacity:0; max-height:0; padding:0; border:none; overflow:hidden; } }

.spmm-cd-item-img {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: var(--ux-bg); border: 1px solid var(--ux-border); flex-shrink: 0;
}
.spmm-cd-item-img img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box;
}
.spmm-cd-item-info { min-width: 0; }
.spmm-cd-item-name {
  font-family: var(--ux-font); font-size: 13px; font-weight: 600; color: var(--ux-text);
  line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px;
}
.spmm-cd-item-attrs {
  font-size: 11px; color: var(--ux-muted); margin-bottom: 6px; line-height: 1.4;
}
.spmm-cd-item-price {
  font-family: var(--ux-font); font-size: 13px; font-weight: 700; color: var(--ux-amber-dk);
}
.spmm-cd-item-line-total {
  font-family: var(--ux-font); font-size: 11px; color: var(--ux-muted);
}

/* Qty controls */
.spmm-cd-qty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.spmm-cd-qty-wrap {
  display: flex; align-items: center; border: 1px solid var(--ux-border);
  border-radius: 8px; overflow: hidden; background: var(--ux-white);
}
.spmm-cd-qty-btn {
  background: none; border: none; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ux-muted); font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s;
}
.spmm-cd-qty-btn:hover { background: var(--ux-amber-lt); color: var(--ux-amber-dk); }
.spmm-cd-qty-val {
  font-family: var(--ux-font); font-size: 13px; font-weight: 700;
  min-width: 24px; text-align: center; color: var(--ux-text);
}
.spmm-cd-item-remove {
  width: 24px; height: 24px; border: none; background: none;
  color: var(--ux-muted); cursor: pointer; font-size: 12px;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.spmm-cd-item-remove:hover { background: #fef2f2; color: var(--ux-danger); }

/* Footer */
.spmm-cd-footer {
  border-top: 1px solid var(--ux-border); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px; flex-shrink: 0;
  background: var(--ux-white);
}
.spmm-cd-subtotal-row {
  display: flex; justify-content: space-between; align-items: center;
}
.spmm-cd-subtotal-label { font-size: 13px; color: var(--ux-muted); font-weight: 500; }
.spmm-cd-subtotal-value {
  font-family: 'Syne',sans-serif; font-size: 20px; font-weight: 800; color: var(--ux-text);
}
.spmm-cd-ttc-note { font-size: 10px; color: var(--ux-muted); text-align: right; margin-top: -6px; }

.spmm-cd-checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ux-amber); color: var(--ux-dark);
  font-family: var(--ux-font); font-size: 15px; font-weight: 700;
  padding: 16px; border-radius: 12px; text-decoration: none;
  box-shadow: 0 4px 24px rgba(245,158,11,.35);
  transition: background .22s, transform .22s, box-shadow .22s;
  border: none; cursor: pointer; width: 100%;
}
.spmm-cd-checkout-btn:hover {
  background: var(--ux-amber-dk); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245,158,11,.45); color: white;
}
.spmm-cd-cart-link {
  display: flex; align-items: center; justify-content: center;
  color: var(--ux-muted); font-size: 13px; font-weight: 600;
  text-decoration: none; gap: 5px; padding: 4px;
  transition: color .15s;
}
.spmm-cd-cart-link:hover { color: var(--ux-text); }

/* Loading overlay */
.spmm-cd-loading {
  position: absolute; inset: 0; background: rgba(255,255,255,.85);
  display: none; align-items: center; justify-content: center;
  z-index: 10; backdrop-filter: blur(2px);
}
.spmm-cd-loading.active { display: flex; }
.spmm-cd-spinner {
  width: 32px; height: 32px; border: 3px solid var(--ux-border);
  border-top-color: var(--ux-amber); border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ══════════════════════════════════════════════════════
   ATC FLOAT ANIMATION
══════════════════════════════════════════════════════ */
.spmm-fly-img {
  position: fixed; z-index: 99999;
  border-radius: 10px; overflow: hidden;
  pointer-events: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  transition: none; /* JS controls via Web Animations API */
  will-change: transform, opacity;
}

/* Cart icon bounce */
@keyframes spmm-cart-bounce {
  0%,100% { transform: scale(1); }
  20%      { transform: scale(1.35) rotate(-8deg); }
  40%      { transform: scale(1.2) rotate(6deg); }
  60%      { transform: scale(1.1) rotate(-4deg); }
  80%      { transform: scale(1.05) rotate(2deg); }
}
.spmm-cart-bounce { animation: spmm-cart-bounce .55s var(--ux-bounce); }

/* ══════════════════════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════════════════════ */
.spmm-toast-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 99998;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.spmm-toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--ux-dark); color: white;
  font-family: var(--ux-font); font-size: 13.5px; font-weight: 500;
  padding: 14px 18px; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  pointer-events: all; min-width: 280px; max-width: 340px;
  transform: translateY(24px) scale(.96); opacity: 0;
  transition: transform .3s var(--ux-bounce), opacity .3s ease;
}
.spmm-toast.visible { transform: none; opacity: 1; }
.spmm-toast.leaving { transform: translateX(120%); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.spmm-toast-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.spmm-toast-icon--success { background: var(--ux-success); }
.spmm-toast-icon--error   { background: var(--ux-danger); }
.spmm-toast-img {
  width: 36px; height: 36px; border-radius: 7px; overflow: hidden;
  background: rgba(255,255,255,.1); flex-shrink: 0;
}
.spmm-toast-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.spmm-toast-body { flex: 1; min-width: 0; }
.spmm-toast-title { font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spmm-toast-sub   { font-size: 11.5px; color: rgba(255,255,255,.6); }
.spmm-toast-view  {
  background: var(--ux-amber); color: var(--ux-dark);
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .15s;
}
.spmm-toast-view:hover { background: white; color: var(--ux-dark); }

/* ══════════════════════════════════════════════════════
   PRICE SLIDER REDESIGN
══════════════════════════════════════════════════════ */
.spmm-sp-price-form { display: flex; flex-direction: column; gap: 12px; }

.spmm-price-slider-wrap {
  position: relative; padding: 8px 0 4px;
}
.spmm-slider-track {
  height: 4px; background: var(--ux-border); border-radius: 4px;
  position: relative; margin: 14px 0;
}
.spmm-slider-fill {
  position: absolute; height: 100%;
  background: linear-gradient(90deg, var(--ux-amber), var(--ux-amber-dk));
  border-radius: 4px; pointer-events: none;
  transition: left .05s, width .05s;
}
/* The two stacked range inputs */
.spmm-price-slider-wrap input[type=range] {
  position: absolute; top: 6px; left: 0; width: 100%;
  height: 4px; appearance: none; -webkit-appearance: none;
  background: transparent; outline: none; margin: 0; cursor: pointer;
}
.spmm-price-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: white; border: 2.5px solid var(--ux-amber);
  box-shadow: 0 2px 8px rgba(245,158,11,.3);
  transition: transform .18s var(--ux-bounce), box-shadow .18s;
  cursor: grab;
}
.spmm-price-slider-wrap input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
.spmm-price-slider-wrap input[type=range]::-webkit-slider-thumb:hover,
.spmm-price-slider-wrap input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(245,158,11,.14), 0 2px 8px rgba(245,158,11,.3);
}
.spmm-price-slider-wrap input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: white; border: 2.5px solid var(--ux-amber);
  box-shadow: 0 2px 8px rgba(245,158,11,.3);
  transition: transform .18s var(--ux-bounce); cursor: grab; box-sizing: border-box;
}
.spmm-price-slider-wrap input[type=range]::-moz-range-track { background: transparent; }
.spmm-price-slider-wrap input[type=range]::-webkit-slider-runnable-track { background: transparent; }
/* z-index via JS on interaction */
.spmm-sp-range-lo { z-index: 3; }
.spmm-sp-range-hi { z-index: 4; }

/* Price input fields */
.spmm-sp-price-inputs {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.spmm-price-input-wrap {
  flex: 1; position: relative;
}
.spmm-price-input-wrap input[type=number] {
  width: 100%; padding: 9px 28px 9px 10px; box-sizing: border-box;
  border: 1.5px solid var(--ux-border); border-radius: 9px;
  font-family: var(--ux-font); font-size: 13px; font-weight: 700; color: var(--ux-text);
  background: white; outline: none;
  -moz-appearance: textfield; appearance: textfield;
  transition: border-color .18s, box-shadow .18s;
}
.spmm-price-input-wrap input[type=number]:focus {
  border-color: var(--ux-amber);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}
.spmm-price-input-wrap input::-webkit-inner-spin-button,
.spmm-price-input-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; }
.spmm-price-input-unit {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; font-weight: 600; color: var(--ux-muted); pointer-events: none;
}
.spmm-price-sep { font-weight: 600; color: var(--ux-muted); flex-shrink: 0; font-size: 14px; }

/* Apply button */
.spmm-sp-apply-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--ux-dark); color: white;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: var(--ux-font); font-size: 13px; font-weight: 700;
  padding: 11px; width: 100%; margin-top: 2px;
  transition: background .2s, transform .15s;
}
.spmm-sp-apply-btn:hover { background: var(--ux-amber); color: var(--ux-dark); transform: translateY(-1px); }
.spmm-js-active .spmm-sp-apply-btn { display: none; }

/* ══════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════ */
/* ── Tablet ≤ 768px ── */
@media (max-width: 768px) {
  .spmm-cd-panel { width: min(420px, 94vw); }
  .spmm-cd-header { padding: 16px 18px; }
  .spmm-cd-title { font-size: 16px; }
  .spmm-cd-footer { padding: 16px 18px; }
  .spmm-cd-checkout-btn { padding: 14px; font-size: 14px; }
}
/* ── Mobile ≤ 540px ── */
@media (max-width: 540px) {
  .spmm-cd-panel { width: 100vw; border-radius: 0; }
  .spmm-cd-item { grid-template-columns: 60px 1fr auto; gap: 10px; padding: 12px 16px; }
  .spmm-cd-item-img { width: 60px; height: 60px; }
  .spmm-cd-item-name { font-size: 12.5px; }
  .spmm-toast-stack { bottom: 16px; right: 12px; left: 12px; }
  .spmm-toast { min-width: unset; }
  .spmm-toast-title { font-size: 13px; }
}