/* ═══════════════════════════════════════════════════════
   HH Order Ops v4.1 — Front-end Styles
   
   Namespace: hho- (HH Order-ops)
   Design tokens: inherits from theme's --ep-* CSS vars
   with safe fallbacks so plugin works standalone.
   ═══════════════════════════════════════════════════════ */

/* ── Design Token Bridge ── */
:root {
  --hho-ink:    var(--ep-ink, #243953);
  --hho-muted:  var(--ep-muted, #acacac);
  --hho-rule:   var(--ep-rule, #eee);
  --hho-light:  var(--ep-light, #ededed);
  --hho-bg:     var(--ep-bg, #fff);
  --hho-sans:   var(--ep-sans, 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --hho-border: var(--ep-border, #e8e8e8);
  --hho-accent: var(--ep-accent, #243953);
  --hho-shadow: 0 12px 48px rgba(0, 0, 0, .18);
}


/* ═══════════════════════════════════════════════════════
   배송정보 인라인 (주소 아래, 보더 구분)
   ═══════════════════════════════════════════════════════ */

.ep-view-order__tracking-inline {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ep-mid, #e2e2e2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ep-view-order__tracking-inline + .ep-view-order__tracking-inline {
  margin-top: 12px;
  padding-top: 12px;
}

.ep-view-order__tracking-text {
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  line-height: 1.4;
}

.ep-view-order__tracking-text strong {
  font-weight: 500;
}

.ep-view-order__tracking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  font-family: var(--hho-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--hho-ink);
  background: #fff;
  border: 1px solid var(--hho-border);
  border-radius: 200px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s;
  flex-shrink: 0;
}

.ep-view-order__tracking-btn:hover {
  border-color: var(--hho-ink);
}


/* ═══════════════════════════════════════════════════════
   액션 버튼 영역 (상품 목록 안쪽, 마지막 아이템 아래)
   ═══════════════════════════════════════════════════════ */

.ep-view-order__actions {
  display: flex;
  gap: 8px;
  padding: 20px 0 4px;
}

/* ═══════════════════════════════════════════════════════
   반품 모달: 픽업 주소 입력
   ═══════════════════════════════════════════════════════ */

.hho-modal__pickup-address {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.hho-modal__field-row {
  display: flex;
  gap: 8px;
}

.hho-modal__input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}

.hho-modal__input:focus {
  border-color: var(--hho-ink);
}

.hho-modal__input--half {
  width: 50%;
}

.hho-modal__input--short {
  width: 120px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   플러그인 전용 버튼 (hho-btn)
   테마 ep-btn-s와 동일한 디자인이지만 독립 정의
   ═══════════════════════════════════════════════════════ */

.hho-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-family: var(--hho-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--hho-ink);
  background: transparent;
  border: 1px solid var(--hho-border);
  border-radius: 200px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.hho-btn:hover {
  border-color: var(--hho-ink);
}

.hho-btn--cancel {
  color: var(--hho-muted);
  border-color: var(--hho-rule);
}

.hho-btn--cancel:hover {
  color: var(--hho-ink);
  border-color: var(--hho-muted);
}

.hho-btn--primary {
  background: var(--hho-ink);
  color: #fff;
  border-color: var(--hho-ink);
}

.hho-btn--primary:hover {
  opacity: .88;
}

.hho-btn--primary:disabled {
  opacity: .45;
  cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════
   모달 — 테마 ep-terms-modal과 동일한 디자인 언어
   ═══════════════════════════════════════════════════════ */

.hho-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 250;
  align-items: center;
  justify-content: center;
}

.hho-modal--open {
  display: flex;
}

/* 백드롭 */
.hho-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
}

/* 컨텐츠 박스 — 테마 모달과 동일한 radius, shadow, animation */
.hho-modal__content {
  position: relative;
  z-index: 1;
  background: var(--hho-bg);
  width: 90vw;
  max-width: 520px;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: var(--hho-shadow);
  display: flex;
  flex-direction: column;
  animation: hho-modal-in .2s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

@keyframes hho-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 헤더 — 테마 ep-terms-modal__head와 동일 패턴 */
.hho-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hho-border);
  flex-shrink: 0;
}

.hho-modal__header h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* 닫기 버튼 — 테마 ep-terms-modal__close와 동일 */
.hho-modal__close {
  background: none;
  border: none;
  padding: 0;
  width: 28px;
  height: 28px;
  margin-right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hho-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s;
}

.hho-modal__close:hover {
  color: var(--hho-accent);
}

/* 본문 — PerfectScrollbar 대응 */
.hho-modal__body {
  padding: 20px 24px;
  flex: 1;
  overflow: hidden;
  position: relative;
  font-family: var(--hho-sans);
}

.hho-modal__body::-webkit-scrollbar {
  display: none;
}

.hho-modal__content {
  scrollbar-width: none;
}

.hho-modal__order-num {
  font-size: 13px;
  color: var(--hho-muted);
  margin: 0 0 20px;
}

.hho-modal__order-num strong {
  color: var(--hho-ink);
}

/* 섹션 타이틀 */
.hho-modal__section-title {
  font-family: var(--hho-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--hho-accent);
  margin: 0 0 10px;
}

/* 상품 선택 리스트 */
.hho-modal__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  overflow: hidden;
}

.hho-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--hho-rule);
  margin: 0;
}

.hho-modal__item:last-child {
  border-bottom: none;
}

.hho-modal__item:hover {
  background: rgba(0, 0, 0, .02);
}

.hho-modal__item input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--hho-ink);
}

.hho-modal__item-name {
  flex: 1;
  font-size: 13px;
  color: var(--hho-ink);
  line-height: 1.4;
}

.hho-modal__item-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.hho-modal__item-qty {
  width: 48px;
  height: 32px;
  text-align: center;
  border: 1px solid var(--hho-rule);
  border-radius: 4px;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  background: var(--hho-bg);
  padding: 0 4px;
}

.hho-modal__item-qty:disabled {
  background: rgba(0, 0, 0, .03);
  color: var(--hho-muted);
}

.hho-modal__item-max {
  font-size: 12px;
  color: var(--hho-muted);
  white-space: nowrap;
}

/* 라디오 그룹 */
.hho-modal__radio-group {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.hho-modal__radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  padding: 10px 16px;
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  flex: 1;
  transition: border-color .15s, background .15s;
}

.hho-modal__radio-label:has(input:checked) {
  border-color: var(--hho-ink);
  background: rgba(36, 57, 83, .04);
}

.hho-modal__radio-label input[type="radio"] {
  margin: 0;
  accent-color: var(--hho-ink);
}

/* 배송비 정보 박스 */
.hho-modal__fee-info {
  background: rgba(0, 0, 0, .02);
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.hho-modal__fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
}

.hho-modal__fee-row--total {
  border-top: 1px solid var(--hho-rule);
  margin-top: 8px;
  padding-top: 10px;
}

.hho-modal__fee-row--total strong {
  color: var(--hho-ink);
  font-size: 14px;
}

/* 체크박스 라벨 */
.hho-modal__checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  padding: 6px 0;
}

.hho-modal__checkbox-label input[type="checkbox"] {
  margin: 0;
  accent-color: var(--hho-ink);
}

/* 섹션 래퍼 */
.hho-modal__section {
  margin-bottom: 20px;
}

/* 셀렉트 */
.hho-modal__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  background: var(--hho-bg);
  margin-bottom: 20px;
  appearance: auto;
}

/* 텍스트에어리어 */
.hho-modal__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  font-family: var(--hho-sans);
  font-size: 13px;
  color: var(--hho-ink);
  resize: vertical;
  box-sizing: border-box;
}

.hho-modal__textarea:focus,
.hho-modal__select:focus,
.hho-modal__item-qty:focus {
  outline: none;
  border-color: var(--hho-ink);
}

/* 푸터 */
.hho-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--hho-border);
  flex-shrink: 0;
}

/* 성공 메시지 */
.hho-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.hho-modal__success svg {
  color: #10b981;
  margin-bottom: 16px;
}

.hho-modal__success p {
  font-family: var(--hho-sans);
  font-size: 14px;
  color: var(--hho-ink);
  margin: 0 0 24px;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════
   교환/반품 내역 카드
   ═══════════════════════════════════════════════════════ */

.ep-aftersales-history {
  margin: 32px 0;
}

.ep-as-card {
  border: 1px solid var(--hho-rule);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.ep-as-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hho-rule);
}

.ep-as-card__type {
  font-family: var(--hho-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--hho-ink);
}

.ep-as-card__status {
  font-family: var(--hho-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 200px;
}

.ep-as--pending {
  background: #e0f2fe;
  color: #0c4a6e;
}

.ep-as--approved {
  background: #d1fae5;
  color: #065f46;
}

.ep-as--rejected {
  background: #fee2e2;
  color: #991b1b;
}

.ep-as-card__body {
  padding: 12px 16px;
}

.ep-as-card__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-family: var(--hho-sans);
  font-size: 13px;
}

.ep-as-card__row span:first-child {
  flex-shrink: 0;
  min-width: 50px;
}

.ep-as-card__row span:last-child {
  color: var(--hho-ink);
  text-align: right;
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════
   커스텀 주문 상태 도트 색상 (테마 연동)
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .hho-modal__content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    animation: hho-modal-in-mobile .25s cubic-bezier(.22, 1, .36, 1);
  }

  @keyframes hho-modal-in-mobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hho-modal__body {
    padding: 20px 16px;
  }

  .hho-modal__footer {
    padding: 14px 16px;
  }

  .hho-modal__radio-group {
    flex-direction: column;
    gap: 6px;
  }

  .ep-view-order__actions {
    gap: 6px;
  }

  .ep-view-order__actions .ep-btn-s {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 8px 0;
  }

  .ep-as-card__row {
    flex-direction: column;
    gap: 2px;
  }

  .ep-as-card__row span:last-child {
    text-align: left;
  }
}