/* ════════════════════════════════════════════════════════════
   麻吉狗「暖窩」主題 — 2026-10 改版
   載入於各頁原有 <style> 之後：重新定義既有設計變數 + 覆寫共用元件。
   設計稿：Claude Design 畫布「麻吉狗住宿 · 溫暖改版設計」
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#FEF9E8;          /* 奶油底（與插畫底色一致）*/
  --surface:#FFFFFF;
  --fg:#4A3426;          /* 可可：內文 */
  --muted:#7D6553;
  --border:#F0DFB8;
  --accent:#F2B93B;      /* 鵝黃金 */
  --navy:#2A75A8;        /* 深天藍：標題、主按鈕、深色區塊 */
  --blue:#2E7AB0;
  --pink:#F6B8AE;
  --butter:#FFF1C2;
  --butter-2:#FFE8A3;
  --sky-soft:#EAF5FB;
  --sky-line:#9ACDEA;
  --coral:#EE6F5F;
  --coral-ink:#C2402F;
  --leaf:#5E9C5B;
  --shadow-stick:0 6px 0 #F3E6C6;
  --font-display:'Huninn','Noto Sans TC',-apple-system,'PingFang TC',sans-serif;
  --font-body:'Noto Sans TC',-apple-system,BlinkMacSystemFont,'PingFang TC','Segoe UI',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg)}
::selection{background:var(--butter-2)}

/* ── 測試營運橫幅 ─────────────────────────── */
.test-banner{background:#FDE3DE;color:#8F2F22;font-size:.88rem;font-weight:700;text-align:center;padding:.55rem 1rem;line-height:1.5}
.test-banner b{font-family:var(--font-display);font-weight:400;font-size:1rem}

/* ── 共用頂部導覽 ─────────────────────────── */
.site-nav{position:sticky;top:0;z-index:50;background:rgb(254 249 232/0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--border)}
.site-nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:1.25rem;padding:.6rem 1.25rem}
.site-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--fg);flex-shrink:0}
.site-brand img{width:44px;height:44px;object-fit:contain;border-radius:12px;background:#fff}
.site-brand span{font-family:var(--font-display);font-size:1.35rem}
.site-links{display:flex;align-items:center;gap:.25rem;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.site-links::-webkit-scrollbar{display:none}
.site-links a{white-space:nowrap;text-decoration:none;color:var(--fg);font-weight:500;font-size:.95rem;padding:.55rem .8rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.site-links a:hover{background:var(--butter)}
.site-links a[aria-current=page]{color:var(--navy);font-weight:700;background:var(--butter)}
.site-links a.nav-cta{background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:400;font-size:1.02rem;padding:.55rem 1.15rem;box-shadow:0 4px 0 #1F5C86;margin-left:.35rem}
.site-links a.nav-cta:hover{background:#246a99}
@media(max-width:760px){
  .site-nav{position:static}
  .site-nav-inner{flex-wrap:wrap;gap:.25rem .75rem;padding:.5rem 1rem}
  .site-brand img{width:38px;height:38px}
  .site-brand span{font-size:1.2rem}
  .site-links{order:3;width:100%;margin-left:0;padding-bottom:.25rem}
  .site-links a{font-size:.9rem;padding:.45rem .75rem;min-height:40px}
  .site-links a.nav-cta{display:none}
}

/* ── 頁首（舊版深藍 header/hero → 鵝黃雲朵）──── */
.header,.hero{background:var(--butter) !important;color:var(--fg);padding:2.5rem 1.25rem 3.25rem !important;position:relative;overflow:hidden}
.header::before,.hero::before{display:none !important}
.header::after,.hero::after{content:'';position:absolute;left:-5%;right:-5%;bottom:-1px;height:34px;background:radial-gradient(circle at 50% 100%,var(--bg) 70%,transparent 71%) 0 0/68px 68px repeat-x;pointer-events:none}
.logo-ring{background:#fff !important;border:3px solid #fff !important;box-shadow:0 6px 0 #F1DFAE !important;backdrop-filter:none !important}
.logo-ring img{filter:none !important}
.header h1,.hero h1{font-family:var(--font-display) !important;font-weight:400 !important;color:var(--navy) !important;letter-spacing:.04em !important;text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,0 6px 0 #CFE7F5}
.header .sub,.hero .sub,.tagline{color:var(--muted) !important;font-weight:500}
.gold-rule{background:linear-gradient(90deg,transparent,var(--coral),transparent) !important;height:3px !important;border-radius:3px}
.pill,.hero-badge{background:#fff !important;color:var(--fg) !important;border:2px dashed var(--sky-line) !important;font-weight:500}
.hdr-back{background:#fff !important;color:var(--navy) !important;border:2px solid var(--border) !important;min-height:40px}
.hdr-back:hover{background:var(--sky-soft) !important}

/* 舊頁首內為深底設計的白字元件（進場確認單等）*/
.badge-reg{background:#E4F2E3 !important;color:#2F6B2C !important;border:none !important}
.header .hdr-inner>div>a,.header .hdr-inner>div>button{background:#fff !important;color:var(--navy) !important;border:2px solid var(--border) !important;min-height:40px}
.header button[onclick="doLogout()"]{color:var(--coral-ink) !important}
/* 單張插畫的奶油底與頁面底色融合 */
img[src$="sleepy.webp"],img[src$="happy.webp"],img[src$="lost.webp"],img[src$="care-diary.webp"]{mix-blend-mode:multiply}

/* ── 標題、卡片 ─────────────────────────── */
.ctitle,.section-title,.update-section h2{font-family:var(--font-display) !important;font-weight:400 !important;color:var(--fg)}
.ctitle,.section-card .section-title{font-size:1.25rem !important;color:var(--navy) !important;border-bottom:2px dashed var(--border) !important}
.section-title{color:var(--navy) !important}
.section-label{background:var(--butter-2) !important;color:var(--fg) !important;font-size:.8rem !important;border-radius:999px !important}
.card,.section-card,.scard,.feature-card,.step-card,.faq-item,.skin-card,.login-card{border-radius:24px !important;border:2px solid var(--border) !important;box-shadow:var(--shadow-stick) !important}
.feature-card:hover,.step-card:hover{transform:translateY(-2px)}
.step-num{background:var(--navy) !important;font-family:var(--font-display);font-weight:400 !important}

/* ── 表單 ─────────────────────────── */
input[type=text],input[type=tel],input[type=date],input[type=time],input[type=email],input[type=number],input[type=password],textarea,select{border:2px solid var(--border) !important;border-radius:14px !important;background:#FFFDF6 !important;min-height:48px;font-size:1rem !important;color:var(--fg)}
textarea{min-height:auto}
input:focus,textarea:focus,select:focus{border-color:var(--navy) !important;box-shadow:0 0 0 4px rgb(42 117 168/0.15) !important;background:#fff !important}
.lbl,.label{font-weight:700 !important;color:var(--fg) !important}
.lbl.req::after,.required::after{color:var(--coral-ink) !important}
.chk-item,.radio-item{border-radius:12px !important;min-height:40px}
.chk-item:hover,.radio-item:hover{background:var(--butter) !important}
input[type=checkbox],input[type=radio]{accent-color:var(--navy) !important}
canvas{border-color:var(--sky-line) !important;background:#FFFDF6 !important;border-radius:16px !important}

/* ── 按鈕 ─────────────────────────── */
.btn-p,.btn-primary{background:var(--navy) !important;color:#fff !important;border-radius:999px !important;font-family:var(--font-display) !important;font-weight:400 !important;font-size:1.1rem !important;min-height:52px;box-shadow:0 5px 0 #1F5C86 !important;letter-spacing:.04em}
.btn-p:hover,.btn-primary:hover{background:#246a99 !important}
.btn-p:active,.btn-primary:active{transform:translateY(3px) !important;box-shadow:0 2px 0 #1F5C86 !important}
.btn-s,.btn-clear{border-radius:999px !important;border:2px solid var(--border) !important;background:#fff !important;color:var(--fg) !important;min-height:48px}
.btn-clear{min-height:36px}
.btn-s:hover,.btn-clear:hover{background:var(--butter) !important}
.lbtn{background:var(--navy) !important;border-radius:999px !important}

/* ── 步驟、服務、時段 ─────────────────── */
.sc{font-family:var(--font-display);font-weight:400 !important}
.sc.active{background:var(--navy) !important;box-shadow:0 4px 0 #CFE7F5 !important}
.sc.done{background:var(--leaf) !important}
.sc.inactive{background:#F3E6C6 !important;color:var(--muted) !important}
.sl.active{color:var(--navy) !important}
.sline{background:#F0DFB8 !important}
.sline.done{background:var(--leaf) !important}
.svc{border:2px solid var(--border) !important;border-radius:20px !important;min-height:96px}
.svc:hover{border-color:var(--sky-line) !important;background:var(--sky-soft) !important}
.svc.sel{background:var(--navy) !important;border-color:var(--navy) !important;box-shadow:0 5px 0 #1F5C86 !important}
.ts{border:2px solid var(--border) !important;border-radius:14px !important;min-height:44px;display:flex !important;align-items:center;justify-content:center}
.ts:hover{border-color:var(--sky-line) !important;background:var(--sky-soft) !important}
.ts.sel{background:var(--navy) !important;border-color:var(--navy) !important}

/* ── 提示框 ─────────────────────────── */
.notice,.notice-box,.note-box{background:var(--butter) !important;border:none !important;border-radius:20px !important;color:var(--fg) !important}
.notice-info,.ibox,.agree-box{background:var(--sky-soft) !important;border:none !important;border-radius:18px !important;color:var(--fg) !important}
.terms-box{border-radius:16px !important;border:2px solid var(--border) !important;background:#FFFDF6 !important;color:var(--fg) !important}
.sbadge{border-radius:999px !important}
.toast{border-radius:18px !important}
.toast.success{background:var(--navy) !important}
.toast.error{background:var(--coral-ink) !important}
.spin,.spinner{border-color:#F3E6C6 !important;border-top-color:var(--navy) !important}

/* ── 價目表、深色區塊 ─────────────────── */
.price-table{border-radius:20px !important;border:2px solid var(--border) !important}
.price-table thead tr{background:var(--navy) !important}
.price-table tbody tr:nth-child(even){background:#FFFBEE !important}
.price-table td:first-child{color:var(--fg) !important}
.price-table td.price{color:var(--navy) !important}
.member-card{border-radius:24px !important}
.member-card.standard{background:var(--sky-soft) !important;border:2px solid var(--sky-line) !important}
.member-card.vip{background:linear-gradient(135deg,#2A75A8,#3B8CC4) !important}
.contact-bar,.privacy-block{border-radius:28px !important;background:var(--navy) !important}
.update-section{background:var(--sky-soft) !important;color:var(--fg) !important;border-radius:28px !important}
.update-section .update-sub{opacity:1 !important;color:var(--muted)}
.update-eyebrow{background:var(--butter-2) !important;color:var(--fg) !important}
.update-card{background:#fff !important;border:2px solid #fff !important;border-radius:20px !important}
.update-card p{opacity:1 !important;color:var(--muted)}
.update-note{opacity:1 !important;color:var(--muted)}
.multipet-block{background:var(--sky-soft) !important;border:none !important;border-radius:24px !important}

/* ── 頁尾 ─────────────────────────── */
.site-footer{background:var(--fg);color:#FFF4D2;margin-top:auto}
.site-footer-inner{max-width:1180px;margin:0 auto;padding:2rem 1.25rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;font-size:.95rem;line-height:1.7}
.site-footer .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.3rem}
.site-footer .brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.site-footer a{color:#FFE8A3}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}