/* =====================================================================
   dialog.css: the "Open in Maps?" pop-up (partials/site/maps-dialog.html)
   ---------------------------------------------------------------------
   A native <dialog>, opened with showModal() by js/maps-dialog.js.
   ::backdrop is the dark layer behind it.
   ===================================================================== */

.dialog {
  width: min(340px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 12px;
  background: var(--ivory); color: var(--ink);
  box-shadow: 0 12px 40px rgba(20, 18, 15, .18);
}
.dialog::backdrop { background: rgba(20, 19, 17, .45); }
/* Pop in with a slight overshoot; js/maps-dialog.js adds .is-closing to play
   the pop-out before actually closing */
.dialog[open] { animation: pop-in .32s cubic-bezier(.34, 1.4, .64, 1) both; }
.dialog[open]::backdrop { animation: fade-in .32s ease both; }
.dialog.is-closing { animation: pop-out .18s ease-in both; }
.dialog.is-closing::backdrop { animation: fade-out .18s ease-in both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: scale(.92); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.dialog__body { padding: 32px 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.dialog__icon { width: 28px; height: 28px; color: var(--olive); }
.dialog__title { font: 400 30px/1.1 var(--serif); }
.dialog__text { font-size: 14px; line-height: 1.5; color: var(--muted); }
.dialog__actions { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
/* Sand rows on an ivory card, like the venue band on the page: the choice is a list, not a call to action */
.dialog__option {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--sand);
  font: 400 15px/1 var(--sans); color: var(--ink); text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.dialog__option .icon { width: 16px; height: 16px; color: var(--subtle); transform: scaleX(-1); transition: color .2s, transform .2s; }
/* Only on real hover devices: on touch screens :hover sticks after a tap */
@media (hover: hover) {
  .dialog__option:hover { border-color: var(--olive); background: color-mix(in srgb, var(--olive) 18%, var(--sand)); color: var(--olive-dark); }
  .dialog__option:hover .icon { color: var(--olive); transform: scaleX(-1) translateX(-2px); }
}