/* ── /service UI polish ──────────────────────────────────────────
   Brand-consistent warm-gold treatment for the prayer service page.
   Scoped to body.service-view and loaded ONLY by service.html, so the
   shared style.css (.btn.primary etc.) is untouched on other pages.
   Phases 1-4: buttons + sold badge, modal, form controls, finishing. */

/* ═══ Phase 1 — Page surface, cards, primary buttons + "sold" badge ═══ */

/* Warm the page background (default --bg is cool blue-grey #f4f6fb). */
body.service-view{ background:#f6f5f2; }

/* Product cards → warm-white gradient, gold hairline, soft warm shadow. */
body.service-view .service-grid .card,
body.service-view .hot-grid.service-grid .card{
  background:linear-gradient(165deg, #fffdf8 0%, #fff8ee 100%);
  border:1px solid rgba(199,164,106,.3);
  box-shadow:0 10px 28px rgba(92,69,38,.1);
}
body.service-view .service-grid .card:hover,
body.service-view .hot-grid.service-grid .card:hover{
  border-color:rgba(176,129,54,.46);
  box-shadow:0 16px 38px rgba(92,69,38,.17);
}

/* Unify the three primary actions (查看服務 / 加入購物車 / 送出分享)
   that style.css paints blue-green by default. */
body.service-view .btn.primary{
  background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%);
  border:1px solid rgba(166,96,20,.68);
  color:#fff;
  border-radius:999px;
  box-shadow:0 12px 24px rgba(231,137,30,.32);
  font-weight:800;
}
body.service-view .btn.primary:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
  border-color:rgba(166,96,20,.82);
  box-shadow:0 16px 30px rgba(231,137,30,.42);
}
/* Card CTA buttons are pinned to 10px by a higher-specificity rule in
   service.inline-1.css — re-assert the pill so cards match the modal. */
body.service-view .service-grid .card .cta .btn.primary,
body.service-view .hot-grid.service-grid .card .cta .btn.primary{
  border-radius:999px;
}
body.service-view .btn.primary:disabled{
  background:linear-gradient(135deg, #e8c9a0, #d9b487);
  border-color:rgba(166,96,20,.3);
  box-shadow:none;
}
/* The shared .btn:hover lifts the border to green — warm it up. */
body.service-view .btn:hover{
  border-color:rgba(199,164,106,.5);
}

/* "已售出 N" → option D: gold-foil chip with a gilded dot. */
body.service-view .card .meta .badge-sold{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, #fffaf0, #f7ead0);
  border:1px solid rgba(199,164,106,.55);
  color:#6e5222;
  border-radius:10px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(150,116,55,.12);
}
body.service-view .card .meta .badge-sold::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;
  background:linear-gradient(135deg, #d9a441, #b07f2a);
  box-shadow:0 0 0 2px rgba(217,164,65,.25);
}

/* ═══ Phase 2 — Service detail modal ═══ */

body.service-view .svc-dialog{
  background:linear-gradient(165deg, #fffdf8 0%, #fff7e9 100%);
  border:1px solid rgba(199,164,106,.4);
  border-radius:22px;
  box-shadow:0 30px 70px rgba(92,69,38,.32);
}
body.service-view .svc-dialog::backdrop{
  background:rgba(46,33,16,.5);
  backdrop-filter:blur(4px);
}
/* Header bar — style.css paints it green-tinted. */
body.service-view .closeBar{
  background:linear-gradient(135deg, rgba(255,250,240,.95), rgba(255,242,214,.6));
  border-bottom:1px solid rgba(199,164,106,.28);
  color:#3d2c14;
}
body.service-view .svc-dialog .closeBarActions .xbtn{
  background:rgba(199,164,106,.18);
  border:1px solid rgba(199,164,106,.4);
  color:#6b4d31;
  box-shadow:0 6px 14px rgba(92,69,38,.12);
}
/* Inline media links + IG thumb (default blue → warm brown-gold). */
body.service-view .svc-media-link{ color:#8c642d; }
body.service-view .thumb-ig{
  color:#8c642d;
  background:linear-gradient(135deg, #fffaf0, #fff2da);
  border:1px dashed rgba(176,129,54,.5);
}
/* Order progress stepper (active state is green by default). */
body.service-view .svc-stepper{
  background:linear-gradient(135deg, rgba(255,250,240,.9), rgba(255,242,214,.55));
}
body.service-view .svc-stepper span.active{
  background:linear-gradient(135deg, #ffb347, #d97706);
  border-color:rgba(166,96,20,.62);
  box-shadow:0 8px 20px rgba(231,137,30,.32);
}
body.service-view .svc-stepper span.done{
  background:#f3e7cf;
  color:#6e5222;
  border-color:rgba(199,164,106,.55);
}
body.service-view .svc-dialog .svc-includes{
  background:linear-gradient(135deg, #fffdf8, #fff6e6);
  border-color:rgba(199,164,106,.32);
}
/* Price summary row (小計) — default slate background. */
body.service-view .svc-summary{
  background:linear-gradient(135deg, #fffdf8, #fff3dd);
  border-color:rgba(199,164,106,.4);
}

/* ═══ Phase 3 — Form controls ═══ */

body.service-view .service-inline1-input,
body.service-view .svc-dialog select,
body.service-view .svc-dialog textarea,
body.service-view .svc-dialog input[type="text"],
body.service-view .svc-dialog input[type="email"],
body.service-view .svc-dialog input[type="tel"]{
  border:1.5px solid rgba(159,121,48,.35);
  border-radius:12px;
  background:#fffdfa;
  color:#3d2c14;
}
body.service-view .service-inline1-input:focus,
body.service-view .svc-dialog select:focus,
body.service-view .svc-dialog textarea:focus,
body.service-view .svc-dialog input[type="text"]:focus,
body.service-view .svc-dialog input[type="email"]:focus,
body.service-view .svc-dialog input[type="tel"]:focus{
  outline:none;
  border-color:rgba(176,129,54,.72);
  box-shadow:0 0 0 3px rgba(231,137,30,.14);
}
/* Native file picker button. */
body.service-view .svc-dialog input[type="file"]::file-selector-button{
  border:1.5px solid rgba(194,151,84,.55);
  border-radius:999px;
  background:#fffdfa;
  color:#8c642d;
  font-weight:800;
  padding:7px 14px;
  margin-right:10px;
  cursor:pointer;
}
body.service-view .svc-dialog input[type="file"]::file-selector-button:hover{
  background:#fff5e1;
  border-color:rgba(176,129,54,.8);
}
/* Quantity steppers (cart + modal). */
body.service-view .qty-stepper button,
body.service-view .svc-cart-qty-btn{
  border:1.5px solid rgba(194,151,84,.5);
  background:#fffdfa;
  color:#6b4d31;
  font-weight:800;
}
body.service-view .qty-stepper button:hover,
body.service-view .svc-cart-qty-btn:hover{
  background:#fff5e1;
  border-color:rgba(176,129,54,.8);
}
body.service-view .svc-cart-qty{
  border-color:rgba(199,164,106,.4);
  background:#fffdf8;
}
body.service-view .svc-cart-qty input{
  border-color:rgba(194,151,84,.5);
  background:#fffdfa;
  color:#3d2c14;
}

/* ═══ Phase 4 — Finishing: link colors + mobile consistency ═══ */

/* Footer + sidebar text links (default blue → brown-gold).
   Note: the LINE official button keeps LINE green on purpose. */
body.service-view .footer .policy-link{
  color:#8c642d;
  text-decoration-color:rgba(176,129,54,.5);
}
body.service-view .footer .policy-link:hover{ color:#6e5222; }
body.service-view .svc-side-fortune-link{ color:#8c642d; }

/* Mobile: keep card actions and badges visually aligned with the
   warmer surface and give touch targets a touch more breathing room. */
@media (max-width:768px){
  body.service-view .btn.primary{
    box-shadow:0 8px 18px rgba(231,137,30,.3);
  }
  body.service-view .card .meta .badge-sold{
    font-size:11.5px;
    padding:4px 10px;
  }
}

/* ═══ Phase 3a — Desktop sidebar chips ═══ */
body.service-view #sideDeities .tool-link{
  border-color:#f0d6a0;
  background:linear-gradient(135deg, #fffdf7 0%, #fff6de 58%, #f7ead0 100%);
  color:#7a5a2e;
  box-shadow:0 10px 20px rgba(180,137,53,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
body.service-view #sideDeities .tool-link:hover{
  border-color:#e8bf6e;
  box-shadow:0 14px 24px rgba(180,137,53,.18);
}
body.service-view .tool-link-dot{
  background:linear-gradient(135deg, #d9a441, #b07f2a);
  box-shadow:0 0 0 4px rgba(217,164,65,.16);
}
body.service-view #cartFab{
  border:1px solid rgba(199,164,106,.4);
  background:linear-gradient(135deg, #fffdf8, #fff3dd);
  color:#6b4d31;
}
body.service-view #cartFab:hover{ background:#fff5e1; }
body.service-view #sideDeities .tools-box h4{ color:#6e5222; }
body.service-view #sideDeities .list a:not(.svc-side-fortune-link):not(.tool-link):not(.line-support-btn){
  color:#7a5a2e;
}

/* ═══ Phase 4a — Modal open micro-animation ═══ */
@media (prefers-reduced-motion: no-preference){
  body.service-view dialog.svc-dialog[open]{
    animation:svcDialogIn .26s cubic-bezier(.22,.61,.36,1);
  }
  body.service-view dialog.svc-dialog[open]::backdrop{
    animation:svcBackdropIn .26s ease;
  }
  @keyframes svcDialogIn{
    from{ opacity:0; transform:translateY(10px) scale(.975); }
    to{ opacity:1; transform:none; }
  }
  @keyframes svcBackdropIn{ from{ opacity:0; } to{ opacity:1; } }
}

/* ═══ Phase 4b — Add-to-cart toast (shown by service-ui-polish.js) ═══ */
.svc-toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  z-index:61; display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  background:linear-gradient(135deg, #5b422b, #7a5a34); color:#ffe8c4;
  border:1px solid rgba(69,49,29,.5); box-shadow:0 14px 30px rgba(89,62,36,.34);
  font-weight:800; font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.svc-toast::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, #ffb347, #d97706); color:#fff;
  font-size:11px; font-weight:900;
}
.svc-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══ Phase 4c — Mobile sticky cart bar (shown by service-ui-polish.js) ═══ */
.svc-sticky-cart{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60; display:none; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px 10px 18px; border-radius:999px;
  border:1px solid rgba(69,49,29,.55);
  background:linear-gradient(135deg, rgba(58,42,24,.97) 0%, rgba(86,62,35,.97) 100%);
  box-shadow:0 18px 40px rgba(40,28,12,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
body.uc-mobile-nav-enabled .svc-sticky-cart{ bottom:calc(74px + env(safe-area-inset-bottom)); }
.svc-sticky-cart.is-on{ opacity:1; transform:none; pointer-events:auto; }
.svc-sticky-cart__text{
  min-width:0; display:flex; align-items:baseline; gap:6px;
  color:#ffeec9; font-size:13.5px; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc-sticky-cart__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:linear-gradient(135deg, #ffb347, #d97706); color:#fff;
  font-size:12px; font-weight:900;
}
.svc-sticky-cart__btn{
  flex:0 0 auto; border:1px solid rgba(166,96,20,.68); border-radius:999px;
  padding:9px 18px; background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%);
  color:#fff; font-size:13.5px; font-weight:900; cursor:pointer; font-family:inherit;
  white-space:nowrap; box-shadow:0 10px 20px rgba(231,137,30,.4);
}
@media (min-width:769px){ .svc-sticky-cart{ display:none !important; } }
@media (max-width:768px){ .svc-sticky-cart{ display:flex; } }

/* ═══ Phase 3b — Login modal: warm it ONLY on /service (do NOT touch global auth-login.css) ═══ */
body.service-view .auth-login-panel{
  background:linear-gradient(180deg, #fffdf8, #fff6e6);
  border:1px solid rgba(199,164,106,.4);
}
body.service-view .auth-login-title{ color:#3d2c14; }
body.service-view .auth-login-legal{
  background:#fffaf0; border-color:rgba(199,164,106,.3); color:#6e5222;
}
body.service-view .auth-login-consent{ color:#3d2c14; }
body.service-view .auth-login-btn.google{ border-color:rgba(176,129,54,.32); }