* --- brand palette & layout (trimmed for brevity but polished) --- */

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

:root{--warm-beige:#D4A574;--warm-beige-dark:#9B7A4F;--light-beige:#E5D4B1;--warm-taupe:#8B7355;--rich-brown:#5C4033;--sand:#F5E6D3;--cream:#FBF7F0;--espresso:#3C2415;--pure-white:#FFF;--success-green:#22C55E;--gray-600:#525252;--gray-700:#404040}

body{font-family:'Inter',-apple-system,sans-serif;color:var(--espresso);background:var(--cream);letter-spacing:.02em;font-weight:500;line-height:1.6}

nav{background:rgba(251,247,240,.95);backdrop-filter:blur(20px);padding:1.5rem 4rem;border-bottom:1px solid var(--light-beige);box-shadow:0 2px 10px rgba(0,0,0,.03)}
.nav-container{max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo svg{width:140px;height:26px}
.nav-phone{color:#fff;background:var(--warm-beige);text-decoration:none;font-size:.9rem;font-weight:700;letter-spacing:.08em;padding:.75rem 1.75rem;border-radius:50px;transition:.3s;box-shadow:0 4px 12px rgba(212,165,116,.2)}
.nav-phone:hover{background:var(--warm-taupe);transform:translateY(-2px)}

.cancel-container{max-width:700px;margin:4rem auto;padding:0 2rem;text-align:center}
.cancel-header{margin-bottom:2.5rem}
.cancel-icon{width:64px;height:64px;margin:0 auto 1.5rem;padding:1rem;background:linear-gradient(135deg,rgba(212,165,116,.1),rgba(255,255,255,.5));border-radius:50%;color:var(--warm-taupe)}
.cancel-header h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3rem);color:var(--espresso);margin-bottom:1rem;line-height:1.1;letter-spacing:.02em}
.cancel-header .subtitle{font-size:1.15rem;color:var(--warm-taupe);line-height:1.7}
.info-card{background:#fff;border:1px solid var(--light-beige);border-radius:16px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.info-card p{color:var(--gray-600);margin:0}

.confirm-container{max-width:900px;margin:4rem auto;padding:0 2rem}
.confirm-header{text-align:center;margin-bottom:3rem}
.confirm-header h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5vw,3.5rem);color:var(--espresso);margin-bottom:1rem;line-height:1.1;letter-spacing:.02em}
.confirm-header .subtitle{font-size:1.15rem;color:var(--warm-taupe);max-width:600px;margin:0 auto;line-height:1.7}
.success-badge{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.05));border:2px solid var(--success-green);border-radius:50px;padding:.5rem 1.25rem;margin-bottom:1.5rem;font-size:.9rem;font-weight:600;color:var(--success-green)}
.order-summary{background:#fff;border:1px solid var(--light-beige);border-radius:20px;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.order-summary h2{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--warm-taupe);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--sand)}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.summary-item label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-600);margin-bottom:.25rem;font-weight:600}
.summary-item .value{font-size:1.125rem;font-weight:700;color:var(--espresso)}
.next-steps{background:linear-gradient(135deg,rgba(212,165,116,.08),rgba(255,255,255,.5));border:1px solid var(--light-beige);border-radius:20px;padding:2rem;margin-bottom:2rem}
.next-steps h2{font-family:'Bebas Neue',sans-serif;font-size:1.75rem;color:var(--espresso);margin-bottom:1.25rem;letter-spacing:.02em}
.timeline{list-style:none;padding:0}
.timeline li{position:relative;padding-left:2rem;margin-bottom:1.25rem;color:var(--gray-700);line-height:1.7}
.timeline li::before{content:'';position:absolute;left:0;top:.4rem;width:10px;height:10px;background:var(--warm-beige);border-radius:50%;box-shadow:0 0 0 3px rgba(212,165,116,.2)}
.actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:2rem 0}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.05em;padding:1rem 2rem;border-radius:50px;transition:.3s;text-align:center}
.btn-primary{background:var(--espresso);color:#fff;box-shadow:0 6px 20px rgba(60,36,21,.2)}
.btn-primary:hover{background:var(--rich-brown);transform:translateY(-2px);box-shadow:0 8px 25px rgba(60,36,21,.3)}
.btn-secondary{background:var(--warm-beige);color:#fff;box-shadow:0 6px 20px rgba(212,165,116,.2)}
.btn-secondary:hover{background:var(--warm-taupe);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--warm-taupe);border:2px solid var(--warm-beige)}
.btn-outline:hover{background:var(--warm-beige);color:#fff;transform:translateY(-2px)}

.footer-note{text-align:center;color:var(--gray-600);font-size:.95rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--light-beige)}

@media (max-width:768px){nav{padding:1rem 1.5rem}.confirm-container{padding:0 1rem;margin:2rem auto}.summary-grid{grid-template-columns:1fr}.actions{flex-direction:column}.btn{width:100%}}



/* Base reset for loader */
  .loader-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(251,247,240,0.6); /* soft translucent sheet like your nav */
    backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
  }

  .loader-overlay.visible { opacity: 1; }

  .loader-card {
    display:flex;
    gap:1.25rem;
    align-items:center;
    background: linear-gradient(180deg,var(--cream), #fff);
    border:1px solid var(--light-beige);
    padding:1rem 1.25rem;
    border-radius:14px;
    box-shadow:0 14px 40px rgba(60,36,21,0.08);
    transform: translateY(6px);
    transition: transform .18s ease;
    min-width: 260px;
    max-width: 86%;
  }

  .loader-overlay.visible .loader-card { transform: translateY(0); }

  /* spinner */
  .spinner { position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }

  .spinner-ring { overflow:visible; display:block; }
  .spinner .ring-bg { stroke: var(--sand); opacity: 1; }
  .spinner .ring {
    stroke: url(#grad-ring);
    stroke-linecap: round;
    stroke-dasharray: 85;
    stroke-dashoffset: 60;
    transform-origin: 50% 50%;
    animation: spin 1.25s linear infinite;
  }

  /* small animated dots to indicate micro-progress */
  .spinner-dots { position:absolute; bottom: -6px; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; width:fit-content; }
  .spinner-dots span { width:6px; height:6px; border-radius:50%; background:var(--warm-beige); display:inline-block; transform: translateY(0); animation: dot-bounce 1s infinite ease-in-out; }
  .spinner-dots span:nth-child(2) { animation-delay: .12s; background:var(--warm-beige-dark); }
  .spinner-dots span:nth-child(3) { animation-delay: .24s; background:var(--warm-taupe); }

  /* loader text */
  .loader-text { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
  .loader-title { font-family:'Bebas Neue', system-ui, -apple-system, sans-serif; font-size:1.15rem; color:var(--espresso); letter-spacing: .02em; }
  .loader-sub { font-size:.875rem; color:var(--warm-taupe); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }

  /* keyframes */
  @keyframes spin {
    0% { transform: rotate(0deg); stroke-dashoffset: 60; }
    50% { transform: rotate(180deg); stroke-dashoffset: 18; }
    100% { transform: rotate(360deg); stroke-dashoffset: 60; }
  }

  @keyframes dot-bounce {
    0%,100% { transform: translateY(0); opacity: .6; }
    50% { transform: translateY(-6px); opacity: 1; }
  }

  /* Responsive tweaks */
  @media (max-width:420px){
    .loader-card { padding:.75rem; gap:.8rem; border-radius:12px; }
    .spinner { width:48px; height:48px; }
    .loader-title { font-size:1rem; }
    .loader-sub { display:none; } /* save space on tiny screens */
  }