/* ================== 1. Theme Variables ================== */
:root {
  --hw-bg:            #f5f5f5;
  --hw-card-soft:     #fff7f1;
  --hw-border:        #e4e4e4;
  --hw-text-main:     #222222;
  --hw-text-sub:      #666666;
  --hw-orange:        #ff4f00;
  --hw-orange-soft:   #ff6a26;
  --hw-orange-tint:   #ffe7d4;
  /* 兼容旧写法 */
  --hw-text:          var(--hw-text-main);
  --hw-heading:       var(--hw-text-main);
  --hw-muted:         var(--hw-text-sub);
  
  --hw-header-height: 78px;
}

/* ================== 2. Base Page Background & Font ================== */
body.post-page,
body.terms-page,
body.refund-page,
body.cookies-page,
body.home-page,
body.hibachiw-page,
body.menulocations-page,
body.photovideo-page,
body.faq-page,
body.promo-page,
body.rentals-page,
body.contact-page,
body.landing-seo,
body.menu-page,
body.locations-page,
body.northeast-page,
body.florida-region-page,
body.new-england-page,
body.time-page,
body.form-page,
body.blog-detail-page,
body.blog-page,
body.privacy-page,
body.landing-google,
body.confirm-page,
body.cancel-page,
body.cancelmail-page {
  margin: 0;
  background: #f5f5f5;
  color: var(--hw-text-main);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    system-ui,
    Arial,
    sans-serif;
}
/* ==================  Base Page Background & Font ================== */
img {
  display: block;
  max-width: 100%;
}

/* ================== 3. Accessibility ================== */
.hw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================== 4. Layout Helper ================== */
.hw-container {
  width: 100%;
  padding-inline: var(--bs-gutter-x, .75rem);
  margin-inline: auto;
}

/* ================== 5. Card System ================== */
.hw-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid var(--hw-border);
  padding: 28px 32px 30px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.8);
}

.hw-card-soft {
  background: #fff7f1;
  border-radius: 14px;
  border: 1px solid var(--hw-orange-tint);
}

/* ================== 6. List Reset ================== */
.hw-clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hw-clean-list li {
  font-size: 17px;
  margin: 8px 0;
}

#menu-by-state,
#contact-info,
#date-picker {
  scroll-margin-top: calc(var(--hw-header-height) + 16px);
}

/* =================================================================================
   Hibachi W · Button System (FINAL)
================================================================================= */
.hw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 35px;
  border-radius: 999px;
  background: var(--btn-bg, transparent);
  color: var(--btn-text, inherit);
  border: 1px solid var(--btn-border, transparent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .14s ease;
}

/* Hover：统一交互（不允许在 skin 里再写） */
.hw-btn:hover {
  background: var(--btn-bg-hover, var(--btn-bg));
  color: var(--btn-text-hover, var(--btn-text));
  transform: translateY(-1px);
}

/* Active：按压感 */
.hw-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Focus：无障碍 */
.hw-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,79,0,.35),
    0 6px 14px rgba(0,0,0,.12);
}

/* Disabled */
.hw-btn[disabled],
.hw-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Arrow / Icon 微动效 */
.hw-btn i {
  transition: transform .18s ease;
}
.hw-btn:hover i {
  transform: translateX(3px);
}

/* 去下划线（a 标签） */
.hw-btn,
.hw-btn:visited {
  text-decoration: none;
}

/* 布局辅助 */
.hw-btn-center {
  text-align: center;
  margin: 24px;
}
.hw-btn:focus,
.hw-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,79,0,.35),
    0 6px 14px rgba(0,0,0,.12);
}
/* ================== Skins（视觉皮肤 · 只写变量） ================== */

/* 1️⃣ Primary —— 主转化 CTA */
.hw-btn--primary {
  --btn-bg: var(--hw-orange);
  --btn-bg-hover: var(--hw-orange-soft);
  --btn-text: #ffffff;
  --btn-text-hover: #111111;
  --btn-border: #e3e3e3;

  font-weight: 600;
}

/* 2️⃣ Ghost —— 描边次级操作 */
.hw-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hw-orange-soft);
  --btn-text: var(--hw-orange);
  --btn-text-hover: #ffffff;
  --btn-border: var(--hw-orange-soft);

  font-weight: 600;
}

/* 3️⃣ Soft —— 内容区辅助按钮 */
.hw-btn--soft {
  --btn-bg: #ffffff;
  --btn-bg-hover: var(--hw-orange-soft);
  --btn-text: var(--hw-orange);
  --btn-text-hover: #ffffff;
  --btn-border: var(--hw-orange-tint);

  box-shadow: 0 4px 14px rgba(15,23,42,.08);
}