/*
 * ZimSingles site header, footer, members' tab bar and simple pages, in the
 * app's style (tokens from src/theme/index.ts in zimsingles-com-app).
 */

.zs-site-body, .zs-page {
  --zs-bg: #FAF5F0;
  --zs-surface: #FFFFFF;
  --zs-surface-alt: #F3EAE2;
  --zs-ink: #23110F;
  --zs-ink-soft: #6F5B56;
  --zs-ink-faint: #A8958E;
  --zs-line: #EADFD6;
  --zs-primary: #C03732;
  --zs-primary-soft: #F9E3DF;
  --zs-on-primary: #FFFFFF;
  --zs-accent: #178F85;
  --zs-accent-soft: #DDF4F1;
  --zs-danger: #B3261E;
  --zs-danger-soft: #FBE4E2;
  --zs-shadow-1: 0 4px 10px rgba(58, 20, 16, 0.08);
  --zs-shadow-2: 0 10px 22px rgba(58, 20, 16, 0.16);
  --zs-sunset-button: linear-gradient(135deg, #C03732, #DB5A38);
  --zs-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --zs-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--zs-bg);
}

@media (prefers-color-scheme: dark) {
  .zs-site-body, .zs-page {
    --zs-bg: #150D0C;
    --zs-surface: #211614;
    --zs-surface-alt: #2C1E1B;
    --zs-ink: #F7EDE6;
    --zs-ink-soft: #BFA9A1;
    --zs-ink-faint: #8A746D;
    --zs-line: #382825;
    --zs-primary: #E4574F;
    --zs-primary-soft: #3A1A18;
    --zs-accent: #3FCFC2;
    --zs-accent-soft: #12322F;
    --zs-danger: #F2877F;
    --zs-danger-soft: #3A1A18;
    --zs-shadow-1: none;
    --zs-shadow-2: none;
  }
}

.zs-site-header, .zs-site-header *, .zs-site-footer, .zs-site-footer *,
.zs-site-tabbar, .zs-site-tabbar *, .zs-page, .zs-page * {
  box-sizing: border-box;
}

.zs-site-ic { display: block; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 0; }

/* ---------- Header ---------- */

.zs-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--zs-bg);
  border-bottom: 1px solid var(--zs-line);
  font-family: var(--zs-body);
  padding-top: env(safe-area-inset-top, 0px);
}

.admin-bar .zs-site-header { top: 32px; }

.zs-site-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  min-height: 64px;
  padding: 8px 16px 8px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.zs-site-logo {
  display: flex;
  align-items: center;
  color: var(--zs-primary) !important;
  text-decoration: none !important;
  margin-right: auto;
}

.zs-site-logo .zs-mark { flex: none; margin-top: -3px; }
.zs-site-logo span { font-family: var(--zs-display); font-weight: 800; letter-spacing: -0.6px; line-height: 1.25; }

.zs-site-nav { display: flex; gap: 4px; }

.zs-site-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--zs-ink-soft) !important;
  text-decoration: none !important;
  font: 600 15px/20px var(--zs-body);
  transition: background 0.12s, color 0.12s;
}

.zs-site-nav__link:hover { background: var(--zs-surface-alt); color: var(--zs-ink) !important; }
.zs-site-nav__link.is-on { background: var(--zs-primary-soft); color: var(--zs-primary) !important; }

.zs-site-auth { display: flex; gap: 8px; }

.zs-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font: 600 15px/20px var(--zs-body);
  text-decoration: none !important;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.12s;
}

.zs-site-btn:active { opacity: 0.85; transform: scale(0.98); }
.zs-site-btn--primary { background: var(--zs-sunset-button); color: #FFFFFF !important; }
.zs-site-btn--ghost { background: transparent; color: var(--zs-primary) !important; }
.zs-site-btn--ghost:hover { background: var(--zs-primary-soft); }
.zs-site-btn--secondary { background: var(--zs-surface-alt); color: var(--zs-ink) !important; }
.zs-site-btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.zs-site-btn--onhero { background: #FFFFFF; color: #23110F !important; }

.zs-site-more { position: relative; }

.zs-site-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 22px !important;
  border: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--zs-surface-alt) !important;
  color: var(--zs-ink) !important;
  cursor: pointer;
  box-shadow: none !important;
}

.zs-site-iconbtn:hover, .zs-site-iconbtn[aria-expanded="true"] { background: var(--zs-line) !important; }

.zs-site-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 250px;
  padding: 6px;
  border-radius: 20px;
  background: var(--zs-surface);
  border: 1px solid var(--zs-line);
  box-shadow: 0 16px 40px rgba(35, 17, 15, 0.18);
  animation: zs-site-pop 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zs-site-menu[hidden] { display: none; }

@keyframes zs-site-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

.zs-site-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  min-height: 48px;
  border-radius: 14px;
  color: var(--zs-ink) !important;
  text-decoration: none !important;
  font: 600 15px/20px var(--zs-body);
}

.zs-site-menu__item:hover, .zs-site-menu__item:focus-visible { background: var(--zs-surface-alt); outline: none; }

.zs-site-menu__icon {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zs-surface-alt);
  color: var(--zs-ink);
  flex: none;
}

.zs-site-menu__item--danger { color: var(--zs-danger) !important; }
.zs-site-menu__item--danger .zs-site-menu__icon { background: var(--zs-danger-soft); color: var(--zs-danger); }

.zs-site-header :focus-visible, .zs-site-footer :focus-visible, .zs-site-tabbar :focus-visible, .zs-page :focus-visible {
  outline: 2px solid var(--zs-primary);
  outline-offset: 2px;
}

/* ---------- Footer ---------- */

.zs-site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--zs-line);
  background: var(--zs-bg);
  font-family: var(--zs-body);
}

.zs-site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.zs-site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-right: auto; }
.zs-site-footer__links a { color: var(--zs-ink-soft) !important; text-decoration: none !important; font: 500 14px/20px var(--zs-body); }
.zs-site-footer__links a:hover { color: var(--zs-primary) !important; }
.zs-site-footer__legal { margin: 0; color: var(--zs-ink-faint); font: 500 12px/16px var(--zs-body); }

/* ---------- Members' tab bar (phones), as in the app ---------- */

.zs-site-tabbar { display: none; }

@media (max-width: 760px) {
  .zs-site-nav { display: none; }
  .zs-site-header__inner { padding: 8px 12px 8px 20px; min-height: 60px; }
  .zs-site-auth .zs-site-btn--ghost { padding: 0 12px; }
  .zs-site-footer__inner { flex-direction: column; align-items: flex-start; }

  .zs-site-member .zs-site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  .zs-site-tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 6px 16px max(env(safe-area-inset-bottom, 0px), 10px);
    background: linear-gradient(180deg, transparent, var(--zs-bg) 40%);
    font-family: var(--zs-body);
  }

  .zs-site-tabbar__bar {
    display: flex;
    max-width: 488px;
    margin: 0 auto;
    border-radius: 28px;
    border: 1px solid var(--zs-line);
    padding: 8px 6px;
    background: var(--zs-surface);
    box-shadow: var(--zs-shadow-1);
  }

  .zs-site-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--zs-ink-soft) !important;
    text-decoration: none !important;
  }

  .zs-site-tab.is-on { color: var(--zs-primary) !important; }
  .zs-site-tab__pill { width: 56px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
  .zs-site-tab.is-on .zs-site-tab__pill { background: var(--zs-primary-soft); }
  .zs-site-tab__label { font: 600 11px/14px var(--zs-body); }
}

.zs-site-menu__item--signin { display: none; }

@media (max-width: 480px) {
  .zs-site-auth .zs-site-btn--ghost { display: none; }
  .zs-site-menu__item--signin { display: flex; }
}

/* ---------- Simple pages (About, Premium, 404, Cart, Checkout) ---------- */

.zs-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 16px;
  color: var(--zs-ink);
  font: 400 16px/1.55 var(--zs-body);
}

.zs-page--center { min-height: 60vh; display: flex; align-items: center; justify-content: center; }

.zs-page h1, .zs-page h2, .zs-page h3 { color: var(--zs-ink); margin: 0; }
.zs-page p { margin: 0; }
.zs-page-eyebrow { font: 700 11px/14px var(--zs-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zs-primary); margin-bottom: 10px !important; }
.zs-page-h1 { font: 800 40px/1.08 var(--zs-display) !important; letter-spacing: -1px; }
.zs-page-h2 { font: 700 24px/1.2 var(--zs-display) !important; letter-spacing: -0.3px; }
.zs-page-h3 { font: 600 17px/22px var(--zs-body) !important; }
.zs-page-lead { font-size: 18px; line-height: 1.6; color: var(--zs-ink-soft); margin-top: 16px !important; }
.zs-page-muted { color: var(--zs-ink-soft); }
.zs-page-section { margin-top: 40px; }
.zs-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.zs-page-hero {
  border-radius: 32px;
  padding: 40px 32px;
  color: #FFFFFF;
  background: linear-gradient(158deg, #A82B2F 0%, #C03732 33%, #E0653A 66%, #EFA13F 100%);
  position: relative;
  overflow: hidden;
}

.zs-page-hero .zs-page-eyebrow { color: rgba(255, 255, 255, 0.85); }
.zs-page-hero h1 { color: #FFFFFF; }
.zs-page-hero .zs-page-lead { color: rgba(255, 255, 255, 0.92); }

.zs-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }

.zs-page-card {
  background: var(--zs-surface);
  border: 1px solid var(--zs-line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--zs-shadow-1);
}

.zs-page-card__num {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zs-primary-soft);
  color: var(--zs-primary);
  font: 800 16px/1 var(--zs-display);
  margin-bottom: 12px;
}

.zs-page-card p { color: var(--zs-ink-soft); font-size: 15px; line-height: 1.5; margin-top: 6px !important; }

.zs-page-list { list-style: none; margin: 16px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.zs-page-list li { display: flex; gap: 10px; align-items: flex-start; }
.zs-page-list li::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--zs-primary); margin-top: 9px; flex: none; }

.zs-page-empty { max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.zs-page-empty .zs-site-btn { margin-top: 8px; }

.zs-page-empty__icon {
  width: 76px;
  height: 76px;
  border-radius: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zs-primary-soft);
  color: var(--zs-primary);
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .zs-page { padding: 20px 16px 8px; }
  .zs-page-hero { padding: 32px 24px; border-radius: 28px; }
  .zs-page-h1 { font-size: 32px !important; }
}

/* Pages Hello draws itself (Cart, Checkout, shop) get the same column and type. */
.zs-site-body .site-main:not(.zs-page) {
  font-family: var(--zs-body);
  color: var(--zs-ink);
}

.zs-site-body .site-main .page-header .entry-title {
  font-family: var(--zs-display);
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* The theme's own header and footer are replaced by the ones above. */
.zs-site-body #site-header, .zs-site-body #site-footer { display: none; }

/* ---------- Reporting page ([zs_report_form]) ---------- */

.zs-report__card { margin-top: 16px; padding: 24px; }
.zs-report__form { display: flex; flex-direction: column; gap: 20px; }
.zs-report__field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.zs-report__label { font: 600 14px/20px var(--zs-body); color: var(--zs-ink-soft); padding: 0; }
.zs-report__optional { font-weight: 400; color: var(--zs-ink-faint); }
.zs-report__fixed { font: 600 17px/22px var(--zs-body); color: var(--zs-ink); }

.zs-report input[type="text"], .zs-report input[type="email"], .zs-report textarea {
  width: 100%;
  border: 1.5px solid var(--zs-line);
  border-radius: 16px;
  background: var(--zs-surface);
  color: var(--zs-ink);
  font: 400 16px/23px var(--zs-body);
  padding: 13px 14px;
  margin: 0;
  box-shadow: none;
  outline: none;
  transition: border-color 0.12s;
}

.zs-report textarea { resize: vertical; min-height: 120px; }
.zs-report input:focus, .zs-report textarea:focus { border-color: var(--zs-primary); }
.zs-report ::placeholder { color: var(--zs-ink-faint); }

.zs-report__reasons { display: grid; gap: 8px; }

.zs-report__reason {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--zs-line);
  border-radius: 16px;
  background: var(--zs-surface);
  font: 600 15px/20px var(--zs-body);
  color: var(--zs-ink);
  cursor: pointer;
}

.zs-report__reason input { accent-color: var(--zs-primary); width: 18px; height: 18px; margin: 0; }
.zs-report__reason:has(input:checked) { border-color: var(--zs-primary); background: var(--zs-primary-soft); color: var(--zs-primary); }

.zs-report__error {
  padding: 12px;
  border-radius: 16px;
  background: var(--zs-danger-soft);
  color: var(--zs-danger);
  font: 400 14px/20px var(--zs-body);
}

.zs-report__submit { width: 100%; }
.zs-report__submit:disabled { opacity: 0.6; }
.zs-report__as, .zs-report__fine { font-size: 14px; line-height: 20px; }
.zs-report__fine { text-align: center; color: var(--zs-ink-faint); }
.zs-report__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zs-report__done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 16px 0; }
.zs-report__done[hidden], .zs-report__form[hidden] { display: none; }

/* ---------- Delete account page ([zs_delete_account]) ---------- */

.zs-delete__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 0 !important; padding: 20px 24px; }
.zs-delete__facts div { min-width: 0; }
.zs-delete__facts dt { font: 700 11px/14px var(--zs-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zs-ink-soft); margin: 0 0 4px; }
.zs-delete__facts dd { margin: 0; font: 600 17px/22px var(--zs-body); color: var(--zs-ink); overflow-wrap: anywhere; }
.zs-delete__facts a { color: var(--zs-primary); text-decoration: none; }

.zs-delete__card { margin-top: 16px; padding: 24px; }
.zs-delete__signed-in, .zs-delete__form { display: flex; flex-direction: column; gap: 16px; }
.zs-delete__form[hidden], .zs-delete__signed-in[hidden] { display: none; }
.zs-delete__check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 21px; color: var(--zs-ink); cursor: pointer; }
.zs-delete__check input { accent-color: var(--zs-danger); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.zs-delete__danger { width: 100%; background: var(--zs-danger-soft); color: var(--zs-danger) !important; }
.zs-delete__danger:disabled { opacity: 0.45; cursor: default; }
.zs-delete__alt { margin-top: 14px !important; font-size: 15px; line-height: 22px; }
.zs-delete__alt a { color: var(--zs-primary); }
.zs-delete__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.zs-delete input[type="text"] {
  width: 100%;
  border: 1.5px solid var(--zs-line);
  border-radius: 16px;
  background: var(--zs-surface);
  color: var(--zs-ink);
  font: 400 16px/23px var(--zs-body);
  padding: 13px 14px;
  margin: 0;
  outline: none;
  box-shadow: none;
}
.zs-delete input[type="text"]:focus { border-color: var(--zs-primary); }

@media (max-width: 600px) {
  .zs-delete__facts { grid-template-columns: 1fr; padding: 18px 20px; }
  .zs-delete__lists { grid-template-columns: 1fr; }
}
/* The theme colours every button on hover/focus; keep ours as designed. */
.zs-delete__danger, .zs-delete__danger:hover, .zs-delete__danger:focus { background: var(--zs-danger-soft) !important; color: var(--zs-danger) !important; border: 0 !important; }
.zs-report__submit:hover, .zs-report__submit:focus { color: #FFFFFF !important; }
.zs-delete__card > .zs-report__error { margin-bottom: 16px; }