/* =========================================================
   MaiRoom 線上預約（預約檔期頁）
   沿用全站 Quiet Cream 色票與字體，只在這一頁載入
   ========================================================= */

.co{ --co-ok:#6E9B78; --co-full:#B9A896; --co-bad:#A55252; --co-card:#fff; }
.co [hidden]{ display:none !important; }
.co-sans{ font-family:var(--sans-tc); letter-spacing:.02em; }

.co-layout{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;
  grid-template-columns:minmax(0,1fr) 340px;
}
@media (max-width:980px){ .co-layout{ grid-template-columns:1fr; } }

/* ---------- 步驟區塊 ---------- */
.co-step{ padding-block:0 clamp(2.2rem,5vw,3rem); }
.co-step + .co-step{ border-top:1px solid var(--line); padding-top:clamp(2rem,4.5vw,2.8rem); }
.co-step__head{ display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.3rem; }
.co-step__no{
  font-family:var(--serif-tc); font-size:.95rem; color:var(--gold);
  width:2.1rem; height:2.1rem; border:1px solid var(--taupe); border-radius:50%;
  display:grid; place-items:center; flex:none; line-height:1; transform:translateY(-.1rem);
}
.co-step__head h2{ font-size:clamp(1.2rem,2.4vw,1.5rem); letter-spacing:.14em; margin:0; }
.co-step__head p{ margin:0 0 0 auto; font-size:.85rem; color:var(--text-soft); line-height:1.6; }
.co-step.is-locked .co-step__body{ opacity:.45; pointer-events:none; }
.co-hint{ font-size:.9rem; color:var(--text-soft); margin:0; line-height:1.8; }

/* ---------- 方案卡 ---------- */
/* 還沒選的步驟：提示一下 */
.co-step.is-missing .co-step__no{ border-color:var(--co-bad); color:var(--co-bad); }
.co-step.is-missing .co-step__body{ animation:co-shake .4s ease; }
@keyframes co-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
@media (prefers-reduced-motion:reduce){ .co-step.is-missing .co-step__body{ animation:none; } }

/* 第 1 步：兩個大類別 */
.co-cats{ display:grid; gap:.9rem; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
@media (max-width:640px){ .co-cats{ grid-template-columns:1fr; } }
/* 手機：方案接在自己的類別底下；桌機：方案佔整列 */
.co-cat-block{ display:grid; gap:.9rem; align-content:start; }
@media (min-width:641px){
  .co-cat-block{ display:contents; }
  .co-cat-block:nth-child(1) > .co-cat{ grid-row:1; grid-column:1; }
  .co-cat-block:nth-child(2) > .co-cat{ grid-row:1; grid-column:2; }
  .co-cats .co-plans{ grid-row:2; grid-column:1 / -1; }  /* 同一時間只會顯示一組 */
}
.co-cat{
  position:relative; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:1.15rem 2.6rem 1.15rem 1.2rem; display:grid; gap:.3rem;
  font:inherit; font-family:var(--sans-tc);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.co-cat:hover{ border-color:var(--taupe); transform:translateY(-2px); }
.co-cat:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.co-cat[aria-pressed="true"]{ border-color:var(--cocoa); box-shadow:0 0 0 1px var(--cocoa), 0 18px 36px -28px rgba(92,70,51,.55); }
.co-cat__name{ font-family:var(--serif-tc); font-size:1.12rem; letter-spacing:.14em; color:var(--cocoa); }
.co-cat__meta{ font-size:.82rem; color:var(--text-soft); line-height:1.7; }
.co-cat__caret{
  position:absolute; right:1.3rem; top:50%; width:.5rem; height:.5rem; margin-top:-.35rem;
  border-right:1px solid var(--cocoa-soft); border-bottom:1px solid var(--cocoa-soft);
  transform:rotate(45deg); transition:transform .35s ease;
}
.co-cat[aria-expanded="true"] .co-cat__caret{ transform:rotate(-135deg); }
.co-plans{ display:grid; gap:.9rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:.9rem; }
.co-cats .co-plans{ margin-top:0; }
.co-plans--one{ grid-template-columns:minmax(0,1fr); }
@media (min-width:641px){ .co-plans--one .co-plan{ max-width:calc(50% - .45rem); } }
@media (max-width:640px){ .co-plans{ grid-template-columns:1fr; } }
.co-plan{
  position:relative; text-align:left; background:var(--co-card);
  border:1px solid var(--line); border-radius:6px; padding:1.25rem 1.3rem 1.2rem;
  font:inherit; color:inherit; cursor:pointer; display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.co-plan:hover{ border-color:var(--taupe); transform:translateY(-2px); }
.co-plan:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.co-plan[aria-pressed="true"]{ border-color:var(--cocoa); box-shadow:0 0 0 1px var(--cocoa), 0 18px 36px -28px rgba(92,70,51,.55); }
.co-plan__top{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; padding-right:1.9rem; }
.co-plan__name{ font-size:1.12rem; letter-spacing:.14em; color:var(--cocoa); font-weight:500; }
.co-plan__price{ margin-left:auto; font-family:var(--serif-en); font-size:1.35rem; color:var(--cocoa); white-space:nowrap; }
.co-plan__price small{ font-family:var(--serif-tc); font-size:.72rem; color:var(--text-soft); letter-spacing:.08em; }
.co-plan__meta{ font-size:.84rem; color:var(--text-soft); line-height:1.75; margin:0; }
.co-plan__list{ display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none; }
.co-plan__list > span{ font-size:.8rem; line-height:1.5; padding:.15rem .6rem; border-radius:999px; background:var(--cream-2); color:var(--cocoa-soft); letter-spacing:.06em; }
.co-plan__add{ font-size:.8rem; color:var(--text-soft); margin:0; line-height:1.6; }
.co-plan__tick{
  position:absolute; top:.8rem; right:.8rem; width:1.35rem; height:1.35rem; border-radius:50%;
  border:1px solid var(--taupe); display:grid; place-items:center; font-size:.75rem; color:transparent;
}
.co-plan[aria-pressed="true"] .co-plan__tick{ background:var(--cocoa); border-color:var(--cocoa); color:var(--cream); }

/* ---------- 日曆 ---------- */
.co-tools{ display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center; margin-bottom:1rem; }
.co-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:var(--co-card); }
.co-stepper button{ width:2.4rem; height:2.4rem; border:0; background:none; font-size:1.2rem; color:var(--cocoa); cursor:pointer; border-radius:50%; }
.co-stepper button:disabled{ color:var(--taupe); cursor:not-allowed; }
.co-stepper output{ min-width:4.8rem; text-align:center; font-size:.95rem; }
.co-label{ font-size:.88rem; color:var(--cocoa-soft); }

.co-cal{ background:var(--co-card); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.co-cal__head{ display:flex; align-items:center; gap:.5rem; padding:.7rem .8rem; border-bottom:1px solid var(--line-soft); }
.co-cal__head h3{ margin:0 auto; font-size:1.05rem; letter-spacing:.14em; }
.co-cal__nav{ width:2.3rem; height:2.3rem; border-radius:50%; border:1px solid var(--line); background:none; color:var(--cocoa); cursor:pointer; font-size:1.1rem; }
.co-cal__nav:disabled{ opacity:.35; cursor:not-allowed; }
.co-cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:.4rem; gap:.25rem; }
.co-dow{ text-align:center; font-size:.74rem; color:var(--text-soft); letter-spacing:.1em; padding:.3rem 0; }
.co-dow.we{ color:var(--gold); }
.co-day{
  aspect-ratio:1/1; min-height:2.8rem; border:0; border-radius:6px; background:none; font:inherit; color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; cursor:pointer; padding:0;
  transition:background .2s;
}
.co-day__n{ font-family:var(--serif-en); font-size:1.08rem; line-height:1; }
.co-day__s{ font-size:.64rem; letter-spacing:.04em; line-height:1.2; font-family:var(--sans-tc); }
.co-day.is-open{ background:var(--cream-2); }
.co-day.is-open .co-day__s{ color:var(--co-ok); }
.co-day.is-open:hover{ background:var(--sand); }
.co-day.is-full{ cursor:not-allowed; color:var(--co-full); }
.co-day.is-full .co-day__n{ text-decoration:line-through; }
.co-day.is-off{ cursor:default; color:var(--taupe); }
.co-day.is-out{ visibility:hidden; }
.co-day.is-sel{ background:var(--cocoa); color:var(--cream); }
.co-day.is-sel .co-day__s{ color:var(--cream); }
.co-day:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
@media (max-width:420px){ .co-day__s{ font-size:.56rem; } .co-day{ min-height:2.4rem; } }
.co-legend{ display:flex; gap:1.1rem; flex-wrap:wrap; padding:.55rem .9rem .7rem; font-size:.76rem; color:var(--text-soft); border-top:1px solid var(--line-soft); }
.co-legend i{ display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-right:.35rem; vertical-align:-1px; }

.co-slots{ margin-top:1.3rem; }
.co-slots h3{ font-size:1rem; letter-spacing:.12em; margin:0 0 .8rem; }
.co-slot-group{ margin-bottom:.9rem; }
.co-slot-group p{ margin:0 0 .4rem; font-size:.78rem; color:var(--text-soft); letter-spacing:.14em; }
.co-slot-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr)); gap:.45rem; }
.co-slot{
  border:1px solid var(--line); background:var(--co-card); border-radius:999px; padding:.55rem .6rem;
  font-family:var(--serif-en); font-size:1.02rem; color:var(--cocoa); cursor:pointer; letter-spacing:.04em;
}
.co-slot:hover{ border-color:var(--cocoa); }
.co-slot[aria-pressed="true"]{ background:var(--cocoa); color:var(--cream); border-color:var(--cocoa); }
.co-slot:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- 人數與加購 ---------- */
.co-opts{ display:grid; gap:1.1rem; }
.co-checks{ display:flex; flex-wrap:wrap; gap:.5rem; }
.co-check{
  display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; background:var(--co-card); cursor:pointer; font-size:.92rem; user-select:none;
}
.co-check input{ accent-color:var(--cocoa); width:1rem; height:1rem; margin:0; }
.co-check:has(input:checked){ border-color:var(--cocoa); background:var(--cream-2); }
.co-check b{ font-weight:500; color:var(--gold); font-family:var(--serif-en); font-size:1rem; }

.co-lines{ width:100%; border-collapse:collapse; font-size:.92rem; }
.co-lines td{ padding:.45rem 0; border-bottom:1px dashed var(--line); vertical-align:top; line-height:1.6; }
.co-lines td:last-child{ text-align:right; white-space:nowrap; padding-left:1rem; font-family:var(--serif-en); font-size:1.02rem; }
.co-lines tr.tot td{ border-bottom:0; padding-top:.7rem; font-size:1rem; color:var(--cocoa); }
.co-lines tr.tot td:last-child{ font-size:1.45rem; }

.co-addbar{
  margin-top:1.6rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.2rem; background:var(--co-card); border:1px solid var(--line); border-radius:6px;
}
.co-addbar__sum{ margin-right:auto; line-height:1.5; }
.co-addbar__sum small{ display:block; font-size:.8rem; color:var(--text-soft); }
.co-addbar__sum strong{ font-family:var(--serif-en); font-size:1.6rem; font-weight:500; color:var(--cocoa); }

/* ---------- 購物車 ---------- */
.co-cart{
  position:sticky; top:calc(var(--header-h, 80px) + 1rem);
  background:var(--co-card); border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
@media (max-width:980px){ .co-cart{ position:static; } }
.co-cart__head{ display:flex; align-items:baseline; gap:.5rem; padding:1rem 1.2rem .8rem; border-bottom:1px solid var(--line-soft); }
.co-cart__head h2{ font-size:1.1rem; letter-spacing:.16em; margin:0; }
.co-cart__head span{ font-size:.82rem; color:var(--text-soft); }
.co-cart__list{ list-style:none; margin:0; padding:.3rem 1.2rem; }
.co-cart__item{ padding:.8rem 0; border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; }
.co-cart__item:last-child{ border-bottom:0; }
.co-cart__item b{ font-weight:500; color:var(--cocoa); letter-spacing:.08em; }
.co-cart__item .amt{ font-family:var(--serif-en); font-size:1.08rem; color:var(--cocoa); text-align:right; }
.co-cart__item small{ grid-column:1 / -1; font-size:.82rem; color:var(--text-soft); line-height:1.65; }
.co-cart__item .rm{
  grid-column:1 / -1; justify-self:start; margin-top:.5rem; padding:.4rem .9rem; min-height:36px;
  border:1px solid var(--line); border-radius:999px; background:#fff; font:inherit; font-family:var(--sans-tc);
  font-size:.8rem; color:var(--cocoa-soft); letter-spacing:.08em; cursor:pointer;
}
.co-cart__item .rm:hover,.co-cart__item .rm:focus-visible{ color:var(--co-bad); border-color:var(--co-bad); }
.co-cart__note{ margin:0; padding:.2rem 1.2rem .9rem; font-size:.78rem; line-height:1.7; color:var(--text-soft); }
.co-cart__item.is-bad small.warn{ color:var(--co-bad); }
.co-cart__empty{ padding:1.4rem 1.2rem; font-size:.9rem; color:var(--text-soft); line-height:1.8; margin:0; }
.co-cart__foot{ padding:1rem 1.2rem 1.2rem; border-top:1px solid var(--line-soft); background:var(--cream); }
.co-cart__total{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.9rem; }
.co-cart__total span{ font-size:.9rem; color:var(--cocoa-soft); letter-spacing:.12em; }
.co-cart__total strong{ font-family:var(--serif-en); font-size:1.9rem; font-weight:500; color:var(--cocoa); }
.co-cart__foot .btn{ width:100%; }

/* 手機底部購物車列 */
.co-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  align-items:center; gap:.8rem; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,247,240,.97); border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(92,70,51,.5);
}
.co-bar__sum{ margin-right:auto; line-height:1.3; border:0; background:none; padding:0; text-align:left; font:inherit; cursor:pointer; }
.co-bar__sum small{ display:block; font-size:.74rem; color:var(--text-soft); }
.co-bar__more{ margin-left:.4rem; color:var(--cocoa-soft); text-decoration:underline; text-underline-offset:2px; }
.co-bar__sum strong{ font-family:var(--serif-en); font-size:1.4rem; font-weight:500; color:var(--cocoa); }
.co-bar .btn{ padding:.75em 1.6em; }
@media (max-width:980px){
  .co-bar.is-on{ display:flex; }
  body.co-has-bar .float-cta{ bottom:5.6rem; }
  body.co-has-bar{ padding-bottom:4.8rem; }
}

/* ---------- 加入購物車後的提示 ---------- */
.co-sheet{ position:fixed; inset:0; z-index:150; display:flex; overflow-y:auto; overscroll-behavior:contain; padding:1rem; background:rgba(60,45,33,.38); } /* 蓋過頁首與浮動按鈕；內容太長時可以捲動 */
.co-sheet__box{
  width:min(440px,100%); margin:auto; background:var(--cream); border-radius:10px; padding:1.5rem 1.4rem 1.3rem;
  box-shadow:0 30px 60px -30px rgba(40,28,18,.6); text-align:center;
}
.co-sheet__icon{ width:3rem; height:3rem; margin:0 auto .7rem; border-radius:50%; background:var(--cocoa); color:var(--cream); display:grid; place-items:center; font-size:1.3rem; }
.co-sheet h3{ margin:0 0 .3rem; letter-spacing:.14em; }
.co-sheet p{ margin:0; font-size:.9rem; color:var(--text-soft); line-height:1.8; }
.co-sheet__amt{ margin:1rem 0 1.2rem; padding:.9rem; border-radius:6px; background:#fff; border:1px solid var(--line); }
.co-sheet__amt small{ display:block; font-size:.82rem; color:var(--text-soft); letter-spacing:.12em; }
.co-sheet__amt strong{ font-family:var(--serif-en); font-size:2.3rem; font-weight:500; color:var(--cocoa); line-height:1.2; }
.co-cartsheet{ text-align:left; }
.co-cartsheet h3{ text-align:center; margin-bottom:.6rem; }
.co-cartsheet .co-cart__list{ padding:0; max-height:46vh; overflow-y:auto; }
.co-cartsheet .co-cart__note{ padding:0 0 .9rem; }
.co-sheet__btns{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.co-sheet__btns .btn{ padding:.85em 1em; letter-spacing:.12em; }
@media (prefers-reduced-motion:no-preference){
  .co-sheet__box{ animation:co-pop .28s cubic-bezier(.2,.8,.3,1.2); }
  @keyframes co-pop{ from{ transform:translateY(12px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
}

/* ---------- 折扣碼 ---------- */
.co-promo{ margin:1rem 0 .2rem; padding:.9rem 1rem; border:1px dashed var(--line); border-radius:10px; background:#fff; }
.co-promo.is-on{ border-style:solid; border-color:var(--co-ok,#7A8C6B); background:#F4F7F0; }
.co-promo label{ display:block; font-size:.88rem; color:var(--cocoa); letter-spacing:.08em; margin-bottom:.45rem; font-family:var(--sans-tc); }
.co-promo label span{ color:var(--text-soft); font-size:.8rem; margin-left:.4rem; letter-spacing:0; }
.co-promo__row{ display:flex; gap:.5rem; }
.co-promo__input{
  flex:1; min-width:0; padding:.7rem .9rem; border:1px solid var(--line); border-radius:8px; background:var(--cream);
  font:inherit; font-family:var(--sans-tc); font-size:.95rem; letter-spacing:.12em; text-transform:uppercase;
}
.co-promo__input:focus{ outline:2px solid var(--cocoa-soft); outline-offset:1px; }
.co-promo__row .btn{ flex:none; padding:.7em 1.4em; }
.co-promo__msg{ margin:.55rem 0 0; font-size:.84rem; color:var(--co-bad); line-height:1.6; font-family:var(--sans-tc); }
.co-promo__ok{ margin:0; font-size:.92rem; color:var(--cocoa); line-height:1.7; font-family:var(--sans-tc); }
.co-promo__clear{ margin-top:.5rem; border:0; background:none; padding:0; font:inherit; font-size:.8rem; color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.co-promo__clear:hover{ color:var(--co-bad); }
.co-lines__off td{ color:var(--cocoa); }

/* ---------- 結帳表單 ---------- */
.co-back{ border:0; background:none; padding:0; font:inherit; font-size:.9rem; color:var(--cocoa-soft); cursor:pointer; margin-bottom:1.2rem; letter-spacing:.08em; }
.co-back:hover{ color:var(--cocoa); }
.co-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.1rem; }
@media (max-width:640px){ .co-form{ grid-template-columns:1fr; } }
.co-field{ display:flex; flex-direction:column; gap:.35rem; }
.co-field.full{ grid-column:1 / -1; }
.co-field label{ font-size:.88rem; color:var(--cocoa); letter-spacing:.08em; }
.co-field label em{ font-style:normal; color:var(--co-bad); margin-left:.2rem; }
.co-field label span{ color:var(--text-soft); font-size:.8rem; margin-left:.3rem; }
.co-field input,.co-field textarea{
  font:inherit; font-family:var(--sans-tc); font-size:1rem; letter-spacing:.02em; color:var(--text);
  border:1px solid var(--line); background:#fff; border-radius:6px; padding:.7rem .8rem; width:100%;
}
.co-field textarea{ min-height:5.5rem; resize:vertical; line-height:1.7; }
.co-field input:focus,.co-field textarea:focus{ outline:2px solid var(--gold); outline-offset:0; border-color:transparent; }
.co-field input[aria-invalid="true"]{ border-color:var(--co-bad); }
.co-agree{ grid-column:1 / -1; display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; line-height:1.7; cursor:pointer; }
.co-agree input{ accent-color:var(--cocoa); width:1.05rem; height:1.05rem; margin:.3rem 0 0; flex:none; }
.co-agree a{ text-decoration:underline; text-underline-offset:3px; }
.co-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.co-err{ grid-column:1 / -1; margin:0; padding:.75rem 1rem; border-radius:6px; background:#F6E3E1; color:#8E3434; font-size:.92rem; line-height:1.7; }
.co-submit{ grid-column:1 / -1; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.4rem; }
.co-submit .btn{ flex:1 1 16rem; }
.co-submit p{ margin:0; font-size:.82rem; color:var(--text-soft); line-height:1.7; flex:1 1 14rem; }

/* ---------- 付款資訊 ---------- */
.co-pay{ max-width:720px; }
.co-pay__head{ text-align:center; margin-bottom:1.8rem; }
.co-pay__head .co-sheet__icon{ width:3.4rem; height:3.4rem; font-size:1.5rem; }
.co-pay__head h2{ margin:.2rem 0 .5rem; letter-spacing:.16em; }
.co-pay__head p{ margin:0; color:var(--text-soft); font-size:.95rem; }
.co-pay__id{ display:inline-flex; align-items:center; gap:.6rem; margin-top:.8rem; padding:.35rem .5rem .35rem 1rem; border:1px solid var(--line); border-radius:999px; background:#fff; }
.co-pay__id code{ font-family:var(--serif-en); font-size:1.15rem; letter-spacing:.1em; color:var(--cocoa); }

.co-paystep{ display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:0 1rem; padding-bottom:1.6rem; position:relative; }
.co-paystep::before{ content:""; position:absolute; left:1.2rem; top:2.6rem; bottom:.4rem; width:1px; background:var(--taupe); }
.co-paystep:last-child::before{ display:none; }
.co-paystep__no{ width:2.4rem; height:2.4rem; border-radius:50%; background:var(--cocoa); color:var(--cream); display:grid; place-items:center; font-family:var(--serif-tc); font-size:1rem; }
.co-paystep.is-wait .co-paystep__no{ background:#fff; color:var(--cocoa); border:1px solid var(--taupe); }
.co-paystep h3{ margin:.35rem 0 .7rem; font-size:1.1rem; letter-spacing:.12em; }
.co-paybox{ background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.co-payamt{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.co-payamt span{ font-size:.9rem; color:var(--cocoa-soft); letter-spacing:.12em; }
.co-payamt strong{ font-family:var(--serif-en); font-size:2.4rem; font-weight:500; color:var(--cocoa); line-height:1.1; }
.co-bank{ width:100%; border-collapse:collapse; }
.co-bank th{ text-align:left; font-weight:400; font-size:.86rem; color:var(--text-soft); padding:.7rem 0 .7rem 1.2rem; width:5.5rem; letter-spacing:.1em; white-space:nowrap; }
.co-bank td{ padding:.7rem 1.2rem .7rem .6rem; font-size:1.05rem; color:var(--cocoa); }
.co-bank tr + tr th,.co-bank tr + tr td{ border-top:1px solid var(--line-soft); }
.co-bank td .val{ font-family:inherit; font-size:1.08rem; letter-spacing:.08em; font-variant-numeric:lining-nums tabular-nums; word-break:break-all; }
.co-bank td .todo{ font-family:var(--sans-tc); font-size:.88rem; color:#8A5410; background:#FBEBD2; border-radius:4px; padding:.1rem .45rem; }
.co-bank td .cp{ float:right; }
.co-copy{ border:1px solid var(--line); background:var(--cream); border-radius:999px; padding:.2rem .75rem; font:inherit; font-size:.78rem; color:var(--cocoa); cursor:pointer; letter-spacing:.08em; white-space:nowrap; }
.co-copy:hover{ border-color:var(--cocoa); }
.co-deadline{ margin:.8rem 0 0; font-size:.9rem; line-height:1.8; color:var(--cocoa-soft); }
.co-deadline b{ color:var(--cocoa); font-weight:500; }

.co-last5{ display:flex; gap:.7rem; align-items:stretch; flex-wrap:wrap; }
.co-last5 input{
  font-family:var(--serif-en); font-size:1.6rem; letter-spacing:.5em; text-align:center; width:10.5rem;
  border:1px solid var(--line); border-radius:8px; padding:.4rem .2rem .4rem .7rem; background:#fff; color:var(--cocoa);
}
.co-last5 input:focus{ outline:2px solid var(--gold); border-color:transparent; }
.co-last5 .btn{ flex:1 1 14rem; }
.co-linetip{ margin:.7rem 0 0; font-size:.84rem; color:var(--text-soft); line-height:1.8; }
.co-linetip button{ border:0; background:none; padding:0; font:inherit; color:var(--cocoa); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

.co-summary{ margin-top:1.6rem; }
.co-summary summary{ cursor:pointer; font-size:.95rem; color:var(--cocoa); letter-spacing:.1em; padding:.6rem 0; }
.co-summary .co-cart__list{ padding:0; }

.co-resume{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:.9rem 1.2rem; margin-bottom:1.6rem; border-radius:6px; background:#FBEBD2; color:#7A4E12; font-size:.92rem; line-height:1.7; }
.co-resume .btn{ margin-left:auto; }
.co-status{ display:inline-block; font-size:.8rem; padding:.1rem .7rem; border-radius:999px; border:1px solid currentColor; letter-spacing:.1em; }

.co-toast{ position:fixed; left:50%; bottom:6rem; transform:translateX(-50%); z-index:160; background:var(--cocoa); color:var(--cream); padding:.55rem 1.2rem; border-radius:999px; font-size:.88rem; letter-spacing:.08em; box-shadow:0 12px 30px -16px rgba(40,28,18,.6); white-space:nowrap; }

.co-loading{ padding:2rem 1rem; text-align:center; color:var(--text-soft); font-size:.92rem; }
.co-fallback{ padding:1.4rem 1.2rem; border:1px dashed var(--taupe); border-radius:6px; text-align:center; line-height:1.9; color:var(--cocoa-soft); }
.co-fallback .btn{ margin-top:.8rem; }

/* ---------- 檢視切換：結帳與付款改為單欄聚焦 ---------- */
.co-layout.is-checkout,
.co-layout.is-pay{ grid-template-columns:minmax(0,1fr); }
.co-layout.is-checkout .co-cart,
.co-layout.is-pay .co-cart{ display:none; }
.co-layout.is-checkout .co-main,
.co-layout.is-pay .co-main{ width:100%; max-width:760px; margin-inline:auto; }

.co .btn:disabled,
.co .btn[disabled]{ opacity:.38; cursor:not-allowed; transform:none; }
.co .btn--solid:disabled:hover{ background:var(--cocoa); border-color:var(--cocoa); }
.co .btn:not(.btn--solid):disabled:hover{ background:transparent; color:var(--cocoa); }
.co-plan__price small{ margin-left:.1rem; }

/* 桌機的日曆格改成扁長，時段不會被擠到畫面外 */
@media (min-width:641px){
  .co-day{ aspect-ratio:auto; height:3.6rem; }
}

/* 包套固定三個時段：桌機並排，手機一行一個方便點 */
.co-slot-row--fixed{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.co-slot-row--fixed .co-slot{ padding:.8rem .6rem; font-size:1.12rem; }
@media (max-width:520px){ .co-slot-row--fixed{ grid-template-columns:1fr; } }
.co-slot small{ display:block; font-family:var(--sans-tc); font-size:.72rem; letter-spacing:.1em; margin-top:.1rem; }
.co-slot.is-taken{ background:transparent; color:var(--co-full); border-style:dashed; cursor:not-allowed; }
.co-slot.is-taken:hover{ border-color:var(--line); }
.co-opts .co-tools{ margin-bottom:0; }

/* 付款頁：預約的日期與時間 */
.co-when{
  max-width:520px; margin:0 auto 2.2rem; padding:1.1rem 1.4rem 1rem;
  background:#fff; border:1px solid var(--line); border-radius:10px; text-align:center;
  box-shadow:0 18px 36px -30px rgba(92,70,51,.45);
}
.co-when__label{ margin:0; font-size:.8rem; letter-spacing:.24em; color:var(--gold); }
.co-when__list{ list-style:none; margin:0; padding:0; }
.co-when__list li{ display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.75rem 0; }
.co-when__list li + li{ border-top:1px dashed var(--line); }
.co-when__date{ font-size:clamp(1.1rem,3.6vw,1.3rem); color:var(--cocoa); letter-spacing:.1em; line-height:1.5; }
.co-when__time{ font-size:clamp(1.6rem,6vw,2rem); color:var(--cocoa); letter-spacing:.06em; line-height:1.25; font-variant-numeric:lining-nums tabular-nums; }
.co-when__what{ font-size:.86rem; color:var(--cocoa-soft); line-height:1.7; }
.co-when__tip{ margin:.2rem 0 0; padding-top:.7rem; border-top:1px solid var(--line-soft); font-size:.8rem; color:var(--text-soft); }

/* 付款頁藏起全站浮動按鈕（LINE／IG／預約），避免蓋到預約時段與匯款資訊 */
body.co-paying .float-cta{ display:none; }

/* 講座場租：開始時間 ～ 結束時間（兩個相連的下拉框，手機會跳出可滑動的選擇器） */
.co-timepick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 .2rem; }
.co-select{ position:relative; display:block; min-width:0; }
.co-select > span{
  position:absolute; left:1rem; top:.5rem; pointer-events:none;
  font-family:var(--sans-tc); font-size:.72rem; letter-spacing:.12em; color:var(--text-soft);
}
.co-select select{
  -webkit-appearance:none; appearance:none; width:100%; height:4.1rem; margin:0;
  padding:1.4rem 2.4rem .4rem 1rem; cursor:pointer;
  font-family:var(--sans-tc); font-size:1.05rem; letter-spacing:.02em; color:var(--cocoa);
  font-variant-numeric:lining-nums tabular-nums;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C4633' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  border:1px solid var(--taupe);
}
.co-select:first-child select{ border-radius:10px 0 0 10px; }
.co-select:last-child select{ border-radius:0 10px 10px 0; border-left:0; }
.co-select select:focus{ outline:none; border-color:var(--cocoa); box-shadow:inset 0 0 0 1px var(--cocoa); }
.co-select:last-child select:focus{ box-shadow:inset 1px 0 0 0 var(--cocoa), inset 0 0 0 1px var(--cocoa); }
.co-select select:disabled{ background-color:var(--cream); color:var(--taupe); cursor:not-allowed; }
@media (max-width:420px){
  .co-select select{ font-size:.95rem; padding-right:2rem; background-position:right .75rem center; }
}

.co-range{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  margin:.9rem 0 .6rem; padding:.65rem .9rem; border-radius:6px; background:var(--cream-2); color:var(--cocoa); font-size:.92rem;
}
.co-range b{ font-weight:500; }
.co-range.is-short{ background:#FBEBD2; color:#7A4E12; }

/* 場地配置（講座場租） */
.co-layouts{ align-items:flex-start; }
.co-layouts .co-label{ padding-top:.55rem; }
.co-check small{ font-family:var(--sans-tc); font-size:.76rem; color:var(--text-soft); letter-spacing:.02em; }
/* 加購項目要填的備註（例如餅乾上要寫的名字） */
.co-note{ flex:0 0 100%; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.1rem 0 .2rem; }
.co-note label{ font-family:var(--sans-tc); font-size:.86rem; color:var(--text-soft); }
.co-note input{
  font:inherit; font-family:var(--sans-tc); font-size:.92rem; color:var(--cocoa);
  border:1px solid var(--line); border-radius:999px; background:var(--co-card);
  padding:.45rem 1rem; width:min(13rem,100%);
}
.co-note input:focus{ outline:none; border-color:var(--cocoa); }
.co-note small{ font-family:var(--sans-tc); font-size:.76rem; color:var(--text-soft); }

/* ---------- 預約付款與取消規定 ---------- */
.co-policy__h{
  font-size:1.02rem; font-weight:500; color:var(--cocoa); letter-spacing:.14em;
  margin:2.2rem 0 .8rem; padding-left:.8rem; border-left:3px solid var(--gold);
}
.co-policy__h:first-child{ margin-top:0; }
.co-policy__lead{ color:var(--text-soft); line-height:2; letter-spacing:.06em; }
.co-policy__lead strong{ color:var(--cocoa); font-weight:600; }
.co-policy__table thead th{
  font-size:.82rem; letter-spacing:.2em; color:var(--gold); font-weight:500;
  padding-block:.6rem; border-bottom:1px solid var(--line);
}
.co-policy__notes{ text-align:left; margin-top:1.4rem; }
@media (max-width:560px){
  .co-policy__table thead{ display:none; }
}

/* ---------- 保存訂單、查詢訂單 ---------- */
.co-resume{ display:grid; gap:.7rem; }
.co-resume__row{ display:flex; gap:.6rem 1rem; align-items:center; flex-wrap:wrap; }
.co-resume__row + .co-resume__row{ padding-top:.7rem; border-top:1px solid rgba(122,78,18,.15); }
.co-resume__row .btn{ margin-left:auto; }
.co-findorder{ margin:-.6rem 0 1.4rem; text-align:right; font-size:.86rem; color:var(--text-soft); }
.co-linkbtn{ border:0; background:none; padding:0; font:inherit; color:var(--cocoa); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.co-keep{ margin:1.2rem 0 1.6rem; padding:1rem 1.2rem; border-radius:8px; background:#fff; border:1px solid var(--line); }
.co-keep p{ margin:0; font-size:.88rem; color:var(--text-soft); line-height:1.8; }
.co-keep .co-keep__t{ font-size:.95rem; color:var(--cocoa); letter-spacing:.1em; margin-bottom:.2rem; }
.co-keep__btns{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 .5rem; }
.co-keep .co-keep__note{ font-size:.78rem; }
.co-lookup{ text-align:left; }
.co-lookup h3,.co-lookup > p{ text-align:center; }
.co-lookup__form{ display:grid; gap:.8rem; margin-top:1rem; }
.co-lookup__form .btn{ width:100%; }
.co-lookup__list{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; }
.co-lookup__list li{ display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius:6px; background:#fff; border:1px solid var(--line); }
.co-lookup__list li div{ display:flex; flex-direction:column; min-width:0; }
.co-lookup__list b{ font-weight:500; color:var(--cocoa); font-size:.9rem; line-height:1.6; }
.co-lookup__list small{ color:var(--text-soft); font-size:.78rem; }
.co-lookup__list .btn{ margin-left:auto; flex:none; }
.co-sheet .co-lookup__help{ margin-top:1rem; font-size:.82rem; text-align:center; }

/* ---------- 預約進度：等待付款 → 款項確認中 → 預約完成 ---------- */
.co-progress{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem; margin:0 auto 1.4rem; padding:0; }
.co-progress li{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .9rem .3rem .35rem; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:.84rem; color:var(--text-soft); letter-spacing:.06em; }
.co-progress li span{ width:1.4rem; height:1.4rem; border-radius:50%; display:grid; place-items:center; font-size:.74rem; background:var(--cream-2); color:var(--cocoa-soft); }
.co-progress li.is-on{ border-color:var(--cocoa); color:var(--cocoa); font-weight:500; }
.co-progress li.is-on span{ background:var(--cocoa); color:var(--cream); }
.co-progress li.is-done{ color:var(--cocoa-soft); }
.co-progress li.is-done span{ background:var(--co-ok); color:#fff; }
.co-pay__head .co-pay__mail{ margin:.9rem auto 0; max-width:30rem; font-size:.84rem; line-height:1.8; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.5rem .9rem; }

/* ---------- 暫時保留：其他客人已下單、還沒付款 ---------- */
.co-day.is-held{ cursor:not-allowed; color:var(--co-full); }
.co-day.is-held .co-day__s{ color:#B07A2A; }
.co-slot.is-held{ border-color:#D9B98A; }
.co-slot.is-held small{ color:#B07A2A; }
@media (max-width:420px){
  .co-progress{ gap:.25rem; flex-wrap:nowrap; }
  .co-progress li{ padding:.25rem .55rem .25rem .25rem; gap:.3rem; font-size:.74rem; letter-spacing:0; white-space:nowrap; }
  .co-progress li span{ width:1.2rem; height:1.2rem; font-size:.66rem; }
}
@media (max-width:359px){ .co-progress{ flex-wrap:wrap; } }