/* Palette coerente */
:root {
  --bg: #f3f1e9;
  --panel-bg: #ffffff;
  --muted: #6b6b6b;
  --accent: #c9a97d; /* oro */
}

body {
  margin:0;
  font-family:"Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* Container */
.confirmation-container {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:2rem;
}

/* Card */
.confirmation-card {
  background:var(--panel-bg);
  padding:2.5rem 1.5rem;
  margin:0 1rem;
  border-radius:1rem;
  text-align:center;
  max-width:300px;
  width:100%;
  box-shadow:0 1.2rem 3rem rgba(16,16,16,0.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  animation: fadeIn 0.9s cubic-bezier(.25,.8,.25,1) forwards;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(80px); }
  to { opacity:1; transform:translateY(0); }
}

/* Icona avviso */
.warning-icon {
  width:80px;
  height:80px;
}

.warning-icon svg {
  width:100%;
  height:100%;
  stroke-width:4;
  stroke:var(--accent);
  stroke-miterlimit:10;
  display:block;
}

/* Cerchio con effetto rimbalzo */
.warning-circle {
  stroke-dasharray:176;
  stroke-dashoffset:176;
  stroke:var(--accent);
  animation: stroke 0.5s cubic-bezier(.65,0,.45,1) forwards;
  animation-delay: 0.25s; /* più rapido e parte prima */
}

.warning-line {
  stroke-dasharray:20;
  stroke-dashoffset:20;
  stroke:var(--accent);
  animation: stroke 0.45s cubic-bezier(.65,0,.45,1) forwards;
  animation-delay: 0.85s; /* anticipata rispetto a prima */
}

.warning-dot {
  fill:var(--accent);
  opacity:0;
  animation: fadeDot 0.4s forwards;
  animation-delay: 1.4s; /* entra più velocemente */
}

@keyframes stroke {
  100% { stroke-dashoffset:0; }
}
@keyframes fadeDot {
  to { opacity:1; }
}

/* Testo */
.confirmation-card h1 {
  margin:0;
  font-size:1.6rem;
}
.confirmation-card p {
  color:var(--muted);
  margin:0;
  line-height:1.5;
}

/* Pulsanti */
.buttons {
  display:flex;
  flex-direction:column;
  gap:1rem;
  justify-content:center;
  align-items:center;
}

.btn {
  position:relative;
  overflow:hidden;
  display:inline-block;
  padding:.8rem 1.4rem;
  border-radius:.4rem;
  text-decoration:none;
  font-weight:600;
  width:220px;
  text-align:center;
  border:2px solid var(--accent);
  cursor:pointer;
  transition:color .35s ease, background .35s ease, border-color .35s ease;
  background:var(--accent);
  color:#fff;
}
.btn span { position:relative; z-index:2; }

.btn::after {
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.5) 50%,
    transparent 100%
  );
  transform:skewX(-20deg);
  z-index:1;
}
.btn:hover::after {
  animation: shine-white 0.9s forwards;
}
@keyframes shine-white {
  100% { left:125%; }
}

/* btn secondari back() */
.btn.secondary {
  background:#fff;
  color:var(--accent);
}
.btn.secondary::after {
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(201,169,125,0.20) 40%, /* dorato molto soft */
    rgba(201,169,125,0.55) 50%, /* dorato medio */
    transparent 100%
  );
  transform:skewX(-20deg);
  z-index:1;
}
.btn.secondary:hover::after {
  animation: shine-gold 0.9s forwards;
}
@keyframes shine-gold {
  100% { left:125%; }
}

/* Stati focus/active */
.btn:focus-visible {
  outline:2px solid rgba(201,169,125,0.5);
  outline-offset:2px;
}
.btn:active {
  transform:translateY(1px);
}
.btn[aria-disabled="true"],
.btn.disabled {
  opacity:0.6;
  pointer-events:none;
}