:root { color:#262626; background:#fff; font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-synthesis:none; } * { box-sizing:border-box; } body { min-width:320px; margin:0; background:#fff; } button,input,textarea { font:inherit; } button { color:inherit; cursor:pointer; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid #262626; outline-offset:2px; }
.booking-top { min-height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 28px; border-bottom:1px solid #dbdbdb; }.booking-top>a:first-child { color:#262626; font-size:14px; text-decoration:none; }.booking-brand { grid-column:2; color:#262626; font-family:"Cormorant Garamond",Georgia,serif; font-size:26px; font-weight:500; letter-spacing:.12em; text-decoration:none; }
.booking-shell { width:min(540px,calc(100% - 44px)); margin:0 auto; padding:34px 0 56px; }.booking-steps { display:flex; gap:22px; margin-bottom:30px; border-bottom:1px solid #dbdbdb; }.booking-steps span { position:relative; padding:0 0 14px; color:#737373; font-size:13px; }.booking-steps .active { color:#262626; font-weight:500; }.booking-steps .active::after { position:absolute; right:0; bottom:-1px; left:0; height:1px; background:#262626; content:""; }.booking-steps .done { color:#262626; }
.booking-grid { display:grid; gap:28px; }.booking-panel { min-width:0; }.booking-panel h2 { margin:0; font-family:"Noto Serif TC",serif; font-size:20px; font-weight:500; }.service-list { margin-top:14px; border-top:1px solid #dbdbdb; }.service-option { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-height:82px; padding:14px; border:0; border-bottom:1px solid #dbdbdb; border-radius:0; background:#fff; text-align:left; }.service-option .choice-dot { display:none; }.service-option.selected { background:#efefef; }.service-option strong,.service-option small { display:block; }.service-option strong { font-size:15px; font-weight:500; }.service-option small { margin-top:4px; color:#737373; font-size:12px; }.service-option b { font-size:13px; font-weight:400; white-space:nowrap; }
.summary { order:2; padding-top:24px; border-top:1px solid #dbdbdb; }.summary-head { display:none; }.summary-items { display:none; }.summary-total { display:flex; align-items:baseline; justify-content:space-between; color:#737373; font-size:13px; }.summary-total strong { color:#262626; font-family:"Cormorant Garamond",Georgia,serif; font-size:26px; font-weight:500; }.summary-caption,.summary-note { display:none; }.primary-action { width:100%; min-height:50px; margin-top:18px; border:0; border-radius:8px; background:#262626; color:#fff; font-size:15px; }.primary-action:disabled { background:#dbdbdb; color:#737373; }
.back-action { margin:0 0 20px; padding:0; border:0; background:transparent; color:#737373; font-size:13px; }.calendar-head { display:flex; justify-content:space-between; align-items:center; margin:22px 0 14px; }.calendar-head strong { font-size:14px; font-weight:500; }.calendar-head small { color:#737373; font-size:12px; }.date-list { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; }.date-option { flex:0 0 56px; min-height:66px; display:grid; place-items:center; align-content:center; gap:4px; border:0; border-radius:8px; background:#efefef; font-size:15px; scroll-snap-align:start; }.date-option small { color:#737373; font-size:11px; }.date-option.selected { background:#262626; color:#fff; }.date-option.selected small { color:#fff; }.slot-label { margin:24px 0 13px; color:#737373; font-size:13px; }.slot-list { display:flex; flex-wrap:wrap; gap:8px; }.slot-option { min-width:84px; min-height:42px; padding:0 12px; border:0; border-radius:8px; background:#efefef; font-size:14px; }.slot-option.selected { background:#262626; color:#fff; }.slot-option:disabled { opacity:.4; text-decoration:line-through; }
.field { display:grid; gap:8px; margin-top:19px; font-size:13px; }.field input,.field textarea { width:100%; border:0; border-radius:8px; padding:13px; background:#efefef; color:#262626; font-size:16px; }.field textarea { min-height:94px; resize:vertical; }.phone-field { display:grid; grid-template-columns:56px 1fr; gap:8px; align-items:center; }.phone-field span { color:#737373; font-size:14px; }.consent { display:flex; gap:9px; margin-top:20px; color:#737373; font-size:12px; line-height:1.6; }.consent input { margin-top:3px; accent-color:#262626; }.form-error { min-height:18px; margin:13px 0 0; color:#9b2c2c; font-size:12px; }.booking-success { padding:30px 0; text-align:center; }.success-mark { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 18px; border-radius:50%; background:#efefef; }.booking-success h2 { margin:0; font-family:"Noto Serif TC",serif; font-size:22px; font-weight:500; }.booking-success>p { color:#737373; font-size:13px; }.receipt { display:grid; gap:12px; margin:25px 0; padding:18px 0; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; text-align:left; }.receipt p { display:flex; justify-content:space-between; gap:12px; margin:0; font-size:13px; }.receipt span { color:#737373; }
.booking-top { display:grid; grid-template-columns:1fr; place-items:center; }
.price { font-family:"Libre Baskerville",Georgia,serif; font-size:18px; font-weight:400; letter-spacing:-.04em; }
.booking-time { margin-top:28px; padding-top:24px; border-top:1px solid #dbdbdb; }
.booking-choice { margin:12px 0 4px; color:#737373; font-size:13px; line-height:1.7; }
@media (max-width:560px) { .booking-top { min-height:60px; padding:0 18px; }.booking-shell { width:calc(100% - 30px); padding-top:26px; }.booking-steps { margin-bottom:26px; } }

/* Shared booking header without a visual divider. */
.booking-top{border:0;background:#fff;box-shadow:0 5px 18px rgba(24,45,65,.06)}

/* HELLA Prism Clear customer booking surfaces. */
:root{--prism-page:#f6f7f8;--prism-ink:#111827;--prism-muted:#687481;--prism-clear:linear-gradient(138deg,rgba(255,255,255,.28),rgba(246,249,251,.12) 48%,rgba(227,235,241,.16)) padding-box,linear-gradient(138deg,rgba(255,255,255,.92) 0%,rgba(199,221,239,.68) 28%,rgba(174,210,232,.58) 50%,rgba(223,208,235,.48) 72%,rgba(245,207,219,.52) 100%) border-box;--prism-selected:linear-gradient(138deg,rgba(151,210,237,.76),rgba(102,181,220,.70) 52%,rgba(71,155,203,.76)) padding-box,linear-gradient(138deg,rgba(227,247,255,.96) 0%,rgba(202,223,245,.76) 28%,rgba(132,202,235,.94) 53%,rgba(221,214,242,.64) 76%,rgba(255,226,235,.68) 100%) border-box;--prism-shadow:inset 1px 1px 1px rgba(255,255,255,.72),inset -1px -1px 1px rgba(166,186,199,.1),0 9px 24px rgba(38,49,58,.11),-5px -3px 16px rgba(209,231,245,.11),5px 3px 18px rgba(245,214,225,.08);--prism-selected-shadow:inset 1px 1px 2px rgba(241,252,255,.65),inset -2px -2px 3px rgba(30,119,173,.14),0 10px 24px rgba(63,139,181,.18)}
body{background:var(--prism-page);color:var(--prism-ink)}.booking-top{background:rgba(246,247,248,.9);box-shadow:0 8px 22px rgba(38,49,58,.07);backdrop-filter:blur(16px) saturate(110%)}.booking-steps,.service-list,.summary,.booking-time,.receipt{border-color:transparent}
.service-option,.date-option,.slot-option,.field input,.field textarea,.success-mark{border:1px solid transparent!important;background:var(--prism-clear)!important;box-shadow:var(--prism-shadow)!important;backdrop-filter:blur(15px) saturate(112%);color:var(--prism-ink)}
.service-option{margin-top:9px;border-radius:18px!important;min-height:76px}.service-option:first-child{margin-top:0}.date-option,.slot-option,.field input,.field textarea{border-radius:16px!important}.service-option small,.date-option small,.slot-label,.booking-choice,.phone-field span,.summary-total{color:var(--prism-muted)}
.service-option.selected,.date-option.selected,.slot-option.selected,.primary-action{border:1px solid transparent!important;background:var(--prism-selected)!important;color:#fff!important;box-shadow:var(--prism-selected-shadow)!important;text-shadow:0 1px 1px rgba(23,102,147,.22)}.service-option.selected small,.date-option.selected small{color:rgba(255,255,255,.84)!important}.primary-action:disabled{opacity:.42;background:var(--prism-clear)!important;color:var(--prism-muted)!important;box-shadow:none!important}.booking-steps .active::after{background:#66b5dc}

/* HELLA Soft Raised 01 customer flow. */
:root{--neu-page:#eef1f5;--neu-surface:#eef1f5;--neu-ink:#24282d;--neu-muted:#707780;--neu-blue:#b8d8ff;--neu-blue-light:#cce1ff;--neu-light:rgba(255,255,255,.92);--neu-dark:rgba(164,174,188,.43);--neu-raised:-7px -7px 14px var(--neu-light),7px 7px 14px var(--neu-dark);--neu-raised-soft:-4px -4px 10px rgba(255,255,255,.88),4px 4px 10px rgba(164,174,188,.34);--neu-pressed:inset 5px 5px 10px rgba(111,145,185,.20),inset -5px -5px 10px rgba(255,255,255,.72),4px 6px 13px rgba(132,153,180,.22)}
body{background:var(--neu-page);color:var(--neu-ink)}.booking-top{background:var(--neu-page);box-shadow:0 6px 16px rgba(164,174,188,.24);backdrop-filter:none}.booking-steps,.service-list,.summary,.booking-time,.receipt{border-color:transparent}
.service-option,.date-option,.slot-option,.field input,.field textarea,.success-mark{border:0!important;background:var(--neu-surface)!important;background-image:none!important;box-shadow:var(--neu-raised)!important;backdrop-filter:none!important;color:var(--neu-ink)}
.service-option{margin-top:12px;border-radius:22px!important}.date-option,.slot-option,.field input,.field textarea{border-radius:18px!important}.service-option small,.date-option small,.slot-label,.booking-choice,.phone-field span,.summary-total{color:var(--neu-muted)}
.service-option.selected,.date-option.selected,.slot-option.selected,.primary-action{border:0!important;background:linear-gradient(145deg,var(--neu-blue-light),var(--neu-blue))!important;color:var(--neu-ink)!important;box-shadow:var(--neu-pressed)!important;text-shadow:none!important}.service-option.selected small,.date-option.selected small{color:#52677f!important}.primary-action:disabled{opacity:.48;background:var(--neu-surface)!important;color:var(--neu-muted)!important;box-shadow:inset 3px 3px 7px rgba(164,174,188,.28),inset -3px -3px 7px rgba(255,255,255,.72)!important}.booking-steps .active::after{background:#8dbce9}
.service-option:active,.date-option:active,.slot-option:active,.primary-action:active{transform:translateY(1px)}