/* ============================================================================
   SG Dedications — full-page editor (v1.2.0 / Sprint 66).
   Replaces the old popup. A fixed 100dvh page with a header, a step rail, a
   scrolling stage/controls zone, and a STICKY action bar so "add to cart" is
   always visible on mobile + desktop. RTL-native, namespaced .sg-ded-.
   ============================================================================ */
.sg-ded-upload,
.sg-ded-ed {
  --sgd-gold: #c09a5a;
  --sgd-gold-dark: #a8823f;
  --sgd-brown: #4a3b2a;
  --sgd-cream: #fbf8f2;
  --sgd-border: #e2d8c6;
  box-sizing: border-box;
}
.sg-ded-upload *, .sg-ded-ed * { box-sizing: border-box; }

/* The upload widget is hidden by the accordion; keep the file input clickable. */
.sg-ded-upload__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ── the page shell ─────────────────────────────────────────────────────────── */
.sg-ded-ed { position: fixed; inset: 0; z-index: 100001; background: var(--sgd-cream); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.sg-ded-ed[hidden] { display: none; }
.sg-ded-ed.is-open { opacity: 1; visibility: visible; }
.sg-ded-ed__page {
  position: absolute; inset: 0; height: 100dvh;
  display: flex; flex-direction: column;
  width: 100%; max-width: 760px; margin-inline: auto;
  background: var(--sgd-cream);
}

/* header */
.sg-ded-ed__head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--sgd-border); background: #fff; }
.sg-ded-ed__exit { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--sgd-border); background: #fff; color: var(--sgd-brown); font: inherit; font-weight: 600; font-size: .88rem; border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.sg-ded-ed__exit:hover { border-color: var(--sgd-gold); }
.sg-ded-ed__title { flex: 1 1 auto; margin: 0; text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--sgd-brown); }
.sg-ded-ed__quality { flex: 0 0 auto; font-size: .74rem; padding: 4px 8px; border-radius: 999px; background: #fdeaea; color: #b3261e; max-width: 42%; }
.sg-ded-ed__quality[hidden] { display: none; }

/* step rail */
.sg-ded-ed__rail { flex: 0 0 auto; display: flex; gap: 8px; margin: 0; padding: 10px 14px; list-style: none; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--sgd-border); }
.sg-ded-ed__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #f4eee2; color: #8a7c66; font-size: .82rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; }
.sg-ded-ed__chip.is-active { background: #fdf6e8; border-color: var(--sgd-gold); color: var(--sgd-brown); }
.sg-ded-ed__chip.is-done { color: #2f7d4f; }
.sg-ded-ed__chipmark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--sgd-border); font-size: .78rem; font-weight: 800; }
.sg-ded-ed__chip.is-active .sg-ded-ed__chipmark { background: var(--sgd-gold); color: #fff; border-color: var(--sgd-gold); }
.sg-ded-ed__chip.is-done .sg-ded-ed__chipmark { background: #3f9d5f; color: #fff; border-color: #3f9d5f; }

/* scroll zone — min-height:0 lets it shrink+scroll so the sticky bar is never clipped */
.sg-ded-ed__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 14px 14px; }

/* stage */
.sg-ded-ed__stagewrap { position: relative; display: flex; align-items: center; justify-content: center; height: 46vh; min-height: 230px; }
.sg-ded-ed__canvas { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.16); touch-action: none; background: #fff; cursor: grab; }
.sg-ded-ed.is-brush .sg-ded-ed__canvas, .sg-ded-ed.is-wand .sg-ded-ed__canvas { cursor: crosshair; }

/* loader with determinate thirds */
.sg-ded-ed__loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(251,248,242,.94); z-index: 3; border-radius: 8px; }
.sg-ded-ed__loader[hidden] { display: none; }
.sg-ded-ed__spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(192,154,90,.25); border-top-color: var(--sgd-gold); animation: sg-ded-spin .8s linear infinite; }
@keyframes sg-ded-spin { to { transform: rotate(360deg); } }
.sg-ded-ed__loadertext { font-size: .9rem; color: var(--sgd-brown); font-weight: 600; }
.sg-ded-ed__loaderpct { font-size: 1.25rem; font-weight: 800; color: var(--sgd-gold-dark); }
.sg-ded-ed__loaderbar { width: min(240px, 70%); height: 7px; border-radius: 999px; background: #ece3d1; overflow: hidden; }
.sg-ded-ed__loaderbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sgd-gold), var(--sgd-gold-dark)); border-radius: 999px; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .sg-ded-ed__spinner { animation: none; } }

/* ── v1.2.1 animated guidance (finger/cursor + tip over the active element) ──── */
.sg-ded-ed__guide { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.sg-ded-ed__guide[hidden] { display: none; }
.sg-ded-ed__guide.is-in { opacity: 1; }
.sg-ded-ed__finger { position: absolute; transform: translate(-50%, -50%); font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); will-change: transform; }
.sg-ded-ed__guide.is-in .sg-ded-ed__finger { animation: sgDedFinger 1.5s ease-in-out 3; }
@keyframes sgDedFinger { 0%, 100% { transform: translate(-50%, -50%); } 45% { transform: translate(14%, 26%); } }
.sg-ded-ed__tip { position: absolute; transform: translate(-50%, 0); white-space: nowrap; background: rgba(74,59,42,.94); color: #fff; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { .sg-ded-ed__guide.is-in .sg-ded-ed__finger { animation: none; } }

/* ── v1.2.1 background-removal hint ─────────────────────────────────────────── */
.sg-ded-ed__bghint { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; background: #fbf1d8; border: 1px solid #ebd9a8; border-radius: 10px; }
.sg-ded-ed__bghint[hidden] { display: none; }
.sg-ded-ed__bghint-t { flex: 1 1 auto; font-size: .82rem; color: var(--sgd-brown); line-height: 1.4; }
.sg-ded-ed__bghint-x { flex: 0 0 auto; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #8a7c66; padding: 0 4px; }

/* ── photo step controls ────────────────────────────────────────────────────── */
.sg-ded-ed__photostep[hidden], .sg-ded-ed__textstep[hidden] { display: none; }
.sg-ded-ed__modes { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.sg-ded-ed__mode { flex: 1 1 auto; min-height: 42px; border: 1px solid var(--sgd-border); background: #fff; border-radius: 10px; font-size: .85rem; font-weight: 600; color: var(--sgd-brown); cursor: pointer; padding: 0 8px; }
.sg-ded-ed__mode.is-active { background: #fdf6e8; border-color: var(--sgd-gold); }

.sg-ded-ed__sliders { display: none; gap: 12px; margin-top: 10px; }
.sg-ded-ed.is-brush .sg-ded-ed__sliders, .sg-ded-ed.is-wand .sg-ded-ed__sliders { display: flex; }
.sg-ded-ed.is-brush .sg-ded-ed__slider--tol { display: none; }
.sg-ded-ed.is-wand .sg-ded-ed__slider--brush { display: none; }
.sg-ded-ed__slider { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #6b5c47; }
.sg-ded-ed__slider input[type=range] { flex: 1 1 auto; accent-color: var(--sgd-gold); }

/* ── v1.4.0: the editing DOCK ───────────────────────────────────────────────────
   Modes + brush sliders + tools used to sit below the canvas in the scroll zone,
   so on a phone they were under the fold and customers never found out they could
   adjust anything. The dock sticks to the bottom of the scroll zone: always on
   screen, above the sticky action bar, without stealing the bar's space. */
.sg-ded-ed__dock {
  position: sticky; bottom: 0; z-index: 4;
  margin: 10px -14px 0; padding: 8px 14px 10px;
  background: linear-gradient(180deg, rgba(251,248,242,.55) 0%, var(--sgd-cream) 26%);
  border-top: 1px solid var(--sgd-border);
  backdrop-filter: blur(2px);
}
.sg-ded-ed__dockhint { text-align: center; font-size: .78rem; font-weight: 600; color: #8a7c66; margin-bottom: 6px; }
.sg-ded-ed__dock .sg-ded-ed__modes { margin-top: 0; }
.sg-ded-ed__dock .sg-ded-ed__tools { margin-top: 8px; }
/* one horizontally scrollable row on narrow screens instead of 3 wrapped rows */
@media (max-width: 560px) {
  .sg-ded-ed__dock .sg-ded-ed__tools,
  .sg-ded-ed__dock .sg-ded-ed__modes { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .sg-ded-ed__dock .sg-ded-ed__tools::-webkit-scrollbar,
  .sg-ded-ed__dock .sg-ded-ed__modes::-webkit-scrollbar { display: none; }
  .sg-ded-ed__dock .sg-ded-ed__tool { min-width: 50px; min-height: 46px; }
  .sg-ded-ed__dockhint { font-size: .74rem; }
}

/* ── v1.4.0: WhatsApp help, visible throughout the edit ────────────────────── */
.sg-ded-ed__wa {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; text-decoration: none;
  background: #25d366; color: #fff; font-size: .84rem; font-weight: 700;
  box-shadow: 0 3px 10px rgba(37,211,102,.32);
}
.sg-ded-ed__wa[hidden] { display: none; }
.sg-ded-ed__wa:hover { filter: brightness(1.05); color: #fff; }
.sg-ded-ed__wa-ic { display: inline-flex; }
/* narrow phones: the header pill keeps only its icon, and the sentence moves to its
   own full-width strip under the step rail (exactly one of the two is ever visible) */
.sg-ded-ed__wabar {
  display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; text-decoration: none;
  background: #e8fbef; color: #10682f; font-size: .84rem; font-weight: 700;
  border-bottom: 1px solid #c9edd6;
}
.sg-ded-ed__wabar[hidden] { display: none; }
@media (max-width: 420px) {
  .sg-ded-ed__wa { padding: 7px 9px; }
  .sg-ded-ed__wa-t { display: none; }
  .sg-ded-ed__wabar:not([hidden]) { display: flex; }
}

.sg-ded-ed__tools { display: flex; align-items: stretch; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sg-ded-ed__tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 54px; min-height: 50px; padding: 5px 6px; border: 1px solid var(--sgd-border); background: #fff; border-radius: 10px; line-height: 1; cursor: pointer; color: var(--sgd-brown); }
.sg-ded-ed__tool[disabled] { opacity: .4; cursor: default; }
.sg-ded-ed__tool--del { color: #b3261e; border-color: #ecc1bd; }
.sg-ded-ed__ico { font-size: 1.2rem; line-height: 1; }
.sg-ded-ed__tlabel { font-size: .68rem; }
.sg-ded-ed__sep { width: 1px; align-self: center; height: 34px; background: var(--sgd-border); margin: 0 3px; }

.sg-ded-ed__layersbar { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sg-ded-ed__layers-label { font-size: .8rem; color: #6b5c47; font-weight: 600; flex: 0 0 100%; }
.sg-ded-ed__layers { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; padding-bottom: 2px; }
.sg-ded-ed__layer { flex: 0 0 auto; width: 72px; height: 72px; padding: 0; border: 2px solid var(--sgd-border); border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; }
.sg-ded-ed__layer.is-active { border-color: var(--sgd-gold); }
.sg-ded-ed__layer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sg-ded-ed__addphoto { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border: 1px dashed var(--sgd-gold); background: #fff; border-radius: 10px; font-size: .82rem; font-weight: 600; color: var(--sgd-brown); cursor: pointer; }
.sg-ded-ed__addphoto[disabled] { opacity: .5; cursor: default; }

/* ── text step ─────────────────────────────────────────────────────────────── */
.sg-ded-ed__textstep { margin-top: 12px; }
.sg-ded-ed__textlabel { display: block; font-weight: 700; color: var(--sgd-brown); margin-bottom: 6px; }
.sg-ded-ed__textin { width: 100%; border: 1.5px solid var(--sgd-border); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 1rem; resize: vertical; min-height: 52px; }
.sg-ded-ed__textin:focus { outline: none; border-color: var(--sgd-gold); }
.sg-ded-ed__textopts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sg-ded-ed__fonts, .sg-ded-ed__colors { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-ded-ed__fontopt, .sg-ded-ed__coloropt { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--sgd-border); background: #fff; border-radius: 10px; padding: 8px 13px; font: inherit; font-size: .95rem; cursor: pointer; color: var(--sgd-brown); }
.sg-ded-ed__fontopt.is-active, .sg-ded-ed__coloropt.is-active { border-color: var(--sgd-gold); background: #fdf6e8; }
.sg-ded-ed__colorchip { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.sg-ded-ed__texthint { margin: 10px 0 0; font-size: .82rem; color: #8a7c66; }

/* ── sticky action bar ─────────────────────────────────────────────────────── */
.sg-ded-ed__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--sgd-border); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
.sg-ded-ed__barinfo { flex: 1 1 auto; font-size: .85rem; color: #6b5c47; line-height: 1.35; }
.sg-ded-ed__confirm { flex: 0 0 auto; border: 0; border-radius: 12px; padding: 14px 22px; font: inherit; font-size: 1rem; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--sgd-gold), var(--sgd-gold-dark)); }
.sg-ded-ed__confirm[hidden], .sg-ded-ed__atc[hidden] { display: none; }
.sg-ded-ed__atc { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; padding: 16px 22px; font: inherit; font-size: 1.15rem; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, #d8ad45, var(--sgd-gold) 55%, #9a771f); box-shadow: 0 8px 22px rgba(184,145,47,.34); animation: sgDedAtcIn .4s ease both; }
.sg-ded-ed__atc:hover { filter: brightness(1.05); }
.sg-ded-ed__atc-ic { display: inline-flex; }
@keyframes sgDedAtcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── exit confirmation dialog ──────────────────────────────────────────────── */
.sg-ded-ed__exitdlg { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sg-ded-ed__exitdlg[hidden] { display: none; }
.sg-ded-ed__exitback { position: absolute; inset: 0; background: rgba(20,24,28,.55); }
.sg-ded-ed__exitcard { position: relative; background: #fff; border-radius: 16px; padding: 22px 20px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.sg-ded-ed__exittext { margin: 0 0 18px; font-size: 1.02rem; font-weight: 600; color: var(--sgd-brown); line-height: 1.5; }
.sg-ded-ed__exitbtns { display: flex; gap: 10px; }
.sg-ded-ed__exitstay { flex: 1 1 auto; border: 0; border-radius: 11px; padding: 13px 14px; font: inherit; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--sgd-gold), var(--sgd-gold-dark)); }
.sg-ded-ed__exitleave { flex: 0 0 auto; border: 1px solid var(--sgd-border); border-radius: 11px; padding: 13px 16px; font: inherit; font-weight: 600; color: #8a7c66; background: #f6f1e8; cursor: pointer; }

/* ── desktop ───────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .sg-ded-ed__page { box-shadow: 0 0 0 1px var(--sgd-border); }
  .sg-ded-ed__stagewrap { height: 52vh; }
  .sg-ded-ed__title { font-size: 1.15rem; }
}