/* ── 背景圖 ── */
/* background-image 等一定要 !important：店家手寫的 CSS 排在這之後，
   裡面常有 body{background:var(--bg)} 這種簡寫，會把整組背景（含圖）重設掉。
   加了 !important，簡寫就蓋不掉圖，但顏色、字體那些照樣由手寫 CSS 決定。 */
body {
  min-height: 100vh;
  background-image:
    linear-gradient(var(--veil-top, rgba(255,255,255,.55)), var(--veil-bottom, rgba(255,255,255,.75))),
    url("/uploads/1788604743138-c14c1ca1.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, center top !important;
  background-size: cover, cover !important;
  background-attachment: scroll, scroll !important;   /* 跟著捲動，不是 fixed */
}
/* 只有「卡片」加半透明底，**不要碰版面容器**。
   .sheet 是整頁的內容外框（max-width 480px 那個），給它上底色等於
   把整條內容欄都糊成一塊，背景圖就完全看不到了 —— 這是最容易踩的坑。
   同理 .plans 是清單容器，真正該上底的是裡面的 .plan。

   深色版型的店在自己的 CSS 覆蓋這幾個變數就好，不用改程式：
     :root{ --veil-top:rgba(6,10,32,.45); --veil-bottom:rgba(6,10,32,.72);
            --panel:rgba(21,27,71,.72); --panel-bar:rgba(11,16,51,.82); } */
.block, .card, .plan, .result-card, .bank-box, .form-card {
  background-color: var(--panel, rgba(255,255,255,.85));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 頁首、頁尾、底部結帳列：透一點，看得到後面的圖 */
.nav, .footer, .checkout {
  background-color: var(--panel-bar, var(--panel, rgba(255,255,255,.78)));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 版面容器保持透明，背景圖才透得出來 */
.sheet, .plans, .result-main, .wrap {
  background-color: transparent;
}

/* ── 手寫的自訂樣式 ── */

:root{
  --bg:#0B1033; --surface:#151B47; --ink:#F2F1FF; --ink-2:#BFBEE4; --ink-3:#8A88BC;
  --ink-4:#635F94; --line:#282F63; --line-2:#1D2350; --r:18px; --r-sm:12px;
  --o-500:#F2C14E; --o-600:#D9A32C; --o-400:#F7D27C; --o-300:#FAE3AB;
  --o-200:#4A3F1F; --o-100:#37301A; --o-50:#262212;
}
body{background:var(--bg);color:var(--ink)}
.night{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stars{position:absolute;inset:0;
  background:radial-gradient(900px 460px at 50% -8%, rgba(120,140,255,.22), transparent 62%),
    radial-gradient(2px 2px at 12% 18%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 78% 12%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 34% 34%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 62% 46%, #fff, transparent),
    radial-gradient(2px 2px at 88% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 20% 68%, #fff, transparent);
  opacity:.8}
/* 城堡剪影：純幾何，不是任何品牌的標誌 */
.castle{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,96vw);height:190px;opacity:.32;
  background:
    linear-gradient(#070B24,#070B24) 46% 100%/12% 62% no-repeat,
    linear-gradient(#070B24,#070B24) 30% 100%/9% 44% no-repeat,
    linear-gradient(#070B24,#070B24) 63% 100%/9% 48% no-repeat,
    linear-gradient(#070B24,#070B24) 18% 100%/7% 30% no-repeat,
    linear-gradient(#070B24,#070B24) 76% 100%/7% 34% no-repeat,
    linear-gradient(#070B24,#070B24) 50% 100%/100% 18% no-repeat}
.sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--o-400);
  box-shadow:0 0 12px var(--o-400);animation:twinkle 3.4s ease-in-out infinite}
.s1{top:22%;left:24%}.s2{top:16%;right:22%;animation-delay:1.1s}.s3{top:52%;left:74%;animation-delay:2.2s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.sparkle{animation:none;opacity:.6}}
.sheet{position:relative;z-index:1}

.wand{font-size:22px;color:var(--o-400);text-shadow:0 0 18px var(--o-500);margin-bottom:6px}
.brand h1{font-family:"Cinzel","Noto Sans TC",serif;font-weight:700;letter-spacing:.18em;
  background:linear-gradient(180deg,#fff,var(--o-400));-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:0 0 40px rgba(242,193,78,.25)}
.tagline{color:var(--ink-2);letter-spacing:.1em}
.avatar{background:radial-gradient(circle at 32% 28%, #fff, var(--o-500) 55%, var(--o-600));
  box-shadow:0 0 0 1px rgba(242,193,78,.5), 0 0 40px rgba(242,193,78,.35)}

.block-head h2{font-family:"Cinzel",serif;font-size:17px;letter-spacing:.26em;color:var(--o-400)}
.more-link{color:var(--ink-3);letter-spacing:.08em}

.plan{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);backdrop-filter:blur(6px)}
.plan:hover{border-color:rgba(242,193,78,.45)}
.plan.on{border-color:var(--o-500);
  background:linear-gradient(180deg,rgba(242,193,78,.13),rgba(242,193,78,.04));
  box-shadow:0 0 0 1px rgba(242,193,78,.35), 0 14px 40px rgba(242,193,78,.16)}
.plan-name{font-weight:700;letter-spacing:.04em}
.plan-price b{font-family:"Cinzel",serif;color:var(--o-400)}
.plan-tag{background:linear-gradient(90deg,var(--o-600),var(--o-400));color:#1A1533;
  border-radius:999px;font-weight:900;letter-spacing:.08em}
.plan-feats li::before{content:"✦";color:var(--o-500);font-size:11px}

.pay{background:rgba(255,255,255,.04);border-color:var(--line)}
.pay.on{border-color:var(--o-500);background:rgba(242,193,78,.1)}
.fld > span{color:var(--ink-2);letter-spacing:.1em}
.fld input,.fld textarea,.fld select{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--o-500);
  box-shadow:0 0 0 3px rgba(242,193,78,.18)}

.checkout{background:rgba(11,16,51,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(242,193,78,.3)}
.total b{font-family:"Cinzel",serif;color:var(--o-400)}
.pay-btn{background:linear-gradient(90deg,var(--o-600),var(--o-400));color:#1A1533;
  font-weight:900;letter-spacing:.14em;border-radius:999px;
  box-shadow:0 10px 34px rgba(242,193,78,.34)}
.line-box{background:rgba(255,255,255,.04);border-color:var(--line)}
.sk{background:linear-gradient(90deg,#151B47,#1F2760,#151B47)}
.toast{background:#1F2760;color:var(--ink);border:1px solid var(--line);border-radius:999px}
.disclaimer,.copyright,.fineprint{color:var(--ink-4)}

/* ══════════════════════════════════════════════════════════
   城堡背景圖模式（2026-09-05）
   背景是一張粉紫色調的城堡煙火直式圖。原本這間店是深藍底 + 白卡片，
   直接疊上去會把粉紫壓成一片濁色，所以前景整組改成「紫調的半透明玻璃」：
     · 上方幾乎不蓋紗 → 煙火與城堡尖塔看得到原本的顏色
     · 越往下越深     → 卡片與結帳列的文字才讀得清楚
   ══════════════════════════════════════════════════════════ */

:root{
  /* 紗用紫調不用藍調 —— 藍會跟圖的粉紫打架，變成髒濁的灰
     上面淡到幾乎沒有，讓煙火透出來；下面才壓深 */
  --veil-top: rgba(28,16,52,.10);
  --veil-bottom: rgba(18,10,38,.82);
  /* 卡片：紫調的深色玻璃 */
  --panel: rgba(34,21,62,.62);
  /* 頁首頁尾與底部結帳列：再實一點，按鈕要清楚 */
  --panel-bar: rgba(20,12,42,.88);
}

/* 圖還沒載入時由 html 頂著，色調跟圖的暗部一致，不會閃白也不會突兀 */
html{background:#1A1030}
/* body 底色一定要透明，否則實心色會蓋在圖上面 */
body{background-color:transparent !important}

/* 圖裡本來就有城堡和滿天星點，CSS 畫的那組會變成第二座城堡、雙重星空 */
.castle{display:none}
.stars{display:none}
/* 三顆會閃的金點留著，疊在煙火上更有動態感 */
.sparkle{opacity:.9}

/* 標題直接壓在圖上，給它厚一點的陰影才讀得清楚 */
.brand h1,.tagline,.block-head h2{text-shadow:0 2px 14px rgba(20,10,38,.75)}
/* 區塊外框不要上底色，卡片自己有就好（疊兩層會糊掉背景） */
.block{background-color:transparent !important;backdrop-filter:none !important}

/* 方案卡：紫色玻璃 + 金色細邊。
   半透明卡片疊在細節很多的圖上會糊掉輪廓，靠這條金線把邊界帶出來。 */
.plan{
  background:linear-gradient(180deg, rgba(46,29,80,.62), rgba(26,15,48,.68)) !important;
  border:1px solid rgba(242,193,78,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 34px rgba(12,6,28,.4);
}
.plan:hover{border-color:rgba(242,193,78,.55)}
.plan.on{
  border-color:var(--o-500);
  background:linear-gradient(180deg, rgba(242,193,78,.2), rgba(46,29,80,.66)) !important;
  box-shadow:0 0 0 1px rgba(242,193,78,.5), 0 16px 46px rgba(242,193,78,.24);
}

/* 付款選項與輸入框：同一套紫玻璃 */
.pay{background:rgba(38,23,68,.58) !important;border-color:rgba(242,193,78,.2)}
.pay.on{background:rgba(242,193,78,.18) !important;border-color:var(--o-500)}
.fld input,.fld textarea,.fld select{background:rgba(24,14,46,.62);border-color:rgba(242,193,78,.2)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(190,180,225,.55)}

/* 底部結帳列：磨砂玻璃 + 金線，浮在圖上 */
.checkout{
  background:rgba(20,12,42,.88) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(242,193,78,.38);
}

/* 訂單頁／付款頁套同一套，客人結帳走過去不會突然換皮 */
.result-card,.bank-box{
  background-color:rgba(34,21,62,.68) !important;
  border:1px solid rgba(242,193,78,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.result-card h1,.result-top p{text-shadow:0 2px 10px rgba(20,10,38,.6)}
.kv,.kv-row{background-color:transparent !important}
.bank-box h4{color:var(--o-400)}
.copy-row b,.kv-row dd{color:var(--ink)}
.nav,.footer{background-color:var(--panel-bar) !important}

/* ── 融合層補齊（2026-09-05）──
   上面已經處理過卡片與 .block，但還有兩處吃基礎樣式的實心／白底：
     · .disclaimer  → style.css 寫死 #fff、simple.css 寫死 rgba(255,255,255,.7)
     · .alert 系列  → 「目前沒有開放中的方案」那條，實心的 var(--o-50)
   兩個都在圖上非常跳，一起改成同一套紫玻璃。
   順便把邊界從硬線改成「極淡內圈線 + 外散深暈」，卡片才化得進背景。 */

:root{ --soft-edge:0 0 0 1px rgba(242,193,78,.10), 0 22px 48px -20px rgba(8,4,22,.62); }

/* 容器一律透明（.wrap／.result-main 是訂單頁的外框） */
.sheet,.block,.plans,.wrap,.result-main{
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.disclaimer{
  background:rgba(30,18,56,.52) !important;
  border:1px solid rgba(242,193,78,.12) !important;
  border-left:2px solid transparent !important;
  border-image:linear-gradient(180deg,var(--o-500),rgba(242,193,78,.12)) 1 !important;
  border-radius:var(--r-sm);
  color:var(--ink-3) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--soft-edge);
}

.alert{
  background:rgba(34,21,62,.56) !important;
  border:1px solid rgba(242,193,78,.16) !important;
  border-radius:var(--r-sm);
  color:var(--ink-2) !important;
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:var(--soft-edge);
}
.alert-error{background:rgba(58,20,34,.6) !important;border-color:rgba(248,160,170,.24) !important;color:#F8CDD4 !important}
.alert-warn {background:rgba(52,38,18,.58) !important;border-color:rgba(242,193,78,.28) !important;color:#F7E3B4 !important}
.alert-info {background:rgba(34,21,62,.56) !important;border-color:rgba(242,193,78,.18) !important;color:var(--ink-2) !important}

/* 卡片邊界柔化：金線壓淡，外面加一圈散開的深暈 */
.plan,.result-card,.bank-box,.form-card,.card{box-shadow:var(--soft-edge)}
.plan{border-color:rgba(242,193,78,.18)}
.toast{
  background:rgba(31,39,96,.74) !important;
  border-color:rgba(242,193,78,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.line-box{background:rgba(38,23,68,.52) !important;border-color:rgba(242,193,78,.18) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sk{background:linear-gradient(90deg,rgba(21,27,71,.5),rgba(31,39,96,.62),rgba(21,27,71,.5))}