/* ============================================================
   CCKIDS 圣诞奇妙岛 · 共享视觉系统
   供报名页 / 主题接入页使用。设计变量与落地页 index.html 保持一致。
   字体：ZCOOL KuaiLe 子集（assets/zcool-subset.woff2），
   覆盖 booking / scene-XX / admin 用到的全部汉字。
   ============================================================ */
@font-face{
  font-family:'ZCOOL KuaiLe';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('zcool-subset.woff2') format('woff2');
}

:root{
  --red:        #C62828;
  --red-deep:   #8E1B1B;
  --green:      #2E7D32;
  --green-deep: #0E3B24;
  --white:      #FFFFFF;
  --blue:       #90CAF9;
  --blue-deep:  #3E7CB1;
  --gold:       #FFCA28;
  --gold-deep:  #F2A100;

  --paper:      #FFFBF3;
  --paper-2:    #FFF6E6;
  --ink:        #33251F;
  --ink-soft:   #7A6455;
  --line:       rgba(51,37,31,.18);

  --font-fun: 'ZCOOL KuaiLe','Yuanti SC','STYuanti','Hiragino Sans GB','PingFang SC',sans-serif;
  --font-body: -apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;

  --shadow-soft: 0 10px 30px rgba(51,37,31,.10);
  --ease: cubic-bezier(.22,.9,.32,1.1);

  --c1:  #C62828;
  --soft:#FDE3E0;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 纸张颗粒 */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:22px;
  min-width:0;
  position:relative;
  z-index:2;
}
.wrap--narrow{ max-width:760px; }

.hand-radius{
  border-radius:26px 20px 28px 22px / 20px 28px 22px 26px;
}

/* ==================== 飘雪 ==================== */
.snow-layer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:40;
  overflow:hidden;
}
.flake{
  position:absolute;
  top:-10vh;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9);
  animation-name:fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes fall{
  0%   { transform:translate3d(0,-10vh,0) rotate(0deg); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translate3d(var(--drift,20px),110vh,0) rotate(360deg); opacity:0; }
}

/* ==================== 按钮 ==================== */
.btn-book{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 38px;
  font-family:var(--font-fun);
  font-size:1.1rem;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,#E13B3B,#C62828);
  border:2.5px solid var(--ink);
  border-radius:20px 16px 22px 14px / 16px 22px 14px 20px;
  box-shadow:0 6px 0 rgba(51,37,31,.82);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  cursor:pointer;
}
.btn-book:hover{
  transform:translateY(-4px) rotate(-1deg);
  box-shadow:0 10px 0 rgba(51,37,31,.82);
}
.btn-book:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(51,37,31,.82); }
.btn-book.is-busy{ opacity:.7; pointer-events:none; }

.btn-island{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 46px;
  font-family:var(--font-fun);
  font-size:1.22rem;
  color:#40230A;
  text-decoration:none;
  background:linear-gradient(180deg,#FFD95E 0%,#FFCA28 55%,#F5B301 100%);
  border:2.5px solid var(--ink);
  border-radius:22px 18px 24px 16px / 18px 24px 16px 22px;
  box-shadow:0 7px 0 rgba(51,37,31,.85), 0 14px 30px rgba(255,202,40,.35);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  cursor:pointer;
}
.btn-island:hover{
  transform:translateY(-5px) rotate(-1.2deg);
  box-shadow:0 12px 0 rgba(51,37,31,.85), 0 20px 40px rgba(255,202,40,.5);
}
.btn-island:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(51,37,31,.85); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 28px;
  font-family:var(--font-fun);
  font-size:1rem;
  color:var(--ink);
  text-decoration:none;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:18px 14px 20px 12px / 14px 20px 12px 18px;
  box-shadow:0 5px 0 rgba(51,37,31,.18);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  cursor:pointer;
}
.btn-ghost:hover{ transform:translateY(-3px); box-shadow:0 8px 0 rgba(51,37,31,.18); }

/* ==================== 徽章 / 印章 ==================== */
.mini-stamp{
  width:38px; height:38px;
  display:grid; place-items:center;
  font-size:17px;
  border:1.6px dashed rgba(198,40,40,.45);
  border-radius:50%;
  transform:rotate(-8deg);
  opacity:.85;
}
.stamps-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin-top:34px;
  padding-top:26px;
  border-top:1.5px dashed rgba(51,37,31,.15);
}

/* ==================== 标签 ==================== */
.tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 11px;
  font-size:11.5px;
  line-height:1.6;
  color:var(--ink);
  background:var(--soft,#F7F7F7);
  border:1.4px solid rgba(51,37,31,.22);
  border-radius:999px;
}
.tag--style{ background:#fff; }

/* ==================== 顶部导航条 ==================== */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,251,243,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1.5px dashed rgba(51,37,31,.14);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:13px 0;
}
.topbar-brand{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-fun);
  font-size:1.05rem;
  color:var(--ink);
  text-decoration:none;
  min-width:0;
}
.topbar-brand .seal{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  background:var(--red);
  color:#fff;
  border:2px solid var(--ink);
  border-radius:50%;
  font-size:13px;
  transform:rotate(-6deg);
}
.topbar-link{
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:none;
  white-space:nowrap;
  padding:7px 13px;
  border:1.5px solid rgba(51,37,31,.2);
  border-radius:999px;
  background:#fff;
}
.topbar-link:hover{ color:var(--red); border-color:var(--red); }

/* ==================== 页头 Hero ==================== */
.hero{
  position:relative;
  padding:52px 0 34px;
  text-align:center;
  overflow:hidden;
}
.hero-kicker{
  display:inline-block;
  padding:5px 16px;
  font-size:11px;
  letter-spacing:.28em;
  color:var(--c1,#C62828);
  background:var(--soft,#FDE3E0);
  border:1.5px solid rgba(51,37,31,.18);
  border-radius:999px;
  margin-bottom:16px;
}
.hero-title{
  font-family:var(--font-fun);
  font-weight:400;
  font-size:clamp(1.85rem,6.2vw,3rem);
  line-height:1.35;
  margin:0;
  color:var(--ink);
}
.hero-sub{
  margin:16px auto 0;
  max-width:540px;
  font-size:.95rem;
  color:var(--ink-soft);
  line-height:1.95;
}

/* ==================== 卡片 ==================== */
.card{
  position:relative;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:36px 28px 38px 30px / 28px 38px 30px 36px;
  box-shadow:9px 11px 0 rgba(51,37,31,.09);
}

/* ==================== 表单 ==================== */
.form-card{
  padding:34px 22px 30px;
}
@media(min-width:640px){ .form-card{ padding:42px 40px 36px; } }

.field{ margin-bottom:22px; }
.field:last-child{ margin-bottom:0; }

.label-row{
  display:flex; align-items:center; gap:9px;
  margin-bottom:9px;
}
.label{
  font-family:var(--font-fun);
  font-size:1.02rem;
  color:var(--ink);
}
.req{
  padding:1px 9px;
  font-size:10.5px;
  color:#fff;
  background:var(--red);
  border-radius:999px;
  letter-spacing:.06em;
}
.opt{
  padding:1px 9px;
  font-size:10.5px;
  color:var(--ink-soft);
  background:var(--paper-2);
  border:1px solid rgba(51,37,31,.16);
  border-radius:999px;
  letter-spacing:.06em;
}

.input,.textarea,.picker{
  width:100%;
  padding:14px 16px;
  font-family:var(--font-body);
  font-size:16px;              /* 16px 防 iOS 聚焦缩放 */
  color:var(--ink);
  background:var(--paper);
  border:2px solid rgba(51,37,31,.22);
  border-radius:16px 13px 17px 12px / 13px 17px 12px 16px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
.input:focus,.textarea:focus,.picker:focus{
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(198,40,40,.13);
  background:#fff;
}
.textarea{ min-height:110px; resize:vertical; line-height:1.75; }
.input::placeholder,.textarea::placeholder{ color:#B9A697; }

.picker{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
  background:#fff;
}
.picker.is-empty .picker-text{ color:#B9A697; }
.picker-arrow{
  color:var(--ink-soft);
  font-size:18px;
  transition:transform .2s ease;
}
.picker.has-value .picker-arrow{ transform:rotate(90deg); color:var(--red); }

/* 原生 select / date 在移动端的表现更稳 */
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2333251F' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
}

.field-tip{
  display:block;
  margin-top:7px;
  font-size:12.5px;
  color:var(--red);
}
.field-hint{
  display:block;
  margin:-2px 0 11px;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.7;
}

.field-bad .input,
.field-bad .picker,
.field-bad .textarea{ border-color:var(--red); }

/* 时空多选 */
.picks{
  display:flex; flex-wrap:wrap; gap:9px;
}
.pick{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px;
  font-size:13.5px;
  color:var(--ink);
  background:#fff;
  border:1.8px solid rgba(51,37,31,.2);
  border-radius:14px 11px 15px 10px / 11px 15px 10px 14px;
  cursor:pointer;
  transition:all .18s var(--ease);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.pick-no{
  font-family:var(--font-fun);
  font-size:11px;
  color:#fff;
  background:var(--c1,#C62828);
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:50%;
}
.pick.is-on{
  background:var(--soft,#FDE3E0);
  border-color:var(--c1,#C62828);
  transform:translateY(-2px) rotate(-1deg);
  box-shadow:0 5px 0 rgba(51,37,31,.12);
}
.pick-summary{
  display:inline-block;
  margin-top:11px;
  font-size:12.5px;
  color:var(--c1,#C62828);
  font-weight:600;
}

/* 错误横幅 */
.error-banner{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:20px;
  padding:13px 15px;
  background:#FDECEC;
  border:1.8px solid var(--red);
  border-radius:15px 12px 16px 11px / 12px 16px 11px 15px;
}
.error-icon{
  flex:none;
  width:22px; height:22px;
  display:grid; place-items:center;
  background:var(--red);
  color:#fff;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
}
.error-text{
  font-size:13.5px;
  line-height:1.7;
  color:var(--red-deep);
}

/* 提交区 */
.submit-area{
  margin-top:26px;
  text-align:center;
}
.submit-note{
  display:block;
  margin-top:14px;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.8;
}

/* ==================== 结果 / 回执 ==================== */
.slip{
  margin:18px 0 0;
  padding:18px 18px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  line-height:1.95;
  color:var(--ink);
  background:var(--paper);
  border:1.8px dashed rgba(51,37,31,.28);
  border-radius:15px 12px 16px 11px / 12px 16px 11px 15px;
  white-space:pre-wrap;
  word-break:break-word;
}

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 15px;
  font-size:12.5px;
  border-radius:999px;
  margin-bottom:14px;
}
.status-pill--ok{
  background:#E6F4E7;
  color:var(--green-deep);
  border:1.5px solid rgba(46,125,50,.35);
}
.status-pill--wait{
  background:#FFF4D6;
  color:#8A5A00;
  border:1.5px solid rgba(242,161,0,.4);
}

.result-actions{
  display:flex; flex-wrap:wrap; gap:11px;
  justify-content:center;
  margin-top:22px;
}

/* ==================== 样片画廊 ==================== */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
}
@media(min-width:720px){
  .gallery{ grid-template-columns:repeat(3,1fr); gap:14px; }
}
.gallery-item{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--soft,#FDE3E0);
  border:2px solid var(--ink);
  border-radius:20px 15px 22px 16px / 16px 22px 16px 20px;
  box-shadow:4px 5px 0 rgba(51,37,31,.08);
  cursor:pointer;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.05); }

.gallery-ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  background:
    linear-gradient(160deg, var(--soft,#FDE3E0) 0%, #fff 100%);
  color:var(--c1,#C62828);
}
.gallery-ph .ph-icon{ font-size:30px; opacity:.85; }
.gallery-ph .ph-text{
  font-family:var(--font-fun);
  font-size:13px;
  opacity:.75;
}
.gallery-item img.is-ok + .gallery-ph{ display:none; }

.gallery-item--wide{
  grid-column:span 2;
  aspect-ratio:16/10;
}
@media(min-width:720px){
  .gallery-item--wide{ grid-column:span 2; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  z-index:80;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  background:rgba(20,14,10,.9);
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:100%;
  max-height:86vh;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;
  top:18px; right:18px;
  width:42px; height:42px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

/* ==================== 页脚 ==================== */
.site-footer{
  padding:44px 0 54px;
  background:#0E3B24;
  color:rgba(255,249,232,.6);
  text-align:center;
  font-size:12.5px;
  letter-spacing:.05em;
}
.site-footer a{
  color:rgba(255,249,232,.85);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ==================== 入场动画 ==================== */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .7s ease, transform .7s var(--ease);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}

/* ==================== 工具类 ==================== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-16{ margin-bottom:16px; }
.stack-14 > * + *{ margin-top:14px; }
.divider{
  height:0;
  border:0;
  border-top:1.5px dashed rgba(51,37,31,.16);
  margin:28px 0;
}