/* PayKita v12 — full layout consistency, approved Dashboard geometry.
   Only affects the isolated #lv7-dashboard-root shell. Backend unaffected.
   Invariant: ALL page content shares Dashboard's width and 25px symmetric gutter.
*/
#lv7-dashboard-root {
  --lv12-content-max:1600px;
  --lv12-gutter:25px;
  --lv12-column-gap:16px;
}
#lv7-dashboard-root .lv7-main {min-width:0!important;}
#lv7-dashboard-root .lv7-content,
#lv7-dashboard-root .lv7-content.lv9-content {
  width:100%!important;
  max-width:var(--lv12-content-max)!important;
  padding:29px var(--lv12-gutter) 28px!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
  min-width:0!important;
}
/* Remove nested legacy page max-width and margins. Keep the same outer edges
   for headings, notice banners, tab bars, grids, cards, and tables. */
#lv7-dashboard-root .lv9-content > .lv9-page,
#lv7-dashboard-root .lv9-content > .lv9-page.lv11-legacy-page,
#lv7-dashboard-root .lv9-content > .lv11-legacy-page,
#lv7-dashboard-root .lv9-content > .content,
#lv7-dashboard-root .lv9-content .projects-page,
#lv7-dashboard-root .lv9-content .project-detail-smooth-page,
#lv7-dashboard-root .lv9-content .settings-page,
#lv7-dashboard-root .lv9-content .admin-settings-page,
#lv7-dashboard-root .lv9-content .profile-page,
#lv7-dashboard-root .lv9-content .documentation-page,
#lv7-dashboard-root .lv9-content .qpk-page,
#lv7-dashboard-root .lv9-content .provider-modern-page {
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
/* Visual header grammar matches Dashboard: no divider, no background strips,
   no additional heading decoration or icon. */
#lv7-dashboard-root .lv9-page :is(.page-head,.project-detail-head,.provider-smooth-head,.merchant-connect-head,.bca-page-head,.listener-page-head,.admin-settings-head,.projects-smooth-head),
#lv7-dashboard-root .lv11-legacy-page :is(.page-head,.project-detail-head) {
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  margin:0 0 22px!important;
  padding:0!important;
  border:0!important;
  border-bottom:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
  position:relative;
}
#lv7-dashboard-root .lv9-page :is(.page-head,.project-detail-head)::before,
#lv7-dashboard-root .lv9-page :is(.page-head,.project-detail-head)::after {
  content:none!important;
  display:none!important;
  border:0!important;
}
#lv7-dashboard-root .lv9-page .page-head :is(h1),
#lv7-dashboard-root .lv11-legacy-page .page-head :is(h1) {
  margin:0 0 7px!important;
  padding:0!important;
  font:800 25px/1.3 'Manrope','Inter',sans-serif!important;
  letter-spacing:-.6px!important;
  color:var(--lv7-text)!important;
  border:0!important;
}
#lv7-dashboard-root .lv9-page .page-head p,
#lv7-dashboard-root .lv11-legacy-page .page-head p {
  margin:0!important;
  font:500 11px/1.6 'Manrope','Inter',sans-serif!important;
  color:var(--lv7-muted)!important;
  max-width:800px;
}
#lv7-dashboard-root .lv9-page .page-head > :first-child,
#lv7-dashboard-root .lv9-page .provider-page-title,
#lv7-dashboard-root .lv11-legacy-page .page-head > :first-child {
  min-width:0!important;
  max-width:100%!important;
}
#lv7-dashboard-root .lv9-page .provider-page-title {
  display:block!important;
  flex:1 1 460px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
}
#lv7-dashboard-root .lv9-page .page-head .provider-brand-icon {display:none!important;}
/* Remove presentation-only kicker on any top page header, while preserving
   explanatory labels inside modals and cards. */
#lv7-dashboard-root .lv9-page .page-head > div > .smooth-kicker,
#lv7-dashboard-root .lv11-legacy-page .page-head > div > .smooth-kicker {
  display:none!important;
}
/* Uniform edges within provider pages; former 1180/1200px centered containers
   caused QRMS/GoPay columns to stop short of Dashboard's right edge. */
#lv7-dashboard-root .lv9-content .provider-guide-grid,
#lv7-dashboard-root .lv9-content .provider-dashboard-grid,
#lv7-dashboard-root .lv9-content .provider-smooth-grid,
#lv7-dashboard-root .lv9-content .provider-recent-card,
#lv7-dashboard-root .lv9-content .provider-side-stack,
#lv7-dashboard-root .lv9-content .provider-read-required,
#lv7-dashboard-root .lv9-content .provider-risk-required,
#lv7-dashboard-root .lv9-content .qpk-tabs,
#lv7-dashboard-root .lv9-content .qpk-card,
#lv7-dashboard-root .lv9-content .qpk-warning,
#lv7-dashboard-root .lv9-content .qpk-grid,
#lv7-dashboard-root .lv9-content .projects-summary-strip,
#lv7-dashboard-root .lv9-content .projects-smooth-grid {
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin-left:0!important;
  margin-right:0!important;
}
#lv7-dashboard-root .lv9-content .provider-guide-grid,
#lv7-dashboard-root .lv9-content .provider-dashboard-grid,
#lv7-dashboard-root .lv9-content .provider-smooth-grid {
  gap:var(--lv12-column-gap)!important;
}
#lv7-dashboard-root .lv9-content .provider-dashboard-grid {
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)!important;
  align-items:stretch!important;
}
#lv7-dashboard-root .lv9-content .provider-dashboard-card,
#lv7-dashboard-root .lv9-content .provider-side-stack > * {
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#lv7-dashboard-root .lv9-content .provider-dashboard-grid > .provider-side-stack {
  height:100%!important;
}
#lv7-dashboard-root .lv9-content .provider-dashboard-grid > .provider-side-stack > .provider-dashboard-card:only-child {
  min-height:100%!important;
}
#lv7-dashboard-root .lv9-content .provider-guide-grid {
  grid-template-columns:minmax(0,1fr)!important;
}
#lv7-dashboard-root .lv9-page .page-head + :is(hr,.divider){display:none!important;}
/* Legacy provider CSS animated these sections from opacity:0 and relied on
   provider-specific JavaScript. Do not risk blank/washout on offline preview
   or in environments where the animations never start. */
#lv7-dashboard-root .lv9-content .provider-smooth-head,
#lv7-dashboard-root .lv9-content .merchant-connect-head,
#lv7-dashboard-root .lv9-content .bca-page-head,
#lv7-dashboard-root .lv9-content .provider-guide-grid,
#lv7-dashboard-root .lv9-content .provider-dashboard-grid,
#lv7-dashboard-root .lv9-content .provider-recent-card {
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}

/* QRIS PayKita page sections must not depend on legacy JS to become visible. */
#lv7-dashboard-root .lv9-content .qpk-page :is(.page-head,.qpk-tabs,.qpk-card,.qpk-warning,.qpk-grid,.qpk-transaction) {
  opacity:1!important;
  animation:none!important;
  transform:none!important;
}
@media (max-width:900px){
  #lv7-dashboard-root .lv9-content .provider-dashboard-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
}
@media (max-width:720px){
  #lv7-dashboard-root {--lv12-gutter:15px;}
  #lv7-dashboard-root .lv7-content,
  #lv7-dashboard-root .lv7-content.lv9-content {padding:22px var(--lv12-gutter) 28px!important;}
  #lv7-dashboard-root .lv9-page .page-head h1 {font-size:21px!important;}
}


/* PayKita v21 — Merchant mobile layout and connected-account note.
   Scoped to Shopee, GoPay and BCA; no auth, detector, or payment changes. */
@media (max-width: 767px) {
  /* v12 .provider-page-title had flex:1 1 460px, which becomes a 460px
     vertical flex basis when the parent changes to flex-direction:column. */
  #lv7-dashboard-root .lv9-content .merchant-connect-page .merchant-connect-head,
  #lv7-dashboard-root .lv9-content .bca-page .bca-page-head {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }
  #lv7-dashboard-root .lv9-content .merchant-connect-page .merchant-connect-head .provider-page-title,
  #lv7-dashboard-root .lv9-content .bca-page .bca-page-head .provider-page-title {
    display: block !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #lv7-dashboard-root .lv9-content .merchant-connect-page .merchant-connection-pill,
  #lv7-dashboard-root .lv9-content .bca-page .bca-status-pill {
    align-self: flex-start !important;
    margin: 0 !important;
    width: fit-content !important;
    flex: 0 0 auto !important;
  }
}

/* One consistent connected-state notification for all three providers. */
#lv7-dashboard-root .lv9-content .provider-modern-page .provider-info-note.merchant-connected-note {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 13px !important;
  margin: 0 0 16px !important;
  border: 1px solid #b5e3cd !important;
  border-radius: 9px !important;
  background: #eaf8ef !important;
  color: #136b46 !important;
  text-align: left !important;
  line-height: 1.45 !important;
}
#lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-icon {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  margin-top: 1px !important;
  border-radius: 50% !important;
  background: #d1f1de !important;
  color: #087647 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
#lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-copy strong {
  display: block !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
#lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-label {
  display: block !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere !important;
}
#lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-copy small {
  display: block !important;
  color: #41705a !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}
html[data-theme="dark"] #lv7-dashboard-root .lv9-content .provider-modern-page .provider-info-note.merchant-connected-note {
  background: #152a23 !important;
  border-color: #2d5442 !important;
  color: #7ce1ad !important;
}
html[data-theme="dark"] #lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-icon {
  background: #214634 !important;
  color: #85f0b5 !important;
}
html[data-theme="dark"] #lv7-dashboard-root .lv9-content .merchant-connected-note .merchant-connected-copy small {
  color: #aac7b9 !important;
}
@media (max-width: 390px) {
  #lv7-dashboard-root .lv9-content .provider-modern-page .provider-info-note.merchant-connected-note {
    padding: 11px !important;
    gap: 9px !important;
  }
}