/* ============================================================================
   Айман · Қыз ұзату · 主样式（传统哈萨克风 + 横滑 6 页）
   设计：白底 + 深酒红 + 描金 · Marck Script 花体 · 红 ою 横条 · 拱门相框
   ========================================================================== */

:root {
  /* ═══ Palette ═══ */
  --bg:        #FFFCF6;    /* 纯白底（参考图主色） */
  --bg-2:      #FFF8EE;
  --paper:     #FBF3E4;    /* 雪纺/丝绸 cream */

  --wine:        #6F0B19;   /* 深酒红主色 */
  --wine-deep:   #4D0710;
  --wine-light:  #9A2533;
  --wine-soft:   rgba(111, 11, 25, 0.18);

  --gold:        #B8866E;   /* 暖金辅色 */
  --gold-deep:   #8A5C46;

  --ink:         #1A0808;   /* 黑墨 */
  --ink-mute:    #4D2A2A;
  --ink-dim:     #7A5454;

  /* ═══ Type ═══ */
  /* 大标题用 Prata（优雅高对比展示衬线 — 含 cyrillic-ext，完整支持哈萨克语 ә ғ қ ң ө ұ ү і һ） */
  --font-script:  "Prata", "Cormorant Garamond", serif;
  --font-display: "Cormorant Garamond", "Songti SC", "Noto Serif SC", Georgia, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;

  /* ═══ Shape ═══ */
  --radius-sm: 6px;
  --radius:    12px;

  /* ═══ Motion ═══ */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.22, .9, .3, 1);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 18px;
  position: relative;
  overscroll-behavior: none;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
input, textarea, button { font-family: inherit; }
::selection { background: var(--wine-soft); color: var(--ink); }

/* ============ 顶部音乐按钮 ============ */
.topbar {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  right: 12px;
  padding: 12px;
  z-index: 50;
}
.music-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1.5px solid var(--wine);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--wine);
  transition: transform .2s var(--ease), background .25s var(--ease);
  box-shadow: 0 4px 14px rgba(111, 11, 25, 0.15);
}
.music-btn:active { transform: scale(0.95); }
.music-btn:hover { background: var(--wine); color: var(--bg); }
.music-btn .ic-music-off { display: block; }
.music-btn .ic-music-on  { display: none; }
.music-btn.is-playing .ic-music-off { display: none; }
.music-btn.is-playing .ic-music-on  { display: block; }
.music-btn[hidden] { display: none; }

/* ============ 横滑主容器 ============ */
.slides {
  display: flex;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.slides::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  overflow: hidden;          /* 不滚动：每页内容塞进一屏 */
  scrollbar-width: none;
  position: relative;        /* 照片相对整屏(.slide)定位 → 全站同一位置 */
  background: var(--bg);
}
.slide::-webkit-scrollbar { display: none; }

/* ============ ою 顶部横条 ============ */
/* 用参考图第 4 行的真实纹样（PNG）作 CSS mask，填充酒红色统一配色 */
.oyu-banner {
  width: 100%;
  height: 58px;
  display: block;
  pointer-events: none;
  background-color: var(--wine);
  -webkit-mask: url(assets/oyu-band.png) repeat-x center / auto 100%;
          mask: url(assets/oyu-band.png) repeat-x center / auto 100%;
}
.oyu-banner svg { display: none; }   /* 隐藏旧的自绘 SVG */

/* ============ slide 内部容器 ============ */
.slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 24px 56px;
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  gap: 2px;
  /* 注意：不设 position:relative，让照片(absolute)锚定到整屏 .slide */
}
/* 有照片的页：文字从顶部排，照片绝对定位贴底（位置/大小全站一致）。
   文字区预留底部空间，避免和照片重叠。 */
.slide-inner:has(.photo-arch) {
  justify-content: center;     /* 文字在「照片上方区域」垂直居中 → 上下留白均匀，间距≈日历页 */
  padding-top: 14px;
  padding-bottom: calc(42vh + 52px);
}
/* Cover 例外：大名字保持靠上 */
.slide-inner--cover { justify-content: flex-start !important; }
/* 无照片的页（RSVP / 祝福墙）保持垂直居中 */

/* ============ 文字样式 ============ */

/* 大标题（Cover 名字、章节标题）— Yeseva One 展示衬线 */
.script-xl {
  font-family: var(--font-script);
  font-size: clamp(58px, 17vw, 112px);
  line-height: 1.0;
  color: var(--wine);
  margin: 22px 0 6px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.script-lg {
  font-family: var(--font-script);
  font-size: clamp(29px, 7.4vw, 42px);   /* 全站大标题统一变小，腾出空间 */
  line-height: 1.1;
  color: var(--wine);
  margin: 8px 0 4px;
  font-weight: 400;
}
.script-md {
  font-family: var(--font-script);
  font-size: clamp(24px, 6.4vw, 36px);
  line-height: 1.15;
  color: var(--wine);
  margin: 2px 0 6px;
  font-weight: 400;
}
.script-inline {
  font-family: var(--font-script);
  font-size: 1.32em;
  color: var(--wine);
  line-height: 0.9;
  display: inline-block;
  vertical-align: baseline;
  padding: 0 3px;
}
/* 5 行问候段落 — 用 Cormorant 斜体，成段更易读、不喧宾夺主 */
.script-greeting {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(21px, 5.6vw, 28px);
  line-height: 1.55;
  color: var(--wine);
  margin: 20px 0;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* 日期行 */
.date-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 6vw, 30px);
  color: var(--ink);
  letter-spacing: 0.04em;
  margin: 4px 0 22px;
}
.date-line .zh { font-size: 0.85em; color: var(--ink-mute); margin-left: 1px; }

/* 邀请正文 - Roman caps tracked */
/* 邀请正文 — 与第 2 页问候同款：Cormorant 斜体、酒红、易读 */
.invitation-body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 5.8vw, 28px);
  line-height: 1.85;
  letter-spacing: 0.005em;
  color: var(--wine);
  text-transform: none;
  margin: 0;
  max-width: 22ch;
}
/* АЙМАННЫҢ 独占一行强调 */
.inv-name {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.2em;
  line-height: 1.25;
  color: var(--wine);
  margin: 4px 0;
}

/* 日期正式格式（Slide 4） */
.date-formal {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 4px 0 8px;
  padding-left: 0.06em;
}
.date-formal strong { font-weight: 600; }

/* 地点（Slide 5） */
.location-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 5.8vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  margin: 6px 0 4px;
}
.location-text strong { font-weight: 600; color: var(--wine); }
.location-text .sub {
  display: block;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink-mute);
  margin-top: 6px;
}
.location-addr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 4.8vw, 22px);   /* 地址放大更易读 */
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 2px 0 14px;
}

/* 父母名字（Slide 6） */
.parents {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 2px 0 10px;
  padding-left: 0.08em;
}
.parents .amp {
  font-family: var(--font-script);
  font-size: 1.8em;
  color: var(--wine);
  line-height: 0.5;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ============ 拱门相框（红线描边照片） ============ */
/* 绝对定位贴底：全站每张照片同尺寸、底部都落在 dots 上方一点点 → 滑动时位置一致 */
.photo-arch {
  position: absolute;
  left: 50%;
  bottom: 40px;                 /* 刚好在底部 dots 上方 */
  transform: translateX(-50%);
  height: min(42vh, 384px);
  aspect-ratio: 4 / 5;
  width: auto;
  margin: 0;
  /* 拱门形状：顶部圆弧 + 下方矩形 */
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 38% 38% var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  outline: 1.5px solid var(--wine);
  outline-offset: 6px;
  isolation: isolate;
}
.photo-arch::before {
  /* 内圈第二条线 */
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid var(--wine-light);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
}
.photo-arch img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.96);
}
/* 全站统一同尺寸：不再用 --small / cover 特例 */
.photo-arch--small { height: min(42vh, 384px); }

/* ============ 日历组件（Slide 4）· 紧凑以适配更大照片 ============ */
.kk-calendar {
  margin: 2px auto 8px;
  max-width: 320px;
  width: 100%;
}
.cal-month {
  font-family: var(--font-script);
  font-size: clamp(24px, 7vw, 32px);
  color: var(--wine);
  text-align: left;
  margin: 0 0 1px 8px;
  font-weight: 400;
  line-height: 1;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px 2px;
  font-family: var(--font-display);
  font-size: clamp(13px, 3.6vw, 16px);
  color: var(--ink);
  text-align: center;
}
.cal-grid .wd {
  font-size: 0.76em;
  color: var(--wine);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-bottom: 1px;
}
.cal-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  font-variant-numeric: lining-nums tabular-nums;
  position: relative;
}
.cal-grid .empty { color: transparent; }
.heart-day {
  color: var(--wine) !important;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.heart-day .heart-svg {
  position: absolute;
  width: 42px; height: 38px;
  color: var(--wine);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

/* ============ 2GIS 按钮 ============ */
.btn-2gis {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 10px 22px;                       /* 按钮缩小 */
  font-family: var(--font-sans);            /* 用 Inter，2GIS 数字+拉丁更清晰统一 */
  font-weight: 600;
  font-size: clamp(12px, 3.2vw, 13.5px);
  font-variant-numeric: lining-nums;        /* «2» 用等高数字，不再是旧式小号 */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--wine);
  color: var(--bg);
  border-radius: 999px;
  margin: 10px 0 22px;
  padding-left: 30px;
  transition: background .25s var(--ease), transform .15s var(--ease);
  box-shadow: 0 6px 18px -6px rgba(111, 11, 25, 0.35);
}
.btn-2gis:hover { background: var(--wine-deep); }
.btn-2gis:active { transform: scale(0.97); }

/* ============ RSVP 表单（Slide 6） ============ */
.rsvp-title {
  font-family: var(--font-script);
  font-size: clamp(23px, 6vw, 30px);   /* 缩小，给人数字段腾位置 */
  color: var(--wine);
  margin: 10px 0 12px;
  font-weight: 400;
}
.rsvp-form {
  display: grid;
  gap: 9px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  text-align: left;
}
.field { display: grid; gap: 4px; }
.rsvp-form input[type="text"],
.rsvp-form input[type="number"],
.rsvp-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--wine-soft);
  background: transparent;
  padding: 7px 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  font-style: italic;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder {
  color: var(--ink-dim);
  font-style: italic;
}
.rsvp-form input:focus, .rsvp-form textarea:focus {
  outline: none;
  border-bottom-color: var(--wine);
}
.rsvp-form textarea { min-height: 38px; resize: none; }

.radio-row {
  display: flex; flex-direction: column; gap: 6px;
}
.radio-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--wine-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.radio-pill:has(input:checked) {
  border-color: var(--wine);
  background: rgba(111, 11, 25, 0.06);
  box-shadow: inset 0 0 0 1px var(--wine);
}
.radio-pill input { accent-color: var(--wine); width: 16px; height: 16px; margin: 0; }

.count-field { transition: opacity .25s var(--ease); }
.count-field[hidden] { display: none; }
.count-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--wine);
}
.count-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--wine-soft);
  background: var(--paper);
  border-radius: var(--radius-sm);
  width: fit-content;
}
.count-btn {
  width: 38px; height: 38px;
  color: var(--wine);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.count-stepper input {
  width: 48px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
  color: var(--wine);
}
.count-stepper input::-webkit-outer-spin-button,
.count-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.count-stepper input[type=number] { -moz-appearance: textfield; }

.btn-submit {
  margin-top: 8px;
  padding: 14px 24px;
  background: var(--wine);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), transform .15s var(--ease);
}
.btn-submit:hover { background: var(--wine-deep); }
.btn-submit:active { transform: scale(0.98); }
.btn-submit[disabled] { opacity: 0.6; cursor: progress; }

.rsvp-status {
  margin: 4px 0 0;
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-mute);
  min-height: 1.2em;
}
.rsvp-status.is-ok { color: var(--wine); }
.rsvp-status.is-error { color: #B8475C; }

.rsvp-form.is-submitted > *:not(.rsvp-status) { display: none; }
.rsvp-form.is-submitted .rsvp-status {
  font-family: var(--font-script);
  font-size: 24px;
  color: var(--wine);
  padding: 16px 0;
}

/* ============ 联系电话区 ============ */
.contacts {
  display: flex; flex-direction: column;
  width: 100%; max-width: 380px;
  margin: 12px auto 6px;
  gap: 1px;
}
.contacts a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 8px;
  border-top: 1px solid var(--wine-soft);
  font-family: var(--font-display);
  font-size: 16.5px;
  color: var(--ink);
}
.contacts a:last-child { border-bottom: 1px solid var(--wine-soft); }
.contacts .phone {
  color: var(--wine);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

.footer-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-dim);
  margin: 16px 0 0;
}

/* ============ 宾客祝福墙（Slide 7） ============ */
.wishes-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 3.8vw, 16px);
  color: var(--ink-mute);
  margin: 2px 0 16px;
}
.wishes-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 2px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 56vh;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.wishes-list li {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--wine-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: 0 4px 14px -10px rgba(111, 11, 25, 0.25);
}
.wishes-list .wish-name {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--wine);
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}
.wishes-list .wish-text {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.wishes-list .wishes-empty {
  text-align: center;
  font-style: italic;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 20px;
}

/* ============ 分页 dots（底部固定） ============ */
.slide-dots {
  position: fixed;
  bottom: 7px;
  bottom: max(7px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 252, 246, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  z-index: 40;
  box-shadow: 0 4px 12px rgba(111, 11, 25, 0.12);
}
.slide-dots .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--wine-soft);
  transition: width .35s var(--ease), background .25s var(--ease);
  padding: 0;
}
.slide-dots .dot.is-active {
  width: 22px;
  background: var(--wine);
}
.slide-dots .dot:hover:not(.is-active) {
  background: var(--wine-light);
}

/* ============ 滑动提示（右下角） ============ */
.swipe-hint {
  position: fixed;
  bottom: 64px;
  right: 18px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--wine);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  z-index: 41;
  box-shadow: 0 6px 18px rgba(111, 11, 25, 0.32);
  pointer-events: none;
  animation: hint-bob 1.8s var(--ease) infinite;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.swipe-hint .hint-arrow {
  font-size: 1.2em;
  animation: hint-arrow 1.4s var(--ease) infinite;
}
.swipe-hint.is-hidden {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}
@keyframes hint-bob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}
@keyframes hint-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ============ 左右边缘点击区 ============ */
.edge-tap {
  position: fixed;
  top: 0; bottom: 0;
  width: 12vw;
  z-index: 30;
  cursor: pointer;
  background: transparent;
}
.edge-tap--left  { left: 0; }
.edge-tap--right { right: 0; }
@media (hover: hover) { .edge-tap { display: none; } }

/* ============ Demo wobble 动画（首次访问左右晃一下） ============ */
.slides.is-demo {
  animation: demo-wobble 1.6s var(--ease) 0.8s 1;
}
@keyframes demo-wobble {
  0%   { scroll-snap-type: none; transform: translateX(0); }
  25%  { transform: translateX(-30px); }
  55%  { transform: translateX(0); }
  100% { scroll-snap-type: x mandatory; transform: translateX(0); }
}

/* ============ 桌面端回退：≥768px 改回垂直滚动 ============ */
@media (min-width: 768px) {
  html, body { overflow: auto; height: auto; }
  .slides {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
  }
  .slide {
    width: 100%;
    height: auto;
    min-height: auto;
    overflow: visible;
    scroll-snap-align: none;
  }
  .slide-inner {
    min-height: auto;
    padding-bottom: 60px;
    max-width: 720px;
    margin: 0 auto;
  }
  .slide-dots, .swipe-hint, .edge-tap { display: none !important; }
  body { padding-bottom: 30px; }
}

/* ============ 减少动画偏好 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slides.is-demo { animation: none; }
}