/* Filter page (Figma "Wedding filter" + "Apply filter"): maroon dashed cards on the polaroid line. */
.panel.maroon {
  background: #470101; border: 1px dashed rgba(255, 236, 138, .6); padding: 40px; gap: 25px; align-items: center; text-align: center;
}
@media (min-resolution: 2dppx) { .panel.maroon { border: .5px dashed var(--gold); } }

/* ---- 1. choose a photo ---- */
.choose { cursor: pointer; }
.choose[hidden], .apply[hidden] { display: none; }
.choose-head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.choose-title { font-family: var(--display); font-weight: 500; font-size: 2.25rem; line-height: 1.258; }
.choose-sub { font-weight: 500; font-size: 0.875rem; }
.sparkles { width: 130px; height: 130px; margin: 10px 0; }
.btn.dashed { background: transparent; border: 1px dashed var(--gold); pointer-events: none; }
.choose:hover .btn.dashed { background: rgba(255, 236, 138, .1); }
.choose:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.note { margin: 0; font-weight: 500; font-size: 1rem; line-height: 1.3; }
.note.small { font-size: 0.8125rem; }

/* ---- 2. apply a filter ---- */
.apply { padding: 40px 30px; }
.apply-head { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.apply-title { margin: 0; font-weight: 400; font-size: 1rem; line-height: 1.258; }
.preview { width: min(100%, 220px); aspect-ratio: 2 / 3; display: grid; place-items: center; }
.preview canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 2px; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }

/* swipeable filter rail: native scroll-snap, the item in the middle (under the dashed ring) is the chosen one */
.rail-wrap { position: relative; width: min(100%, 325px); height: 60px; flex: none; }
.ring { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; translate: -50% -50%; pointer-events: none; z-index: 2; }
.rail {
  display: flex; align-items: center; gap: 25px; height: 100%; margin: 0; padding: 0 calc(50% - 20px); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 30px; }
.rail.dragging { scroll-snap-type: none; cursor: grabbing; }
.rail li { flex: none; scroll-snap-align: center; scroll-snap-stop: always; }
.opt {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; overflow: hidden; border-radius: 99px;
  border: 1px solid #6f1515; background-color: var(--maroon); color: #fff; font: 500 0.5rem/1 var(--sans); cursor: pointer;
  transform: scale(var(--s, 1)); opacity: var(--o, 1); -webkit-tap-highlight-color: transparent;
}
.opt span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); white-space: nowrap; }
.opt.film { background: radial-gradient(circle at 35% 28%, #d8b48a, #8a5f3f 55%, #3b2a22); }
.opt.confetti { background: var(--maroon) url(/img/filters/confetti-thumb.webp) center bottom / cover no-repeat; }
.opt.classic { background: linear-gradient(#2a2220, #2a2220) center 42% / 66% 60% no-repeat, #fbf9f4; }
.opt.gold { background: radial-gradient(circle at 50% 28%, #fff1a8, #dfc025 55%, #8a6a12); color: #2a1f00; }
.opt.gold span { text-shadow: none; }

.apply-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.btn.outline { background: transparent; border: 1px solid var(--gold); gap: 10px; }
.btn.outline:hover { background: rgba(255, 236, 138, .12); }
.btn.outline img { width: 16px; height: 16px; padding: 1.7px 2.5px; }
@media (max-width: 420px) { .apply-actions .btn { padding: 10px 14px; } }
.apply .error { margin: -8px 0 0; }

@media (max-width: 899px) {
  .panel.maroon { padding: 36px 24px; }
  .apply { padding: 36px 20px; }
  .choose-title { font-size: 2rem; }
  .note { font-size: 0.9375rem; }
}


/* v2: 44px filter circles; names move out of the 8px circle labels into a readable caption */
.opt { width: 44px; height: 44px; }
.opt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail { padding: 0 calc(50% - 22px); }
.rail-wrap { height: 64px; }
.ring { width: 64px; height: 64px; }
.filter-name { margin: -8px 0 0; font-weight: 500; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; }
.rail:focus-visible, .choose:focus-within { outline-color: #fff; }