/* R21 — Live Voice + QRIS clarity. Loaded after R20 so fixes stay surgical. */

/* QRIS should read as the payment method before the eye reaches the code. */
.qrisSheet .qrisBrandHero{
  display:flex;width:min(100%,390px);justify-content:center;align-items:center;
  gap:14px;margin:0 auto 15px;padding:13px 16px;border:1px solid #e6c4d2;
  border-radius:20px;background:linear-gradient(135deg,#fff0f5 0%,#fff 56%,#fff8ea 100%);
  box-shadow:0 8px 24px rgba(119,35,70,.075);text-align:left
}
.qrisSheet .qrisBrandHero .qrisBrandIcon{width:48px;height:48px;flex:0 0 48px;padding:7px;border-radius:13px}
.qrisSheet .qrisBrandHero .qrisBrandCopy{display:grid;grid-template-columns:auto;gap:2px;min-width:0}
.qrisSheet .qrisBrandHero .qrisBrandCopy small{display:block!important;font-size:10px;line-height:1;font-weight:850;letter-spacing:.14em;color:#a64a6d}
.qrisSheet .qrisBrandHero .qrisBrandCopy strong{font-size:38px;line-height:.98;font-weight:950;letter-spacing:.02em;color:#191719}
.qrisSheet .qrisBrandHero .qrisBrandCopy em{font-size:9px;line-height:1.2;font-style:normal;font-weight:650;color:#886b76;white-space:normal}
.qrisSheet #qrisTitle{font-size:27px!important;margin-top:2px!important}
.qrisSheet .checkoutLead b{color:#7e3150}.qrisSheet .qrisAccepted b{font-size:14px}

@media(max-width:720px){
  .qrisSheet .qrisBrandHero{width:100%;padding:11px 13px;gap:12px;margin-bottom:12px;border-radius:18px}
  .qrisSheet .qrisBrandHero .qrisBrandIcon{width:44px;height:44px;flex-basis:44px}
  .qrisSheet .qrisBrandHero .qrisBrandCopy strong{font-size:36px}
  .qrisSheet #qrisTitle{font-size:25px!important}
  .qrisSheet .checkoutLead{font-size:12px;line-height:1.4;margin-bottom:10px}
}
@media(max-width:380px){
  .qrisSheet .qrisBrandHero .qrisBrandCopy strong{font-size:34px}
  .qrisSheet .qrisBrandHero .qrisBrandCopy em{font-size:8px}
}
@media(max-height:670px) and (max-width:720px){
  .qrisSheet .qrisBrandHero{padding:8px 11px;margin-bottom:8px}
  .qrisSheet .qrisBrandHero .qrisBrandIcon{width:38px;height:38px;flex-basis:38px;padding:6px}
  .qrisSheet .qrisBrandHero .qrisBrandCopy strong{font-size:31px}
  .qrisSheet .qrisBrandHero .qrisBrandCopy em{display:none}
}