/**
 * 顾客端公开页 — 德国商务风（Deutsch Business）
 * 冷灰底、海军蓝主色、克制描边、利落排版
 */
.guest-page {
  --guest-bg: #eef0f3;
  --guest-bg-accent: #e2e5ea;
  --guest-surface: #ffffff;
  --guest-surface-muted: #f7f8fa;
  --guest-border: #d5dae1;
  --guest-border-focus: #1a365d;
  --guest-text: #2a3038;
  --guest-text-muted: #5c6570;
  --guest-heading: #0f1c2e;
  --guest-accent: #1a365d;
  --guest-accent-hover: #0f2744;
  --guest-accent-soft: #e8edf4;
  --guest-accent-ring: rgba(26, 54, 93, 0.22);
  --guest-accent-line: #b8956b;
  --guest-required: #9b2c2c;
  --guest-link: #1a4d7a;
  --guest-link-hover: #0f2744;
  --guest-danger-bg: #fdf5f5;
  --guest-danger-text: #8f2d2d;
  --guest-danger-border: #e8c4c4;
  --guest-success-bg: #f0f5f2;
  --guest-success-text: #2d4a3a;
  --guest-success-border: #c5d9cc;
  --guest-hours-hint: #1f6b3a;
  --guest-shadow: 0 1px 2px rgba(15, 28, 46, 0.05), 0 12px 32px -12px rgba(15, 28, 46, 0.12);
  --guest-radius: 0.5rem;

  background: linear-gradient(180deg, #f6f7f9 0%, var(--guest-bg) 48%, var(--guest-bg-accent) 100%);
  color: var(--guest-text);
  font-family: "Noto Sans", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

.guest-page ::selection {
  background: var(--guest-accent-soft);
  color: var(--guest-heading);
}

/* —— 页面宽度（顶栏 / 主内容与表单对齐） —— */
.guest-page .guest-page-shell {
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .guest-page .guest-page-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.guest-page .guest-page-main {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

.guest-page .guest-page-main > * + * {
  margin-top: 1.25rem;
}

.guest-page .guest-page-main > .guest-showcase + * {
  margin-top: 1.5rem;
}

/* —— 顶栏 —— */
.guest-page .guest-header {
  position: relative;
  border-bottom: 1px solid var(--guest-border);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(15, 28, 46, 0.04);
}

.guest-page .guest-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--guest-accent) 0%,
    var(--guest-accent) 42%,
    var(--guest-accent-line) 42%,
    var(--guest-accent-line) 100%
  );
  pointer-events: none;
}

.guest-page .guest-brand-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--guest-text-muted);
}

.guest-page .guest-brand-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--guest-heading);
}

@media (min-width: 640px) {
  .guest-page .guest-brand-title {
    font-size: 1.3125rem;
  }
}

.guest-page .guest-brand-meta {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--guest-text-muted);
}

.guest-page .guest-brand-meta-sep {
  margin: 0 0.4rem;
  color: var(--guest-border);
  user-select: none;
}

.guest-page .guest-brand-phone-link {
  font-weight: 500;
  color: var(--guest-accent);
  text-decoration: none;
  text-underline-offset: 2px;
}

.guest-page .guest-brand-phone-link:hover {
  color: var(--guest-accent-hover);
  text-decoration: underline;
}

.guest-page .guest-intro {
  margin: 0;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--guest-text-muted);
  border-left: 3px solid var(--guest-accent-line);
  background: var(--guest-surface);
  border-radius: 0 var(--guest-radius) var(--guest-radius) 0;
  box-shadow: 0 1px 2px rgba(15, 28, 46, 0.04);
}

/* —— 表单行 —— */
.guest-page .guest-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.guest-page .guest-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .guest-page .guest-form-row--identity {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  .guest-page .guest-form-row--contact,
  .guest-page .guest-form-row--name-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .guest-page .guest-form-row--datetime {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* 日期 + 时间：标签顶对齐、控件等高、提示行占位一致 */
.guest-page .guest-form-row--datetime > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guest-page .guest-form-row--datetime .guest-label {
  margin-bottom: 0.35rem;
}

.guest-page .guest-form-row--datetime .guest-field,
.guest-page .guest-form-row--datetime input.guest-field,
.guest-page .guest-form-row--datetime select.guest-field,
.guest-page .guest-form-row--datetime .guest-field--date-picker,
.guest-page .guest-form-row--datetime .guest-field--time-picker {
  flex: 0 0 auto;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.25;
}

.guest-page .guest-form-row--datetime select.guest-field {
  padding-right: 2rem;
}

.guest-page .guest-form-row--datetime .guest-field-hint {
  flex: 0 0 auto;
  min-height: 2.35rem;
  margin: 0.35rem 0 0;
}

.guest-page .guest-form-row--datetime .guest-field-hint[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

/* —— 卡片 / 表单区 —— */
.guest-page .guest-card {
  border-radius: calc(var(--guest-radius) + 2px);
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  box-shadow: var(--guest-shadow);
}

.guest-page .guest-showcase {
  border-radius: calc(var(--guest-radius) + 2px);
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  box-shadow: var(--guest-shadow);
  overflow: hidden;
}

.guest-page .guest-section-title {
  color: var(--guest-heading);
  font-weight: 600;
}

/* —— 标签与必填 —— */
.guest-page .guest-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--guest-text-muted);
}

.guest-page .guest-required {
  color: var(--guest-required);
  font-weight: 500;
}

/* —— 订台日期：输入框 + 弹层月历 —— */
.guest-page .guest-field--date-picker {
  cursor: pointer;
}

.guest-page .guest-field--date-picker:focus {
  cursor: pointer;
}

.guest-page .guest-date-modal:not(.hidden) {
  display: flex;
}

.guest-page .guest-date-modal__panel .guest-date-calendar {
  margin-top: 0.75rem;
}

body.guest-picker-modal-open {
  overflow: hidden;
}

.guest-page .guest-field--time-picker {
  cursor: pointer;
}

.guest-page .guest-field--time-picker-no-date {
  cursor: not-allowed;
  opacity: 0.65;
}

.guest-page .guest-time-modal:not(.hidden) {
  display: flex;
}

.guest-page .guest-time-modal__panel {
  max-width: 22rem;
}

.guest-page .guest-time-picker {
  margin-top: 0.75rem;
  max-height: min(50vh, 18rem);
  overflow-y: auto;
}

.guest-page .guest-time-picker__period {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--guest-text-muted);
}

.guest-page .guest-time-picker__period:first-child {
  margin-top: 0;
}

.guest-page .guest-time-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

@media (min-width: 400px) {
  .guest-page .guest-time-picker__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.guest-page .guest-time-picker__slot {
  min-height: 2.35rem;
  border: 1px solid var(--guest-border);
  border-radius: calc(var(--guest-radius) - 2px);
  background: var(--guest-surface);
  color: var(--guest-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.guest-page .guest-time-picker__slot:hover {
  border-color: var(--guest-accent);
  background: var(--guest-accent-soft);
}

.guest-page .guest-time-picker__slot--selected {
  border-color: var(--guest-accent);
  background: var(--guest-accent);
  color: #fff;
}

.guest-page .guest-time-picker__empty {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--guest-text-muted);
  text-align: center;
}

.guest-page .guest-date-calendar {
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--guest-border);
  border-radius: var(--guest-radius);
  background: var(--guest-surface-muted);
}

.guest-page .guest-date-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.guest-page .guest-date-calendar__title {
  flex: 1;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--guest-heading);
}

.guest-page .guest-date-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--guest-border);
  border-radius: var(--guest-radius);
  background: var(--guest-surface);
  color: var(--guest-accent);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.guest-page .guest-date-calendar__nav:hover:not(:disabled) {
  border-color: var(--guest-accent);
  background: var(--guest-accent-soft);
}

.guest-page .guest-date-calendar__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.guest-page .guest-date-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  margin-bottom: 0.35rem;
}

.guest-page .guest-date-calendar__wd {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--guest-text-muted);
}

.guest-page .guest-date-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.guest-page .guest-date-calendar__pad {
  display: block;
  min-height: 2.25rem;
}

.guest-page .guest-date-calendar__day {
  min-height: 2.25rem;
  border: 1px solid transparent;
  border-radius: calc(var(--guest-radius) - 2px);
  background: var(--guest-surface);
  color: var(--guest-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.guest-page .guest-date-calendar__day:hover:not(:disabled) {
  border-color: var(--guest-accent);
  background: var(--guest-accent-soft);
}

.guest-page .guest-date-calendar__day--selected {
  border-color: var(--guest-accent);
  background: var(--guest-accent);
  color: #fff;
}

.guest-page .guest-date-calendar__day--disabled {
  background: transparent;
  color: var(--guest-text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}

/* —— 输入控件 —— */
.guest-page .guest-field,
.guest-page input.guest-field,
.guest-page select.guest-field,
.guest-page textarea.guest-field {
  width: 100%;
  min-height: 2.75rem;
  border-radius: var(--guest-radius);
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--guest-text);
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.guest-page textarea.guest-field {
  min-height: 5rem;
  resize: vertical;
}

.guest-page .guest-field::placeholder {
  color: #9aa3ad;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.guest-page .guest-field:hover:not(:disabled) {
  border-color: #b8c0c9;
}

.guest-page .guest-field:focus {
  outline: none;
  border-color: var(--guest-border-focus);
  background: #fff;
  box-shadow: 0 0 0 3px var(--guest-accent-ring);
}

.guest-page .guest-field:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--guest-surface-muted);
}

.guest-page .guest-field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--guest-text-muted, #64748b);
}

.guest-page .guest-field-hint--hours {
  color: var(--guest-hours-hint);
  font-weight: 500;
}

/* —— 复选框 —— */
.guest-page .guest-checkbox {
  margin-top: 0.2rem;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border-color: var(--guest-border);
  color: var(--guest-accent);
}

.guest-page .guest-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--guest-accent-ring);
}

.guest-page .guest-check-label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--guest-text-muted);
}

.guest-page .guest-link {
  font-weight: 500;
  color: var(--guest-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(109, 127, 143, 0.45);
}

.guest-page .guest-link:hover {
  color: var(--guest-link-hover);
}

/* —— 按钮 —— */
.guest-page .guest-btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--guest-radius);
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
  cursor: pointer;
}

.guest-page .guest-btn:active:not(:disabled) {
  transform: scale(0.99);
}

.guest-page .guest-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.guest-page .guest-btn--block {
  width: 100%;
}

.guest-page .guest-btn--primary {
  border: 1px solid var(--guest-accent-hover);
  background: var(--guest-accent);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(107, 127, 103, 0.45);
}

.guest-page .guest-btn--primary:hover:not(:disabled) {
  background: var(--guest-accent-hover);
  border-color: #5f735c;
}

.guest-page .guest-btn--primary:focus-visible {
  outline: none;
  box-shadow:
    0 4px 14px -4px rgba(107, 127, 103, 0.45),
    0 0 0 3px var(--guest-accent-ring);
}

.guest-page .guest-btn--secondary {
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  color: var(--guest-text);
  box-shadow: 0 1px 2px rgba(61, 56, 50, 0.04);
}

.guest-page .guest-btn--secondary:hover:not(:disabled) {
  border-color: #d4ccc2;
  background: var(--guest-surface-muted);
}

.guest-page .guest-btn--secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--guest-accent-ring);
}

/* —— 语言 / 导航小按钮 —— */
.guest-page .guest-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  border-radius: var(--guest-radius);
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--guest-heading);
  box-shadow: 0 1px 2px rgba(15, 28, 46, 0.05);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.guest-page .guest-chip-btn:hover {
  border-color: var(--guest-accent);
  background: var(--guest-accent-soft);
  color: var(--guest-accent);
}

.guest-page .guest-lang-menu {
  border-radius: var(--guest-radius);
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  box-shadow: var(--guest-shadow);
}

/* —— 提示条 —— */
.guest-page .guest-alert-error {
  border-radius: var(--guest-radius);
  border: 1px solid var(--guest-danger-border);
  background: var(--guest-danger-bg);
  padding: 0.65rem 0.875rem;
  font-size: 0.875rem;
  color: var(--guest-danger-text);
}

.guest-page .guest-alert-success {
  border-radius: var(--guest-radius);
  border: 1px solid var(--guest-success-border);
  background: var(--guest-success-bg);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--guest-success-text);
}

.guest-page .guest-text-error {
  font-size: 0.875rem;
  color: var(--guest-danger-text);
}

.guest-page .guest-text-success {
  font-size: 0.875rem;
  color: var(--guest-success-text);
}

/* —— 确认弹窗 —— */
.guest-page .guest-modal-backdrop {
  background: rgba(15, 28, 46, 0.42);
  backdrop-filter: blur(4px);
}

.guest-page .guest-modal-panel {
  border-radius: calc(var(--guest-radius) + 4px);
  border: 1px solid var(--guest-border);
  background: var(--guest-surface);
  box-shadow: 0 24px 48px -16px rgba(15, 28, 46, 0.28);
}

.guest-page .guest-modal-summary {
  border-radius: var(--guest-radius);
  border: 1px solid #c5d0de;
  background: var(--guest-accent-soft);
  color: var(--guest-text);
}

.guest-page .guest-modal-panel h2 {
  color: var(--guest-heading);
}

/* —— 页脚（玻璃变体在顾客页上更柔和） —— */
.guest-page .site-footer-dl-outer--glass,
.guest-page .site-footer-dl-outer--white {
  border-top-color: var(--guest-border);
  background: rgb(255 255 255 / 0.96);
  color: var(--guest-text-muted);
}

/* —— 品牌区文字（legacy 选择器保留） —— */
.guest-page #public-brand-name {
  color: var(--guest-text-muted);
}

.guest-page #public-brand-logo-wrap {
  border-radius: var(--guest-radius);
  background: var(--guest-surface);
  box-shadow: 0 1px 3px rgba(15, 28, 46, 0.08);
  border: 1px solid var(--guest-border);
}

/* —— 平面图（若启用） —— */
.guest-page .guest-hall-shell {
  background: linear-gradient(180deg, #e4e7ec 0%, #cdd2da 100%);
  border: 1px solid var(--guest-border);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px rgba(15, 28, 46, 0.06);
}

.guest-page .guest-hall-surface-inner {
  background: linear-gradient(155deg, #f4f5f7 0%, #dde1e8 55%, #c8ced8 100%);
  border: 1px solid #c5ccd6;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.9),
    inset 0 -8px 20px rgba(15, 28, 46, 0.05);
}