/*
 * Sara personalize widget — plain CSS, no framework dependency.
 *
 * All colors live in CSS custom properties on `.sara-pw` so the host theme
 * can override them without forking the stylesheet. Override at the host
 * root (e.g. :root) or at `.sara-pw` itself.
 */

.sara-pw {
  --sara-cream:    #fffaf7;
  --sara-cream-2:  #fffaf3;
  --sara-border:   #e8d8d8;
  --sara-border-2: #e5d5c0;
  --sara-gold:     #b8893f;
  --sara-gold-2:   #d4a55a;
  --sara-burgundy: #7a1a2c;
  --sara-charcoal: #3a2e2c;
  --sara-ink:      #5b2638;
  --sara-mute:     #7a5b5b;
  --sara-mute-2:   #8a6f6f;
  --sara-success:  #2e7a3a;
  --sara-error:    #8b1e1e;
  --sara-error-bg: #fdecec;
  --sara-error-bd: #e3b8b8;

  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--sara-border);
  border-radius: 10px;
  background: var(--sara-cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sara-pw__title { margin: 0 0 0.25rem; font-size: 1.15rem; font-weight: 700; color: var(--sara-ink); }
.sara-pw__sub   { margin: 0 0 1rem;    font-size: 0.92rem; color: var(--sara-mute); }
.sara-pw__error {
  margin: 0 0 0.75rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--sara-error-bd); border-radius: 6px;
  background: var(--sara-error-bg); color: var(--sara-error);
  font-size: 0.9rem; display: none;
}
.sara-pw__error.is-shown { display: block; }

.sara-pw__text-fields-row {
  display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1rem;
}
.sara-pw__text-fields-row .sara-pw__field { margin: 0; }

.sara-pw__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
}
@media (max-width: 720px) {
  .sara-pw__layout { grid-template-columns: 1fr; }
}

.sara-pw__canvas-wrap { position: relative; width: 100%; }
.sara-pw__canvas {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 8px; cursor: pointer;
}
.sara-pw__canvas-hint {
  margin-top: 0.5rem; font-size: 0.78rem; color: var(--sara-mute-2);
  text-align: center; font-style: italic;
}

/* Size + position arrows overlaying canvas corners. */
.sara-pw__size-arrow,
.sara-pw__pos-arrow {
  position: absolute; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--sara-gold);
  background: var(--sara-cream-2); color: var(--sara-burgundy);
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: background 0.15s, transform 0.1s;
  z-index: 5; user-select: none;
}
.sara-pw__size-arrow:hover { background: var(--sara-gold); color: #fff; transform: scale(1.06); }
.sara-pw__size-arrow:active,
.sara-pw__pos-arrow:active { transform: scale(0.95); }
.sara-pw__size-arrow:disabled,
.sara-pw__pos-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.sara-pw__size-arrow[data-sara-arrow="design"][data-sara-dir="up"]   { top: 14%; right: 8px; }
.sara-pw__size-arrow[data-sara-arrow="design"][data-sara-dir="down"] { top: 14%; left:  8px; }

.sara-pw__pos-arrow {
  border-color: var(--sara-burgundy); color: var(--sara-gold);
  font-size: 16px;
}
.sara-pw__pos-arrow:hover { background: var(--sara-burgundy); color: #fff; transform: scale(1.06); }
.sara-pw__pos-arrow[data-sara-pos="design"][data-sara-dir="up"]   { top: 14%; right: 44px; }
.sara-pw__pos-arrow[data-sara-pos="design"][data-sara-dir="down"] { top: 14%; left:  44px; }

/* Inline arrows next to text inputs. */
.sara-pw__textfield-wrap { display: flex; align-items: center; gap: 6px; }
.sara-pw__textfield-wrap input[type="text"] { flex: 1; }
.sara-pw__inline-arrows  { display: flex; flex-direction: row; gap: 6px; align-items: stretch; }
.sara-pw__inline-col     { display: flex; flex-direction: column; gap: 2px; }
.sara-pw__inline-arrow {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--sara-gold);
  background: var(--sara-cream-2); color: var(--sara-burgundy);
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.sara-pw__inline-arrow:hover { background: var(--sara-gold); color: #fff; }
.sara-pw__inline-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.sara-pw__inline-arrow--pos { border-color: var(--sara-burgundy); color: var(--sara-gold); }
.sara-pw__inline-arrow--pos:hover { background: var(--sara-burgundy); color: #fff; }

.sara-pw__inline-col--color { gap: 2px; }
.sara-pw__inline-color {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--sara-gold); cursor: pointer;
  padding: 0; overflow: hidden;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset;
}
.sara-pw__inline-color::-webkit-color-swatch-wrapper { padding: 0; border: none; border-radius: 50%; }
.sara-pw__inline-color::-webkit-color-swatch         { border: none; border-radius: 50%; }
.sara-pw__inline-color::-moz-color-swatch            { border: none; border-radius: 50%; }
.sara-pw__inline-eyedropper {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--sara-burgundy);
  background: var(--sara-cream-2); color: var(--sara-burgundy);
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.sara-pw__inline-eyedropper:hover { background: var(--sara-burgundy); color: #fff; }

/* Fields. */
.sara-pw__fields { display: flex; flex-direction: column; gap: 0.9rem; }
.sara-pw__field label {
  display: block; font-size: 0.88rem; font-weight: 600;
  color: var(--sara-ink); margin-bottom: 0.3rem;
}
.sara-pw__field input[type="text"],
.sara-pw__field input[type="email"],
.sara-pw__field select {
  width: 100%; box-sizing: border-box;
  padding: 0.55rem 0.7rem; font-size: 0.95rem;
  border: 1px solid #d8c8c8; border-radius: 6px; background: #fff;
}
.sara-pw__field input[type="text"]:focus,
.sara-pw__field select:focus { outline: 2px solid var(--sara-gold); outline-offset: 1px; }
.sara-pw__required { color: #c0392b; margin-left: 0.15rem; }

/* Swatches. */
.sara-pw__swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sara-pw__swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #d8c8c8;
  cursor: pointer; padding: 0;
  transition: box-shadow 120ms ease;
}
.sara-pw__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sara-gold); }

.sara-pw__color-tools {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; flex-wrap: wrap;
}
.sara-pw__color-picker-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sara-charcoal); cursor: pointer;
}
.sara-pw__color-picker-lbl input[type="color"] {
  width: 32px; height: 32px;
  border: 1px solid var(--sara-gold); border-radius: 6px;
  padding: 0; cursor: pointer; background: transparent;
}
.sara-pw__eyedropper {
  border: 1px solid var(--sara-gold); background: var(--sara-cream-2);
  color: var(--sara-burgundy); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
  align-items: center; gap: 4px;
}
.sara-pw__color-preview {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--sara-gold);
}

/* Photo. */
.sara-pw__photo-hint   { font-size: 0.78rem; color: var(--sara-mute-2); margin-top: 0.25rem; }
.sara-pw__photo-status { font-size: 0.82rem; margin-top: 0.3rem; min-height: 1.1em; }
.sara-pw__photo-status.is-info    { color: #5b5b8a; }
.sara-pw__photo-status.is-success { color: var(--sara-success); }
.sara-pw__photo-status.is-error   { color: var(--sara-error); }

/* Design gallery. */
.sara-pw__design-gallery-wrap { margin-top: 0.75rem; }
.sara-pw__design-gallery {
  display: flex; gap: 0.55rem;
  overflow-x: auto; overflow-y: hidden;
  padding: 0.35rem 0.15rem 0.55rem;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  flex-wrap: wrap;
}
.sara-pw__design-thumb {
  flex: 0 0 auto; width: 70px; height: 70px;
  border-radius: 6px; border: 2px solid #d8c8c8;
  background: #fff center / cover no-repeat;
  cursor: pointer; padding: 0;
  position: relative; overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.sara-pw__design-thumb:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.10); }
.sara-pw__design-thumb[aria-pressed="true"] {
  border-color: var(--sara-gold);
  box-shadow: 0 2px 8px rgba(184, 137, 63, 0.35);
}
.sara-pw__design-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: var(--sara-cream-2);
}
.sara-pw__design-thumb--upload {
  border-style: dashed; border-color: var(--sara-gold);
  background: var(--sara-cream-2); color: var(--sara-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 600; line-height: 1.1;
}
.sara-pw__design-thumb--upload .sara-pw__upload-icon { font-size: 1.2rem; margin-bottom: 2px; }
.sara-pw__design-caption {
  font-size: 0.82rem; color: var(--sara-mute);
  text-align: center; margin-top: 0.15rem;
}

/* Actions row. */
.sara-pw__actions {
  display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem;
}
.sara-pw__atc {
  flex: 1; background: linear-gradient(180deg, var(--sara-gold-2) 0%, var(--sara-gold) 100%);
  color: #fff; border: none; padding: 0.7rem 1rem; border-radius: 8px;
  font-weight: 700; font-size: 1rem; cursor: pointer;
}
.sara-pw__atc:hover    { filter: brightness(0.97); }
.sara-pw__atc:disabled { opacity: 0.6; cursor: not-allowed; }

.sara-pw__qty-row {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem;
}
.sara-pw__qty-row label  { font-size: 0.85rem; color: var(--sara-ink); }
.sara-pw__qty-row input  {
  width: 56px; text-align: center; padding: 0.4rem;
  border: 1px solid #d8c8c8; border-radius: 6px;
}
.sara-pw__qty-row button {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--sara-gold); background: var(--sara-cream-2);
  color: var(--sara-burgundy); cursor: pointer;
}
.sara-pw__qty-row button:hover { background: var(--sara-gold); color: #fff; }

/* ----------------------------------------------------------------------- */
/* Multi-personalize modal                                                 */
/* ----------------------------------------------------------------------- */

.sara-pw-multi-modal {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
}
.sara-pw-multi__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
}
.sara-pw-multi__panel {
  position: relative; background: var(--sara-cream-2, #fffaf3);
  border-radius: 14px; padding: 28px 28px 22px;
  max-width: 720px; width: 92vw; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}
.sara-pw-multi__close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 28px;
  color: #7a1a2c; cursor: pointer; line-height: 1; padding: 4px 10px;
}
.sara-pw-multi__title {
  font-family: "Playfair Display", serif; color: #3a2e2c;
  margin: 0 0 10px; font-size: 24px;
}
.sara-pw-multi__sub { color: #5a4530; margin: 0 0 18px; font-size: 14px; }
.sara-pw-multi__editor-sub { color: #5a4530; font-size: 13px; margin: 0 0 14px; }
.sara-pw-multi__actions,
.sara-pw-multi__editor-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.sara-pw-multi__btn-primary {
  background: #b8893f; color: #fff; border: none;
  padding: 12px 22px; border-radius: 8px;
  font-weight: 600; cursor: pointer; font-size: 14px;
}
.sara-pw-multi__btn-primary:hover:not(:disabled) { background: #a07a35; }
.sara-pw-multi__btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.sara-pw-multi__btn-secondary {
  background: transparent; color: #7a1a2c; border: 1px solid #7a1a2c;
  padding: 12px 22px; border-radius: 8px;
  font-weight: 500; cursor: pointer; font-size: 14px;
}
.sara-pw-multi__btn-secondary:hover { background: #fff5e8; }

.sara-pw-multi__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.sara-pw-multi__item {
  background: #fff; border: 1px solid #e3d2bf; border-radius: 8px;
  padding: 12px 14px;
}
.sara-pw-multi__item-label {
  font-weight: 600; color: #5b2638;
  margin-bottom: 8px; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between;
}
.sara-pw-multi__item-row { display: grid; gap: 8px; }
.sara-pw-multi__row--1 { grid-template-columns: 1fr; }
.sara-pw-multi__row--2 { grid-template-columns: 1fr 1fr; }
.sara-pw-multi__row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .sara-pw-multi__item-row { grid-template-columns: 1fr !important; } }
.sara-pw-multi__item--first { border: 2px solid #b8893f; background: #fffaf3; }
.sara-pw-multi__item-hint { font-weight: 400; color: #9a8470; font-size: 11px; margin-left: 6px; }
.sara-pw-multi__item-num  { color: #5b2638; }
.sara-pw-multi__remove {
  background: transparent; border: 1px solid #d8c8c8; color: #7a1a2c;
  border-radius: 50%; width: 22px; height: 22px;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.sara-pw-multi__remove:hover { background: #7a1a2c; color: #fff; border-color: #7a1a2c; }
.sara-pw-multi__add-more {
  display: block; width: 100%;
  background: #fffaf3; color: #7a1a2c;
  border: 2px dashed #b8893f; border-radius: 8px;
  padding: 12px; font-weight: 600; font-size: 14px;
  cursor: pointer; margin: 8px 0 16px;
}
.sara-pw-multi__add-more:hover { background: #b8893f; color: #fff; border-style: solid; }
.sara-pw-multi__item-row label { font-size: 11px; color: #7a6555; display: block; margin-bottom: 3px; }
.sara-pw-multi__item-row input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid #d8c8c8; border-radius: 5px; font-size: 13px;
}
.sara-pw-multi__progress { text-align: center; color: #b8893f; font-size: 14px; padding: 12px; }

/* ----------------------------------------------------------------------- */
/* Preview modal                                                           */
/* ----------------------------------------------------------------------- */

.sara-prev__btn {
  background: linear-gradient(180deg, #d4a55a 0%, #b8893f 100%);
  color: #fff; border: none;
  padding: 0.65rem 1rem; border-radius: 8px;
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sara-prev__btn:hover    { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(184, 137, 63, 0.35); }
.sara-prev__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sara-prev__approved     { background: #2e7a3a !important; color: #fff !important; }

.sara-prev-modal {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 1rem;
}
.sara-prev-modal.is-open { display: flex; }
.sara-prev-modal__inner {
  background: #fffaf3; max-width: 560px; width: 100%;
  padding: 1.5rem; border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  max-height: 92vh; overflow-y: auto;
}
.sara-prev-modal__title { margin: 0 0 0.35rem; font-size: 1.4rem; color: #5b2638; font-weight: 700; }
.sara-prev-modal__sub   { margin: 0 0 1rem; color: #7a5b5b; font-size: 0.95rem; }
.sara-prev-modal__img   {
  width: 100%; max-width: 480px; height: auto; border-radius: 10px;
  display: block; margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.sara-prev-modal__spinner {
  padding: 3rem 1rem; font-size: 1rem; color: #5b2638; text-align: center;
}
.sara-prev-modal__spinner-dot {
  display: inline-block; width: 10px; height: 10px; margin: 0 3px;
  border-radius: 50%; background: #b8893f;
  animation: sara-prev-bounce 1.2s infinite ease-in-out;
}
.sara-prev-modal__spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.sara-prev-modal__spinner-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes sara-prev-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%           { transform: scale(1.0); opacity: 1.0; }
}
.sara-prev-modal__actions {
  display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.2rem;
}
.sara-prev-modal__cta {
  background: linear-gradient(180deg, #d4a55a 0%, #b8893f 100%);
  color: #fff; border: none;
  padding: 0.65rem 1.2rem; border-radius: 8px;
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.sara-prev-modal__cancel {
  background: none; color: #5b2638; border: none; cursor: pointer;
  padding: 0.6rem 1rem; font-size: 0.92rem; text-decoration: underline;
}
.sara-prev-modal__err {
  color: #8b1e1e; background: #fdecec;
  border: 1px solid #e3b8b8; border-radius: 6px;
  padding: 0.6rem 0.8rem; font-size: 0.9rem;
}
.sara-prev-modal__thumbs {
  display: flex; gap: 0.5rem; justify-content: center;
  margin: 0.8rem 0 0; flex-wrap: wrap;
}
.sara-prev-modal__thumb {
  width: 72px; height: 72px; padding: 0;
  border: 2px solid #e5d5c0; border-radius: 8px;
  background: none; cursor: pointer; overflow: hidden;
}
.sara-prev-modal__thumb:hover     { border-color: #b8893f; }
.sara-prev-modal__thumb.is-active { border-color: #5b2638; box-shadow: 0 0 0 2px rgba(91,38,56,0.18); }
.sara-prev-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sara-prev-modal__form label {
  display: block; font-size: 0.9rem; color: #5b2638; margin-top: 0.5rem;
}
.sara-prev-modal__form input {
  width: 100%; padding: 0.55rem 0.7rem;
  border: 1px solid #d9c3a8; border-radius: 6px;
  font-size: 1rem; margin-top: 0.2rem;
}
.sara-prev-modal__lead-err {
  display: none; color: #8b1e1e; background: #fdecec;
  border: 1px solid #e3b8b8; border-radius: 6px;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-top: 0.6rem;
}
.sara-prev-modal__lead-err.is-shown { display: block; }

.sara-prev-modal__stale {
  background: #fffaf3; border: 2px solid #e5d5c0; border-radius: 10px;
  padding: 2.4rem 1.2rem; margin: 0.6rem 0 0.4rem; text-align: center;
}
.sara-prev-modal__stale-icon  { font-size: 2.4rem; line-height: 1; }
.sara-prev-modal__stale-title { margin-top: 0.7rem; color: #5b2638; font-weight: 600; }
.sara-prev-modal__stale-sub   { margin-top: 0.4rem; color: #7a5b5b; font-size: 0.9rem; }

.sara-prev-modal__slow { padding: 48px 24px; text-align: center; }
.sara-prev-modal__slow-icon { font-size: 48px; margin-bottom: 16px; }
.sara-prev-modal__slow h3 {
  font-family: "Playfair Display", serif; color: #3a2e2c;
  margin-bottom: 12px; font-size: 24px;
}
.sara-prev-modal__slow p {
  color: #6a5a55; margin-bottom: 12px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}