/* 維娜斯 消費試算器 2.0
 * 顏色預設「跟隨頁面主題色」(店家頁的 --primary-color / --text-primary / --text-secondary / --bg-secondary),
 * 後台「消費試算器 → 樣式」填了色碼才會全站覆蓋(輸出在本檔之後的 inline style)。
 * 在頁面的試算器外框(.nlcc-embed-wrapper)裡完全平面:不再加任何框與內距,手機版用滿寬度。
 * 試算器本身寬度 ≥ 720px 時改成左右兩欄(看容器寬,不看螢幕寬)。 */
.vxc{
  --vxc-accent:var(--primary-color,#D4A373);
  --vxc-accent-2:color-mix(in srgb,var(--vxc-accent) 62%,#fff);
  --vxc-text:var(--text-primary,#EDEAE5);
  --vxc-muted:var(--text-secondary,#A9A7B0);
  --vxc-warn:#EBA66E;
  --vxc-hint:color-mix(in srgb,var(--vxc-accent) 55%,var(--vxc-muted));
  --vxc-surface:var(--bg-secondary,#15161B);
  --vxc-line:color-mix(in srgb,var(--vxc-accent) 20%,transparent);
  --vxc-radius:14px; --vxc-pad:22px; --vxc-gap:22px;
  container-type:inline-size;
  box-sizing:border-box; width:100%; margin:0; padding:var(--vxc-pad);
  background:var(--vxc-surface); border:1px solid var(--vxc-line); border-radius:var(--vxc-radius);
  color:var(--vxc-text); font-size:15px; line-height:1.7; text-align:left;
  font-variant-numeric:tabular-nums;
}
/* 頁面已經有外框 → 試算器不再自帶框 */
.nlcc-embed-wrapper .vxc{padding:0;background:none;border:0;border-radius:0}
.vxc *,.vxc *::before,.vxc *::after{box-sizing:border-box}
.vxc__data{display:none}
.vxc__title{margin:0 0 var(--vxc-gap);color:var(--vxc-accent-2);font-size:18px;font-weight:600;letter-spacing:.08em;text-align:center}

.vxc__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vxc-gap)}
.vxc__result{padding-top:var(--vxc-gap);border-top:1px solid var(--vxc-line)}

/* 計價說明 */
.vxc__note{margin:0 0 14px;color:var(--vxc-muted);font-size:14px;line-height:1.85}
.vxc__warn{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;padding:12px 0;border-top:1px solid var(--vxc-line);border-bottom:1px solid var(--vxc-line);
  color:var(--vxc-warn);font-size:14px;font-weight:600;line-height:1.75}
.vxc__warn svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* 人數 / 時間 */
.vxc__field+.vxc__field{margin-top:20px}
.vxc__fhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.vxc__fhead label{color:var(--vxc-text);font-size:14px;font-weight:600;letter-spacing:.04em}
.vxc__val{color:var(--vxc-muted);font-size:14px;white-space:nowrap}
.vxc__val b{color:var(--vxc-accent-2);font-size:21px;font-weight:700;margin-right:3px}
.vxc__val small{margin-left:8px;padding-left:8px;border-left:1px solid var(--vxc-line);font-size:13px}
.vxc__ctl{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:14px}
.vxc__btn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;
  border:1px solid color-mix(in srgb,var(--vxc-accent) 45%,transparent);border-radius:50%;
  background:color-mix(in srgb,var(--vxc-accent) 8%,transparent);color:var(--vxc-accent-2);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent;
}
.vxc__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vxc__btn:hover{background:color-mix(in srgb,var(--vxc-accent) 18%,transparent);border-color:var(--vxc-accent)}
.vxc__btn:active{transform:scale(.94)}
.vxc__btn:focus-visible{outline:2px solid var(--vxc-accent);outline-offset:2px}
.vxc__btn:disabled{opacity:.32;cursor:default;transform:none}

.vxc__range{--p:0%;-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y}
.vxc__range:focus{outline:none}
.vxc__range::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--vxc-accent) 0 var(--p),color-mix(in srgb,var(--vxc-text) 14%,transparent) var(--p) 100%)}
.vxc__range::-moz-range-track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--vxc-text) 14%,transparent)}
.vxc__range::-moz-range-progress{height:6px;border-radius:999px;background:var(--vxc-accent)}
.vxc__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:var(--vxc-accent-2);border:4px solid var(--vxc-surface);box-shadow:0 0 0 1px var(--vxc-accent),0 4px 12px -2px rgba(0,0,0,.6);transition:transform .15s ease}
.vxc__range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--vxc-accent-2);border:4px solid var(--vxc-surface);box-shadow:0 0 0 1px var(--vxc-accent),0 4px 12px -2px rgba(0,0,0,.6)}
.vxc__range:active::-webkit-slider-thumb{transform:scale(1.12)}
.vxc__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--vxc-accent),0 0 0 5px color-mix(in srgb,var(--vxc-accent) 35%,transparent)}
.vxc__hint{margin:18px 0 0;color:var(--vxc-hint);font-size:13px;text-align:center}

/* 結果:總金額放大置頂,明細在下 */
.vxc__sum{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 8px;padding:0 0 16px;border-bottom:1px solid var(--vxc-line)}
.vxc__sum>div{display:flex;flex-direction:column;gap:2px}
.vxc__per{text-align:right}
.vxc__sum span{color:var(--vxc-muted);font-size:13px;letter-spacing:.06em}
.vxc__sum strong{color:var(--vxc-accent-2);font-size:20px;font-weight:600;line-height:1.25;white-space:nowrap}
.vxc__total strong{font-size:32px;font-weight:700;letter-spacing:.01em}
.vxc.is-tick .vxc__sum strong b{animation:vxc-tick .45s cubic-bezier(.16,1,.3,1)}
@keyframes vxc-tick{from{opacity:.5}to{opacity:1}}
.vxc__lines{margin:0;padding:0}
.vxc__line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--vxc-line) 60%,transparent)}
.vxc__line:last-child{border-bottom:0;padding-bottom:0}
.vxc__line dt{margin:0;color:var(--vxc-text);font-size:14px;font-weight:400}
.vxc__line dt small{display:block;color:var(--vxc-muted);font-size:12.5px;line-height:1.5}
.vxc__line dd{margin:0;color:var(--vxc-text);font-size:15px;white-space:nowrap}

@container (min-width:720px){
  .vxc__layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;align-items:start}
  .vxc__inputs{padding-right:calc(var(--vxc-gap) + 8px)}
  .vxc__result{padding:0 0 0 calc(var(--vxc-gap) + 8px);border-top:0;border-left:1px solid var(--vxc-line)}
}
@container (max-width:380px){
  .vxc__total strong{font-size:27px}
  .vxc__ctl{gap:10px}
}
@media (prefers-reduced-motion:reduce){.vxc *{transition:none!important;animation:none!important}}