/* V41 — Modern destructive confirmation dialog */
:root{
  --ecom-confirm-bg:#070a10;
  --ecom-confirm-panel:#0c111b;
  --ecom-confirm-panel-2:#111827;
  --ecom-confirm-line:#283548;
  --ecom-confirm-text:#f8fafc;
  --ecom-confirm-muted:#a8b3c7;
  --ecom-confirm-red:#ff3158;
  --ecom-confirm-pink:#ff1493;
  --ecom-confirm-cyan:#26e6ff;
  --ecom-confirm-green:#39ff14;
  --ecom-confirm-yellow:#ffe34a;
}

.ecom-confirm-v41{
  width:min(36rem,calc(100vw - 2rem));
  max-width:36rem;
  margin:auto;
  padding:0;
  overflow:visible;
  color:var(--ecom-confirm-text);
  background:transparent;
  border:0;
  outline:0;
}

.ecom-confirm-v41::backdrop{
  background:
    radial-gradient(circle at 50% 45%,rgba(38,230,255,.14),transparent 35%),
    rgba(0,0,0,.78);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  animation:ecom-confirm-backdrop-in .22s ease both;
}

.ecom-confirm-v41__shell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(38,230,255,.58);
  border-radius:1.2rem;
  background:
    linear-gradient(145deg,rgba(17,24,39,.98),rgba(5,8,14,.99));
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,20,147,.24),
    0 0 38px rgba(38,230,255,.18);
  animation:ecom-confirm-panel-in .3s cubic-bezier(.2,.8,.2,1) both;
}

.ecom-confirm-v41__shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 15%,rgba(38,230,255,.08) 42%,transparent 68%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.018) 3px,
      rgba(255,255,255,.018) 4px
    );
}

.ecom-confirm-v41__shell::after{
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:42%;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--ecom-confirm-cyan),var(--ecom-confirm-pink),transparent);
  filter:drop-shadow(0 0 8px var(--ecom-confirm-cyan));
  animation:ecom-confirm-scan 2.8s linear infinite;
}

.ecom-confirm-v41__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:3rem;
  padding:.72rem 1rem;
  border-bottom:1px solid var(--ecom-confirm-line);
  background:rgba(0,0,0,.35);
}

.ecom-confirm-v41__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--ecom-confirm-yellow);
  font:900 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ecom-confirm-v41__eyebrow::before{
  content:"";
  width:.58rem;
  height:.58rem;
  border-radius:50%;
  background:var(--ecom-confirm-red);
  box-shadow:0 0 12px var(--ecom-confirm-red);
  animation:ecom-confirm-pulse 1.25s ease-in-out infinite;
}

.ecom-confirm-v41__code{
  color:var(--ecom-confirm-cyan);
  font:800 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
}

.ecom-confirm-v41__body{
  display:grid;
  grid-template-columns:4rem minmax(0,1fr);
  gap:1rem;
  padding:1.35rem 1.35rem 1rem;
}

.ecom-confirm-v41__icon{
  position:relative;
  display:grid;
  place-items:center;
  width:4rem;
  height:4rem;
  border:1px solid rgba(255,49,88,.58);
  border-radius:1.1rem;
  color:#fff;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.2),transparent 25%),
    linear-gradient(145deg,#ff3158,#a50935);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.13),
    0 0 24px rgba(255,49,88,.28);
}

.ecom-confirm-v41__icon svg{
  width:2rem;
  height:2rem;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
}

.ecom-confirm-v41__copy{
  min-width:0;
}

.ecom-confirm-v41__title{
  margin:0;
  color:#fff;
  font:1000 clamp(1.35rem,3vw,1.8rem)/1.08 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.ecom-confirm-v41__description{
  margin:.65rem 0 0;
  color:var(--ecom-confirm-muted);
  font:700 .94rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ecom-confirm-v41__description strong{
  color:#fff;
}

.ecom-confirm-v41__impact{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
  padding:0 1.35rem 1rem;
}

.ecom-confirm-v41__chip{
  display:grid;
  place-items:center;
  min-height:2.45rem;
  padding:.45rem .5rem;
  border:1px solid var(--ecom-confirm-line);
  border-radius:.65rem;
  color:#dbeafe;
  background:rgba(255,255,255,.035);
  font:900 .7rem/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  text-align:center;
  text-transform:uppercase;
}

.ecom-confirm-v41__chip:nth-child(1){border-bottom-color:var(--ecom-confirm-green)}
.ecom-confirm-v41__chip:nth-child(2){border-bottom-color:var(--ecom-confirm-cyan)}
.ecom-confirm-v41__chip:nth-child(3){border-bottom-color:var(--ecom-confirm-yellow)}
.ecom-confirm-v41__chip:nth-child(4){border-bottom-color:var(--ecom-confirm-pink)}

.ecom-confirm-v41__notice{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  margin:0 1.35rem 1.25rem;
  padding:.78rem .85rem;
  border:1px solid rgba(255,227,74,.35);
  border-radius:.75rem;
  color:#fff4b0;
  background:rgba(255,227,74,.07);
  font:750 .79rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ecom-confirm-v41__notice svg{
  flex:0 0 auto;
  width:1.05rem;
  height:1.05rem;
  margin-top:.08rem;
  stroke:var(--ecom-confirm-yellow);
  fill:none;
}

.ecom-confirm-v41__actions{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:.65rem;
  padding:1rem 1.35rem 1.35rem;
  border-top:1px solid var(--ecom-confirm-line);
  background:rgba(0,0,0,.24);
}

.ecom-confirm-v41__button{
  position:relative;
  min-height:3.25rem;
  padding:.75rem 1rem;
  overflow:hidden;
  border:1px solid var(--ecom-confirm-line);
  border-radius:.75rem;
  font:950 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.055em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}

.ecom-confirm-v41__button:hover{
  transform:translateY(-2px);
}

.ecom-confirm-v41__button:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

.ecom-confirm-v41__button--cancel{
  color:#e2e8f0;
  background:#111827;
}

.ecom-confirm-v41__button--cancel:hover{
  border-color:var(--ecom-confirm-cyan);
  box-shadow:0 0 18px rgba(38,230,255,.16);
}

.ecom-confirm-v41__button--confirm{
  color:#fff;
  border-color:rgba(255,49,88,.8);
  background:linear-gradient(135deg,#b70f3f,#ff3158 58%,#ff1493);
  box-shadow:0 10px 28px rgba(255,49,88,.22);
}

.ecom-confirm-v41__button--confirm::after{
  content:"";
  position:absolute;
  inset:-70% -45%;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.42) 49%,transparent 60%);
  transform:translateX(-68%);
  transition:transform .45s ease;
}

.ecom-confirm-v41__button--confirm:hover::after{
  transform:translateX(68%);
}

.ecom-confirm-v41__button--confirm:hover{
  filter:saturate(1.15) brightness(1.06);
  box-shadow:0 14px 36px rgba(255,49,88,.35);
}

.ecom-confirm-v41__button span{
  position:relative;
  z-index:1;
}

.ecom-confirm-v41-fallback{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(12px);
}

@keyframes ecom-confirm-backdrop-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes ecom-confirm-panel-in{
  from{opacity:0;transform:translateY(18px) scale(.965)}
  to{opacity:1;transform:none}
}

@keyframes ecom-confirm-scan{
  from{left:-45%}
  to{left:105%}
}

@keyframes ecom-confirm-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.42;transform:scale(.8)}
}

@media(max-width:560px){
  .ecom-confirm-v41{
    width:min(100%,calc(100vw - 1rem));
  }

  .ecom-confirm-v41__body{
    grid-template-columns:3.35rem minmax(0,1fr);
    gap:.8rem;
    padding:1rem 1rem .85rem;
  }

  .ecom-confirm-v41__icon{
    width:3.35rem;
    height:3.35rem;
  }

  .ecom-confirm-v41__impact{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-inline:1rem;
  }

  .ecom-confirm-v41__notice{
    margin-inline:1rem;
  }

  .ecom-confirm-v41__actions{
    grid-template-columns:1fr;
    padding:1rem;
  }

  .ecom-confirm-v41__button--confirm{
    grid-row:1;
  }

  .ecom-confirm-v41__button--cancel{
    grid-row:2;
  }
}

@media(prefers-reduced-motion:reduce){
  .ecom-confirm-v41::backdrop,
  .ecom-confirm-v41__shell,
  .ecom-confirm-v41__shell::after,
  .ecom-confirm-v41__eyebrow::before{
    animation:none!important;
  }

  .ecom-confirm-v41__button{
    transition:none!important;
  }
}