/* ==============================================
   lecture-datetime.css
   강의 일시 선택 컴포넌트 + 모바일 바텀시트
   style.css 다음에 <link> 추가
   ============================================== */


/* ════════════════════════════════════════════
   [공통] 날짜 select / 시간 슬롯 공유 스타일
   ════════════════════════════════════════════ */

.datetime-field-label {
  font-size: 12px;
  font-weight: 700;
  color: #898A8E;
  letter-spacing: .03em;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.datetime-field-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background-color: #19CEB3;
  border-radius: 2px;
  flex-shrink: 0;
}

/* 날짜 select */
.date-select-box {
  width: 100%;
  border: 1.5px solid #E6E6E6;
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23898A8E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  font-size: 15px;
  font-weight: 600;
  color: #1F2022;
  padding: 13px 38px 13px 15px;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s;
  font-family: inherit;
  line-height: 1.2;
}
.date-select-box:focus         { outline: none; border-color: #19CEB3; }
.date-select-box.is-selected   { border-color: #00103E; color: #00103E; }

/* 잔여석 요약 */
.seats-summary {
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 12px;
  color: #898A8E;
  justify-content: flex-end;
}
.seats-summary.visible { display: flex; }

.seats-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.seats-dot.enough { background-color: #19CEB3; }
.seats-dot.few    { background-color: #FF8A00; }
.seats-dot.full   { background-color: #DADADA; }

/* 날짜 미선택 안내 */
.time-empty-state {
  padding: 20px 0 4px;
  text-align: center;
  color: #C8C9CB;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.time-empty-state .empty-ic {
  width: 34px; height: 34px; border-radius: 50%;
  background-color: #F4F4F4;
  display: flex; align-items: center; justify-content: center;
}

/* 시간 그룹 */
.time-group { margin-bottom: 12px; }
.time-group:last-child { margin-bottom: 0; }
.time-group-title {
  font-size: 11px; font-weight: 700;
  color: #898A8E; letter-spacing: .04em; margin-bottom: 7px;
}

/* 슬롯 그리드 */
.time-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.time-slot {
  border: 1.5px solid #E6E6E6; border-radius: 7px;
  padding: 9px 5px 8px; text-align: center; cursor: pointer;
  background-color: #fff; transition: border-color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.time-slot:hover:not(.is-full)    { border-color: #19CEB3; background-color: #F0FBF9; }
.time-slot.is-selected            { border-color: #19CEB3; background-color: #19CEB3; }
.time-slot.is-full                { background-color: #F8F9FA; cursor: default; }

.time-slot .st-time { font-size: 13px; font-weight: 700; color: #1F2022; line-height: 1; margin-bottom: 5px; }
.time-slot.is-full .st-time     { color: #C8C9CB; }
.time-slot.is-selected .st-time { color: #fff; }

.time-slot .st-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 5px; border-radius: 3px; line-height: 1.4; white-space: nowrap;
}
.time-slot .st-badge.enough          { background-color: #E8FBF8; color: #0FA898; }
.time-slot .st-badge.few             { background-color: #FFF4EA; color: #D97700; }
.time-slot .st-badge.full            { background-color: #F0F0F0; color: #C8C9CB; }
.time-slot.is-selected .st-badge     { background-color: rgba(255,255,255,.22); color: #fff; }

/* 선택 요약 바 */
.confirm-summary-bar {
  display: flex; align-items: center; gap: 10px;
  background-color: #F8F9FA; border-radius: 8px;
  padding: 11px 14px; margin-bottom: 10px;
  min-height: 48px; transition: background-color .2s;
}
.confirm-summary-bar.is-active { background-color: #E8FBF8; }

.confirm-check-ic {
  width: 28px; height: 28px; border-radius: 50%;
  background-color: #DADADA; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s;
}
.confirm-summary-bar.is-active .confirm-check-ic { background-color: #19CEB3; }

.confirm-summary-bar .cs-label  { font-size: 11px; font-weight: 700; color: #898A8E; margin-bottom: 1px; }
.confirm-summary-bar.is-active .cs-label { color: #0FA898; }
.confirm-summary-bar .cs-val    { font-size: 12px; font-weight: 600; color: #BCBDC1; line-height: 1.35; }
.confirm-summary-bar.is-active .cs-val   { color: #00103E; }

/* 결제하기 비활성 */
.btns-wrap .btn.large.on.is-disabled {
  background-color: #DADADA; border-color: #DADADA;
  color: #898A8E; cursor: default; pointer-events: none;
}
.btns-wrap .btn.large.darkgray { display: none; }

/* 안내 문구 */
.datetime-noti { padding: 0 0 6px; }
.datetime-noti ul { list-style: none; padding: 0; margin: 0; }
.datetime-noti ul li {
  font-size: 12px; color: #898A8E; line-height: 1.55;
  padding-left: 10px; position: relative;
}
.datetime-noti ul li::before { content: '·'; position: absolute; left: 3px; color: #BCBDC1; }


/* ════════════════════════════════════════════
   [데스크톱] aside 패딩
   ════════════════════════════════════════════ */

.payment-top { padding: 20px 30px 0; }
.payment-top .price-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid #F0F0F0;
}

.datetime-section        { padding: 16px 30px 0; }
.datetime-divider        { height: 1px; background-color: #F0F0F0; margin: 18px 30px 0; }
.datetime-confirm        { padding: 16px 30px; }


/* ════════════════════════════════════════════
   [모바일] 하단 고정 바 + 바텀시트
   ════════════════════════════════════════════ */

/* 하단 고정 바 — 기본 숨김, 모바일에서만 표시 */
.mobile-bottom-bar {
  display: none;
}

@media screen and (max-width: 768px) {

  /* aside 는 모바일에서 숨김 */
  .education-post.aside { display: none !important; }

  /* ── 하단 고정 바 ── */
  .mobile-bottom-bar {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    background-color: #fff;
    border-top: 1px solid #E6E6E6;
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }

  .mobile-bottom-bar .mbb-inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* 선택된 일시 텍스트 영역 */
  .mobile-bottom-bar .mbb-info {
    flex: 1;
    min-width: 0;
  }

  .mobile-bottom-bar .mbb-price {
    font-size: 18px;
    font-weight: 700;
    color: #1F2022;
    letter-spacing: -.5px;
    line-height: 1.2;
  }

  .mobile-bottom-bar .mbb-selected {
    font-size: 11px;
    color: #898A8E;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-bottom-bar .mbb-selected.is-set { color: #0FA898; font-weight: 600; }

  /* 결제하기 버튼 */
  .mobile-bottom-bar .btn-mbb-pay {
    flex-shrink: 0;
  	border-color: #19CEB3;
  	background-color: #19CEB3;
  	color: #FFF;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 22px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s;
    white-space: nowrap;
    line-height: 1;
  }

  .mobile-bottom-bar .btn-mbb-pay.is-ready {
    background-color: #00103E;
    color: #fff;
    cursor: pointer;
  }

  /* 페이지 하단 여백 (fixed bar 가려지지 않게) */
  #main { padding-bottom: 90px; }


  /* ── 바텀시트 오버레이 ── */
  .bs-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 1100;
    opacity: 0;
    transition: opacity .3s;
  }
  .bs-overlay.is-open { display: block; }
  .bs-overlay.is-visible { opacity: 1; }


  /* ── 바텀시트 패널 ── */
  .bs-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .bs-panel.is-open { transform: translateY(0); }

  /* 드래그 핸들 */
  .bs-handle {
    width: 36px; height: 4px;
    background-color: #DADADA; border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  /* 바텀시트 헤더 */
  .bs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #F0F0F0;
    flex-shrink: 0;
  }

  .bs-header .bs-title {
    font-size: 16px; font-weight: 700; color: #1F2022;
  }

  .bs-header .bs-title small {
    font-size: 13px; font-weight: 500; color: #898A8E; margin-left: 6px;
  }

  .bs-close {
    width: 32px; height: 32px;
    border: none; background: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    color: #898A8E;
  }

  /* 바텀시트 스크롤 바디 */
  .bs-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 20px;
    flex: 1;
  }

  .bs-body .datetime-section  { padding: 0 0 14px; }
  .bs-body .datetime-divider  { margin: 4px 0 16px; }
  .bs-body .confirm-summary-bar { margin-bottom: 0; }

  /* 바텀시트 하단 버튼 영역 */
  .bs-footer {
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #F0F0F0;
    flex-shrink: 0;
  }

  .bs-footer .btn-bs-pay {
    display: block; width: 100%;
    background-color: #DADADA; border: none; border-radius: 10px;
    font-size: 16px; font-weight: 700; color: #898A8E;
    padding: 16px 20px; font-family: inherit; cursor: default;
    transition: background-color .15s; line-height: 1;
  }

  .bs-footer .btn-bs-pay.is-ready {
  	border-color: #19CEB3;
  	background-color: #19CEB3;
  	color: #FFF;
  	cursor: pointer;
  }

  /* 안내 문구 */
  .bs-body .datetime-noti { padding: 12px 0 0; }

  /* 데스크톱 전용 padding 재정의 */
  .datetime-section  { padding: 0 0 14px; }
  .datetime-divider  { margin: 4px 0 12px; }
  .datetime-confirm  { padding: 0; }

}


/* ════════════════════════════════════════════
   [데스크톱] 1024px 이하 패딩 조정
   ════════════════════════════════════════════ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .payment-top,
  .datetime-section,
  .datetime-confirm  { padding-left: 25px; padding-right: 25px; }
  .datetime-noti     { padding-left: 25px; padding-right: 25px; }
  .datetime-divider  { margin-left: 25px; margin-right: 25px; }
}