/* =====================================================================
   예약(입고 예정·예약판매) 공용 스타일 — 2026-10-15 신설
    · 마이페이지 '나의 예약' 탭 + 상품 상세 '예약하기/재입고 알림' 버튼 공용.
    · 기존 마이페이지(mypage.css 의 .my-*)·상품상세(shop.css 의 .pd-*) 클래스와 겹치지 않게
      전부 "rsv-" 접두를 쓴다(2단계에서 끼워 넣을 때 기존 스타일과 충돌하지 않게 하기 위함).
   ===================================================================== */

.rsv-section { margin-top: 10px; }

/* ---- 상품 상세: 예약/알림 버튼 ---- */
.rsv-buy-box { display: flex; flex-direction: column; gap: 8px; }
.rsv-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #fff4e5; color: #b9660a; width: fit-content;
}
.rsv-badge.on-sale { background: #e8f3ff; color: #1463c9; }
.rsv-eta { font-size: 12.5px; color: #777; }
.rsv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #ddd;
  background: #fff; color: #222; font-size: 15px; font-weight: 700; cursor: pointer;
}
.rsv-btn.primary { background: #222; color: #fff; border-color: #222; }
.rsv-btn:disabled { opacity: .55; cursor: not-allowed; }
.rsv-hint { font-size: 12.5px; color: #888; margin-top: 2px; }
.rsv-qty-row { display: flex; align-items: center; gap: 8px; }
.rsv-qty-row input { width: 64px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; text-align: center; }

/* ---- 마이페이지: 나의 예약 목록 ---- */
.rsv-list { display: flex; flex-direction: column; gap: 10px; }
.rsv-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid #eee; border-radius: 12px; background: #fff;
}
.rsv-card .rsv-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rsv-card .rsv-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsv-card .rsv-meta { font-size: 12.5px; color: #888; }
.rsv-card .rsv-actions { display: flex; gap: 6px; flex-shrink: 0; }

.rsv-status { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rsv-status.waiting  { background: #f1f1f1; color: #666; }
.rsv-status.ready    { background: #e8f8ee; color: #1a8a4a; }
.rsv-status.ordered  { background: #fff7e6; color: #b9660a; }
.rsv-status.paid     { background: #eef2ff; color: #3b4bd8; }
.rsv-status.expired  { background: #fdeceb; color: #c0392b; }
.rsv-status.canceled { background: #f1f1f1; color: #999; }

.rsv-mini-btn {
  padding: 6px 10px; font-size: 12.5px; border-radius: 8px; border: 1px solid #ddd;
  background: #fff; color: #333; cursor: pointer;
}
.rsv-mini-btn.primary { background: #222; color: #fff; border-color: #222; }
.rsv-mini-btn:disabled { opacity: .5; cursor: not-allowed; }

.rsv-empty { padding: 20px 0; text-align: center; color: #999; font-size: 13.5px; }

/* ---- 알림 배지(미확인) ---- */
.rsv-alert-dot {
  display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #e0302d; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.rsv-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rsv-alert-row { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: #f7f7f9; color: #444; }
.rsv-alert-row.unread { background: #fff7e6; }

/* ---- 입고 요청 게시판 ---- */
.rsv-req-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rsv-req-form input, .rsv-req-form textarea {
  padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
.rsv-req-list { display: flex; flex-direction: column; gap: 8px; }
.rsv-req-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #eee; border-radius: 10px; }
.rsv-req-name { font-size: 13.5px; font-weight: 600; }
.rsv-req-status { font-size: 11.5px; color: #888; }
.rsv-like-btn { padding: 6px 10px; border-radius: 999px; border: 1px solid #ddd; background: #fff; font-size: 12.5px; cursor: pointer; }
.rsv-like-btn.on { background: #fdeceb; border-color: #f3b5b0; color: #c0392b; }

@media (max-width: 480px) {
  .rsv-card { flex-direction: column; align-items: stretch; }
  .rsv-card .rsv-actions { justify-content: flex-end; }
}