.ysf-payment { padding: 34px 0 44px; background: #eef0f4; color: #343333; }
.ysf-payment .container { max-width: 1320px; }
.ypay-hero { background: #343333; border-radius: 14px; padding: 38px 42px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ypay-eyebrow { color: #ffc21b; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ypay-hero h1 { color: #fff; font: 700 clamp(32px, 4vw, 50px)/1.15 Georgia, serif; margin: 15px 0; }
.ypay-hero p { color: #eee; font-size: 18px; line-height: 1.5; margin: 0; }
.ypay-document { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; flex: 0 0 auto; border: 1px solid #ffc21b; border-radius: 14px; color: #ffc21b; font-size: 54px; }
.ypay-intro { margin: 20px 0; color: #5c6370; font-size: 15px; line-height: 1.65; }
.ypay-intro p:last-child { margin-bottom: 0; }
.ypay-notice { display: flex; gap: 25px; align-items: center; background: #fff0c8; border: 1px solid #f1dfa9; padding: 22px 26px; border-radius: 12px; margin: 20px 0 28px; font-size: 16px; line-height: 1.6; }
.ypay-notice > i { color: #343333; font-size: 31px; flex: 0 0 auto; }
.ypay-notice > div { border-left: 1px solid #e2bb53; padding-left: 24px; }
.ypay-notice ul, .ypay-detail ul { list-style: none; padding: 0; margin: 0; }
.ypay-notice p, .ypay-detail p { margin: 0 0 8px; }
.ypay-notice li:last-child p, .ypay-detail li:last-child p { margin-bottom: 0; }
.ypay-section-title { color: #292929; font: 700 32px/1.2 Georgia, serif; margin: 0 0 14px; }
.ypay-method-intro { color: #606875; font-size: 14px; }
.ypay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ypay-method { background: #fff; border: 1px solid #dce0e6; border-radius: 12px; padding: 24px; text-align: center; font-size: 15px; line-height: 1.6; }
.ypay-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #ffe8a9; color: #343333; font-size: 24px; }
.ypay-method .ypay-icon { margin: 0 auto 14px; }
.ypay-method p:last-child { margin-bottom: 0; }
.ypay-method strong { font-family: Georgia, serif; font-size: 20px; color: #292929; }
.ypay-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ypay-detail { display: flex; align-items: flex-start; gap: 18px; padding: 24px; border: 1px solid #dce0e6; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.6; color: #606875; }
.ypay-detail > div { min-width: 0; overflow-wrap: anywhere; }
.ypay-detail h2 { color: #292929; font: 700 23px/1.25 Georgia, serif; margin: 0 0 10px; }
.ypay-contact { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 22px; padding: 28px; background: #343333; border-radius: 13px; color: #eee; }
.ypay-contact h2 { color: #fff; font: 700 28px/1.2 Georgia, serif; margin: 0 0 9px; }
.ypay-contact p { font-size: 14px; line-height: 1.6; margin: 0; }
.ypay-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; flex-shrink: 0; }
.ypay-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 13px 21px; min-height: 46px; border-radius: 7px; background: #ffc21b; color: #242424; font-size: 15px; font-weight: 600; text-decoration: none; }
.ypay-button:hover { background: #efb30b; color: #242424; }
.ypay-phone { color: #fff; white-space: nowrap; text-decoration: none; }
.ypay-phone:hover { color: #ffc21b; }
.ysf-payment a:focus-visible { outline: 3px solid #9f7414; outline-offset: 4px; }
@media (max-width: 991px) { .ypay-contact { flex-direction: column; align-items: flex-start; } }
@media (max-width: 767px) {
  .ysf-payment { padding: 24px 0 32px; }
  .ypay-hero { padding: 25px; gap: 16px; align-items: flex-start; }
  .ypay-hero h1 { font-size: 32px; }
  .ypay-hero p { font-size: 15px; }
  .ypay-document { width: 56px; height: 66px; border-radius: 9px; font-size: 31px; }
  .ypay-notice { padding: 18px; gap: 16px; font-size: 14px; }
  .ypay-notice > div { padding-left: 16px; }
  .ypay-section-title { font-size: 27px; }
  .ypay-methods, .ypay-details { grid-template-columns: 1fr; gap: 12px; }
  .ypay-method { display: flex; align-items: center; gap: 17px; text-align: left; padding: 18px; }
  .ypay-method .ypay-icon { margin: 0; }
  .ypay-method strong { font-size: 18px; }
  .ypay-detail { padding: 18px; gap: 16px; }
  .ypay-detail h2 { font-size: 22px; }
  .ypay-contact { padding: 22px; gap: 18px; }
  .ypay-contact h2 { font-size: 25px; }
  .ypay-links { width: 100%; flex-direction: column; gap: 14px; }
  .ypay-button { width: 100%; }
}
@media (max-width: 359px) { .ypay-document { display: none; } }