/* Lucian UX/UI Prompt #018 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#018 */
.guest-stepper input.guest-count-refined{font-variant-numeric:tabular-nums;transform-origin:center}

/* Lucian UX/UI Prompt #072 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#072 */
.booking-card .form-error.form-inline-notice{--notice-ink:var(--brand-deep);display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--notice-ink);font-size:13px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
.booking-card .form-error.form-inline-notice:empty{display:none}
.form-inline-notice .notice-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;margin-top:2px;border:1.5px solid currentColor;border-radius:50%;font-size:12px;font-weight:700;line-height:1}
.form-inline-notice .notice-message{min-width:0}
.booking-card .field :is(input,select)[aria-invalid="true"],.booking-card .guest-stepper:has(input[aria-invalid="true"]){border-color:var(--brand);outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:600px){.booking-card .form-error.form-inline-notice{font-size:14px}}

/* Lucian UX/UI Prompt #002 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#002 */
/* Keep the hit area fixed; only directional icons acknowledge hover or keyboard focus. */
:is(.text-link,.header-book,.hero-link,.primary-button,.story-book,.stay-option) .icon:has(use[href="#i-arrow"],use[href="#i-diagonal"]){transform:none;transition:transform .16s cubic-bezier(.22,.68,0,1)}
:is(.text-link,.header-book,.hero-link,.primary-button,.story-book,.stay-option):focus-visible .icon:has(use[href="#i-arrow"]){transform:translateX(3px)}
:is(.text-link,.header-book,.hero-link,.primary-button,.story-book,.stay-option):focus-visible .icon:has(use[href="#i-diagonal"]){transform:translate(2px,-2px)}
@media(hover:hover) and (pointer:fine){
  :is(.text-link,.header-book,.hero-link,.primary-button,.story-book,.stay-option):not(:disabled):hover .icon:has(use[href="#i-arrow"]){transform:translateX(3px)}
  :is(.text-link,.header-book,.hero-link,.primary-button,.story-book,.stay-option):not(:disabled):hover .icon:has(use[href="#i-diagonal"]){transform:translate(2px,-2px)}
}
@media(prefers-reduced-motion:reduce){
  :is(.text-link,.header-book,.hero-link,.primary-button,.story-book,.stay-option) .icon:has(use[href="#i-arrow"],use[href="#i-diagonal"]){transform:none!important;transition:none}
}

/* A fixed photographic frame keeps the finite pan separate from the image reveal. */
.moment-image.photo-motion{position:relative;overflow:visible;background:transparent}
.photo-motion-viewport{overflow:hidden;aspect-ratio:1.3;background:var(--soft)}
.photo-motion-open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;transform-origin:center;cursor:zoom-in}
.moment-image.photo-motion .photo-motion-open img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform:none;transition:none}
.photo-motion-open:focus-visible{outline:3px solid var(--brand-deep);outline-offset:-6px}
.photo-motion-toggle{display:none;position:absolute;right:12px;bottom:12px;z-index:1;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--brand-deep);font-size:14px;line-height:1.4;cursor:pointer}
.photo-motion[data-photo-motion-state] .photo-motion-toggle:not([hidden]){display:inline-flex}
.photo-motion-toggle:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}
.photo-motion-toggle:active{background:var(--soft)}
@media(hover:hover) and (pointer:fine){.photo-motion-toggle:hover{background:var(--soft)}}
@media(max-width:600px){.photo-motion-viewport{aspect-ratio:1591/989}.photo-motion-toggle{right:10px;bottom:10px;padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.photo-motion-open{transform:none!important}}