/* ==========================================================================
   wt_reservation — 예약 폼 레이어팝업
   PC: 우측 하단 카드 / 모바일: 하단 시트
   Salient 테마 위에서 동작하므로 레이아웃 핵심값은 !important 로 고정.
   ========================================================================== */

html body .wtr-popup {
    position: fixed !important;
    z-index: 999999 !important;
    inset: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    width: 400px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}

html body .wtr-popup[hidden] {
    display: none !important;
}

html body .wtr-popup.wtr-popup--open {
    display: block !important;
}

/* PC 에서는 카드형이라 오버레이 없음 */
html body .wtr-popup__overlay {
    display: none !important;
}

html body .wtr-popup__panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-height: calc(100vh - 48px) !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08) !important;
    overflow: hidden !important;
    transform: translateY(16px);
    opacity: 0;
    transition: transform .26s cubic-bezier(.22, .9, .3, 1), opacity .2s ease;
    will-change: transform, opacity;
}

html body .wtr-popup.wtr-popup--open .wtr-popup__panel {
    transform: translateY(0);
    opacity: 1;
}

/* --- 헤더 --- */
html body .wtr-popup__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    padding: 14px 14px 14px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
}

html body .wtr-popup__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1d1d1f !important;
    letter-spacing: -.01em !important;
    margin: 0 !important;
}

html body button.wtr-popup__close {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #6b6b6b !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

html body button.wtr-popup__close:hover,
html body button.wtr-popup__close:focus-visible {
    background: #f2f2f2 !important;
    color: #1d1d1f !important;
}

/* --- 본문 (폼) --- */
html body .wtr-popup__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 20px !important;
    margin: 0 !important;
    background: #fff !important;
}

html body .wtr-popup__body > .wt-rsv {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* flatpickr 가 팝업 위로 올라오도록 */
html body .flatpickr-calendar {
    z-index: 1000001 !important;
}

/* --- 모바일: 하단 시트 --- */
@media (max-width: 640px) {
    html body .wtr-popup {
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        top: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    html body .wtr-popup__overlay {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, .45) !important;
        opacity: 0;
        transition: opacity .24s ease;
    }

    html body .wtr-popup.wtr-popup--open .wtr-popup__overlay {
        opacity: 1;
    }

    html body .wtr-popup__panel {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 88vh !important;
        max-height: 88dvh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.22, .9, .3, 1), opacity .2s ease;
    }

    html body .wtr-popup__header {
        padding: 14px 12px 14px 16px !important;
    }

    html body .wtr-popup__body {
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .wtr-popup__panel,
    html body .wtr-popup__overlay {
        transition: none !important;
    }
}

/* ==========================================================================
   팝업 안쪽 폼 미세조정 — 이 파일은 팝업에서만 로드되므로
   /booking/reservation/ 등 기존 폼에는 영향이 없다.
   ① 이름 입력칸 확보: 바깥 여백을 줄여 타이핑 영역을 넓힌다
   ② 글자 크기를 전반적으로 2px 줄인다
   ========================================================================== */

/* --- ① 여백 축소 --- */
html body .wtr-popup .wt-rsv__form {
    padding: 12px !important;
}

html body .wtr-popup .wt-rsv__form input.wt-rsv__input {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

html body .wtr-popup .wt-rsv__form select.wt-rsv__select {
    padding-left: .5rem !important;
    padding-right: 1.6rem !important;   /* 화살표 자리는 남긴다 */
}

html body .wtr-popup .wt-rsv__form textarea.wt-rsv__input,
html body .wtr-popup .wt-rsv__form textarea.wt-rsv__textarea {
    padding: .5rem !important;
}

/* 성별 버튼 폭 축소 — 인라인 !important 는 popup.js 에서 함께 처리한다 */
html body .wtr-popup .wt-rsv__gender-btns {
    flex-shrink: 0 !important;
}

/* --- ② 글자 크기 2px 축소 --- */
html body .wtr-popup .wtr-popup__title      { font-size: 13px !important; }

html body .wtr-popup .wt-rsv__label         { font-size: calc(.7rem - 2px) !important; }
html body .wtr-popup .wt-rsv__form input.wt-rsv__input,
html body .wtr-popup .wt-rsv__form select.wt-rsv__select,
html body .wtr-popup .wt-rsv__form textarea.wt-rsv__input,
html body .wtr-popup .wt-rsv__form textarea.wt-rsv__textarea,
html body .wtr-popup .wt-rsv__input,
html body .wtr-popup .wt-rsv__select        { font-size: 12px !important; }

html body .wtr-popup .wt-rsv__notice        { font-size: calc(.85rem - 2px) !important; }
html body .wtr-popup .wt-rsv__warning       { font-size: calc(.9rem  - 2px) !important; }
html body .wtr-popup .wt-rsv__or            { font-size: calc(.85rem - 2px) !important; }
/* 동의 문구는 마크업의 <style> 이 .wt-rsv__consent * 로 14px 을 강제한다.
   라벨에만 규칙을 걸면 안쪽 span 이 안 줄어드니 자식까지 함께 지정한다. */
html body .wtr-popup .wt-rsv .wt-rsv__consent,
html body .wtr-popup .wt-rsv .wt-rsv__consent *  { font-size: 12px !important; }
html body .wtr-popup .wt-rsv__alert         { font-size: calc(.95rem - 2px) !important; }
html body .wtr-popup .wt-rsv__success       { font-size: calc(1rem   - 2px) !important; }
html body .wtr-popup .wt-rsv__slot span     { font-size: calc(.95rem - 2px) !important; }
html body .wtr-popup .wt-rsv__event-radio span,
html body .wtr-popup .wt-rsv__method-radio span strong { font-size: calc(1rem - 2px) !important; }
html body .wtr-popup .wt-rsv__method-radio span small  { font-size: calc(.8rem - 2px) !important; }

html body .wtr-popup .wt-rsv__btn--primary,
html body .wtr-popup .wt-rsv__btn--naver,
html body.ascend .wtr-popup .wt-rsv .wt-rsv__form .wt-rsv__group--submit button.wt-rsv__btn--primary {
    font-size: calc(1.05rem - 2px) !important;
}

/* ==========================================================================
   상품 버튼으로 미리 골라진 이벤트 표시
   상세페이지에서 '이 상품으로 예약하기' 를 눌러 들어온 경우, 어떤 상품이
   골라져 있는지 한눈에 보이도록 셀렉트 박스에 반투명 빨간 라인을 두른다.
   사용자가 다른 이벤트를 고르면 popup.js 가 클래스를 걷어낸다.
   ========================================================================== */
html body .wtr-popup .wt-rsv .wt-rsv__form select.wt-rsv__select.wtr-preselected,
html body .wtr-popup .wt-rsv select.wt-rsv__select.wtr-preselected {
    border-color: rgba(214, 48, 49, .55) !important;
    box-shadow: 0 0 0 2px rgba(214, 48, 49, .16) !important;
}

/* 포커스 시에는 폼 기본 강조색을 그대로 쓴다 (표시가 겹쳐 지저분해지지 않게) */
html body .wtr-popup .wt-rsv select.wt-rsv__select.wtr-preselected:focus-visible {
    box-shadow: none !important;
}