/* Bridge: small styles for CMMv3-injected content on top of the legacy theme
   (style.css / theme-teal.css). Keeps the legacy look; only fills gaps. */

/* The legacy theme doesn't enforce the `hidden` attribute, and author display
   rules below (e.g. .account-pill{display:flex}) would override it — keep hidden
   elements hidden (account pill before login, etc.). */
[hidden] { display: none !important; }

/* Standalone announcement marquee (inner/member/category pages) flows in normal
   document height instead of the legacy absolute overlay — which, with no banner
   behind it, would otherwise collapse and cover the page nav. The homepage
   marquee (plain .slider, over the banner) keeps its absolute overlay. */
.slider--mq { position: relative; }
.slider--mq .marquee { position: static; height: 36px; }

/* Banner slot (cms.js injects img(s) from getBannerList / slider fallback) */
.banners-simple { width: 100%; }
.banners-simple img, .banners-simple a { display: block; width: 100%; height: auto; }

/* Keep multi-word menu labels (e.g. "Hot Games", "Live Casino") on one line.
   The legacy style.css owns the full-width mega-menu: li{position:static},
   .dropdown-menu{position:absolute;left:0;right:0;width:100%;display:none} and
   the `li:hover .dropdown-menu{display:block}` reveal. We only guard wrapping
   and pad the mega-menu content (legacy leaves the panel flush to the edges). */
.header-menu ul li a { white-space: nowrap; }
.header-menu .dropdown-menu__detail { padding: 18px 6rem; text-align: center; }
.header-menu .dropdown-menu__detail-list { margin: 0 6px; vertical-align: top; }

/* After login, hide the whole login cluster (form + Daftar + Lupa Login); the
   account menu shows instead. Driven by the is-authed body class set in app.js. */
body.is-authed .header-mdl__login-form,
body.is-authed .header-mdl__login-forgot { display: none !important; }

/* Top-bar Logout: only when authed. */
.g8-logout { cursor: pointer; }
body:not(.is-authed) .g8-logout { display: none; }
.header-top__detail ul { display: flex; gap: 18px; align-items: center; }

/* After-login account menu uses the real uatmeta .header-mdl__login-account
   structure, so live style.css owns its look (DEPOSIT = periwinkle --btn-login,
   username teal, Saldo inherits the header text color). We only guard the
   dropdown hover-reveal and the refresh-icon cursor; no color overrides. */
.header-mdl__login-account ul li .dropdown { display: none; }
.header-mdl__login-account ul li:hover .dropdown,
.header-mdl__login-account ul li:focus-within .dropdown { display: block; }
.header-mdl__login-account .bal-refresh { margin-left: 6px; cursor: pointer; }

/* ===== Member pages: LIGHT theme to match uatmeta.com/secure ===== */
.profile { padding: 18px 0 44px !important; }
.profile .wrapper { display: block; }
/* White 7-tab account nav, dark-navy active. */
.profile__nav { margin-bottom: 20px; }
.profile__nav ul { display: flex; list-style: none; margin: 0; padding: 0; border-radius: 6px; overflow: hidden; border: 1px solid #d2d2d2; }
.profile__nav ul li { flex: 1; background: #fff !important; border: 0 !important; }
.profile__nav ul li + li { border-left: 1px solid #e0e0e0 !important; }
.profile__nav ul li a { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 15px 8px !important; color: #3a3a3a !important; }
.profile__nav ul li a i { color: #3a3a3a; margin-right: 0 !important; }
.profile__nav ul li a span { font-weight: 600 !important; }
.profile__nav ul li.active, .profile__nav ul li:hover { background: #5468e8 !important; }
.profile__nav ul li.active a, .profile__nav ul li:hover a, .profile__nav ul li.active a i, .profile__nav ul li:hover a i { color: #fff !important; }
/* SALDO card. */
.member-saldo { background: #e6e5e5; color: #262626; border-radius: 6px; padding: 16px; text-align: center; margin-bottom: 20px; }
.member-saldo .lbl { font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.member-saldo .amt { font-size: 24px; font-weight: 800; color: #0e1b3a; }
.member-saldo .bal-refresh { cursor: pointer; color: #0e1b3a; margin-left: 6px; }
/* Light content panel + light-themed form controls/tables/buttons inside it. */
.profile__content { min-width: 0; }
.profile__content > main { padding: 0; }
.profile__content .container { max-width: none; padding: 0; }
.profile__content .wallet-balance, .profile__content section, .profile__content .table-wrap, .profile__content .deposit-box, .profile__content .form-card { background: #e6e5e5 !important; color: #262626 !important; border: 0 !important; }
.profile__content, .profile__content h1, .profile__content h2, .profile__content h3, .profile__content label, .profile__content .rail-title, .profile__content .wallet-label, .profile__content p, .profile__content th, .profile__content td { color: #262626 !important; }
.profile__content .wallet-amount, .profile__content .balance-amount { color: #0e1b3a !important; }
.profile__content input, .profile__content select, .profile__content textarea, .profile__content .form-control { background: #fff !important; color: #262626 !important; border: 1px solid #c4c4c4 !important; }
.profile__content .btn-primary, .profile__content button[type="submit"], .profile__content .button--yellow, .profile__content #search-btn, .profile__content #submit-btn { background: #5468e8 !important; color: #fff !important; border: 0 !important; }
.profile__content .btn-outline-light { border: 1px solid #5468e8 !important; color: #5468e8 !important; background: transparent !important; }
.profile__content .txn-table th, .profile__content .txn-table td, .profile__content table th, .profile__content table td { border-color: #cfcfcf !important; }
.profile__content .txn-table thead th { background: #d8d7d7 !important; }
@media (max-width: 700px) { .profile__nav ul { flex-wrap: wrap; } .profile__nav ul li { flex: 1 0 33%; } .profile__nav ul li a span { font-size: 12px; } }

/* Member-page footer social icons row (reuses the contact social handles). */
.member-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; padding: 26px 0; }
.member-socials a { color: #7e93b5; font-size: 22px; }
.member-socials a:hover { color: var(--based, #fd01b2); }

/* ===== Member content: legacy light .funds two-column layout ===== */
.profile__content .funds { background: transparent !important; padding: 0 !important; margin: 0 !important; color: #262626 !important; }
/* uatmeta wraps the whole detail row in ONE light panel: left fields sit on it
   with thin dividers (no separate card), right is an inset lighter box. */
.profile__content .funds__detail { display: flex; gap: 24px; align-items: flex-start; background: #d9d9d9; border-radius: 8px; padding: 22px; }
.profile__content .funds__detail-left { flex: 0 0 32%; background: transparent; border-radius: 0; overflow: visible; }
.profile__content .funds__detail-left ul { list-style: none; margin: 0; padding: 0; }
.profile__content .funds__detail-left li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid #c5c5c5; color: #262626; }
.profile__content .funds__detail-left li:last-child { border-bottom: 0; }
.profile__content .funds__detail-left li .text-center { width: 100%; text-align: center; font-weight: 700; color: #0e1b3a; }
.profile__content .funds__detail-right { flex: 1; min-width: 0; }
.profile__content .detail-box { background: #e6e5e5; border-radius: 6px; padding: 20px; margin-bottom: 16px; }
/* Inside the unified panel the inner box is lighter to read as inset. */
.profile__content .funds__detail .detail-box { background: #ececec; }
.profile__content .send-otp { display: inline-block; margin-top: 6px; color: #5468e8; font-weight: 600; font-size: 13px; }
.profile__content .field-title { display: block; font-weight: 700; color: #0e1b3a; font-size: 15px; margin: 0 0 4px; }
.profile__content .detail-box hr { border: 0; border-top: 1px solid #cfcfcf; margin: 10px 0 16px; }
.profile__content .form-detail { margin-bottom: 14px; }
.profile__content .form-detail label { display: block; margin-bottom: 6px; color: #262626; font-size: 13px; }
.profile__content .text-danger { color: #d33; }
/* Payment-method buttons (BANK / E-WALLET / PULSA). */
.profile__content .pay-methods { display: flex; gap: 8px; }
.profile__content .pay-btn { flex: 1; padding: 12px 6px; border: 0; border-radius: 4px; background: #9a9a9a; color: #fff; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.profile__content .pay-btn.active { background: #5468e8; box-shadow: 0 0 0 2px #9a5be8 inset; }
/* Account/transfer card. */
.profile__content .account-card { background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; padding: 6px 14px; margin: 4px 0 14px; }
.profile__content .acc-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; color: #262626; }
.profile__content .acc-row:last-child { border-bottom: 0; }
.profile__content .acc-row strong { color: #0e1b3a; }
/* History/bonus/referral tables. */
.profile__content .hist-tabs { display: flex; list-style: none; margin: 0 0 14px; padding: 0; }
.profile__content .hist-tabs li a { display: block; padding: 11px 20px; background: #fff; color: #262626; border: 1px solid #d2d2d2; border-radius: 4px; }
.profile__content .hist-tabs li.active a { background: #0e1b3a; color: #fff; }
.profile__content .drp-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.profile__content .req-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; }
.profile__content .req-table thead th { background: #0e1b3a !important; color: #fff !important; padding: 11px 12px; text-align: left; font-size: 13px; }
.profile__content .req-table td { padding: 11px 12px; border-bottom: 1px solid #e4e4e4; color: #262626 !important; }
.profile__content .req-table .num { text-align: right; }
.profile__content .redeem-row { display: flex; gap: 8px; align-items: center; }
.profile__content .pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 14px; color: #262626; }
/* Referral panel. */
.profile__content .ref-info { background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; padding: 16px; margin-bottom: 14px; text-align: center; }
.profile__content .ref-info h3 { margin: 6px 0; color: #0e1b3a; }
.profile__content .the-link { word-break: break-all; font-weight: 700; color: #0e1b3a; }
/* Referral page (uatmeta.com/secure/admin/referral): QR + totals row on top,
   code/link below, then full-width Referral Details + the two DataTables. Stack
   the two columns instead of side-by-side. */
.profile__content .funds__detail.referral { flex-direction: column; gap: 0; }
.profile__content .funds__detail.referral .funds__detail-left,
.profile__content .funds__detail.referral .funds__detail-right { width: 100%; flex: none; background: transparent; }
/* Row 1: QR (left) + totals (right, vertically centered with the QR). Row 2:
   code/link block, left-aligned under the QR's left edge; Copy Link on its own line. */
/* QR + code/link stack in one CENTERED left column; totals sit to the right.
   The row itself is centered so the QR lands at the left-of-center like uatmeta. */
.profile__content .funds__detail.referral .ref-top { display: flex; justify-content: center; gap: 60px; align-items: center; background: transparent; border: 0; width: 100%; margin: 0; padding: 0; }
.profile__content .funds__detail.referral .ref-left-col { flex: 0 0 auto; text-align: center; }
.profile__content .funds__detail.referral .ref-top .qr { width: 160px; height: 160px; background: #fff; }
.profile__content .funds__detail.referral .ref-totals { display: flex; gap: 70px; align-items: center; }
.profile__content .funds__detail.referral .ref-totals h3 { margin: 0; color: #0e1b3a; font-size: 18px; white-space: nowrap; }
.profile__content .funds__detail.referral .ref-link-box { display: block; text-align: center; background: transparent; border: 0; padding: 0; margin: 16px 0 0; }
.profile__content .funds__detail.referral .ref-link-box > p { margin: 8px 0 2px; font-weight: 600; color: #333; }
.profile__content .funds__detail.referral .ref-link-box > p.the-link { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 12px; background: #4a4a4a; font-weight: 700; padding: 7px 14px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); word-break: break-all; }
/* Pill text must be white — override the light-member-theme dark-text rule. */
.profile__content .funds__detail.referral .ref-link-box > p.the-link,
.profile__content .funds__detail.referral .ref-link-box > p.the-link span,
.profile__content .funds__detail.referral .ref-copy { color: #fff !important; }
.profile__content .funds__detail.referral .ref-copy { cursor: pointer; }
/* Copy Link drops to its own line below the link pill (real layout). */
.profile__content .funds__detail.referral .ref-link-box > #ref-copylink { display: block; width: -moz-fit-content; width: fit-content; margin: 6px auto 0; }
/* Referral Details box + DataTables-style controls. */
.profile__content .ref-h { color: #0e1b3a; margin: 18px 0 8px; font-size: 15px; font-weight: 700; }
.profile__content .ref-summary { background: #efefef; border: 1px solid #dadada; border-radius: 4px; text-align: center; padding: 12px; color: #666; }
/* Date-range dropdown (daterangepicker look). */
.profile__content .drp-wrap { display: flex; align-items: center; gap: 10px; position: relative; flex-wrap: wrap; }
.profile__content .drp { display: inline-flex; align-items: center; gap: 10px; min-width: 320px; background: #fff; border: 1px solid #c4c4c4; border-radius: 4px; padding: 9px 14px; color: #333; cursor: pointer; font-weight: 600; }
.profile__content .drp .fa-caret-down { margin-left: auto; color: #777; }
.profile__content .drp-pop { position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 6px; background: #fff; border: 1px solid #c4c4c4; border-radius: 4px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: flex; gap: 12px; align-items: center; }
.profile__content .drp-pop label { color: #333; font-weight: 600; }
.profile__content .dt-show { margin: 8px 0; font-size: 13px; color: #333; }
.profile__content .dt-show select { width: auto; display: inline-block; padding: 3px 6px; margin: 0 4px; }
.profile__content .dt-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; margin: 8px 0 4px; }
.profile__content .dt-pg a { margin-left: 14px; color: #5468e8; }
.profile__content .dt-pg a.disabled { color: #aaa; pointer-events: none; }
.profile__content .referral-list, .profile__content .referral-commission { width: 100%; }

/* ===== Register page (before-login, matches uatmeta.com/register) ===== */
.reg-main { padding: 26px 0 50px; }
.register-card { max-width: 920px; margin: 0 auto; background: #e6e5e5 !important; color: #262626 !important; border-radius: 8px; padding: 26px 28px; }
.register-card .img-container { text-align: center; margin-bottom: 18px; }
.register-card .img-container img { max-width: 220px; height: auto; }
.register-card .reg-cols { display: flex; gap: 30px; }
.register-card .reg-col { flex: 1; min-width: 0; }
.register-card .form-group { margin-bottom: 14px; }
.register-card .form-group label { display: block; font-weight: 600; color: #333; margin-bottom: 5px; font-size: 13px; }
.register-card .form-group label span { color: #e53935; }
.register-card .form-control { width: 100%; background: #fff; color: #262626; border: 1px solid #c4c4c4; border-radius: 4px; padding: 9px 12px; }
.register-card .captcha-wrap { display: flex; align-items: center; gap: 8px; }
.register-card .captcha-code { font-family: monospace; font-size: 20px; font-weight: 800; letter-spacing: 4px; background: #0e1b3a; color: #fff; padding: 7px 14px; border-radius: 4px; user-select: none; }
.register-card .reg-captcha-refresh { cursor: pointer; color: #5468e8; }
.register-card .captcha-wrap .form-control { flex: 1; }
.register-card .button--register { width: 100%; margin-top: 8px; padding: 13px; background: var(--btn-register, #fd01b2); color: #fff; font-weight: 700; border: 0; border-radius: 4px; }
.register-card .button--register:hover { opacity: .9; }
.register-card .reg-hint { text-align: center; margin: 14px 0 0; color: #444; }
.register-card .reg-hint a { color: #5468e8; font-weight: 600; }
.register-card .alert { margin-bottom: 14px; }
@media (max-width: 760px) { .register-card .reg-cols { flex-direction: column; gap: 0; } }

/* ===== Ported #showM mobile member pages (real uatmeta markup, normal device toggle) =====
   Clip page-level overflow; let wide data tables scroll horizontally instead of
   pushing the viewport. Applies to the real #showM member content. ===== */
@media (max-width: 768px) {
  #showM .content { overflow-x: hidden; }
  #showM .funds,
  #showM .funds__container,
  #showM .funds__container-section,
  #showM .profile { max-width: 100%; box-sizing: border-box; }
  #showM .referral-list,
  #showM .referral-commission,
  #showM .bonusHis,
  #showM table.display,
  #showM .dataTables_wrapper table,
  #showM .table-responsive > table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
}

/* ===== Member pages on mobile (<=768px) =====
   Member content lives once, inside #showD (single copy -> no duplicate IDs). On mobile
   we show the real #showM mobile chrome (fixed top nav + hamburger drawer + bottom nav +
   login modal) AND the #showD member content, hiding #showM's homepage body and #showD's
   desktop header/footer. The member content is padded to clear the two fixed bars. */
@media (max-width: 768px) {
  body.member-page { overflow-x: hidden; }   /* clip any sub-pixel/edge overflow; tables keep .detail-box scroll */

  /* Mobile chrome from #showM: keep the fixed nav / drawer / bottom-nav / login modal,
     drop only the homepage body (.content: banner/jackpot/games). */
  body.member-page #showM { display: block !important; }
  body.member-page #showM > .content { display: none !important; }

  /* Member content from #showD: keep .profile, drop the desktop header/menu/footer.
     Pad to clear the fixed mobile nav (50px) on top and bottom-nav (60px) below. */
  body.member-page #showD { display: block !important; padding-top: 50px; padding-bottom: 72px; }
  body.member-page #showD .header-top,
  body.member-page #showD .header-mdl,
  body.member-page #showD .header-menu,
  body.member-page #showD .nav-bottom,
  body.member-page #showD #footer,
  body.member-page #showD .footer-end { display: none !important; }

  /* Content stacks: left nav becomes a horizontal scroll strip, panels go full width. */
  body.member-page #showD .profile .wrapper { flex-direction: column; overflow-x: hidden; }
  body.member-page #showD .profile__nav { display: block; width: 100%; max-width: 100%; overflow: hidden; }
  body.member-page #showD .profile__nav ul { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.member-page #showD .profile__nav ul li { flex: 0 0 auto; }
  body.member-page #showD .profile__nav ul li a span { font-size: 12px; }
  body.member-page #showD .profile__content { width: 100%; }
  body.member-page #showD .funds__detail,
  body.member-page #showD .dep-cols,
  body.member-page #showD .deposit-option { flex-direction: column; gap: 0; }
  body.member-page #showD .funds__detail-left,
  body.member-page #showD .funds__detail-right { width: 100%; flex-basis: auto; }
  body.member-page #showD .container { padding-left: 12px; padding-right: 12px; }

  /* Clip stray horizontal overflow; tables keep their own scroll (below). */
  body.member-page #showD .profile__content { overflow-x: hidden; }
  body.member-page #showD .profile__content * { max-width: 100%; box-sizing: border-box; }

  /* Profile info list: stack rows, wrap long values (e.g. the referral URL). */
  body.member-page #showD .funds__detail-left ul { display: block; padding-left: 0; margin-left: 0; }
  body.member-page #showD .funds__detail-left li { display: block; white-space: normal; word-break: break-word; }
  body.member-page #showD .refLink-get,
  body.member-page #showD .reflink-row span,
  body.member-page #showD .g8-name { word-break: break-all; }
  body.member-page #showD .user-level,
  body.member-page #showD .user-level .badge { width: 100%; }

  /* Referral: stack the QR / code / totals block instead of the desktop row. */
  body.member-page #showD .ref-top,
  body.member-page #showD .ref-info { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  body.member-page #showD .ref-totals { width: 100%; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }

  /* Wide tables scroll horizontally instead of overflowing the viewport. */
  body.member-page #showD .detail-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.member-page #showD .detail-box table { min-width: 560px; }
}

/* ===== Referral mobile: grey Submit (not periwinkle CTA); empty tables collapse to just
   the heading like uatmeta (hide column headers + pager + the "no data" row). ===== */
#showM .btn-drp, #showM .btn-msg-search, #showM .btn-bet-search { background: #6f6f6f !important; color: #fff !important; border: 0 !important; }
#showM .ref-counter { display: flex; justify-content: space-around; gap: 12px; text-align: center; }
/* Date-range pill on one line (no wrap), the Submit button sits beside it. */
#showM .drp-wrap { display: flex; align-items: stretch; gap: 8px; }
#showM .drp-wrap .drp { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
#showM .drp-wrap .drp span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#showM .drp-wrap .btn-drp, #showM .drp-wrap .btn-msg-search { flex: 0 0 auto; }
/* DataTables-style length selector ("Show N entries") above each referral table. */
#showM .dt-show { margin: 8px 0; color: #cfd6e4; font-size: 13px; text-align: center; }
#showM .dt-show select { display: inline-block; width: auto; margin: 0 6px; padding: 3px 6px; }

/* ===== Messages mobile tabs: tall, stacked icon + label, dark-blue active (match uatmeta).
   style-m.css renders .depo-select.message at 20px (icon-only) — override for the real look. */
#showM .depo-select.message { display: flex; height: auto; margin: 0; padding: 0; list-style: none; }
#showM .depo-select.message li { flex: 1; height: auto !important; min-height: 56px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #4f4f4f; color: #fff; font-weight: 600; cursor: pointer; text-align: center; line-height: 1.2; }
#showM .depo-select.message li.active { background: #1f4e79 !important; height: auto !important; }
#showM .depo-select.message li i { font-size: 18px; }
#showM .msglist .msglist-box.msg-empty, #showM .msglist-global .msglist-box.msg-empty { background: #fff !important; color: #555 !important; }

/* ===== Unread inbox: bell badge + bold card ===== */
.msg-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e53935; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.msglist-box.unread .msg-pub, .msglist-box.unread .btn-msg-show { font-weight: 800; }
.msglist-box.unread { box-shadow: inset 3px 0 0 #e53935; }

/* ===== Message cards: subject is a tappable link; detail opens in .msgbox ===== */
.msglist-box .btn-msg-show { color: #e88a1a; text-decoration: none; cursor: pointer; }
.msglist-box .btn-msg-show:hover { text-decoration: underline; }
.msglist-box.msg-empty { color: #cfd6e4; }

/* Message detail modal (real uatmeta loads /css/msgbox.css; replicated here). */
.msgbox.msgbox--js { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.msgbox.msgbox--js[hidden] { display: none; }
.msgbox.msgbox--js .msgbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.msgbox.msgbox--js .msgbox-in { position: relative; width: 90%; max-width: 480px; max-height: 80vh; overflow: auto; background: #fff; color: #262626; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.msgbox.msgbox--js .msgbox-close { position: absolute; top: 8px; right: 12px; cursor: pointer; font-weight: 700; color: #888; font-size: 16px; }
.msgbox.msgbox--js .msgbox-inpad { padding: 22px 20px; }
.msgbox.msgbox--js .msgbox-header { border-bottom: 1px solid #e2e2e2; padding-bottom: 12px; margin-bottom: 12px; }
.msgbox.msgbox--js .msgbox-header .mb-title { font-weight: 700; font-size: 16px; color: #e88a1a; }
.msgbox.msgbox--js .msgbox-header .mb-meta { font-size: 12px; color: #777; margin-top: 4px; }
.msgbox.msgbox--js .msgbox-body { font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
body.msgbox-open { overflow: hidden; }

/* ===== Messages page: Inbox / Announcements tabs + message cards
   (mirrors uatmeta.com/secure/admin/messages). ===== */
.profile__content .msg-tabs { display: flex; list-style: none; margin: 0 0 16px; padding: 0; border-radius: 4px; overflow: hidden; }
.profile__content .msg-tabs li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; cursor: pointer; font-weight: 600; background: #111; color: #fff; }
.profile__content .msg-tabs li.active { background: #5468e8; color: #fff; }
.profile__content .msglist-box { background: #fff; border: 1px solid #d2d2d2; border-radius: 4px; padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 24px; color: #262626; }
.profile__content .msglist-box .msg-from { flex: 0 0 30%; line-height: 1.5; }
.profile__content .msglist-box .msg-pub { display: block; color: #262626; font-weight: 600; }
.profile__content .msglist-box .msg-date { display: block; color: #262626; }
.profile__content .msglist-box .msg-subject { flex: 1; color: #d98521; font-weight: 600; }
.profile__content .msglist-box.cms-loading { color: #888; justify-content: center; }

/* ===== Profile page: referral block + progress card + 2-col change password
   (mirrors uatmeta.com/secure/admin/profile). ===== */
/* Referral rows group left instead of spreading edge-to-edge. */
.profile__content .funds__detail-left li.ref-active { justify-content: flex-start; gap: 10px; align-items: flex-start; }
.profile__content .ref-id.status { display: inline-block; background: #2e7d32; color: #fff; padding: 2px 12px; border-radius: 3px; font-weight: 700; font-size: 12px; }
.profile__content .ref-copy, .profile__content .copyBtn { cursor: pointer; }
/* Referral "Copy Link" button is grey on uatmeta (not the periwinkle CTA colour). */
.profile__content .copyBtn, #showM .copyBtn { background: #6f6f6f !important; color: #fff !important; border: 0 !important; }
.profile__content .copyBtn:hover, #showM .copyBtn:hover { opacity: .9; }
.profile__content .reflink-qr { display: block; margin-top: 6px; width: 100px; height: 100px; background: #fff; }
.profile__content .button-sm { width: auto; padding: 6px 14px; font-size: 12px; margin-top: 6px; }
/* Progress-level card (dark on the light profile, same as live). */
.profile__content li.ulevel-row { display: block; padding: 14px 0; border-bottom: 0; }
.profile__content .user-level, #showM .user-level { display: flex; gap: 14px; background: #1a2535; color: #fff; border-radius: 8px; padding: 14px; }
.profile__content .user-level .badge, #showM .user-level .badge { background: transparent; text-align: center; flex: 0 0 auto; padding: 0; }
.profile__content .user-level .badge img, #showM .user-level .badge img { width: 90px; height: 90px; border-radius: 4px; }
/* Rank avatar: a styled medal badge instead of an external placeholder image. */
.profile__content .user-level .rank-avatar, #showM .user-level .rank-avatar { width: 90px; height: 90px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #c0c6d0, #8c93a3); }
.profile__content .user-level .rank-avatar i, #showM .user-level .rank-avatar i { font-size: 44px; color: #fff; }
.profile__content .user-level .badge .user, #showM .user-level .badge .user { font-weight: 700; margin-bottom: 6px; }
.profile__content .user-level .rank, #showM .user-level .rank { display: inline-flex; gap: 6px; align-items: center; justify-content: center; background: #2a3445; border-radius: 4px; padding: 3px 10px; margin-top: 6px; font-size: 12px; }
/* Bootstrap's global .progress is a 1rem-tall overflow-hidden bar; that clips
   the "Progress Level" heading + rows. Reset it for the level card. */
.profile__content .user-level .progress, #showM .user-level .progress { flex: 1; min-width: 0; height: auto; display: block; overflow: visible; background: transparent; border-radius: 0; box-shadow: none; font-size: inherit; }
/* The light-member theme forces .profile__content h3 to #262626 !important;
   the level card is dark, so its heading needs !important to stay white. */
.profile__content .user-level .progress h3, #showM .user-level .progress h3 { color: #fff !important; margin: 0 0 8px; font-size: 15px; }
.profile__content .user-level .level.leveling, #showM .user-level .level.leveling { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.profile__content .user-level .progress-bar, #showM .user-level .progress-bar { background: #3a4555; height: 10px; border-radius: 5px; margin: 6px 0; overflow: hidden; }
.profile__content .user-level .progress-bar .bar, #showM .user-level .progress-bar .bar { background: #e53935; height: 100%; }
.profile__content .user-level .level-info, #showM .user-level .level-info { font-size: 12px; margin-top: 8px; line-height: 1.55; }
/* Change Password two-column: Old Password | New + Confirm. */
.profile__content .deposit-option { display: flex; gap: 20px; }
.profile__content .deposit-option__form, .profile__content .deposit-option__info { flex: 1; min-width: 0; }
@media (max-width: 700px) { .profile__content .deposit-option { flex-direction: column; gap: 0; } }

/* Deposit method tabs (Manual / Cepat / USDT) + Otomatis/manual badges. */
.profile__content .depo-tabs { display: flex; list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: 6px 6px 0 0; }
.profile__content .depo-tabs li { flex: 1; padding: 16px 12px; background: #0e1b3a; color: #cdddf2; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; cursor: pointer; position: relative; font-size: 13px; border-left: 1px solid #1c2c52; }
.profile__content .depo-tabs li:first-child { border-left: 0; }
.profile__content .depo-tabs li.active { background: #5468e8; color: #fff; }
.profile__content .badge-auto { position: absolute; top: 6px; right: 12px; background: #3aa552; color: #fff; font-size: 10px; padding: 2px 9px; border-radius: 10px; }
.profile__content .badge-manual { background: #e23b3b; color: #fff; font-size: 11px; padding: 3px 11px; border-radius: 4px; margin-left: 12px; }
.profile__content .detail-box--joined { border-radius: 0 0 6px 6px; }
.profile__content .dep-head { display: flex; align-items: center; }
.profile__content .dep-cols { display: flex; gap: 26px; }
.profile__content .dep-col-l, .profile__content .dep-col-r { flex: 1; min-width: 0; }
.profile__content .dep-info { display: flex; gap: 10px; align-items: flex-start; background: #dde6f6; border-radius: 6px; padding: 14px; color: #555; font-size: 13px; margin-bottom: 16px; }
.profile__content .dep-info i { color: #5468e8; font-size: 18px; margin-top: 2px; }
.profile__content .dep-info p { margin: 0; }
.profile__content .form-control-file { width: 100%; color: #262626; }
@media (max-width: 800px) { .profile__content .funds__detail, .profile__content .dep-cols { flex-direction: column; } .profile__content .funds__detail-left { width: 100%; flex-basis: auto; } }

/* Logged-in account pill (replaces the login form) */
.account-pill { display: flex; align-items: center; gap: 12px; }
.account-pill .acc-name { font-weight: 700; }
.account-pill .balance { color: var(--based,#fd01b2); font-weight: 700; }
.account-pill .button { width: auto; padding: 8px 14px; }

/* cms.js async states */
.cms-loading, .cms-empty, .cms-error { padding: 20px; text-align: center; color: #7e93b5; font-size: 13px; }

/* Running text inside the legacy marquee. The legacy theme used a deprecated
   <marquee> element to scroll; our rebuild uses a <span>, so animate it here.
   overflow:hidden clips to the bar; padding-left:100% starts the text off the
   right edge (% is the container width); translateX(-100%) is the span's own
   width (container + text) so it scrolls fully off the left. */
.marquee .s-a { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.marquee .running-text {
  color: #cfe0f5; font-size: 13px;
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: cmm-marquee 24s linear infinite;
}
.marquee:hover .running-text { animation-play-state: paused; }
@keyframes cmm-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee .running-text { animation: none; padding-left: 0; }
}

/* Footer nav links centered (Tentang Kami / Syarat & Ketentuan / …) */
.nav-bottom ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; }

/* Footer bottom bar: copyright + the single dashed "info" box that carries
   both the RESPONSIBLE GAMING and VERIFIED & SECURED groups under floating
   labels. The legacy theme scopes these rules under <footer> (`footer
   .row-end-footer …`), but our row lives in <section class="footer-end">, so
   re-scope the legacy rules here verbatim to get the exact dashed-box layout. */
.footer-end { border-top: 1px solid var(--line, #16335e); padding: 30px 0 10px; }
.footer-end .row-end-footer { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: center; }
.footer-end .box-copyright { align-self: end; text-align: center; }
.footer-end .box-copyright .text { font-size: 12px; line-height: 18px; margin: 0; color: #b9acbb; }
.footer-end .box-copyright .wl-label { color: #f0edf0; font-weight: 600; }
.footer-end .box-information { position: relative; display: flex; align-items: center; justify-content: space-between; align-self: stretch; width: 100%; height: 64px; border: 1px dashed #5d5d5d; border-radius: 8px; box-shadow: rgba(3,3,3,.1) 0 2px 10px; }
.footer-end .title-information { position: absolute; top: -19px; left: 0; height: 36px; margin-left: 10px; width: calc(100% - 20px); }
.footer-end .title-information .text-left { position: absolute; top: 10px; left: -4px; width: 150px; display: flex; align-items: center; justify-content: center; padding: 0 8px; background: #151515; border-radius: 8px; box-shadow: rgba(3,3,3,.1) 0 0 10px; }
.footer-end .title-information .text-right { position: absolute; top: 10px; right: 6px; width: 150px; display: flex; align-items: center; justify-content: center; padding: 0 8px; background: #141126; border-radius: 8px; box-shadow: rgba(3,3,3,.1) 0 0 10px; }
.footer-end .title-information .text-left, .footer-end .title-information .text-right { color: #b9acbb; }
.footer-end .ti-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 14px; white-space: nowrap; color: #b9acbb; }
.footer-end .content { display: flex; width: 100%; justify-content: space-between; padding: 0 20px; }
.footer-end .content .left { width: 135px; display: flex; justify-content: space-between; }
.footer-end .content .right { width: 160px; display: flex; justify-content: space-between; }
.footer-end .content img { height: 30px; width: auto; object-fit: contain; }

/* Footer SEO copy: the CMS injects the operator footer (h1/h2/p) raw into
   <footer id="footer">. Flow it into columns on desktop to match the reference's
   4-column INFORMASI/PRODUK/PUSAT INFO/PROMOSI layout (single column on mobile). */
footer#footer { max-width: 1180px; margin: 0 auto; padding: 26px 18px; }
footer#footer h1 { font-size: 15px; }
footer#footer h2, footer#footer h3 { font-size: 13px; }
@media (min-width: 769px) {
  footer#footer { column-count: 4; column-gap: 30px; }
  footer#footer h1, footer#footer h2, footer#footer h3,
  footer#footer p, footer#footer ul, footer#footer ol { break-inside: avoid; }
}

/* Forgot-login modal. Legacy style.css defines .modal-forgot (display:none) and
   the dialog chrome; we add the open state + center it and style the body. */
.modal-forgot.open { display: flex !important; align-items: center; justify-content: center; }
/* The dialog still carries the legacy absolute-centering trick (top:50% +
   translateY(-50%)). Inside our flex overlay that doubles up and shoves it to
   the lower half. Neutralize it so flex align/justify is the only centering. */
.modal-forgot__dialog { width: 92%; max-width: 460px; margin: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; }
.modal-forgot__dialog-header .forgot-title { font-size: 18px; font-weight: 700; }
.modal-forgot__dialog-body { padding: 26px 28px; text-align: center; color: #464a4c; }
.modal-forgot__dialog-body p { margin: 0 0 18px; line-height: 1.5; }
.modal-forgot__actions { display: flex; gap: 12px; justify-content: center; }
.modal-forgot__actions .button { width: auto; padding: 10px 22px; }

/* Inner content pages (Tentang Kami / Hubungi Kami / …): the legacy style.css
   styles .info/.info__left/.info__right; we keep the info card on the dark theme
   and lay out the contact (Hubungi Kami) social cards. */
.info { max-width: 1180px; margin: 0 auto; }
.info__left ul { list-style: none; margin: 0; padding: 0; }
.info__left li a { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: #1d2733; border-bottom: 1px solid rgba(0,0,0,.08); }
.info__left li a::after { content: "\203A"; opacity: .5; }
.info__left li.active a { background: var(--based, #fd01b2); color: #fff; }
.s-cs-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; margin: 24px 0 0; list-style: none; }
.contact-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; padding: 22px 12px; text-align: center; }
.contact-card__name { font-size: 16px; color: #1d2733; margin-bottom: 14px; }
.contact-card__icon { font-size: 34px; color: #1d2733; margin-bottom: 14px; }
.contact-card__handle { display: inline-block; color: var(--based, #fd01b2); word-break: break-all; }
a.contact-card__handle:hover { text-decoration: underline; }
@media (max-width: 768px) { .s-cs-contact { grid-template-columns: repeat(2, 1fr); } }

/* Promotions: left category tabs + full-width banner cards with a green
   title bar + Detail button (matches the live uatmeta.com promotions page). */
.promotion .info__left { align-self: flex-start; }
.promotab { list-style: none; margin: 0; padding: 0; }
.promotab li a { display: block; padding: 15px 18px; color: #fff; background: #1a9e74; border-bottom: 1px solid rgba(255,255,255,.18); cursor: pointer; font-weight: 600; }
.promotab li a::after { content: none; }            /* cancel the info-nav chevron */
.promotab li.active a { background: #0d1b30; }
#promotions-grid { display: flex; flex-direction: column; gap: 22px; }
.promo-card { background: #0c1c33; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.promo-card img { display: block; width: 100%; height: auto; }
.promo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #1a9e74; }
.promo-bar .promo-title { color: #fff; font-weight: 700; font-size: 16px; text-transform: uppercase; }
.promo-bar .promo-detail { background: #0e8f69; color: #fff; padding: 9px 24px; border-radius: 4px; font-size: 13px; white-space: nowrap; }
.promo-bar .promo-detail:hover { opacity: .9; }

/* ===== Slots page (provider strip + category tabs + search + game grid) ===== */
.slots-page .wrapper { max-width: 1280px; }
/* Provider strip — white tiles with the colourful brand thumbnail + name,
   inside a green frame (mirrors the live uatmeta.com slots page). */
.slot-strip-wrap { position: relative; display: flex; align-items: stretch; gap: 4px; padding: 12px 0; border: 2px solid #1a9e74; border-radius: 8px; background: #0a0a0a; margin-top: 8px; }
.slot-strip { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; flex: 1; padding: 6px; scrollbar-width: none; }
.slot-strip::-webkit-scrollbar { display: none; }
.slot-prov { flex: 0 0 136px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid #1f7d5e; border-radius: 6px; background: #fff; color: #1d2733; overflow: hidden; }
.slot-prov__logo { width: 100%; aspect-ratio: 18 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slot-prov__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* 180x100 art, true aspect -> no crop */
.slot-prov__logo--all { background: #0c1c33; color: #ffd34d; font-size: 30px; }
.slot-prov__wordmark { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #1d2733; padding: 4px; text-align: center; }
.slot-prov__name { font-size: 12px; font-weight: 600; text-align: center; padding: 5px 4px; background: #fff; color: #1d2733; }
.slot-prov.active { border-color: var(--based, #fd01b2); box-shadow: 0 0 0 2px var(--based, #fd01b2) inset; }
.slot-strip-arrow { flex: 0 0 28px; border: 0; background: transparent; color: #cdddf2; cursor: pointer; font-size: 16px; }
.slot-strip-arrow:hover { color: #1a9e74; }
/* Filter bar: category tabs + search */
.slot-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0 16px; }
.slot-cats { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.slot-cat { background: #11151b; color: #cdddf2; border: 0; border-radius: 4px; padding: 9px 16px; font-size: 12px; font-weight: 700; cursor: pointer; text-transform: uppercase; }
.slot-cat.active, .slot-cat:hover { background: #1a9e74; color: #fff; }
.slot-search { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 4px; padding: 9px 14px; min-width: 240px; }
.slot-search i { color: #8aa0bf; }
.slot-search input { border: 0; outline: 0; flex: 1; font-size: 13px; color: #1d2733; }
/* Game grid */
.slot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 4px 0 24px; }
.slot-tile { position: relative; display: block; min-width: 0; max-width: 100%; border-radius: 6px; overflow: hidden; background: #0c1c33; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.slot-tile__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #0a1626; }
.slot-tile__bar { background: #1a9e74; padding: 6px 10px 8px; }
.slot-tile__rtp { display: flex; align-items: center; gap: 6px; }
.slot-tile__rtp i { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.85); display: block; max-width: 100%; }
.slot-tile__rtp span { font-size: 11px; font-weight: 700; color: #fff; }
.slot-tile__name { color: #fff; font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Provider logo footer (grayscale wordmark on a dark strip) */
.slot-tile__prov { display: flex; align-items: center; justify-content: center; height: 26px; background: #0a141f; }
.slot-tile__prov .provider { filter: grayscale(1) brightness(1.8); transform: scale(.8); }
@media (max-width: 1024px) { .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Download (Unduh) page: platform icon row + QR card grid ===== */
.dl-page { color: #e8f2fc; }
.dl-platforms { display: flex; justify-content: center; gap: 26px; padding: 10px 0 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 24px; }
.dl-platforms button { background: none; border: 0; padding: 10px 14px; font-size: 30px; color: #5d7396; cursor: pointer; border-radius: 8px; }
.dl-platforms button.active { color: #e8f2fc; background: rgba(255,255,255,.07); }
.dl-platforms button.active .fa-android { color: #3ddc84; }
.dl-desktop-note { text-align: center; color: #cdddf2; font-size: 15px; line-height: 1.7; padding: 8px 10px 24px; grid-column: 1 / -1; }
.dl-grid .cms-empty, .dl-grid .cms-loading, .dl-grid .cms-error { grid-column: 1 / -1; }
.dl-desktop-note .dl-card__btn { margin-top: 14px; }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; padding-bottom: 30px; }
.dl-card { text-align: center; }
.dl-card__row { display: flex; }
.dl-card__qr { width: 50%; background: #fff; padding: 6px; box-sizing: border-box; display: block; }
.dl-card__os { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #3ddc84; background: #131e3a; }
.dl-card__name { font-weight: 700; margin: 14px 0 10px; font-size: 18px; color: #fff; }
.dl-card__btn { display: inline-block; background: #7c8cf8; color: #fff; padding: 9px 30px; border-radius: 4px; font-weight: 600; }

/* Mobile WhatsApp float (injected by app.js when the entity has a number). */
.m-float-wa { position: fixed; left: 14px; bottom: 78px; width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 998; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
@media (min-width: 769px) { .m-float-wa { display: none; } }

/* Promotion landing (/promotion/<slug>) CTA — same look on desktop and H5. */
.promo-cta { text-align: center; margin: 18px 0 4px; }
.promo-cta a { display: inline-block; background: var(--based, #fd01b2); color: #fff; font-weight: 700; padding: 12px 28px; border-radius: 6px; }

/* ===== H5/mobile: inner pages share the desktop (#showD) content =====
   style-m.css hides #showD globally; pages marked <body class="m-share">
   un-hide it on mobile and drop only the desktop chrome (header, desktop
   marquee), so the page's real content (forms, tables, info text) renders
   on H5 without duplicating markup or JS ids. index.html keeps its full
   legacy mobile DOM and does NOT use m-share. */
@media (max-width: 768px) {
  /* Injected member menu rows (Profile/Banking/Bonus/...) — FA icons aligned
     to match the legacy image-icon menu rows (21px glyph + 16px gap). */
  #showM .sidenav-games li.m-member a i { width: 21px; margin-right: 16px; text-align: center; color: #fff; font-size: 18px; }

  /* ===== Logged-in GOLD theme (mobile), matching uatmeta.com after login =====
     Re-skins the chrome (header bar, balance pill, bottom nav, primary buttons,
     SALDO amount). Member content panels stay light for readability. */
  /* Header balance pill (injected by app.js). Hidden until authed; replaces bell. */
  /* Cap the mobile header logo so the authed account pill never crowds it. */
  #showM .nav img { max-width: 120px; height: auto; }
  #showM .nav__balance { display: none; }
  body.is-authed #showM .nav__notification { display: none; }
  body.is-authed #showM .nav__balance { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; background: #131a2e; border-left: 3px solid var(--btn-login, #7a8bf3); border-radius: 4px; padding: 5px 10px; margin-left: auto; margin-right: 12px; max-width: 48vw; line-height: 1.2; }
  #showM .nav__balance-name { color: #fff; font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #showM .nav__balance-amt { color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
  /* Home Deposit | Withdraw toggle (logged-in only, sits where quick-btn was). */
  #showM .m-dw-toggle { display: none; }
  body.is-authed #showM .m-dw-toggle { display: flex; }
  #showM .m-dw-toggle a { flex: 1; text-align: center; padding: 14px 0; font-size: 16px; font-weight: 700; color: #fff; background: #141b38; }
  #showM .m-dw-toggle a:first-child { background: #141b38; }
  #showM .m-dw-toggle a:last-child { background: var(--btn-login, #7a8bf3); color: #fff; }

  /* Logged-in chrome keeps the SAME template colours as before login (navy bars,
     periwinkle/pink accents) — no separate gold theme. */
  body.is-authed #showM .nav { background: #01051b; }
  body.is-authed #showM .bottom-nav { background: #1e274b; }
  /* Center Banking button: the legacy .wrap is scale(2.5)'d for the small PNG
     icon; our FA glyph inside it renders oversized and pokes too high. Reset to
     a clean raised circle with a centered icon, matching the live site. */
  body.is-authed #showM .bottom-nav .wrap { transform: none; width: 50px; height: 50px; margin: -14px auto 0; background: #1e274b; display: flex; align-items: center; justify-content: center; border: 2px solid var(--btn-login, #7a8bf3); }
  body.is-authed #showM .bottom-nav .wrap i { font-size: 22px !important; top: auto !important; }
  /* SALDO amount + member balances: white on the dark bars/cards (no gold). */
  body.is-authed .member-saldo .amt,
  body.is-authed .member-saldo .member-saldo-amt,
  body.is-authed #showM .nav__balance-amt { color: #fff; }
  /* Primary action buttons -> periwinkle CTA (same as before-login MASUK). Copy Link
     stays grey (its own rule). */
  body.is-authed #showD .button--yellow,
  body.is-authed #showD .profile__content button[type="submit"],
  body.is-authed #showD .profile__content #submit-btn,
  body.is-authed #showD .profile__content #search-btn,
  body.is-authed #showD .profile__content .btn-primary { background: var(--btn-login, #7a8bf3) !important; color: #fff !important; font-weight: 700 !important; }
  /* Drawer account block: gold balance (set directly on .m-acct__bal above). */

  /* ===== Profile account page: dark panel + teal values (matches live) =====
     Scoped to .acct-dark so deposit/withdraw/etc. keep their light form theme. */
  #showD .acct-dark .acct-welcome { background: #e6e5e5; color: #262626; text-align: center; font-weight: 700; letter-spacing: 1px; padding: 14px; font-size: 15px; border-radius: 6px; }
  /* Profile shows only the WELCOME banner; balance lives in the header pill. */
  #showD .acct-dark .member-saldo { display: none; }
  /* The account fields panel goes dark; labels white, values teal. Shared by the
     profile (.acct-dark) and banking (.bank-dark) pages. */
  #showD .acct-dark .funds__detail,
  #showD .bank-dark .funds__detail { background: #1e1e1e !important; }
  #showD .acct-dark .funds__detail-left li,
  #showD .bank-dark .funds__detail-left li { border-bottom-color: rgba(255,255,255,.08) !important; }
  #showD .acct-dark .funds__detail-left li > span:first-child,
  #showD .bank-dark .funds__detail-left li > span:first-child { color: #fff !important; font-weight: 600; }
  #showD .acct-dark .funds__detail-left li > span:last-child,
  #showD .bank-dark .funds__detail-left li > span:last-child,
  #showD .acct-dark .funds__detail-left li .refName,
  #showD .acct-dark .funds__detail-left li .bank-get,
  #showD .acct-dark .funds__detail-left li .bankAcc-get,
  #showD .acct-dark .funds__detail-left li .refHp,
  #showD .acct-dark .funds__detail-left li .refEmail,
  #showD .acct-dark .funds__detail-left li .refCode,
  #showD .acct-dark .funds__detail-left li .refLink-get { color: #2bbf9f !important; }
  /* Change Password box on the dark panel: dark inset, readable labels. */
  #showD .acct-dark .funds__detail-right .detail-box,
  #showD .bank-dark .funds__detail-right .detail-box { background: #2a2a2a !important; }
  #showD .acct-dark .funds__detail-right .field-title,
  #showD .acct-dark .funds__detail-right label,
  #showD .bank-dark .funds__detail-right .field-title,
  #showD .bank-dark .funds__detail-right label,
  #showD .bank-dark .funds__detail-right { color: #fff !important; }
  /* Referral copy/QR + level card already styled; keep AKTIF badge + gold buttons. */
  #showD .acct-dark .ref-id.status { color: #fff !important; }

  /* ===== Banking pages (deposit/withdraw): toggle + inline gold Saldo + dark
     method tabs / payment buttons, matching the live mobile banking screens. */
  /* Deposit | Withdrawal segmented toggle. */
  #showD .bank-dark .bank-toggle { display: flex; gap: 0; margin-bottom: 16px; border-radius: 8px; overflow: hidden; }
  #showD .bank-dark .bank-toggle a { flex: 1; text-align: center; padding: 13px 0; border-radius: 0; font-size: 15px; font-weight: 700; color: #cfd6e4; background: #2c2c2c; display: flex; align-items: center; justify-content: center; gap: 7px; }
  #showD .bank-dark .bank-toggle a.active { background: #1a3a6b; color: #fff; }
  #showD .bank-dark .bank-toggle a i { font-size: 14px; opacity: 0.85; }
  /* Bank details: sit on page background, not inside a card. */
  body.m-share #showD .bank-dark .funds__detail { background: transparent !important; }
  body.m-share #showD .bank-dark .funds__detail-left,
  body.m-share #showD .bank-dark .funds__detail-right { width: 100%; box-sizing: border-box; }
  /* Detail-box (form section) full-width. */
  body.m-share #showD .bank-dark .detail-box { width: 100%; box-sizing: border-box; border-radius: 8px; }
  /* Inline "Saldo  IDR x" row (gold), right-aligned — replaces the big card. */
  #showD .bank-dark .member-saldo { background: transparent !important; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 0 16px; margin: 0; }
  #showD .bank-dark .member-saldo .lbl { color: #fff !important; font-size: 16px; font-weight: 700; letter-spacing: 0; }
  #showD .bank-dark .member-saldo .amt { font-size: 22px; font-weight: 800; }
  #showD .bank-dark .member-saldo .member-saldo-amt { color: #fff !important; }
  #showD .bank-dark .member-saldo .bal-refresh { color: #fff; }
  /* Method tabs (Manual / Cepat / USDT): dark, blue active. */
  #showD .bank-dark .depo-tabs li { background: #2c2c2c !important; color: #cfd6e4 !important; }
  #showD .bank-dark .depo-tabs li.active { background: #1f9bde !important; color: #fff !important; }
  /* Payment buttons (BANK / E-WALLET / PULSA): dark, blue active. */
  #showD .bank-dark .pay-methods .pay-btn { background: #2c2c2c !important; color: #cfd6e4 !important; border: 1px solid #444 !important; }
  #showD .bank-dark .pay-methods .pay-btn.active { background: #1f9bde !important; color: #fff !important; border-color: #1f9bde !important; }
  /* Info box + account card on dark. */
  #showD .bank-dark .dep-info { background: #243; color: #cfe; }
  #showD .bank-dark .account-card { background: #2a2a2a; color: #fff; }
  /* Withdraw "Saldo Yang Tersedia" amount + helper text readable on dark. */
  #showD .bank-dark #withdrawable-amount { color: #fff !important; }
  #showD .bank-dark .deposit-option__info h3,
  #showD .bank-dark .deposit-option__info p { color: #fff !important; }

  /* Deposit limits: 3-column table (grey pill | label | value) with a blue
     "Limit Per Transaksi" header, matching the live deposit screen. */
  #showD .bank-dark .dep-limits__head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
  #showD .bank-dark .badge-limit { background: #1f9bde; color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 4px; }
  #showD .bank-dark .dep-limits ul { margin: 0; padding: 0; list-style: none; }
  #showD .bank-dark .dep-limits li { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  #showD .bank-dark .dep-limits .m-pill { background: #4a4a4a; color: #fff !important; text-align: center; padding: 6px 0; border-radius: 4px; font-size: 11px; font-weight: 600; }
  #showD .bank-dark .dep-limits .m-lbl { color: #fff !important; font-weight: 600; font-size: 11px; }
  #showD .bank-dark .dep-limits .m-val { color: #8a8f99 !important; font-size: 11px; white-space: nowrap; }

  /* Withdraw bank details: 2-column rows (label left / teal value right). */
  #showD .bank-dark .wd-bank li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  #showD .bank-dark .wd-bank li > span:last-child { text-align: right; }
  /* Withdraw: SALDO YANG TERSEDIA stacked (label above, value below). */
  #showD .bank-dark .wd-saldo-row { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; gap: 4px; }
  #showD .bank-dark .wd-saldo-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: #8a8f99; text-transform: uppercase; }
  #showD .bank-dark #withdrawable-amount { color: #fff !important; font-size: 16px; font-weight: 800; }
  /* Deposit/withdraw form labels: uppercase to match reference. */
  #showD .bank-dark .form-detail label { text-transform: uppercase !important; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
  /* Tabs: prevent "Deposit (Manual)" from wrapping; badge-auto floats above. */
  #showD .bank-dark .depo-tabs li { position: relative; font-size: 11px !important; white-space: nowrap; overflow: visible !important; transition: background 0.15s, color 0.15s; cursor: pointer; }
  #showD .bank-dark .depo-tabs .badge-auto { position: absolute; top: 3px; right: 3px; background: #27ae60; color: #fff; font-size: 7px; font-weight: 800; letter-spacing: 0.2px; padding: 1px 4px; border-radius: 3px; line-height: 1.4; pointer-events: none; }
  /* Form inputs: dark navy background matching reference. */
  #showD .bank-dark .form-control,
  #showD .bank-dark input.form-control,
  #showD .bank-dark select.form-control { background: #1e2840 !important; color: #fff !important; border: 1px solid #2d3d60 !important; transition: border-color 0.15s, box-shadow 0.15s; min-height: 48px; }
  #showD .bank-dark select.form-control option { background: #1e2840; color: #fff; }
  /* Focus ring — trust signal for a form that moves money. */
  #showD .bank-dark .form-control:focus,
  #showD .bank-dark input.form-control:focus,
  #showD .bank-dark select.form-control:focus { border-color: #1f9bde !important; box-shadow: 0 0 0 3px rgba(31,155,222,0.18) !important; outline: none !important; }
  /* Toggle + pay-btn transitions. */
  #showD .bank-dark .bank-toggle a { transition: background 0.15s, color 0.15s; }
  #showD .bank-dark .pay-methods .pay-btn { min-height: 48px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; transition: background 0.15s, color 0.15s, border-color 0.15s; cursor: pointer; }
  /* Submit: full-width gold, prominent. */
  #showD .bank-dark .button--yellow { display: block; width: 100%; min-height: 52px; font-size: 15px; font-weight: 800; letter-spacing: 1px; border-radius: 8px; margin-top: 20px; transition: opacity 0.15s; border: 0; }
  #showD .bank-dark .button--yellow:active { opacity: 0.85; }
  /* Account card rows: teal value, readable on dark. */
  #showD .bank-dark .account-card { border-radius: 6px; padding: 12px 14px; margin: 8px 0; }
  #showD .bank-dark .acc-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
  #showD .bank-dark .acc-row:last-child { border-bottom: 0; }
  #showD .bank-dark .acc-row span { color: #8a8f99; }
  #showD .bank-dark .acc-row strong { color: #2bbf9f; font-weight: 700; }
  /* Dep-info box: rounded, readable. */
  #showD .bank-dark .dep-info { border-radius: 6px; padding: 12px 14px; font-size: 12px; line-height: 1.55; display: flex; gap: 10px; align-items: flex-start; }
  #showD .bank-dark .dep-info i { color: #1f9bde; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  #showD .bank-dark .dep-info p { margin: 0; }
  /* File input: match dark theme instead of bright browser default. */
  #showD .bank-dark .form-control-file { display: block; width: 100%; box-sizing: border-box; background: #1e2840; color: #cfd6e4; border: 1px solid #2d3d60; border-radius: 6px; padding: 10px; font-size: 14px; cursor: pointer; }
  #showD .bank-dark .form-control-file::file-selector-button { background: #2a3d60; color: #fff; border: 1px solid #3d5580; border-radius: 4px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 10px; transition: background 0.15s; }
  #showD .bank-dark .form-control-file:hover::file-selector-button { background: #3a5070; }

  /* Member pages on mobile: the 7-tab account grid is redundant — the drawer
     member menu + bottom Banking nav cover navigation (and the live mobile site
     has no such grid). Hide it; desktop keeps it. */
  #showD .profile__nav { display: none; }

  /* After login: hide the logged-out quick-bar (Masuk/Daftar), drawer static
     welcome text, and login cluster; reveal the injected account block. */
  body.is-authed #showM .quick-btn { display: none; }
  body.is-authed #showM .sidenav .welcome { display: none; }
  body.is-authed #showM .sidenav .sidenav_btn { display: none; }
  /* index.html: hide the duplicate static Promosi row (member-injected Promosi takes its spot) */
  body.is-authed #showM .sidenav-games > ul > li.static-promosi { display: none; }
  #showM .sidenav_user { display: none; }
  body.is-authed #showM .sidenav_user { display: block; padding: 14px 16px; }
  #showM .sidenav_user .m-acct__welcome { color: #cdddf2; font-size: 13px; margin-bottom: 8px; }
  #showM .sidenav_user .m-acct__uname { color: #2bbf9f; font-weight: 700; }
  #showM .sidenav_user .m-acct__bal { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.5px; }
  #showM .sidenav_user .m-acct__btns { display: flex; }
  #showM .sidenav_user .m-acct__btns button { flex: 1; text-align: center; padding: 9px 14px; border: 0; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; background: #2a3445; color: #fff; }

  /* Mobile login modal (#login hash). style-m's .modal provides the fixed
     overlay; this styles the card. */
  #m-login-modal .m-login-card { position: relative; margin: 18vh 24px 0; background: #0e1b3a; border-radius: 10px; padding: 26px 22px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
  #m-login-modal .m-login-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; }
  #m-login-modal .m-login-logo { text-align: center; margin-bottom: 16px; }
  #m-login-modal .m-login-logo img { height: 40px; width: auto; }
  #m-login-modal form input { display: block; width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 12px; border-radius: 6px; border: 0; font-size: 16px; }
  #m-login-modal .m-login-submit { display: block; width: 100%; padding: 12px; border: 0; border-radius: 6px; background: var(--based, #fd01b2); color: #fff; font-size: 16px; font-weight: 700; }
  #m-login-modal .m-login-daftar { display: block; text-align: center; margin-top: 14px; color: #9fc2e8; font-size: 14px; }
  #m-login-modal .login-error { margin-top: 10px; color: #ff6b6b; font-size: 13px; text-align: center; }

  body.m-share #showD { display: block; padding-bottom: 70px; }
  body.m-share #showD > header,
  body.m-share #showD .slider--mq { display: none; }

  /* The mobile .content keeps a 100px bottom-nav clearance for the home page;
     on m-share pages the real content continues below it. */
  body.m-share #showM .content { margin-bottom: 0; }
  /* Animated running-text can poke past the viewport; clip it on every page */
  #showM .marquee { overflow: hidden; }

  /* Desktop fixed-width containers -> fluid */
  body.m-share #showD .wrapper { width: auto; max-width: 100%; padding: 0 12px; }
  body.m-share #showD img { max-width: 100%; height: auto; }

  /* Two-column info pages (tnc/aboutus/faq/...): stack, keep the light panel
     look style.css gives them on desktop. */
  body.m-share #showD .info { display: block; padding: 16px 0 32px; color: #262626; }
  body.m-share #showD .info a { color: #1da0cb; }
  body.m-share #showD .info__left { margin: 0 0 16px; max-height: none; background: #e6e5e5; border-radius: 6px; overflow: hidden; }
  body.m-share #showD .info__left ul { flex-wrap: wrap; }
  body.m-share #showD .info__left ul li { flex: 1 0 50%; border: 0; border-bottom: 1px solid rgba(113,123,143,.2); }
  body.m-share #showD .info__left ul li a { color: #262626; padding: 10px 14px; display: block; }
  body.m-share #showD .info__right { background: #e6e5e5; border-radius: 6px; padding: 14px; }
  body.m-share #showD .info__right-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
  body.m-share #showD .info__right-content { font-size: 14px; line-height: 1.6; }
  /* style-m styles bare ul/li as flex nav menus, which flattens every content
     list (terms, deposit limits, FAQs) into one overflowing row. Restore normal
     flowing lists everywhere in the shared desktop DOM, then re-flex the few
     real nav strips. */
  body.m-share #showD ul,
  body.m-share #showD ol { display: block; }
  body.m-share #showD li { display: list-item; width: auto; }
  body.m-share #showD .profile__nav ul,
  body.m-share #showD .info__left ul,
  body.m-share #showD .nav-bottom ul,
  body.m-share #showD .depo-tabs { display: flex; }
  body.m-share #showD .s-cs-contact { display: grid; }
  body.m-share #showD .profile__nav li,
  body.m-share #showD .info__left li,
  body.m-share #showD .nav-bottom li,
  body.m-share #showD .s-cs-contact li { display: block; }
  body.m-share #showD .depo-tabs li { display: flex !important; }
  /* Fix: funds__detail-left info rows need flex (not list-item) for label/value space-between */
  body.m-share #showD .funds__detail-left li { display: flex; }
  /* Fix: hist-tabs and msg-tabs must stay flex rows on mobile */
  body.m-share #showD .hist-tabs,
  body.m-share #showD .msg-tabs { display: flex; }
  body.m-share #showD .hist-tabs li,
  body.m-share #showD .msg-tabs li { display: block; }
  /* Member-tabs: horizontal scroll nav on wallet/bonus/profile; bank-dark hides it (bank-toggle covers Deposit/Withdrawal) */
  body.m-share #showD .member-tabs { display: flex; overflow-x: auto; }
  body.m-share #showD .member-tabs li { display: block; }
  body.m-share #showD .bank-dark .member-tabs { display: none; }

  /* Wide tables scroll inside their panel instead of overflowing the page */
  body.m-share #showD table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* iOS auto-zooms the page when a focused control is under 16px */
  body.m-share #showD input,
  body.m-share #showD select,
  body.m-share #showD textarea { font-size: 16px; }

  /* Promotions page: legacy mobile look — dark "All Promotions" bar that
     drops the category list down; promo cards on the dark page background. */
  body.m-share #showD .promotion .info__left { background: transparent; border-radius: 0; overflow: visible; }
  /* .info a paints links teal; the bar, tab links and card buttons stay white */
  body.m-share #showD .info a.promo-drop,
  body.m-share #showD .info .promotab a,
  body.m-share #showD .info .promo-bar a.promo-detail,
  body.m-share #showD .info a.dl-card__btn { color: #fff; }
  body.m-share #showD .promo-drop { display: flex; justify-content: space-between; align-items: center; background: #1d2a4d; color: #fff; font-size: 16px; font-weight: 600; padding: 15px 16px; border-radius: 4px; cursor: pointer; }
  body.m-share #showD .promo-drop::after { content: "\25BE"; opacity: .8; }
  body.m-share #showD .promotion .promotab { display: none; background: #16213c; border-radius: 0 0 4px 4px; }
  body.m-share #showD .promotion .info__left.open .promotab { display: block; }
  body.m-share #showD .promotion .promotab a { color: #e8f2fc; display: block; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
  body.m-share #showD .promotion .promotab li.active a { color: #fff; font-weight: 700; }
  body.m-share #showD .promotion .info__right { background: transparent; padding: 0; }
  body.m-share #showD .promotion .promo-card { margin-bottom: 18px; }
  /* Promo banners are panoramic; clamp so a square placeholder (promo with no
     uploaded artwork) can't blow up into a full-screen tile. */
  body.m-share #showD .promotion .promo-card img { width: 100%; max-height: 170px; object-fit: cover; }

  /* Download page card grid sits straight on the dark background */
  body.m-share #showD .dl-page .info__right { background: transparent; padding: 0; }

  /* Member pages: two-column funds layout stacks; referral QR + totals stack */
  body.m-share #showD .profile__content .funds__detail { flex-direction: column; }
  body.m-share #showD .profile__content .funds__detail-left { flex: none; width: 100%; }
  /* Deposit: form + method tabs appear before limits table on mobile */
  body.m-share #showD .deposit-dark .funds__detail-right { order: -1; }
  body.m-share #showD .profile__content .funds__detail.referral .ref-top { flex-direction: column; gap: 20px; }
  body.m-share #showD .profile__content .funds__detail.referral .ref-totals { flex-direction: column; gap: 14px; }
  body.m-share #showD .profile__content .funds__detail.referral .ref-totals h3 { white-space: normal; }

  /* Footer link strip + bottom bar stack cleanly */
  body.m-share #showD .nav-bottom ul { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 0; }
  body.m-share #showD .nav-bottom ul li { flex: 0 0 auto; padding: 0; }
  body.m-share #showD .footer-end .row-end-footer { display: block; }
  /* style-m positions .title-information absolutely (desktop layout assumption);
     stack the Responsible Gaming / Verified & Secured block normally instead. */
  body.m-share #showD .footer-end .title-information { position: static; display: flex; justify-content: center; gap: 20px; margin: 10px 0; }
  body.m-share #showD .footer-end .title-information .text-left,
  body.m-share #showD .footer-end .title-information .text-right { position: static; display: flex; align-items: center; justify-content: center; }
  body.m-share #showD .footer-end .box-information { border: 0; padding: 0; }
  /* The badge panel (.box-information .content) is a desktop hover dropdown;
     on mobile it floats over the footer — hide it like the live mobile site. */
  body.m-share #showD .footer-end .box-information .content { display: none; }
  body.m-share #showD .footer-end .content { display: block; }
  body.m-share #showD .footer-end .content .left,
  body.m-share #showD .footer-end .content .right { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
  body.m-share #showD .footer-end .content img { height: 44px; width: auto; }
}

/* ===== Deposit QRIS QR (multi-channel) ===== */
.deposit-qr { text-align: center; margin-top: 12px; }
.deposit-qr img { width: 160px; height: 160px; background: #fff; padding: 6px; border-radius: 6px; }
.deposit-qr .qr-note { font-size: 12px; color: #888; margin-top: 6px; }

/* Footer INFORMASI / PRODUK / PUSAT INFO — 3-col flex row (uatmeta parity) */
.information { display: flex; flex-direction: row; gap: 15px; padding: 30px 20px; max-width: 1230px; margin: 0 auto; }
.information__detail { flex: 1 1 0; }
.information__detail .heading { font-size: 15px; font-weight: 700; color: #fff; text-transform: uppercase; margin: 0 0 10px; }
.information__detail .subheading { font-size: 13px; font-weight: 600; color: #c7d4e6; margin: 12px 0 4px; }
.information__detail p { font-size: 12.5px; line-height: 1.6; color: #8aa0bd; margin: 0; }
@media (max-width: 768px) { .information { flex-direction: column; gap: 18px; padding: 24px 16px; } }