/* Sidecar VMA – limpio y unificado */
:root{
  --scv-accent:#0ea5e9;
  --scv-bg:#fff;
  --scv-text:#111827;
  --scv-muted:#6b7280;
  --scv-success:#16a34a;
  --scv-danger:#ef4444;
  --scv-warning:#f59e0b;
  --scv-chip-bg:#f1f5f9;
  --scv-chip-text:#0f172a;
  --scv-base:15px;
  --scv-title:20px;
  --scv-btn:16px;
  --scv-shadow:0 10px 30px rgba(0,0,0,.18);
  --scv-radius:16px;

  /* FAB brand */
  --scv-fab-bg:#e6007e;   /* color principal tienda */
  --scv-fab-fg:#ffffff;   /* color del icono */
  --scv-fab-mask:url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path fill="%23000" d="M3 4h2l1 5h14.2a1 1 0 0 1 .98 1.2l-1.1 5A2 2 0 0 1 18.1 17H8a2 2 0 0 1-2-1.6L5 9H3V4z"/>\
<circle fill="%23000" cx="9" cy="19" r="2"/>\
<circle fill="%23000" cx="17" cy="19" r="2"/>\
</svg>');

}

/* Shell del drawer */
#sidecar-vma{position:fixed;inset:0;z-index:999999;display:none;}
#sidecar-vma.open{display:block;}
#sidecar-vma .sidecar-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s ease;}
#sidecar-vma.open .sidecar-backdrop{opacity:1;}
#sidecar-vma .sidecar-panel{position:absolute;top:0;right:-460px;width:460px;max-width:95vw;height:100%;background:var(--scv-bg);box-shadow:var(--scv-shadow);transition:right .25s ease;}
#sidecar-vma.open .sidecar-panel{right:0;}

/* Cuerpo con layout fijo (header/top/items/footer) */
#sidecar-vma .sidecar-body{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;      /* el scroll vive en .scv-items-wrap */
  padding:20px;
  font-size:var(--scv-base);
  color:var(--scv-text);
}

/* Header fijo */
.scv-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.scv-header .scv-title{font-size:var(--scv-title);font-weight:700;}
.scv-close{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;padding:6px;}

/* Top (alerta + progreso) fijo encima de la lista */
.scv-top{flex:0 0 auto;padding-bottom:20px;}

/* Alerta */
.scv-alert{display:flex;gap:10px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;padding:12px;border-radius:12px;align-items:flex-start;margin:8px 0 14px;}
.scv-alert__icon{font-size:18px;}
.scv-alert__title{font-weight:700;margin-bottom:2px;}
.scv-alert__text strong{font-variant-numeric:tabular-nums;}

/* Free shipping / Offer progress */
.scv-free-ship{margin:10px 0 14px;}
.scv-free-ship__title{font-weight:700;display:flex;align-items:center;gap:8px;}
.scv-progress{
  position:relative;
  width:calc(100% - 32px);      /* más estrecha */
  height:12px;
  border-radius:999px;
  background:#e5e7eb;
  margin:8px 16px 0 16px;       /* espacio a izquierda y derecha */
  overflow:visible;
}
.scv-progress__bar{height:100%;background:#00b4dd;width:0%;transition:width .25s ease;}
.scv-progress__knob{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:#00b4dd;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}
.scv-progress__icon{font-size:20px;line-height:1;color:#fff;}
.scv-progress__label{
  position:absolute;top:40px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:700;color:var(--scv-text);white-space:nowrap;
}
/* Evitar desbordes del texto bajo el círculo en los extremos */
.scv-progress__label.align-right{left:100%;transform:translateX(-100%);}
.scv-progress__label.align-left{left:0;transform:none;}

/* Lista de items con scroll */
.scv-items-wrap{flex:1 1 auto;min-height:0;overflow:auto;margin:10px 0 14px;}
.scv-items{display:grid;gap:16px;}
.scv-item{
  position:relative;display:grid;grid-template-columns:84px 1fr;gap:12px;border-bottom:1px solid #edeff2;padding-bottom:12px;
}
.scv-thumb img{width:84px;height:84px;object-fit:cover;border-radius:12px;background:#f3f4f6;}
.scv-item .scv-title{display:block;font-weight:600;color:var(--scv-text);text-decoration:none;margin-bottom:6px;}
.scv-offer{margin:2px 0 4px;color:var(--scv-muted);font-size:13px;}
/* Sin selector de cantidad */
.scv-qty{display:none !important;}

/* Precios y ahorro */
.scv-line-prices{display:flex;align-items:center;gap:10px;font-weight:700;margin-top:2px;}
.scv-price--strike{text-decoration:line-through;color:var(--scv-muted);font-weight:500;}
.scv-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;}
.scv-badge--save{background:#e8f5e9;color:#065f46;margin-top:6px;}

/* Botón eliminar como icono compacto */
.scv-remove-icon{position:absolute;right:0;top:0;background:none;border:none;padding:6px;cursor:pointer;color:#94a3b8;}
.scv-remove-icon:hover{color:#111827;}

/* Chips (cupones, etc.) */
.scv-chip{background:var(--scv-chip-bg);color:var(--scv-chip-text);padding:6px 10px;font-weight:700;border-radius:999px;font-size:12px;}

/* Footer fijo (resumen + CTA) */
.scv-footer{flex:0 0 auto;padding-top:6px;border-top:1px solid #11182710;}
.scv-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border:1px dashed #e5e7eb;
  background-color:#00ca291f;
  border-radius:10px;
  margin:10px 0;
}
.scv-total{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid #11182710;font-weight:800;font-size:18px;}

/* Botón de checkout con precio dentro */
.scv-checkout{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:#111827; color:#fff; padding:14px 18px;
  border-radius:12px; font-weight:800; font-size:var(--scv-btn); text-decoration:none;
}
.scv-cta-amount{ font-weight:900; }
.scv-cta-sep{ opacity:.85; }

/* Protección de envío (toggle) */
.scv-protection{display:flex;gap:12px;padding:12px;border:1px solid #e5e7eb;border-radius:14px;align-items:center;}
.scv-protection__title{font-weight:700;}
.scv-protection__desc{color:var(--scv-muted);font-size:13px;margin-top:2px;}
.scv-switch{position:relative;display:inline-block;width:50px;height:28px;margin-left:auto;}
.scv-switch input{display:none;}
.scv-slider{position:absolute;cursor:pointer;inset:0;background:#e5e7eb;border-radius:999px;transition:all .2s;}
.scv-slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.2);}
.scv-switch input:checked + .scv-slider{background:#e6007e;}
.scv-switch input:checked + .scv-slider:before{transform:translateX(22px);}

/* Payment icons (si los usas) */
.scv-pay-icons{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px;opacity:.85;}

/* Accesibilidad */
#sidecar-vma .no-js{display:none;}

/* Skeleton shimmer para carga instantánea/pre-render */
.scv-skel{
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%;
  animation:scv-shimmer 1.1s infinite ease-out;
}
@keyframes scv-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Scrollbar oculto en lista */
.scv-items-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.scv-items-wrap::-webkit-scrollbar{width:0;height:0}

/* === FAB 100% circular y estable === */
.scv-fab{
  /* tamaño único editable */
  --fab: 60px;

  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 99998;

  /* círculo perfecto (sin depender de aspect-ratio) */
  width: var(--fab);
  height: var(--fab);
  border-radius: 50% !important;

  /* neutraliza herencias del tema que deforman */
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  -webkit-appearance: none;
  appearance: none;

  /* look */
  background: #fff !important;
  color: var(--scv-fab-fg) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  /* efectos */
  box-shadow: 0 10px 24px rgba(230,0,126,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background-color .15s ease;
}

.scv-fab:hover{
  transform: translateY(-1px);
  opacity: 1;
  background: #e6007e45 !important;
  color: #ffffff !important;
}
.scv-fab:active{ transform: translateY(0); }

/* icono dentro (tamaño relativo al botón por si cambias --fab) */
.scv-fab__icon{ 
  width: calc(var(--fab) * .46);
  height: calc(var(--fab) * .46);
  display: block;
}
.scv-fab__icon, .scv-fab__icon *, .scv-fab__icon path{
  fill: currentColor !important;
  stroke: none !important;
}

/* badge del contador, sólido y por encima */
.scv-fab__badge{
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 9999px;
  background: #fff !important;
  color: var(--scv-fab-bg);
  font-size: 12px; font-weight: 800; line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 3;
}

/* opcional: tamaño menor en móvil */
@media (max-width: 480px){
  .scv-fab{ --fab: 56px; }
}

/* Oculta el SVG interno para usar SOLO tu icono como máscara */
.scv-fab .scv-fab__icon{ display:none !important; }

/* Dibuja el icono EXACTO con la máscara (usa --scv-fab-mask que inyectamos desde PHP) */
.scv-fab::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:28px;
  height:28px;
  background: #e6007e;              /* se pinta en blanco sobre el botón rosa */
  pointer-events:none;
  z-index:1;                             /* debajo del badge */
  -webkit-mask-image: var(--scv-fab-mask);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image: var(--scv-fab-mask);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* Woo amount en negrita */
.woocommerce-Price-amount.amount{ font-weight:bold; }