/* Purchase dialog for the Lady Smudge museum. */
.lsm-dialog {
  --ink: #3b2c20;
  --muted: #7a6350;
  --accent: #8a6a4c;
  --paper: #f6eedf;
  --line: #d9c6a5;
  /* Hand-drawn box for the text fields and the photo box: outline plus the field colour, 9-sliced to any size. */
  --box: url(/assets/field-box.png) 14 fill / 7px stretch;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  overflow: auto;
  /* Hand-drawn card (assets/modal-card.webp): outline plus paper fill, transparent outside the line.
     It is 9-sliced, so the corners keep their shape and the sides stretch to whatever size the dialog is. */
  border: 18px solid transparent;
  border-image: url(/assets/modal-card.webp) 36 fill / 18px stretch;
  background: none;
  color: var(--ink);
  filter: drop-shadow(0 18px 24px rgba(20, 12, 6, 0.4)); /* follows the drawn edge, unlike box-shadow */
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive; /* handwriting, to sit with the hand-drawn boxes */
}
.lsm-dialog::backdrop {
  background: rgba(20, 12, 6, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lsm-body { position: relative; padding: 14px 10px 8px; } /* plus the 18px drawn border */
.lsm-body h2 { margin: 0 0 2px; padding: 0 34px; font-weight: 400; font-size: 30px; letter-spacing: 0.02em; text-align: center; } /* side padding clears the close mark */
.lsm-price { margin: 0 0 12px; font-size: 20px; letter-spacing: 0.06em; color: var(--accent); text-align: center; }
.lsm-body p { margin: 0 0 14px; font-size: 18px; line-height: 1.4; }
.lsm-center { text-align: center; }
.lsm-note { font-size: 15px !important; color: var(--muted); }
.lsm-close {
  position: absolute; top: 6px; right: 8px; width: 40px; height: 40px;
  border: 0; background: url(/assets/close-x.png) center / contain no-repeat; cursor: pointer;
  font-size: 0; /* the × is drawn; the button keeps its aria-label */
}

.lsm-form { display: grid; gap: 14px; margin-top: 4px; }
.lsm-field { display: grid; gap: 4px; font-size: 18px; letter-spacing: 0.02em; }
.lsm-field input[type='text'], .lsm-field textarea {
  box-sizing: border-box; width: 100%; padding: 4px 6px;
  border: 7px solid transparent; border-image: var(--box); background: none; color: var(--ink);
  font: 19px/1.3 'Patrick Hand', 'Comic Sans MS', cursive; /* 16px or more stops iOS zooming on focus */
}
.lsm-field textarea { min-height: 96px; resize: vertical; }
.lsm-field input, .lsm-field textarea, .lsm-drop { transition: filter 0.12s ease; }
/* Selected: no second border. Four hard shadows in the ink colour grow the box's own drawn outline outward by
   1.5px, following its hand-drawn edge, so the same line simply looks heavier. No extra images. */
.lsm-field input:focus, .lsm-field textarea:focus, .lsm-drop:focus-within {
  outline: none;
  filter: drop-shadow(1.5px 0 0 #2b2018) drop-shadow(-1.5px 0 0 #2b2018) drop-shadow(0 1.5px 0 #2b2018) drop-shadow(0 -1.5px 0 #2b2018);
}
.lsm-count { justify-self: end; font-size: 14px; color: var(--muted); }

.lsm-drop {
  position: relative; display: grid; place-items: center; min-height: 140px;
  /* The same drawn box as the text fields, with the hand-drawn dashes just inside it (::before). */
  border: 7px solid transparent; border-image: var(--box); background: none; cursor: pointer; text-align: center;
  font-size: 17px; color: var(--muted); padding: 16px; overflow: hidden;
}
/* Dashes (assets/photo-box.png, drawn at 4x). The edges repeat rather than stretch, so the dashes keep their
   size at any width; `round` nudges the spacing so a whole number of them fits. */
.lsm-drop::before {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  border: 5px solid transparent; border-image: url(/assets/photo-box.png) 20 / 5px round;
}
.lsm-drop[data-over] { filter: sepia(0.35) brightness(0.96); }
.lsm-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lsm-drop img { max-width: 100%; max-height: 220px; display: block; }

.lsm-error { min-height: 1em; margin: 0 !important; color: #9b2c1f; font-size: 16px !important; }
.lsm-btn {
  display: block; width: 100%; padding: 6px 14px; border: 6px solid transparent;
  border-image: url(/assets/button-box.png) 12 fill / 6px stretch; /* drawn button shape; the words sit on top */
  background: none; color: var(--paper); font: inherit; font-size: 21px;
  letter-spacing: 0.04em; cursor: pointer;
}
.lsm-btn[disabled] { opacity: 0.55; cursor: progress; }
a.lsm-btn { box-sizing: border-box; text-align: center; text-decoration: none; }
.lsm-after-btn { margin: 10px 0 0 !important; }
/* The artwork shown when a filled frame is opened. */
.lsm-art { display: block; max-width: 100%; max-height: min(52dvh, 480px); margin: 8px auto 14px; box-shadow: 0 2px 8px rgba(40, 26, 12, 0.25); -webkit-user-drag: none; }


/* Narrower dialog (phones): use the box that was drawn at that width, so its line is stretched less. */
@media (max-width: 471px) {
  .lsm-dialog { --box: url(/assets/field-box-narrow.png) 14 fill / 7px stretch; }
  .lsm-body h2 { font-size: 25px; }
}