/* —— Pay modal (WP 23528) — AIO-style shell + bb4b81 —— */
html.sg-smm-pay-open,
body.sg-smm-pay-open {
  overflow: hidden !important;
}
.sg-smm-pay-modal,
.sg-smm-pay-stash {
  --global-body-font-family: "SIxtygram System", "Topic", sans-serif;
  --global-heading-font-family: Topic, "SIxtygram System", sans-serif;
  font-family: var(--global-body-font-family);
}
.sg-smm-pay-modal,
.sg-smm-pay-modal__body,
.sg-smm-pay-modal__body .wp-block-kadence-advancedheading,
.sg-smm-pay-modal__body [class*="kt-adv-heading"],
.sg-smm-pay-modal__body .kb-adv-text-inner,
.sg-smm-pay-modal__body p,
.sg-smm-pay-modal__body h1,
.sg-smm-pay-modal__body h2,
.sg-smm-pay-modal__body h3,
.sg-smm-pay-modal__body h4,
.sg-smm-pay-modal__body label,
.sg-smm-pay-modal__body button,
.sg-smm-pay-modal__body .kb-button,
.sg-smm-pay-modal__body .kt-btn-inner-text,
.sg-smm-pay-modal__body input,
.sg-smm-pay-modal__body .kb-adv-form-field,
.sg-smm-pay-modal__x,
.sg-smm-pay-stash,
.sg-smm-pay-stash .wp-block-kadence-advancedheading {
  font-family: var(--global-body-font-family) !important;
}
.sg-smm-pay-modal__body h1,
.sg-smm-pay-modal__body h2,
.sg-smm-pay-modal__body h3,
.sg-smm-pay-modal__body h4,
.sg-smm-pay-modal__body h5,
.sg-smm-pay-modal__body h6,
.sg-smm-pay-modal__body .wp-block-kadence-advancedheading {
  font-family: var(--global-heading-font-family) !important;
}
.sg-smm-pay-stash[hidden] {
  display: none !important;
}
.sg-smm-pay-modal {
  position: fixed;
  inset: 0;
  z-index: 10060; /* above sticky checkout bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.sg-smm-pay-modal[hidden] {
  display: none !important;
}
.sg-smm-pay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.sg-smm-pay-modal__shell {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding-top: 48px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* PromptPay 22vw / TW+bank 30vw like AIO */
.sg-smm-pay-modal__shell[data-sg-payment-modal='promptpay'] {
  width: 22vw;
  max-width: 22vw;
  min-width: 280px;
  overflow: visible;
}
.sg-smm-pay-modal__shell[data-sg-payment-modal='truewallet'],
.sg-smm-pay-modal__shell[data-sg-payment-modal='bank'] {
  width: 30vw;
  max-width: 30vw;
  min-width: 320px;
}
/* AIO-style close (absolute top-right, transparent, white X) */
.sg-smm-pay-modal__x {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: none;
  box-shadow: none;
  float: none;
  font-size: inherit;
  line-height: 1;
}
.sg-smm-pay-modal__x:hover,
.sg-smm-pay-modal__x:focus,
.sg-smm-pay-modal__x:focus-visible {
  background: transparent !important;
  color: #fff !important;
  outline: none;
  box-shadow: none;
  opacity: 0.85;
}
.sg-smm-pay-modal__x-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.sg-smm-pay-modal__x-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  color: #fff;
}
.sg-smm-pay-modal__x-icon svg line,
.sg-smm-pay-modal__x-icon svg path {
  stroke: #fff !important;
}
.sg-smm-pay-modal__body {
  box-sizing: border-box;
  overflow: visible;
  clear: none;
  background: transparent;
  width: 100%;
}
/* Full-width Kadence column inside modal */
.sg-smm-pay-modal__body .kadence-column23528_bb4b81-2d {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Rows fill the modal body — no side gutters */
.sg-smm-pay-modal__body .kb-row-layout-wrap,
.sg-smm-pay-modal__body .wp-block-kadence-rowlayout,
.sg-smm-pay-modal__body .kt-row-column-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.sg-smm-pay-modal__body .kt-row-column-wrap > .wp-block-kadence-column {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Hide inactive pay rows / status subtrees */
.sg-smm-pay-modal .sg-smm-pay-off,
.sg-smm-pay-stash .sg-smm-pay-off {
  display: none !important;
}
/* Text contrast — paint text only, never the heading icon.
   Do NOT blanket-kill mark.kt-highlight bg (TW gift uses dashed box). */
.sg-smm-pay-modal__body .kb-adv-text-inner,
.sg-smm-pay-modal__body p:not(.kt-adv-heading-has-icon),
.sg-smm-pay-modal__body strong,
.sg-smm-pay-modal__body label {
  color: #111 !important;
}
.sg-smm-pay-modal__body .wp-block-kadence-advancedheading:not(.kt-adv-heading-has-icon) {
  color: #111 !important;
}
/* Default marks stay readable; TW gift/fee overrides below win via specificity */
.sg-smm-pay-modal__body mark.kt-highlight {
  color: inherit;
}
/* Do not paint button/icon text black */
.sg-smm-pay-modal__body .kb-button,
.sg-smm-pay-modal__body .kb-button .kt-btn-inner-text {
  color: inherit;
}
/* Spin refresh icon like AIO — animate SVG, not padded wrap */
@keyframes sg-smm-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sg-smm-pay-modal .kb-svg-icon-fe_refreshCcw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform-origin: center center;
  animation: none !important;
}
.sg-smm-pay-modal .kb-svg-icon-fe_refreshCcw svg {
  display: block;
  transform-origin: 50% 50%;
  animation: sg-smm-refresh-spin 1.2s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .sg-smm-pay-modal .kb-svg-icon-fe_refreshCcw,
  .sg-smm-pay-modal .kb-svg-icon-fe_refreshCcw svg {
    animation: none !important;
  }
}
/* Do not force shell/row backgrounds — leave Kadence (post 23528) in control.
   Only kill dash-injected rounded white cards on the PP notice column. */
.sg-smm-pay-modal__body .kadence-column23528_4520f1-74,
.sg-smm-pay-modal__body .kadence-column23528_4520f1-74 > .kt-inside-inner-col {
  /* no dash-added bg / radius — editor styles win */
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
/* Keep alert / success heading icons visible (stroke icons use currentColor) */
/* palette-9 text+bg are both #fff on dash — force readable colors */
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32,
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 .kb-adv-text-inner {
  color: #111 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 mark.kt-highlight {
  color: var(--global-palette15, #3182ce) !important;
  background: transparent !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 .kb-svg-icon-wrap {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--global-palette15, #3182ce) !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_584fc9-32 .kb-svg-icon-wrap svg line {
  stroke: var(--global-palette15, #3182ce) !important;
  color: var(--global-palette15, #3182ce) !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_cc3ac0-a3 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_cc3ac0-a3 .kb-svg-icon-wrap {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #08af41 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_cc3ac0-a3 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_cc3ac0-a3 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_cc3ac0-a3 .kb-svg-icon-wrap svg line {
  stroke: #08af41 !important;
  color: #08af41 !important;
}
/* PromptPay 「โหลดภาพ」 — visible + downloadable (was hidden as loading-only col) */
.sg-smm-pay-modal__body .kadence-column23528_0dbb2a-cd {
  display: block !important;
}
.sg-smm-pay-modal__body .kadence-column23528_0dbb2a-cd.sg-smm-pay-off {
  display: none !important;
}
.sg-smm-pay-modal__body .kt-adv-heading-link23528_758254-35,
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35,
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35 .kb-adv-text-inner {
  color: #04437a !important;
  cursor: pointer;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35 .kb-svg-icon-wrap {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  color: #04437a !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_758254-35 .kb-svg-icon-wrap svg line {
  stroke: #04437a !important;
  color: #04437a !important;
}
.sg-smm-pay-modal__body .kt-adv-heading-link23528_758254-35:hover,
.sg-smm-pay-modal__body .kt-adv-heading-link23528_758254-35:hover .kt-adv-heading23528_758254-35,
.sg-smm-pay-modal__body .kt-adv-heading-link23528_758254-35:hover .kb-adv-text-inner {
  color: #1673c3 !important;
}
/* Bank slip — upload field full width (fieldbdc88f-f3) */
.sg-smm-pay-modal__body .wp-block-kadence-advanced-form23540-cpt-id,
.sg-smm-pay-modal__body .wp-block-kadence-advanced-form23540-cpt-id .kb-advanced-form,
.sg-smm-pay-modal__body .kb-field23540bdc88f-f3,
.sg-smm-pay-modal__body .kb-field23540bdc88f-f3 .kb-file-field,
.sg-smm-pay-modal__body #field23540bdc88f-f3 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.sg-smm-pay-modal__body .kb-field23540bdc88f-f3 {
  display: block !important;
}
.sg-smm-pay-modal__body .kb-field23540bdc88f-f3 .kb-adv-form-label {
  display: block;
  width: 100%;
}
/* Bank slip — title (7d75db): force black, exact instruction copy */
.sg-smm-pay-modal__body .kt-adv-heading23528_7d75db-58,
.sg-smm-pay-modal__body .kt-adv-heading23528_7d75db-58 .kb-adv-text-inner {
  color: #111 !important;
}
/* Bank slip — account row (d7656d) + notice (feebd0): palette-9 is white-on-white on dash */
.sg-smm-pay-modal__body .kadence-column23528_d7656d-c8 .wp-block-kadence-advancedheading,
.sg-smm-pay-modal__body .kadence-column23528_d7656d-c8 .kb-adv-text-inner,
.sg-smm-pay-modal__body .kadence-column23528_003cfc-e1 .wp-block-kadence-advancedheading,
.sg-smm-pay-modal__body .kadence-column23528_003cfc-e1 .kb-adv-text-inner,
.sg-smm-pay-modal__body .kadence-column23528_e2996e-4b .wp-block-kadence-advancedheading,
.sg-smm-pay-modal__body .kadence-column23528_e2996e-4b .kb-adv-text-inner,
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8,
.sg-smm-pay-modal__body .kt-adv-heading23528_4e8c6b-4f {
  color: #111 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1 mark.kt-highlight,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6 mark.kt-highlight,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8 mark.kt-highlight {
  color: #08af41 !important;
  background: transparent !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1 .kb-svg-icon-wrap,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6 .kb-svg-icon-wrap,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8 .kb-svg-icon-wrap {
  display: inline-flex !important;
  color: #08af41 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_2f0362-d1 .kb-svg-icon-wrap svg polyline,
.sg-smm-pay-modal__body .kt-adv-heading23528_23fac0-e6 .kb-svg-icon-wrap svg polyline,
.sg-smm-pay-modal__body .kt-adv-heading23528_df2315-f8 .kb-svg-icon-wrap svg polyline {
  stroke: #08af41 !important;
  color: #08af41 !important;
}
/* Bank notice (feebd0) — AIO-like bordered alert, readable on white shell */
.sg-smm-pay-modal__body .kadence-column23528_feebd0-aa {
  display: block !important;
}
.sg-smm-pay-modal__body .kadence-column23528_feebd0-aa.sg-smm-pay-off {
  display: none !important;
}
.sg-smm-pay-modal__body .kadence-column23528_d85f5b-8f.sg-smm-pay-off {
  display: none !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86,
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 .kb-adv-text-inner {
  color: #111 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 mark.kt-highlight {
  color: var(--global-palette15, #3182CE) !important;
  background: transparent !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 .kb-adv-heading-icon,
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 .kb-svg-icon-wrap {
  display: inline-flex !important;
  color: var(--global-palette15, #3182CE) !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 .kb-svg-icon-wrap svg path,
.sg-smm-pay-modal__body .kt-adv-heading23528_412c5b-86 .kb-svg-icon-wrap svg line {
  stroke: var(--global-palette15, #3182CE) !important;
  color: var(--global-palette15, #3182CE) !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_873176-8d,
.sg-smm-pay-modal__body .kt-adv-heading23528_873176-8d .kb-adv-text-inner {
  color: #111 !important;
}
/* Keep bank status parent visible so feebd0/status can toggle independently */
.sg-smm-pay-modal__body .kadence-column23528_e4380d-d3 {
  display: block !important;
}
.sg-smm-pay-modal__body .kadence-column23528_e4380d-d3.sg-smm-pay-off {
  display: block !important;
}
/* TrueMoney — gift amount dashed highlight box (e5ada6 / 289b2d) */
.sg-smm-pay-modal__body .kt-adv-heading23528_e5ada6-47,
.sg-smm-pay-modal__body .kt-adv-heading23528_289b2d-19,
.sg-smm-pay-modal__body .kt-adv-heading23528_e5ada6-47 .kb-adv-text-inner,
.sg-smm-pay-modal__body .kt-adv-heading23528_289b2d-19 .kb-adv-text-inner {
  color: #111 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_e5ada6-47 mark.kt-highlight,
.sg-smm-pay-modal__body .kt-adv-heading23528_289b2d-19 mark.kt-highlight {
  color: var(--global-palette3, #1A202C) !important;
  background: rgba(34, 34, 34, 0.04) !important;
  border: 1px dashed var(--global-palette14, #3182CE) !important;
  padding: 3px 10px !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* TrueMoney — fee line red mark (8f0fa9 / db9295); palette-9 was white-on-white */
.sg-smm-pay-modal__body .kt-adv-heading23528_8f0fa9-e7,
.sg-smm-pay-modal__body .kt-adv-heading23528_db9295-ab,
.sg-smm-pay-modal__body .kt-adv-heading23528_8f0fa9-e7 .kb-adv-text-inner,
.sg-smm-pay-modal__body .kt-adv-heading23528_db9295-ab .kb-adv-text-inner {
  color: #111 !important;
}
.sg-smm-pay-modal__body .kt-adv-heading23528_8f0fa9-e7 mark.kt-highlight,
.sg-smm-pay-modal__body .kt-adv-heading23528_db9295-ab mark.kt-highlight {
  color: #ed1c24 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* TrueMoney — QR upload field full width (field9dba9c-68) */
.sg-smm-pay-modal__body .wp-block-kadence-advanced-form23531-cpt-id,
.sg-smm-pay-modal__body .wp-block-kadence-advanced-form23531-cpt-id .kb-advanced-form,
.sg-smm-pay-modal__body .kb-field235319dba9c-68,
.sg-smm-pay-modal__body .kb-field235319dba9c-68 .kb-file-field,
.sg-smm-pay-modal__body #field235319dba9c-68 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.sg-smm-pay-modal__body .kb-field235319dba9c-68 {
  display: block !important;
}
.sg-smm-pay-modal__body .kb-field235319dba9c-68 .kb-adv-form-label {
  display: block;
  width: 100%;
}
/* TrueMoney AIO-like single panel toggle */
.sg-smm-pay-modal__shell[data-sg-payment-modal='truewallet'] .kb-row-layout-id23528_552c88-a1 > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
}
.sg-smm-pay-modal__body .sg-smm-tw-panel {
  display: none !important;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}
.sg-smm-pay-modal__body .sg-smm-tw-panel.is-active {
  display: block !important;
}
/* Xendit TrueMoney: cut legacy angpao; keep Kadence 88284a pay column */
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kadence-column23528_8a00fa-9b,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kb-btn23528_5b2bed-ae,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kb-btn23528_6bc397-aa,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] [class*="kb-btn23528_5b2bed-ae"],
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] [class*="kb-btn23528_6bc397-aa"],
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] form,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] input[type='file'],
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kt-adv-heading23528_8f0fa9-e7,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kt-adv-heading23528_db9295-ab,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .sg-smm-xendit-tw {
  display: none !important;
}
/* Xendit TW: Kadence loading heading vs open button */
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kadence-column23528_88284a-6e {
  display: block !important;
}
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'][data-sg-tw-state='ready'] .kt-adv-heading23528_ca4400-24 {
  display: none !important;
}
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'][data-sg-tw-state='loading'] .kb-btn23528_35e022-c5,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'][data-sg-tw-state='loading'] .kb-btns23528_51e2c1-93,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'][data-sg-tw-state='confirming'] .kb-btn23528_35e022-c5,
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'][data-sg-tw-state='confirming'] .kb-btns23528_51e2c1-93 {
  display: none !important;
}
.sg-smm-pay-modal__shell[data-sg-tw-provider='xendit'] .kb-btn23528_35e022-c5 {
  cursor: pointer;
}
/* sixtygram.com Kadence palette makes button hover/focus transparent — keep TrueMoney red + white text */
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button,
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button:hover,
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button:focus,
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button:active,
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button .kt-btn-inner-text {
  color: #fff !important;
}
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button,
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button:focus {
  background: #ed1c24 !important;
}
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button:hover,
.sg-smm-pay-modal__body .kb-btn23528_35e022-c5.kb-button:active {
  background: #c8141b !important;
}
.sg-smm-pay-modal__body .kb-btn23528_5b2bed-ae.kb-button,
.sg-smm-pay-modal__body .kb-btn23528_6bc397-aa.kb-button,
.sg-smm-pay-modal__body .kb-btn23528_5b2bed-ae.kb-button .kt-btn-inner-text,
.sg-smm-pay-modal__body .kb-btn23528_6bc397-aa.kb-button .kt-btn-inner-text {
  color: #1a202c !important;
}
/* Bank copy — black fill, white text; hover/copied = faded black + 「คัดลอกแล้ว」 */
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button {
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
}
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button:hover,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button:focus,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button:active,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button.is-copied {
  background: #505050 !important;
  color: #fff !important;
}
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button .kt-btn-inner-text,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button .kb-svg-icon-wrap,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button .kb-svg-icon-wrap svg,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button .kb-svg-icon-wrap svg rect,
.sg-smm-pay-modal__body .kb-btn23528_09ba56-38.kb-button .kb-svg-icon-wrap svg path {
  color: #fff !important;
  stroke: #fff !important;
}
@media (max-width: 767px) {
  .sg-smm-pay-modal {
    padding: 16px;
    align-items: center;
  }
  .sg-smm-pay-modal__shell,
  .sg-smm-pay-modal__shell[data-sg-payment-modal='promptpay'],
  .sg-smm-pay-modal__shell[data-sg-payment-modal='truewallet'],
  .sg-smm-pay-modal__shell[data-sg-payment-modal='bank'] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .sg-smm-pay-modal__x {
    color: #fff;
  }
  .sg-smm-pay-modal__x:hover,
  .sg-smm-pay-modal__x:focus,
  .sg-smm-pay-modal__x:focus-visible {
    color: #fff !important;
  }
  .sg-smm-pay-modal__x-icon svg,
  .sg-smm-pay-modal__x-icon svg line,
  .sg-smm-pay-modal__x-icon svg path {
    color: #fff;
    stroke: #fff !important;
  }
  .sg-smm-pp-skeleton__qr {
    width: min(100%, 220px);
  }
}

/* PromptPay QR loading skeleton — avoid blank gap while creating QR */
.sg-smm-pay-modal__body .sg-smm-pp-skeleton-host {
  position: relative;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton-host.is-loading > img,
.sg-smm-pay-modal__body .sg-smm-pp-skeleton-host.is-loading .kb-is-ratio-image > img,
.sg-smm-pay-modal__body .sg-smm-pp-skeleton-host.is-loading .sg-smm-pay-qr-img {
  opacity: 0;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  transition: opacity 0.22s ease;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton__qr {
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: sg-smm-pp-shimmer 1.15s ease infinite;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton__line {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 37%, #eceff3 63%);
  background-size: 400% 100%;
  animation: sg-smm-pp-shimmer 1.15s ease infinite;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton__line--status {
  width: min(70%, 180px);
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton__line--amount {
  width: min(48%, 120px);
  height: 14px;
}
.sg-smm-pay-modal__body .sg-smm-pp-skeleton__line--caption {
  width: min(85%, 220px);
}
@keyframes sg-smm-pp-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
