/* The booth wall -- see booth-wall.js. */

/* ---- the small wall: a lot of small prints, pasted over each other --- */
.bw-wall {
    /* No board behind them: the prints are pasted straight onto the page,
       the way a real booth wall is the wall itself. */
    position: relative; aspect-ratio: 5 / 4;
}
.bw-photo {
    position: absolute; display: block; padding: 2px 2px 5px; margin: 0;
    background: #fff; border: 0; border-radius: 1px; cursor: zoom-in;
    box-shadow: 0 2px 5px rgba(60, 35, 20, .28);
    transform: rotate(var(--tilt, 0deg));
    transition: transform .2s ease, box-shadow .2s ease;
}
.bw-photo:hover, .bw-photo:focus-visible {
    transform: rotate(0deg) scale(1.9);
    z-index: 60 !important; box-shadow: 0 10px 24px rgba(60, 35, 20, .35);
}
.bw-photo img { display: block; width: 100%; height: auto; background: #f3ece2; }
.bw-tape {
    position: absolute; top: -5px; left: 50%; width: 50%; height: 8px;
    transform: translateX(-50%) rotate(var(--tt, 0deg));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.bw-pin {
    position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .3);
}
@media (prefers-reduced-motion: reduce) { .bw-photo { transition: none; } }

/* ---- viewer --------------------------------------------------------------- */
.bw-lb {
    position: fixed; inset: 0; z-index: 2147483000; display: none;
    align-items: center; justify-content: center; gap: 12px; padding: 20px;
    background: rgba(20, 15, 12, .88);
}
.bw-lb.open { display: flex; }
.bw-lb figure { margin: 0; text-align: center; }
.bw-lb img { max-width: min(86vw, 520px); max-height: 78vh; border: 8px solid #fff; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.bw-lb figcaption { color: #fff; font-family: 'Gaegu', sans-serif; font-size: 1.1rem; margin-top: .4rem; }
.bw-lb-x { position: absolute; top: 14px; right: 16px; }
.bw-lb-x, .bw-lb-nav {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.4rem;
}
.bw-lb-all { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-family: 'Gaegu', sans-serif; font-size: 1.1rem; }
@media (max-width: 560px) { .bw-lb-nav { display: none; } }

/* ---- pin your photo --------------------------------------------------------- */
.bw-modal {
    position: fixed; inset: 0; z-index: 2147483000; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(36, 29, 26, .55);
}
.bw-modal.open { display: flex; }
.bw-card {
    position: relative; width: min(100%, 440px); max-height: calc(100vh - 32px); overflow: auto;
    padding: 1.4rem 1.3rem 1.1rem; border-radius: 22px; background: #fffaf3; color: #241d1a;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35); font-family: 'Gaegu', system-ui, sans-serif;
}
.bw-card h2 { margin: 0 2rem .3rem 0; font-size: 1.6rem; line-height: 1.15; }
.bw-sub { margin: 0 0 .9rem; color: #82736a; font-size: 1.05rem; line-height: 1.35; }
.bw-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .06); cursor: pointer; font-size: 1rem; }
.bw-drop {
    display: flex; align-items: center; justify-content: center; min-height: 150px; margin-bottom: .9rem;
    border: 2px dashed rgba(212, 84, 28, .45); border-radius: 16px; background: #fff; cursor: pointer; overflow: hidden;
}
.bw-drop:focus-within, .bw-drop:hover { border-color: #d4541c; }
.bw-drop-empty { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: 1.15rem; }
.bw-drop-empty small { color: #82736a; font-size: .95rem; }
.bw-preview { max-width: 100%; max-height: 260px; display: block; }
.bw-field { display: block; margin-bottom: .8rem; font-size: 1.05rem; font-weight: 700; }
.bw-field small { font-weight: 400; color: #82736a; }
.bw-field input {
    display: block; width: 100%; margin-top: .3rem; padding: .55rem .8rem; box-sizing: border-box;
    border: 1px solid rgba(240, 168, 96, .8); border-radius: 12px; font: 1.05rem 'Gaegu', sans-serif; background: #fff;
}
.bw-check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; font-size: 1rem; line-height: 1.35; cursor: pointer; }
.bw-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #d4541c; }
.bw-check a { color: #b03d16; }
.bw-ts { display: flex; justify-content: center; margin-bottom: .6rem; }
.bw-ts[hidden] { display: none; }
.bw-msg { min-height: 1.2em; margin: 0 0 .6rem; font-size: 1rem; color: #82736a; }
.bw-msg.bad { color: #b03d16; }
.bw-send {
    display: block; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 100px; cursor: pointer;
    background: #d4541c; color: #fff; font: 700 1.15rem 'Gaegu', sans-serif;
    box-shadow: 0 10px 25px rgba(212, 84, 28, .3);
}
.bw-send:disabled { opacity: .6; cursor: default; }
.bw-fine { margin: .7rem 0 0; text-align: center; font-size: .9rem; color: #82736a; }
.bw-fine a { color: #82736a; }
.bw-done { text-align: center; padding: .6rem 0 .2rem; }
.bw-done-emo { font-size: 2.6rem; }
.bw-done p { color: #82736a; font-size: 1.05rem; line-height: 1.4; }
.bw-done a { color: #b03d16; }
/* `hidden` has to win over the display rules above. */
.bw-drop-empty[hidden], .bw-preview[hidden] { display: none; }