/*
 * medishop front styles.
 * On the reum theme, css/style.css already styles these classes, so all decorative
 * rules below are scoped under `.medishop-fallback` (a body class only emitted by the
 * plugin's fallback header). That lets the active theme's own styling win on reum and
 * only kicks in on other themes that lack it.
 * Plugin-logic rules that every theme needs (e.g. hiding the pre-verify block) stay global.
 */

/* ---- Global plugin-logic helpers (all themes) ---- */
.medishop-verified-block { display: none; }

/*
 * 본인인증 입력폼은 테마의 `.user-form`(design ref: evt08-2, 260901 예약수정)을 그대로 재사용한다.
 * 라벨/인풋/버튼 스타일은 테마 css가 전담하므로 여기서는 플러그인 전용 보정만 둔다.
 */
/* 인증번호 발송 전에는 카운트다운(02:00) 숨김 — 발송 시 JS가 노출. */
.user-form .inp-btn .inp-time .time[hidden] { display: none; }
/* 예약확인(내 예약) 인증화면은 전폭 .reserve-login 안이라 폼이 과하게 넓어짐 → 폭 제한 + 가운데 정렬. */
.reserve-login .user-form { max-width: 440px; margin: 0 auto; }
/* SMS 미사용 내 예약 조회: 예약일자(date) 입력란도 테마 텍스트 입력과 동일한 높이/테두리. */
.user-form .val input[type="date"] { width: 100%; height: 48px; font-size: 14px; color: #767676; border: 1px solid #E5E5EC; padding: 0 16px; background: #fff; box-sizing: border-box; }
.medishop-idf-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.65px; color: #848484; }

/* 개인정보 처리방침 팝업 (예약진행 약관 자세히). self-contained. */
.medishop-policy-modal[hidden] { display: none; }
.medishop-policy-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.medishop-policy-modal .medishop-policy-dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.medishop-policy-modal .medishop-policy-box { position: relative; z-index: 1; width: 560px; max-width: 90%; max-height: 80vh; overflow-y: auto; background: #fff; border-radius: 8px; padding: 28px 24px; box-sizing: border-box; }
.medishop-policy-modal .medishop-policy-title { display: block; font-size: 20px; font-weight: 700; color: #333; margin-bottom: 16px; padding-right: 24px; }
.medishop-policy-modal .medishop-policy-body { font-size: 14px; line-height: 1.7; color: #555; word-break: keep-all; }
.medishop-policy-modal .medishop-policy-body p { margin: 0 0 10px; }
.medishop-policy-modal button.medishop-policy-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #888; cursor: pointer; }

/* Cart: reveal the per-item delete (X) button. The reum theme hides .label .delete
 * by default and only shows it on the booking (.reserve-form) page, leaving the cart
 * with no way to remove an item. */
.cartchk-page .newevt-detail .label .delete { display: block; }

/* Booking datepicker: closed days (weekly 휴무 + 예외 휴무) shown grey and unselectable.
 * The rule also targets the AirDatepicker `-disabled-` state so our grey wins over its
 * default disabled color once the cell is marked disabled. */
.air-datepicker-cell.medishop-holiday,
.air-datepicker-cell.-day-.medishop-holiday,
.air-datepicker-cell.-disabled-.medishop-holiday { color: #B7B7B7; }

/* 예약 달력 셀 색상(디자인 요청). 테마는 셀 뒤 `::after` 원으로 배경을 그림.
 * 예약가능+미선택 hover → 배경 #F8DDCF / 글자 #C6734A. 선택 → 배경 #C6734A / 글자 #fff. */
.reserve-form .air-datepicker-cell.-day-:not(.-disabled-):not(.-selected-):hover { color: #C6734A !important; }
.reserve-form .air-datepicker-cell.-day-:not(.-disabled-):not(.-selected-):hover::after { background-color: #F8DDCF !important; opacity: 1 !important; }
.reserve-form .air-datepicker-cell.-selected-,
.reserve-form .air-datepicker-cell.-selected-.-focus,
.reserve-form .air-datepicker-cell.-selected-:hover { color: #FFFFFF !important; }
.reserve-form .air-datepicker-cell.-selected-::after,
.reserve-form .air-datepicker-cell.-selected-.-focus::after,
.reserve-form .air-datepicker-cell.-selected-:hover::after { background-color: #C6734A !important; opacity: 1 !important; }

/*
 * Booking page, mobile (≤768px):
 *  - Empty state (li.nolist) fixed height 528px is far too tall on phones → shrink.
 *  - The two empty-state buttons (첫방문 상담 = grey-btn, 다른 시술 추가하기 = brown-btn)
 *    have mismatched heights (theme sets brown-btn 58px, grey-btn unset) → unify to 58px.
 */
@media all and (max-width: 768px) {
    .reserve-form .left .detail-list li.nolist { height: auto; padding: 40px 16px; }
    .reserve-form .left .detail-list ul .btn-wrap .grey-btn,
    .reserve-form .left .detail-list ul .btn-wrap .brown-btn { height: 58px; }
}

/* Booking page: selected-treatment box border color per design (#E5E5E5).
 * Theme sets `.newevt-detail .detail-list .label { border:1px solid #ccc }`;
 * scope to .reserve-form to raise specificity and recolor only the booking boxes. */
.reserve-form .newevt-detail .detail-list .label { border-color: #E5E5E5; }

/* Detail buttons: 시술목록 : 장바구니 : 예약하기 = 1 : 2 : 2 (theme sets all flex:1). */
.newevt-detail .btn-wrap .medishop-detail-tolist { flex: 1; }
.newevt-detail .btn-wrap .medishop-detail-cart { flex: 2; }
.newevt-detail .btn-wrap .medishop-detail-book { flex: 2; }

/* Detail thumbnail: fit inside the fixed design box (700×393) without cropping.
 * Theme uses object-fit: cover; override to contain (letterbox) over a neutral
 * fill so mismatched ratios shrink on the short axis instead of being cropped. */
.newevt-detail .thumb-wrap .img { background: #f5f5f5; }
.newevt-detail .thumb-wrap .img img { object-fit: contain; }

/*
 * Category top image slot (all themes): fixed 16:9 box, cover-crop so odd
 * ratios don't break the layout. The reum theme never styles this .imgbox.
 */
.newevt-wrap .contents .video-imgbox .swiper-slide .imgbox { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.newevt-wrap .contents .video-imgbox .swiper-slide .imgbox img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * List thumbnail (task: fix design size + letterbox). The evt01 design fixes
 * the thumbnail box height; admin images of any ratio must fit inside it
 * without cropping, so we use object-fit: contain (letterbox) over a neutral
 * fill instead of cover. The extra `a` in the selector raises specificity
 * above the theme's own object-fit: cover rule (which loads earlier).
 */
.newevt-wrap .contents .evt-list li .img { overflow: hidden; background: #f5f5f5; }
.newevt-wrap .contents .evt-list li a .img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
@media all and (min-width: 1026px) {
    /* `.img` is a flex item in a column-flex <a>; the theme's `.txtbox{height:100%}`
     * makes it shrink below its size, so we pin the design box (392×220 → width fills
     * the ~392px column, height fixed 220) and forbid shrinking. */
    .newevt-wrap .contents .evt-list li .img { flex: 0 0 auto; width: 100%; height: 220px; }
}

/*
 * Odd treatment count: the theme uses flex-grow:1, so a lone item on the last
 * row stretches to fill both columns. Pin flex-grow:0 so it keeps one-column
 * width (48%). Mobile switches to width:100% column layout — unaffected.
 */
.newevt-wrap .contents .evt-list li { flex-grow: 0; }

/*
 * Hover: swap the "more" arrow's foreground/background — brown circle + white
 * arrow (design icon is a near-white circle #FFFBF9 with a brown #C6734A arrow).
 * A CSS `filter: invert()` would recolor every channel (brown→cyan, white→black)
 * instead of swapping the two, so we override the background with a recolored
 * inline SVG data URI (self-contained, no theme asset dependency).
 */
.newevt-wrap .contents .evt-list li a .txtbox .price i { transition: background-image .2s ease; }
.newevt-wrap .contents .evt-list li a:hover .txtbox .price i {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' rx='24' fill='%23C6734A'/%3E%3Cpath d='M25.8462 29.6542L24.7923 28.5697L28.6115 24.7504H16.5V23.2504H28.6115L24.7923 19.4312L25.8462 18.3467L31.5 24.0004L25.8462 29.6542Z' fill='%23FFFBF9'/%3E%3C/svg%3E");
}

/*
 * Multi-video top content: show a title under each video (design ref: evt02).
 * The theme styles the equipment-page equivalent but not this .video-imgbox
 * slide, so we position + size the per-video <strong> here.
 */
/* Values mirror the kboard evtskin (design ref /evt02): gap 42px, 20px/#333,
 * line-height 1.2, centered. That skin CSS isn't loaded on medishop pages, so we
 * replicate it here. Mobile (≤768px) drops to 25px gap / 12px like the skin. */
.newevt-wrap .contents .video-imgbox .swiper-slide strong { display: block; margin-top: 42px; text-align: center; font-size: 20px; line-height: 1.2; color: #333; }
@media all and (max-width: 768px) {
    .newevt-wrap .contents .video-imgbox .swiper-slide strong { margin-top: 25px; font-size: 12px; }
}

/* ---- Fallback-only decorative styles (non-reum themes) ---- */
.medishop-fallback #wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.medishop-fallback header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #eee; }
.medishop-fallback header .util a { margin-left: 12px; text-decoration: none; }

.medishop-fallback .newevt-tag span { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-right: 3px; color: #fff; }
.medishop-fallback .newevt-tag .hot { background: #e53935; }
.medishop-fallback .newevt-tag .rcm { background: #8e24aa; }
.medishop-fallback .newevt-tag .new { background: #1e88e5; }
.medishop-fallback .newevt-tag .best { background: #f4511e; }
.medishop-fallback .newevt-tag .first01 { background: #00897b; }
.medishop-fallback .newevt-tag .first02 { background: #3949ab; }
.medishop-fallback .newevt-tag .limit { background: #6d4c41; }

.medishop-fallback .time-wrap { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.medishop-fallback .time-wrap li button { padding: 8px 14px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 4px; }
.medishop-fallback .time-wrap li.disabled button { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.medishop-fallback .time-wrap li.selected button { background: #6d4c41; color: #fff; border-color: #6d4c41; }