/* valetaxindonesia.id — mobile UI fixes, PREVIEW 2026-10-06 (CSS only; no text/DOM-order changes).
   Design language measured from valetax.com/id/ at 390px (Playwright computed styles, 2026-10-06):
   header 58px #141921 · body Inter 16px #4b5563 · headings Inter 700 #141921
   primary btn: #141921 / #fff, Inter 600 16px, radius 8px, h 48–52px · secondary: transparent, 1px #a2a6ad, #141921 text
   on dark surfaces: primary #25c660 (text #141921 for AA), secondary transparent + 1px #828282 + #fff text
   cards: #fff, 1px #dee3ea, radius 12px, shadow 0 7px 15px rgba(0,0,0,.05) · spec rows: label left #4b5563 400, value right #141921 600
   Sections: [A] header  [B] buttons (item 4)  [C] contrast/overlap (item 1)  [D] tables (item 2)
             [E] order (item 4)  [F] font weights (item 3)  [G] sticky bar (item 5, preview)  */

:root{
  --vx-dark:#141921;--vx-ink:#141921;--vx-text:#4b5563;--vx-green:#25c660;
  --vx-border:#dee3ea;--vx-outline:#a2a6ad;--vx-outline-dark:#828282;
  --vx-radius:8px;--vx-card-radius:12px;--vx-card-shadow:0 7px 15px rgba(0,0,0,.05);
}

/* ---------------------------------------------------------------- [A] Header: 58px like valetax.com (mobile) */
@media (max-width:1023px){
  html body:not(#vtx) .header{height:58px!important;min-height:58px!important;background:#141921!important}
  html body:not(#vtx) .header .box-center,
  html body:not(#vtx).vt-import-page .header > .box-center{width:calc(100% - 32px)!important;height:58px!important;min-height:58px!important}
  html body:not(#vtx) .header .logo img,
  html body:not(#vtx).vt-import-page .logo img{width:105px!important;max-width:min(30vw,105px)!important;max-height:28px!important}
  html body:not(#vtx) .btn-mob-login img,
  html body:not(#vtx) .btn-mob-login svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important}
  html body:not(#vtx) .header__wrap,
  html body:not(#vtx).vt-import-page .header__wrap{top:58px!important;height:calc(100vh - 58px)!important;height:calc(100svh - 58px)!important;max-height:calc(100vh - 58px)!important;max-height:calc(100svh - 58px)!important}
}

/* ---------------------------------------------------------------- [B] Buttons: one primary + one secondary style (all 3 templates) */
/* shared metrics */
html body:not(#vtx) main .btn.btn--black,
html body:not(#vtx) main .btn.btn--outline,
html body:not(#vtx) main .vt-seo-actions .btn.vt-seo-btn,
html body:not(#vtx) main .vt-seo-final-cta__primary,
html body:not(#vtx) main .vt-seo-final-cta__secondary,
html body:not(#vtx) main .vt-min-btn,
html body:not(#vtx) main .vt-register-choice__cta,
html body:not(#vtx) main .vt-register-direct__actions .btn,
html body:not(#vtx) main .valetax-trust-final-cta > a.btn,
html body:not(#vtx) main .valetax-register-final-cta > a.btn,
html body:not(#vtx) main .account-types__columns--bottom a,
html body:not(#vtx) main .page-promotions__item-footer .btn,
html body:not(#vtx).partner-mirror-page main a.partners__list-link{
  font-family:Inter,Arial,sans-serif!important;font-size:16px!important;font-weight:600!important;line-height:1.25!important;
  letter-spacing:0!important;border-radius:8px!important;min-height:50px!important;box-shadow:none!important;
}
/* primary on light */
html body:not(#vtx) main .vt-seo-actions .btn.vt-seo-btn--dark,
html body:not(#vtx) main .vt-min-btn--primary,
html body:not(#vtx) main .home-banner__links .btn.btn--black,
html body:not(#vtx) main.content .home-banner__links .btn.btn--black,
html body:not(#vtx) main .vt-register-choice__cta:not(.vt-register-choice__cta--outline){
  background:#141921!important;color:#fff!important;border:1px solid #141921!important;
}
/* secondary on light (outline) */
html body:not(#vtx) main .vt-seo-actions .btn.vt-seo-btn--light,
html body:not(#vtx) main .vt-min-btn--secondary,
html body:not(#vtx) main .home-banner__links .btn.btn--outline,
html body:not(#vtx) main.content .home-banner__links .btn.btn--outline,
html body:not(#vtx) main .communication .btn.btn--outline,
html body:not(#vtx) main .valetax-visitor-cta .btn.btn--outline,
html body:not(#vtx) main .default-banner__actions .btn.btn--outline,
html body:not(#vtx) main .btns__wrap .btn.btn--outline,
html body:not(#vtx) main .account-types__columns-item:not(.black):not(:nth-child(2)) .account-types__columns--bottom a.btn--outline,
html body:not(#vtx) main .account-types__columns-item:not(.black):not(:nth-child(2)) .account-types__columns--bottom a:not(.btn):not(.valetax-mobile-cta__primary):not(.valetax-mobile-cta__secondary){
  background:transparent!important;color:#141921!important;border:1px solid #a2a6ad!important;
}
html body:not(#vtx) main .vt-seo-actions .btn.vt-seo-btn--light:hover,
html body:not(#vtx) main .vt-min-btn--secondary:hover,
html body:not(#vtx) main .communication .btn.btn--outline:hover,
html body:not(#vtx) main .valetax-visitor-cta .btn.btn--outline:hover,
html body:not(#vtx) main .default-banner__actions .btn.btn--outline:hover,
html body:not(#vtx) main .account-types__columns-item:not(.black):not(:nth-child(2)) .account-types__columns--bottom a.btn--outline:hover,
html body:not(#vtx) main .account-types__columns-item:not(.black):not(:nth-child(2)) .account-types__columns--bottom a:not(.btn):not(.valetax-mobile-cta__primary):not(.valetax-mobile-cta__secondary):hover{
  border-color:#141921!important;color:#141921!important;background:transparent!important;
}
/* account-card arrow icon inherits currentColor; keep it dark on outline buttons */
html body:not(#vtx) main .account-types__columns-item:not(.black):not(:nth-child(2)) .account-types__columns--bottom a:not(.btn)::before{filter:brightness(0)!important;opacity:.85}
/* primary on dark surfaces (valetax.com: green button on dark card; dark text for WCAG AA) */
html body:not(#vtx) main .vt-seo-final-cta__primary,
html body:not(#vtx) main .vt-min-final-card .vt-min-btn--primary,
html body:not(#vtx) main .valetax-trust-final-cta > a.btn,
html body:not(#vtx) main .valetax-register-final-cta > a.btn,
html body:not(#vtx) main .account-types__columns-item.black .account-types__columns--bottom a.btn--black,
html body:not(#vtx) main .account-types__columns-item:nth-child(2) .account-types__columns--bottom a.btn--black,
html body:not(#vtx).partner-mirror-page main a.partners__list-link{
  background:#25c660!important;color:#141921!important;border:1px solid #25c660!important;
}
/* secondary on dark surfaces */
html body:not(#vtx) main .vt-seo-final-cta__secondary,
html body:not(#vtx) main .vt-min-final-card .vt-min-btn--secondary,
html body:not(#vtx) main .vt-register-direct__actions .btn.btn--outline,
html body:not(#vtx) main .account-types__columns-item.black .account-types__columns--bottom a.btn--outline,
html body:not(#vtx) main .account-types__columns-item:nth-child(2) .account-types__columns--bottom a.btn--outline,
html body:not(#vtx) main .account-types__columns-item:nth-child(2) .account-types__columns--bottom a:not(.btn):not(.valetax-mobile-cta__primary):not(.valetax-mobile-cta__secondary){
  background:transparent!important;color:#fff!important;border:1px solid #828282!important;
}
/* final CTA blocks: the button had no visible fill (selector typo upstream) */
html body:not(#vtx) main .valetax-trust-final-cta > a.btn,
html body:not(#vtx) main .valetax-register-final-cta > a.btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:12px 20px!important;text-decoration:none!important;width:100%!important;max-width:100%!important;
}
@media (min-width:768px){
  html body:not(#vtx) main .valetax-trust-final-cta > a.btn,
  html body:not(#vtx) main .valetax-register-final-cta > a.btn{width:auto!important;min-width:180px!important}
}
/* vxclusive video CTA: green fill had white text (2.25:1) */
html body:not(#vtx) main .videobox-column .btn.btn--black{color:#141921!important}
/* radius/weight outliers */
html body:not(#vtx) main .popular-instruments .btn{border-radius:8px!important}

/* ---------------------------------------------------------------- [C] Contrast & overlap (item 1) */
/* Pages that carry .valetax-mobile-cta got a dark body (#111820) on mobile, which made transparent sections
   dark-on-dark (H1 1.02:1 on apakah-aman/review, FAQ on cara-buka-akun). Restore each template's own page colour,
   and reserve the bar's space inside the dark footer instead of below it. */
@media (max-width:768px){
  html body:not(#vtx).valetax-has-mobile-cta,
  html body:not(#vtx):has(.valetax-mobile-cta){background:#fff!important;padding-bottom:0!important}
  html body:not(#vtx).vt-seo-page:has(.valetax-mobile-cta){background:#f7faf8!important}
  html body:not(#vtx).vt-register-page:has(.valetax-mobile-cta){background:#f6f8f7!important}
  html body:not(#vtx).partner-mirror-page:has(.valetax-mobile-cta){background:#0f1217!important}
  /* cara-deposit (page-id-297) was designed for the dark body (white FAQ/headings) — keep it dark */
  html body:not(#vtx).page-id-297:has(.valetax-mobile-cta){background:#111820!important}
  html body:not(#vtx):has(.valetax-mobile-cta) footer.footer::after{content:"";display:block;height:calc(88px + env(safe-area-inset-bottom,0px))}
}
/* "LANGKAH n" pills: label text inherited grey (2.3:1) on the dark pill */
html body:not(#vtx) .seps-list__label,
html body:not(#vtx) .seps-list__label p,
html body:not(#vtx) .seps-list__label span{color:#fff!important}
/* apakah-aman hero checklist: chips were glued inline ("Cek entitas akunPahami ...") */
html body:not(#vtx) main .trust-hero-checklist{display:block!important;margin:16px 0 0!important}
html body:not(#vtx) main .trust-hero-checklist > span{
  display:inline-flex!important;align-items:center!important;margin:0 8px 8px 0!important;padding:6px 12px!important;
  border:1px solid #dee3ea!important;border-radius:8px!important;background:#fff!important;
  color:#141921!important;font-size:14px!important;font-weight:500!important;line-height:1.3!important;
}
/* apakah-aman/review hero: risk note sat flush under the button */
html body:not(#vtx) main .btns__wrap + p.risk-small{margin-top:12px!important}
/* instrumen-trading: visitor CTA sat under the cards (cards use margin-top:-192px to overlap the hero) */
@media (max-width:767px){
  html body:not(#vtx) .page__content--trading-instruments .page__content-top{min-height:0!important;height:auto!important;padding-bottom:28px!important}
  html body:not(#vtx) main .valetax-visitor-cta + .trading-instruments{margin-top:8px!important}
  html body:not(#vtx) main .valetax-visitor-cta{position:relative!important;z-index:1!important}
}

/* ---------------------------------------------------------------- [D] Tables (item 2) */
/* vt-seo responsive tables: label/value were glued ("Deposit minimal$8"). valetax.com spec-card layout. */
@media (max-width:900px){
  html body:not(#vtx) main .vt-seo-table-wrap:has(.vt-seo-table--responsive){background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive{display:block!important;width:100%!important;min-width:0!important;background:transparent!important;border:0!important}
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive tbody{display:grid!important;gap:12px!important;padding:0!important;background:transparent!important}
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive tr{
    display:block!important;padding:4px 20px 8px!important;border:1px solid #dee3ea!important;border-radius:12px!important;
    background:#fff!important;box-shadow:0 7px 15px rgba(0,0,0,.05)!important;overflow:hidden!important}
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;column-gap:16px!important;align-items:baseline!important;
    width:100%!important;padding:11px 0!important;border:0!important;border-top:1px solid #eef0f3!important;background:transparent!important;
    color:#141921!important;font-size:16px!important;font-weight:600!important;line-height:1.4!important;text-align:right!important;
    white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important}
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td::before{
    content:attr(data-label)!important;display:block!important;color:#4b5563!important;font-size:16px!important;font-weight:400!important;
    text-align:left!important;line-height:1.4!important}
  /* first cell = card title (label kept, smaller, above) */
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td:first-child{
    display:block!important;border-top:0!important;padding:14px 0 10px!important;text-align:left!important;
    color:#141921!important;font-size:21px!important;font-weight:700!important;line-height:1.3!important}
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td:first-child::before{font-size:14px!important;margin-bottom:2px!important;color:#4b5563!important}
  /* long free-text cells (legalitas/regulasi): stack label above value, left aligned */
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td[data-label="Informasi"],
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td[data-label="Ringkasan"],
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td[data-label="Keterangan"],
  html body:not(#vtx) main table.vt-seo-table.vt-seo-table--responsive td[data-label="Catatan"]{
    grid-template-columns:1fr!important;row-gap:4px!important;text-align:left!important;font-weight:500!important}
}
/* apakah-aman / review: .seo-table cells had no padding (words split: "Kebutuha-n") */
html body:not(#vtx) main table.seo-table{border:1px solid #dee3ea!important;border-radius:12px!important;box-shadow:0 7px 15px rgba(0,0,0,.05)!important;background:#fff!important;overflow:hidden!important}
html body:not(#vtx) main table.seo-table th,
html body:not(#vtx) main table.seo-table td{
  padding:12px 14px!important;border-bottom:1px solid #eef0f3!important;text-align:left!important;vertical-align:top!important;
  font-size:15px!important;line-height:1.45!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:manual!important}
html body:not(#vtx) main table.seo-table th{background:#141921!important;color:#fff!important;font-weight:600!important}
html body:not(#vtx) main table.seo-table td{color:#4b5563!important;font-weight:400!important}
html body:not(#vtx) main table.seo-table td:first-child{width:36%!important;color:#141921!important;font-weight:600!important}
html body:not(#vtx) main table.seo-table tr:last-child td{border-bottom:0!important}

/* ---------------------------------------------------------------- [E] Order (item 4, CSS only — DOM untouched) */
/* metode-pembayaran: Indonesian methods (ID bank/VA, e-wallet) and USDT before the Malaysian row, like valetax.com/id */
html body:not(#vtx) main .tabs-container__body-head:has(> .payment-methods__columns){display:flex!important;flex-direction:column!important}
html body:not(#vtx) main .tabs-container__body-head:has(> .payment-methods__columns) > a.btn{align-self:center!important}
html body:not(#vtx) main .tabs-container__body-head > .payment-methods__columns:has(img[src*="payment-fpx"]){order:1!important}
html body:not(#vtx) main .tabs-container__body-head > .payment-methods__question-title,
html body:not(#vtx) main .tabs-container__body-head > .payment-methods__question-info{order:2!important}
/* footer payment logos: global/ID-relevant first (USDT, Neteller, Perfect Money), Malaysian wallets after and quieter */
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-t.svg"]){order:-3!important}
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-netteller"]){order:-2!important}
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-pm."]){order:-1!important}
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image img{opacity:1!important}
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-t.svg"]) img,
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-netteller"]) img,
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-pm."]) img{filter:brightness(1.45)!important}
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-fpx"]) img,
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-boots"]) img,
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-grab"]) img,
html body:not(#vtx) footer .payment-chanels__list > .wp-block-image:has(img[src*="f-touch"]) img{opacity:.6!important}
/* platform-trading: text + CTA above the screenshot on mobile */
@media (max-width:767px){
  html body:not(#vtx) main .trading-platforms .trading-platforms__item{flex-direction:column!important}
  html body:not(#vtx) main .trading-platforms .trading-platforms__item > .trading-platforms__content{order:1!important}
  html body:not(#vtx) main .trading-platforms .trading-platforms__item > .trading-platforms__img{order:2!important;margin-top:24px!important}
}

/* ---------------------------------------------------------------- [F] Font weights (item 3) — valetax.com: body 400, headings 700, buttons 600 */
html body:not(#vtx).vt-seo-page .vt-seo-hero p,
html body:not(#vtx).vt-seo-page .vt-seo-section > p,
html body:not(#vtx).vt-seo-page .vt-seo-card p,
html body:not(#vtx).vt-seo-page .vt-seo-steps p,
html body:not(#vtx).vt-seo-page .vt-seo-faq p,
html body:not(#vtx).vt-seo-page .vt-seo-final-cta p,
html body:not(#vtx).vt-seo-page .vt-seo-risk-note{font-weight:400!important}
html body:not(#vtx).vt-seo-page .vt-seo-checklist li{font-weight:500!important}

/* ---------------------------------------------------------------- [G] Sticky bottom CTA bar (item 5 — PREVIEW, wording not yet approved)
   Base styles for every .valetax-mobile-cta (the 7 original 2-button bars keep their markup/labels; the 73 added
   single-button bars carry data-vt-sticky-preview="20261006"). Hidden on desktop, revealed after 420px scroll
   (body.valetax-sticky-cta-visible is set by the existing valetax-uiux-polish.js). */
.valetax-mobile-cta{display:none}
@media (max-width:768px){
  html body:not(#vtx) .valetax-mobile-cta{
    position:fixed!important;left:12px!important;right:12px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;top:auto!important;
    z-index:99998!important;display:flex!important;gap:8px!important;align-items:stretch!important;justify-content:space-between!important;
    min-height:0!important;padding:8px!important;border-radius:12px!important;background:#141921!important;
    border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 7px 15px rgba(0,0,0,.18)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .24s ease,opacity .24s ease}
  html body:not(#vtx).valetax-sticky-cta-visible .valetax-mobile-cta{transform:none;opacity:1;pointer-events:auto}
  html body:not(#vtx).fixed .valetax-mobile-cta,
  html body:not(#vtx).menu-open .valetax-mobile-cta{display:none!important}
  html body:not(#vtx) .valetax-mobile-cta a{
    flex:1 1 0!important;min-width:0!important;min-height:48px!important;margin:0!important;padding:8px 12px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border-radius:8px!important;font-family:Inter,Arial,sans-serif!important;font-size:16px!important;font-weight:600!important;
    line-height:1.2!important;letter-spacing:0!important;text-align:center!important;text-decoration:none!important;white-space:normal!important}
  html body:not(#vtx) .valetax-mobile-cta a.valetax-mobile-cta__primary{background:#25c660!important;color:#141921!important;border:1px solid #25c660!important}
  html body:not(#vtx) .valetax-mobile-cta a.valetax-mobile-cta__secondary{background:transparent!important;color:#fff!important;border:1px solid #828282!important}
  html body:not(#vtx) .valetax-mobile-cta:has(> a + a) a{font-size:14px!important}
}
@media (min-width:769px){html body:not(#vtx) .valetax-mobile-cta{display:none!important}}

/* KILL SWITCH for item 5 only (if the owner rejects the added bars): uncomment the next line, or remove the
   <!-- vt-sticky-cta-preview:start --> … <!-- vt-sticky-cta-preview:end --> blocks from the HTML.
html body:not(#vtx) .valetax-mobile-cta[data-vt-sticky-preview]{display:none!important} html body:not(#vtx):has(.valetax-mobile-cta[data-vt-sticky-preview]) footer.footer::after{content:none!important}
*/