/* ===== Root & Backdrop ===== */
.engraving-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.engraving-modal.is-open{ display:block; }
.engraving-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:0; }

/* ===== RIGHT-SIDE DRAWER ===== */
.engraving-modal__dialog{
  position:absolute !important; top:0 !important; right:0 !important; left:auto !important;
  height:100vh !important; width:100% !important; max-width:1155px !important;
  margin:0 !important; border-radius:0 !important; z-index:2 !important;
  background:#fff; box-shadow:-24px 0 60px rgba(0,0,0,.15);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%) !important; transition:transform .35s ease !important;
}
.engraving-modal.is-open .engraving-modal__dialog{ transform:translateX(0) !important; }

/* Lock page behind */
body.engraving-open{ overflow:hidden; }

/* Close button (top-right, no bg even on hover; kill theme overrides) */
.engraving-close{
  position:absolute !important; top:16px !important; right:20px !important; left:auto !important;
  padding:6px !important; font-size:22px !important; line-height:1 !important;
  background:none !important; background-color:transparent !important;
  border:0 !important; color:#333 !important; box-shadow:none !important;
  cursor:pointer !important; z-index:3 !important;
  transform:none !important; -webkit-appearance:none !important; appearance:none !important;
}
.engraving-close::before, .engraving-close::after{ content:none !important; }
.engraving-close:hover, .engraving-close:focus, .engraving-close:active{
  background:none !important; background-color:transparent !important;
  color:#333 !important; box-shadow:none !important; transform:none !important;
}

/* ===== Layout ===== */
.engraving-body{ display:grid; grid-template-columns:1fr 1fr; height:100%; padding:56px 0 0; }

/* LEFT preview */
.engraving-preview{ display:flex; align-items:center; justify-content:center; background:#fafafa; overflow:auto; }
.bottle{ position:relative; max-width:520px; width:90%; margin:24px auto; }
.bottle img{ display:block; width:100%; height:auto; }
.engraving-overlay{ position:absolute; left:0; right:0; pointer-events:none; text-align:center; }
.engraving-overlay.pos-center{ top:45%; transform:translateY(-50%); }
.engraving-overlay.pos-low{ bottom:16%; }
#engraving-overlay-text{
  display:inline-block; font-size:32px; line-height:1; letter-spacing:.02em;
  font-weight:600; white-space:nowrap;
}

/* RIGHT steps */
.engraving-steps{ overflow:auto; padding:0 0 12px; }
.step{ border-bottom:1px solid #f0f0f0; }
.step header{ display:flex; align-items:center; gap:14px; padding:18px 24px; }
.step .step-num{ opacity:.5; width:36px; flex:0 0 36px; }
.step h3{ margin:0; font-size:28px; font-weight:500; }
.step .step-modify{ margin-left:auto; font-size:12px; text-transform:uppercase; opacity:.7; }
.step[aria-disabled="true"] .step-modify{ display:none; }
.step .step-content{ padding:10px 24px 24px; display:none; }
.step.is-active .step-content{ display:block; }

.step .options.two{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:14px 0 18px; }
.opt{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.opt input{ position:absolute; opacity:0; }
.opt .opt-box, .opt .opt-swatch{
  width:160px; height:120px; display:flex; align-items:center; justify-content:center;
  border:1px solid #ddd; border-radius:8px; background:#fff;
}
.opt .opt-swatch{ height:80px; }
.opt input:checked + .opt-box,
.opt input:checked + .opt-swatch{ border-color:#333; box-shadow:0 0 0 2px #333 inset; }

.step .note{ font-size:12px; opacity:.7; margin-top:6px; }

/* Buttons – theme vars */
.button{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:8px; cursor:pointer; }
.button-outline{ border:1px solid #ddd; background:#fff; color:#333; min-width:140px; }
.button-primary{
  width:200px; border:0;
  background:var(--btn-accented-bgcolor, var(--wd-primary-color, #c7a26e));
  color:var(--btn-accented-color, #fff);
  border-radius: var(--btn-accented-brd-radius, 8px);
  font-weight: var(--btn-accented-font-weight, 600);
}
.button[disabled]{ opacity:.5; cursor:not-allowed; }

/* Final step spacing */
.step-5 .final-check{ display:flex; align-items:flex-start; gap:10px; margin:14px 24px 18px; }
.step-5 .engraving-finish{ margin:8px 24px 20px; }

/* Responsive */
@media (max-width: 980px){
  .engraving-body{ grid-template-columns:1fr; }
  .engraving-preview{ padding:18px 0; }
}