/* 오더잇다 손님 페이지(/me…) 공통 스타일 — v7.0 리디자인(2026-09-07)의 덮어쓰기 블록. 색은 :root 토큰(--brand…)만 바꾸면 전체가 따라온다 */
:root {
  --brand: #B81B3E;
  --brand-dark: #8F122E;
  --brand-light: #D92B52;
  --brand-surface: #FFF0F3;
  --brand-border: #F7CCD4;
  --brand-gradient: linear-gradient(135deg, #8F122E 0%, #B81B3E 60%, #D92B52 100%);
  --brand-shadow: 0 10px 24px rgba(184, 27, 62, 0.28);
}
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  background: #f4f5f7 !important;
  margin: 0;
  padding: 0;
}
.header-wrapper[data-pc-only] .header-logo .btn-logo {
  background: none !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
}
.header-wrapper[data-mobile-only] .btn-logo {
  background: none !important;
}
.docker-item.active .txt {
  color: var(--brand) !important;
  font-weight: 800 !important;
}

/* ========================================================== */
/* CONTRAST FIX: Text on Brand Background Must Be Pure White  */
/* ========================================================== */
.btn-primary, .btn-primary *,
.btn-spot, .btn-spot *,
.btn-line-primary.btn-line-bold, .btn-line-primary.btn-line-bold *,
.btn-primary .text, .btn-spot .text, .btn-line-primary.btn-line-bold .text {
  color: #ffffff !important;
}
.btn-primary, .btn-spot, .btn-line-primary.btn-line-bold {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Neutral gray badges (e.g. 픽업+매장 on coupon cards) must stay clean neutral */
.badge-fill-light-gray02 {
  background-color: #f0f2f5 !important;
  border-color: #e2e5e8 !important;
}
.badge-fill-light-gray02, .badge-fill-light-gray02 * {
  color: #495057 !important;
  font-weight: 600 !important;
}

/* Brand badges (오더잇다) */
.badge-primary, .badge-eatz {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.badge-primary, .badge-primary *,
.badge-eatz, .badge-eatz * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Krispy & Angelinus brand badges in stamps */
.badge-krispy {
  background-color: rgba(0, 155, 82, 0.12) !important;
  border-color: rgba(0, 155, 82, 0.3) !important;
}
.badge-krispy, .badge-krispy * {
  color: #007a41 !important;
  font-weight: 700 !important;
}
.badge-angelinus {
  background-color: rgba(153, 131, 112, 0.14) !important;
  border-color: rgba(153, 131, 112, 0.35) !important;
}
.badge-angelinus, .badge-angelinus * {
  color: #6d5440 !important;
  font-weight: 700 !important;
}

/* Notice labels (공지, 잇다 마일) */
.label-notice {
  background-color: var(--brand) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
}
.label-notice, .label-notice * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Generic badge-md with brand color */
.badge-md:not(.badge-fill-light-gray02):not(.badge-krispy):not(.badge-angelinus) {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.badge-md:not(.badge-fill-light-gray02):not(.badge-krispy):not(.badge-angelinus),
.badge-md:not(.badge-fill-light-gray02):not(.badge-krispy):not(.badge-angelinus) * {
  color: #ffffff !important;
}

/* Profile Card contrast guarantee */
.aside-spot-box, .aside-spot-box a, .aside-spot-box span, .aside-spot-box button, .aside-spot-box div {
  color: #ffffff !important;
}
.aside-spot-box #meUserName, .aside-spot-box .cont-tit a {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}
.aside-spot-box a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Active tabs underline */
.tab-item.active .tab-link, .tab-item.ui-state-active .tab-link {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  font-weight: 800 !important;
  background: transparent !important;
}
.tab-item.active .tab-link .text, .tab-item.ui-state-active .tab-link .text {
  color: var(--brand) !important;
  font-weight: 800 !important;
}
.fold-item.active .fold-view {
  display: block !important;
}
.fold-item.active .btn-fold .arrow {
  transform: rotate(180deg);
}
.fold-item .fold-view {
  display: none;
}