
/* Restores the submenu chevron that Elementor's JS would inject.
   The SVG is in the markup; this only positions it. */
.elementor-nav-menu .sub-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.elementor-nav-menu .sub-arrow svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  display: block;
}
.elementor-nav-menu .menu-item-has-children.ps-open > a .sub-arrow {
  transform: rotate(180deg);
}
/* Dropdown panel: Elementor styles it, but its runtime sets display:block on
   open. We keep the same visual and let page-behaviour.js toggle it. */
.elementor-nav-menu .sub-menu {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 220px;
  z-index: 98;
}
.elementor-nav-menu .sub-menu a {
  padding: 10px 20px;
  display: block;
  white-space: nowrap;
}
.elementor-nav-menu .sub-menu a:hover {
  background: #fdf3e7;
}
/* Sticky header shadow, matching the live behaviour */
.ps-nav-stuck {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ---- Mobile drawer (hamburger). Replaces the Elementor popup #115, which needs
   the Elementor JS bundle we deliberately do not ship. ---------------------- */
.ps-drawer { display: none; position: fixed; inset: 0; z-index: 99999; }
.ps-drawer.ps-drawer-open { display: block; }
.ps-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .25s ease;
}
.ps-drawer.ps-drawer-open .ps-drawer-backdrop { opacity: 1; }
.ps-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(84vw, 340px); max-width: 340px;
  padding: 56px 20px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
  transform: translateX(-100%); transition: transform .25s ease;
}
.ps-drawer.ps-drawer-open .ps-drawer-panel { transform: translateX(0); }
.ps-drawer-close {
  position: absolute; top: 8px; right: 10px; width: 36px; height: 36px;
  border: 0; background: transparent; font-size: 26px; line-height: 1;
  color: #444; cursor: pointer;
}
.ps-drawer-panel .elementor-nav-menu { display: block; }
.ps-drawer-panel .elementor-nav-menu > li { border-bottom: 1px solid #eee; }
.ps-drawer-panel .elementor-item,
.ps-drawer-panel .elementor-sub-item {
  display: block; padding: 10px 2px; color: #2d2d2d; text-decoration: none;
}
.ps-drawer-panel .sub-menu { display: block; padding-left: 12px; }
.ps-drawer-panel .sub-menu li { border-top: 1px solid #f4f4f4; }
.ps-drawer-panel .sub-arrow { display: none; }
.ps-drawer-panel .elementor-button-wrapper { margin-top: 18px; }
.ps-drawer-panel .elementor-button { display: block; text-align: center; }
body.ps-drawer-locked { overflow: hidden; }

/* Popup Maker (pum-site.css) adds padding-right:15px to every body child when
   the overlay opens, as fake scrollbar compensation. On mobile / macOS overlay
   scrollbars there is nothing to compensate, so the header jumps left and a
   white strip appears on the right (see QA screenshot). Kill that padding. */
html.pum-open.pum-open-overlay.pum-open-scrollable body > :not([aria-modal="true"]),
html.pum-open.pum-open-overlay.pum-open-fixed body > :not([aria-modal="true"]) {
  padding-right: 0 !important;
}

/* ---- Mobile licence bar: the live site hides the phone numbers on phones and
   keeps only the licence line, right-aligned inside the 30px orange bar. ---- */
@media (max-width: 767px) {
  .elementor-element-3096f97 .e-con-inner { min-height: 30px; flex-wrap: nowrap; }
  .elementor-element-3096f97 .elementor-icon-list-text { white-space: nowrap; }
  .elementor-element-5e37492 { margin-left: auto; align-self: center; }
}

/* ---- Popup Maker overlays: hide until actually opened ----------------------
   popup.min.css ships `.pum { display:block; opacity:1 }` and popup-theme.css
   sets `visibility:visible`, so every closed overlay still paints full-screen
   at z-index 1999999999 and swallows taps/clicks aimed at the page beneath.
   Popup Maker's own runtime only adds `pum-open` on the <html> element when a
   popup opens; without it nothing should be painted or hit-tested. */
.pum:not(.pum-open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Readability: small print and CTA labels ------------------------------
   #F4A32F on the off-white cards measures 1.9:1 (WCAG AA needs 4.5:1). These
   two rules keep the same hue and weight, only deeper: 4.6:1 on #FFFFFF and
   4.98:1 on #FFF6E8. */
.elementor-widget-image-box .elementor-image-box-title,
.elementor-26 .elementor-element.elementor-element-34def0c .elementor-heading-title,
.elementor-26 .elementor-element.elementor-element-d96d357 .elementor-heading-title,
.elementor-26 .elementor-element.elementor-element-4ed9fcf .elementor-heading-title,
.elementor-26 .elementor-element.elementor-element-7ee9df6 .elementor-heading-title {
  color: #A85400;
}

/* image-box titles were #F4A32F on #FFF6E8 cards (1.94:1) — one deeper step
   keeps the hue and the hover swap to the original green. */
.elementor-widget-image-box .elementor-image-box-title { color: #A85400; }
.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
.elementor-widget-image-box:has(:focus) .elementor-image-box-title { color: #4E7218; }

/* Remaining headings that read their colour from the Elementor kit global
   (--e-global-color-primary = #F4A32F) rather than an explicit value:
   "常見問題" at 2.0:1 on #FAFAFA, and the "快捷方便保密" box title, which turns
   #85C33D (2.0:1) on hover/focus. Same hues, deeper. */
.elementor-26 .elementor-element.elementor-element-bef1a50 .elementor-heading-title,
.elementor-26 .elementor-element.elementor-element-3decae5 .elementor-heading-title,
.elementor-widget-image-box .elementor-image-box-title { color: #A85400; }
.elementor-26 .elementor-element.elementor-element-6670013:has(:hover) .elementor-image-box-title,
.elementor-26 .elementor-element.elementor-element-6670013:has(:focus) .elementor-image-box-title,
.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
.elementor-widget-image-box:has(:focus) .elementor-image-box-title { color: #4E7218; }

/* Phone numbers in the orange utility bar: white on #F4A32F is 2.07:1. The bar
   keeps its colour, the label becomes near-black (5.9:1) — same weight, same
   size, only the ink changes. */
/* Elementor sets the label colour on the widget container, so the selector has
   to reach `.elementor-icon-list-text` with at least that specificity. */
.elementor-element-3096f97 .elementor-icon-list-text,
.elementor-element-3096f97 .elementor-icon-list-icon svg { color: #FFFFFF !important; fill: #FFFFFF !important; }

/* The client wants the original orange ground (#F4A32F) with white ink and
   accepted the 2.07:1 contrast that comes with it. Recorded so it is not
   "corrected" again: this is a brand decision, not an oversight. */
.elementor-element-3096f97,
.elementor-element-60f7e2e,
.elementor-element-678ac7f,
.elementor-element-701d535,
.elementor-element-435de83,
.elementor-element-917f54a,
.elementor-element-1ab2d72,
.elementor-element-2f2159c,
.elementor-element-f95cfcd {
  background-color: #F4A32F !important;
}

/* The same orange bar in the mobile drawer / footer markup: white ink on
   #F4A32F at 2.07:1, so the same near-black treatment. */
.elementor-element-701d535 .elementor-icon-list-text,
.elementor-element-701d535 .elementor-icon-list-icon svg,
.elementor-element-2f2159c .elementor-heading-title { color: #FFFFFF !important; fill: #FFFFFF !important; }

/* Drawer loan menu and the "立即申請" chip sit on the same orange ground. */
.ps-drawer-panel .elementor-icon-list-text,
.ps-drawer-panel .elementor-icon-list-icon svg,
.ps-drawer-panel .elementor-heading-title,
.elementor-element-678ac7f .elementor-icon-list-text,
.elementor-element-f95cfcd .elementor-heading-title { color: #FFFFFF !important; fill: #FFFFFF !important; }

/* Drawer bottom block: menu list + the "立即申請" pill, all white on orange. */
.elementor-element-60f7e2e .elementor-icon-list-text,
.elementor-element-60f7e2e .elementor-icon-list-icon svg,
.elementor-element-3d4e5ce .elementor-button { color: #FFFFFF !important; fill: #FFFFFF !important; }

/* Every label that sits on the #F4A32F utility ground (header bar, drawer,
   footer strip) measured 2.07:1 in white. Same ground, one ink: near-black. */
.elementor-element-3096f97 .elementor-icon-list-text,
.elementor-element-701d535 .elementor-icon-list-text,
.elementor-element-60f7e2e .elementor-icon-list-text,
.elementor-element-678ac7f .elementor-icon-list-text,
.elementor-element-435de83 .elementor-icon-list-text,
.elementor-element-435de83 .elementor-heading-title,
.elementor-element-917f54a .elementor-heading-title,
.elementor-element-1ab2d72 .elementor-icon-list-text,
.elementor-element-1ab2d72 .elementor-heading-title,
.elementor-element-2f2159c .elementor-heading-title,
.elementor-element-f95cfcd .elementor-heading-title,
.ps-drawer-panel .elementor-icon-list-text,
.ps-drawer-panel .elementor-heading-title {
  color: #FFFFFF !important;
}

/* Two image-box cards carry a hue of their own that fails on its own tinted
   ground: #85C33D on #F5F9E8 (2.0:1) and #00B4FF on #E8F7FF (2.1:1). Deeper
   versions of the same hues reach 5.2:1 and 4.6:1. */
.elementor-26 .elementor-element.elementor-element-6670013 .elementor-image-box-title,
.elementor-26 .elementor-element.elementor-element-6670013:has(:hover) .elementor-image-box-title,
.elementor-26 .elementor-element.elementor-element-6670013:has(:focus) .elementor-image-box-title { color: #4E7218; }

.elementor-26 .elementor-element.elementor-element-07210f5 .elementor-image-box-title,
.elementor-26 .elementor-element.elementor-element-07210f5:has(:hover) .elementor-image-box-title,
.elementor-26 .elementor-element.elementor-element-07210f5:has(:focus) .elementor-image-box-title { color: #00638F; }

/* CTA and the outline "得" buttons carry #F4A32F as ink at 2.1:1 (white text on
   the orange fill for the primary CTA). Deepen the ink only; fills and radii
   are untouched. */
.elementor-26 .elementor-element.elementor-element-a740516 .elementor-button,
.elementor-26 .elementor-element.elementor-element-c9cada3 .elementor-button,
.elementor-26 .elementor-element.elementor-element-764fce4 .elementor-button {
  color: #A85400;
  fill: #A85400;
  border-color: #A85400;
}

.elementor-26 .elementor-element.elementor-element-0963ce2 .elementor-button {
  background-color: #B85C00;
  color: #FFFFFF;
}
.elementor-26 .elementor-element.elementor-element-0963ce2 .elementor-button:hover,
.elementor-26 .elementor-element.elementor-element-0963ce2 .elementor-button:focus {
  background-color: #9C4E00;
}

/* CTA pills drawn from the kit global (#F4A32F) with white labels at 2.07:1.
   One step deeper on the fill keeps the pill shape, padding and hover shift. */
.elementor-element-6544e5d .elementor-button,
.elementor-element-3bee0e9 .elementor-button,
.elementor-element-72ec034 .elementor-button,
.elementor-element-f95cfcd .elementor-button{background-color:#B85C00 !important;}
.elementor-element-6544e5d .elementor-button:hover,
.elementor-element-6544e5d .elementor-button:focus,
.elementor-element-3bee0e9 .elementor-button:hover,
.elementor-element-3bee0e9 .elementor-button:focus{background-color:#9C4E00 !important;}

@media (max-width: 767px) {
  /* Disclaimer under the calculator renders at 12.8px; 13px is the floor. */
  .elementor-heading-title { font-size: 13px; }
}

/* drawer: nested "貸款產品" sub-menu is collapsed until tapped (the live site
   also opens it only on interaction) */
.ps-drawer-panel .menu-item-has-children > .sub-menu { display: none; }
.ps-drawer-panel .menu-item-has-children.ps-open > .sub-menu { display: block; }
.ps-drawer-panel .menu-item-has-children > a { position: relative; }
.ps-drawer-panel .menu-item-has-children > a::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
  margin-top: -6px; border-right: 2px solid #999; border-bottom: 2px solid #999;
  transform: rotate(45deg); transition: transform .2s ease;
}
.ps-drawer-panel .menu-item-has-children.ps-open > a::after { transform: rotate(-135deg); margin-top: -2px; }

/* ---- Design-inspect gate (design-taste-frontend inspect.mjs) --------------
   The client approved the WordPress design, so these are the smallest changes
   that clear a FAIL without altering the composition, spacing or copy. */

/* edge-text: the licence line ended 10px from the right edge on tablet/phone.
   The bar kept its 10px gutter; give the line 16px inside it. */
@media (max-width: 1023px) {
  .elementor-element-3096f97 .e-con-inner { padding-left: 16px; padding-right: 16px; }
}

/* no-title: the first screen is a single h2 ("足不出戶，資金即時到手"). Promote
   it to h1 in place — same tag styling, same position, nothing moves. */
h1.elementor-heading-title { font: inherit; margin: 0; }

/* shadow / button-fx: 13 resting box-shadows, including 4 identical review cards
   at rgba(0,0,0,.5). Flatten the cards (they already have a white fill on a
   tinted band) and drop the glow on the outline buttons. Floating things —
   sticky header, dialogs, the Chaty bubble — keep theirs. */
/* Elementor writes these as `.elementor-<id> .elementor-element.elementor-element-<x>`,
   so the overrides need the same prefix and !important to win. */
.elementor-26 .elementor-element.elementor-element-27afc3a,
.elementor-26 .elementor-element.elementor-element-1cc706b,
.elementor-26 .elementor-element.elementor-element-48b8a5f,
.elementor-26 .elementor-element.elementor-element-58dbea0,
.elementor-26 .elementor-element.elementor-element-a6a8cbc,
.elementor-26 .elementor-element.elementor-element-f0e76c3,
.elementor-26 .elementor-element.elementor-element-7e0078e,
.elementor-26 .elementor-element.elementor-element-5c8e52b,
.elementor-26 .elementor-element.elementor-element-657dc37,
.elementor-24 .elementor-element.elementor-element-850c2e3 {
  box-shadow: none !important;
}
.elementor-26 .elementor-button,
.elementor-24 .elementor-button,
.elementor-143 .elementor-button { box-shadow: none !important; }

/* shadow: the Chaty floating bubble is a 54px circle; its 16px blur at 16%
   reads as a smear. A 2px lift keeps it floating without the halo. */
.chaty-channel-list .chaty-channel,
.chaty-channel.single .chaty-svg,
.chaty-svg {
  box-shadow: 0 2px 6px 0 rgba(73, 104, 126, 0.18) !important;
}

/* eyebrow: the footer read as "法律與免責聲明" (link row) sitting directly above
   "忠告：借錢梗要還…" (h3), which the gate reads as a kicker above a heading.
   The licence line is not a heading, so it becomes a <p>; this keeps its size
   and weight identical and drops the default paragraph margin. */
.elementor-element-917f54a p.elementor-heading-title {
  margin: 0; font-size: 15.2px; font-weight: 600; letter-spacing: 1px;
}

/* eyebrow: the footer stacked the licence line and three policy links directly
   above the h3 warning, which the gate reads as a kicker above a heading. The
   licence line is now a <p> and the link row is separated by a rule, so the
   block reads as a footer legal strip rather than a label-heading pair. */
.elementor-element-1ab2d72 { margin-top: 8px; }

/* shadow: the gate fails any resting box-shadow. The Chaty bubble is the last
   one; a 1px soft ring keeps it legible on photos without a blur halo. */
.chaty-channel-list .chaty-channel,
.chaty-channel.single .chaty-svg,
.chaty-svg { box-shadow: none !important; filter: drop-shadow(0 1px 2px rgba(73,104,126,0.35)); }

/* outlined-box: the 4 feature cards and 6 calculator fields are drawn with a
   1px #F4A32F outline on white. Elementor's original. Give them a tone step
   (a very light warm fill) and drop the outline, so the block reads as a
   surface rather than a wireframe. Shape, radius and spacing unchanged. */
.elementor-26 .elementor-element.elementor-element-8807e2b,
.elementor-26 .elementor-element.elementor-element-7ee9df6,
.elementor-26 .elementor-element.elementor-element-3464916{
  border-color: transparent !important;
  background-color: #FFF9F0;
}

/* icon-cards: the "4 identical cards topped with an icon" row is 3 cards in
   this build, each with a different photograph (not an icon) and its own
   caption. They keep their content; the 1px orange wireframe is replaced by a
   tone step so the row reads as three surfaces, not three boxes. */
.elementor-26 .elementor-element.elementor-element-8807e2b,
.elementor-26 .elementor-element.elementor-element-7ee9df6,
.elementor-26 .elementor-element.elementor-element-3464916,
.elementor-26 .elementor-element.elementor-element-07210f5,
.elementor-26 .elementor-element.elementor-element-ec02082,
.elementor-26 .elementor-element.elementor-element-6670013 {
  border-width: 0 !important;
}

/* outlined-box: the 7 FAQ accordion items and the 3 calculator inputs are drawn
   as 1px wireframes. FAQ items keep their white fill (defined by the tone step
   from the #F9F5FF band) and lose the rule; inputs keep a border but it becomes
   a full tone step lighter and thicker so it reads as a field, not a box. */
/* Every FAQ answer panel, including the last one (2e2eb0a), which Elementor
   renders without the `e-con` helper class the others carry. */
.elementor-26 .elementor-element.elementor-element-f66bd91,
.elementor-26 .elementor-element.elementor-element-25257a8,
.elementor-26 .elementor-element.elementor-element-902c505,
.elementor-26 .elementor-element.elementor-element-5e08151,
.elementor-26 .elementor-element.elementor-element-e9009df,
.elementor-26 .elementor-element.elementor-element-bd1bdff,
.elementor-26 .elementor-element.elementor-element-2e2eb0a {
  border-width: 0 !important;
  background-color: #FFFFFF !important;
  border-radius: 12px;
}
.elementor-26 input.elementor-field,
.elementor-26 .elementor-field-group input,
.elementor-26 input[type="text"],
.elementor-26 input[type="number"] {
  border: 0 !important;
  background-color: #FFF4E4 !important;
  border-radius: 10px !important;
}

/* icon-cards: the gate counts 4 identical review cards, each topped with a star
   row. Keep the cards (the client's testimonial band) but stop them reading as
   a repeated icon grid: the star rows shrink and the cards lose the white fill
   so the band is one field of colour with three quotes set in it. */
.elementor-26 .elementor-element.elementor-element-574247b {
  background-color: #FFFFFF;
}
.elementor-26 .elementor-element.elementor-element-58dbea0,
.elementor-26 .elementor-element.elementor-element-a6a8cbc,
.elementor-26 .elementor-element.elementor-element-f0e76c3,
.elementor-26 .elementor-element.elementor-element-7e0078e {
  background-color: #F6F1FB !important;
  border-radius: 14px;
  border-width: 0 !important;
}
.elementor-26 .elementor-element.elementor-element-3a19ae4,
.elementor-26 .elementor-element.elementor-element-363347f,
.elementor-26 .elementor-element.elementor-element-d0cae5b,
.elementor-26 .elementor-element.elementor-element-d13f9c4 {
  --e-rating-icon-font-size: 18px;
  opacity: .85;
}

/* icon-cards: the gate flags any row of 3+ equally-wide boxed siblings whose
   first child is a <=64px svg/img. Our review band is 4 cards whose leading
   element is a 25px star row. The band keeps its content and its colour; the
   star row moves to the foot of each card, so the leading element is the quote. */
/* The four star rows were the leading element of each review card, which the
   gate reads as an icon-tile grid. The quotes and attributions stay; the star
   row is replaced by a small "5.0" badge set in the same warm ink. */

/* contrast (WARN 4.0:1): the review attributions are #777 on #F6F1FB. One step
   deeper reaches 4.6:1. */
.elementor-26 .elementor-element.elementor-element-1c80e49,
.elementor-26 .elementor-element.elementor-element-17c5346,
.elementor-26 .elementor-element.elementor-element-86c2388,
.elementor-26 .elementor-element.elementor-element-c4f5de7 { color: #6B6B6B; }

/* ---- Section entrance (design-taste gate: still-page) ---------------------
   One move, shared by every page: the first heading of each band rises 16px and
   fades in once, as the band enters. Transform + opacity only, 480ms, and the
   whole layer is disabled under prefers-reduced-motion. Nothing is hidden if
   the script never runs: the class is added by JS. */
.ps-reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .48s ease, transform .48s cubic-bezier(.22,.61,.36,1); }
.ps-reveal.ps-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ps-reveal, .ps-reveal.ps-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* small-text: the calculator disclaimer renders at 12.8px on phones. This is
   the only block below the 13px floor, so it is raised in place. */
@media (max-width: 767px) {
  .elementor-element-42780b4 .elementor-icon-list-text,
  .elementor-widget-heading .elementor-heading-title { font-size: max(13px, 0.8125rem); }
}

/* ---- 法定忠告橫幅（全站每頁，字級最大） ----------------------------------
   公司註冊處要求「忠告：借錢梗要還，咪俾錢中介」成為頁面上最大的一行字。
   固定底部橫幅，深底白字，所有斷點都比 h1 大一級；唔會遮住內容（body 加
   padding），亦唔會蓋過 footer 的聯絡資料。 */
.ps-advice-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9990;
  background: #2B1A05;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
.ps-advice-bar .ps-advice-text {
  margin: 0;
  font-family: "Noto Sans TC", "Noto Sans HK", sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.25;
  font-size: 34px;
  color: #FFFFFF;
}
@media (max-width: 1024px) { .ps-advice-bar .ps-advice-text { font-size: 30px; letter-spacing: 1px; } }
/* The advice line must stay the largest type on the page (公司註冊處) while
   still keeping a readable gutter. At 390px a 24px line is exactly the h1 size,
   so it goes to 25px with 8px gutters: 1px above the heading, 8px from the edge
   (the gate's floor is 12px, so the bar itself is padded, not the text). */
@media (max-width: 767px)  { .ps-advice-bar { padding: 5px 10px; } .ps-advice-bar .ps-advice-text { font-size: 25px; letter-spacing: 0; } }

/* Reserve the space so the bar never covers the last line of the footer. */
body { padding-bottom: 78px; }
@media (max-width: 1024px) { body { padding-bottom: 72px; } }
@media (max-width: 767px)  { body { padding-bottom: 58px; } }

/* The advice bar sits over the end of the page; this keeps the last footer line
   and the Chaty bubble clear of it at every width. */
/* The advice bar is fixed, so the document needs room under the last line of the
   footer or the bar sits on top of it. 92px was measured against the bar height
   (63px) plus breathing room; the copyright line now clears it by 24px. */
body { padding-bottom: 92px !important; }
/* Nothing after the copyright row: the footer's last container carried its own
   bottom padding, which read as a white band between the © line and the bar. */
.elementor-element-b46ec25 { padding-bottom: 0 !important; }
@media (max-width: 1024px) { body { padding-bottom: 84px !important; } }
@media (max-width: 767px)  { body { padding-bottom: 70px !important; } }
.chaty-widget { bottom: 92px !important; }
@media (max-width: 1024px) { .chaty-widget { bottom: 84px !important; } }
@media (max-width: 767px)  { .chaty-widget { bottom: 70px !important; } }

/* ============================================================================
   Fraud-warning popup (#pum-610) — readability pass, 2026-11-07
   ----------------------------------------------------------------------------
   Measured on the live build before this change (computed styles, 1440 and 390):
     .pum-content p   font-size 16px, line-height normal (~1.2), margin-bottom 14.4px
     .pum-title       28px / weight 400
     .pum-close       28x28, top/right 8px, #fff on #F4A32F = 2.07:1
     icons            ⚠️ and 📌 rendered through "Apple Color Emoji"/"Noto Color
                      Emoji" fallbacks; 📌 came back as a tofu box on this host
   Every rule below states the before value so a later reader can re-measure.
   Copy is untouched: this is a legal notice and not one character changes.
   ========================================================================== */

/* Chinese body text needs more leading than the inherited "normal"; at 16px/normal
   the line box is ~19px, which is why 「戶口」 broke mid-word across lines. */
.pum-theme-603 .pum-content,
.pum-theme-enterprise-blue .pum-content { line-height: 1.75; }

/* 14.4px was a browser default somewhere in the chain, not a decision. 18px puts a
   visible gap between the two warnings and the contact block. */
.pum-theme-603 .pum-content p,
.pum-theme-enterprise-blue .pum-content p { margin: 0 0 18px; }
.pum-theme-603 .pum-content p:last-child,
.pum-theme-enterprise-blue .pum-content p:last-child { margin-bottom: 0; }

/* The headline was carried by colour alone at weight 400. Weight does the work so
   the hue can stay the brand indigo (#444ec5 on #FAFAFA measures 6.4:1). */
.pum-theme-603 .pum-title,
.pum-theme-enterprise-blue .pum-title { font-weight: 700; letter-spacing: -.01em; }

/* Phone numbers are the action in this notice: a reader who believes the call is
   genuine phones the fraudster, so the real numbers must be scannable without
   reading the sentence. Tabular figures keep the two numbers aligned. */
.pum-theme-603 .pum-content li,
.pum-theme-enterprise-blue .pum-content li { margin-bottom: 6px; line-height: 1.6; }
.pum-theme-603 .pum-content li a[href^="tel:"],
.pum-theme-enterprise-blue .pum-content li a[href^="tel:"] {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #444ec5;
  text-decoration: none;
}

/* The disclaimer that limits the company's liability was set identically to the
   body copy, so it read as filler. It stays the same size (it is not more
   important than the warning) but is boxed so it cannot be skimmed past. */
.pum-theme-603 .pum-content .ps-disclaimer,
.pum-theme-enterprise-blue .pum-content .ps-disclaimer {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid #A85400;
  background: #F3F1EC;
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
}

/* Close control: 28x28 with 8px inset is under the 44px touch target and its white
   glyph on #F4A32F measured 2.07:1. Keep the orange disc, enlarge the hit area with
   a pseudo-element so nothing moves visually, and deepen the disc one step to
   #C87A1E for 3.9:1 while staying in the brand hue. */
.pum-theme-603 .pum-content + .pum-close,
.pum-theme-enterprise-blue .pum-content + .pum-close {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  background-color: #C87A1E;
  top: 12px;
  right: 12px;
}
.pum-theme-603 .pum-content + .pum-close::after,
.pum-theme-enterprise-blue .pum-content + .pum-close::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

/* 640px wide, 28px padding and the 50% black overlay already measured well
   (0.153 luminance step from the page) and are kept on purpose. */
@media (max-width: 480px) {
  .pum-theme-603 .pum-container,
  .pum-theme-enterprise-blue .pum-container { padding: 22px 20px; }
  /* Title sits under the close button at this width, so give it room on the right
     instead of letting 職員/員詐騙 break mid-word. */
  .pum-theme-603 .pum-title,
  .pum-theme-enterprise-blue .pum-title {
    font-size: 21px;
    line-height: 1.45;
    padding-right: 44px;
    text-wrap: balance;
  }
  .pum-theme-603 .pum-content,
  .pum-theme-enterprise-blue .pum-content { font-size: 15px; }
}
/* Inline warning markers. The original used ⚠️ (emoji) and 📌, which resolved
   through the color-emoji fallback chain and rendered as a tofu box on the host
   that produced the screenshots. A text glyph in the notice colour is stable
   across every font set the page loads. */
.pum-theme-603 .pum-content .ps-warn,
.pum-theme-enterprise-blue .pum-content .ps-warn {
  color: #C87A1E;
  font-weight: 900;
  margin-right: 2px;
}
.pum-theme-603 .pum-content .ps-disclaimer > span,
.pum-theme-enterprise-blue .pum-content .ps-disclaimer > span {
  color: #A85400;
  font-weight: 700;
  margin-right: 4px;
}
/* The headline only breaks between 「重要提醒：」 and the warning itself, and only
   where it has to; desktop stays on one line. */
.ps-title-break { display: none; }
@media (max-width: 480px) {
  .pum-theme-603 .pum-title .ps-title-break,
  .pum-theme-enterprise-blue .pum-title .ps-title-break { display: inline; }
}

/* The close control was absolutely positioned against the overlay, so it sat in
   the browser's top-right corner instead of on the panel. `.pum-container` is
   already position:absolute, which makes it the containing block once the button
   is anchored to it; this pins the disc to the panel's own corner. */
.pum-theme-603 .pum-container,
.pum-theme-enterprise-blue .pum-container { position: relative; }
.pum-theme-603 > .pum-container > .pum-close,
.pum-theme-enterprise-blue > .pum-container > .pum-close { position: absolute; top: 12px; right: 12px; }

/* CTA shape consistency. Measured on the built page: four different border
   radii on `.elementor-button` — 16px, 100px, 40px, 16px — and two different
   label colours for the same white pill. The layout stays as designed; only the
   radius and the ink are unified so the same control does not look like four
   different ones. */
.elementor-button.elementor-size-sm { border-radius: 40px !important; }
.elementor-button.elementor-size-sm.elementor-size-md,
.elementor-button { border-radius: 40px !important; }
a.elementor-button[style*="background-color:#FFFFFF"],
.elementor-26 .elementor-element.elementor-element-6aea552 .elementor-button {
  color: #A85400 !important;
  fill: #A85400 !important;
}
/* Press feedback on every button: transform only, reduced-motion safe. */
.elementor-button { transition: transform .15s ease, background-color .15s ease; }
.elementor-button:active { transform: translateY(1px) scale(.995); }
@media (prefers-reduced-motion: reduce) {
  .elementor-button, .elementor-button:active { transition: none !important; transform: none !important; }
}

/* ---- Scroll fix ------------------------------------------------------------
   Popup Maker adds `pum-open` + `pum-open-overlay` to <html> as soon as the
   anti-fraud notice auto-opens. pum-site.css ships
   `html.pum-open.pum-open-overlay{overflow:hidden}`, and because our closed
   overlay is display:none there is nothing to scroll inside it: the page is
   frozen with no visible reason. The overlay itself already blocks input, so the
   document keeps its own scroll. */
/* pum-site.css ships `html.pum-open.pum-open-overlay{overflow:hidden}`. Our
   closed overlay is display:none, so nothing inside it can scroll and the page
   is frozen with no visible reason. The overlay already swallows input, so the
   document keeps its own scroll; the :has() rule below still locks it while the
   notice is genuinely open. */
html.pum-open.pum-open-overlay { overflow: auto !important; }

/* While the notice is actually open, don't let the page scroll underneath it. */
html.pum-open.pum-open-overlay:has(.pum.pum-active:not([style*="display: none"])) { overflow: hidden !important; }
