@import url("../../shared/design-system/v0.4/tokens.css");
@import url("../../shared/design-system/v0.4/utilities.css");
@import url("../../shared/design-system/v0.4/action-pill.css");

#pw-payment-options{
  /* Living DS brand signal remains a candidate token export.
     Keep one local compatibility alias until cross-consumer promotion evidence exists. */
  --pw-support-signal:var(--pw-accent,#d99500);
  --pw-support-radius:28px;
  background:var(--pw-bg);
  color:var(--pw-ink);
  border-bottom:1px solid var(--pw-line);
  padding:56px 0 32px;
  font-family:var(--pw-font-sans);
  font-kerning:normal;
  text-rendering:optimizeLegibility
}
#pw-payment-options *{box-sizing:border-box}
#pw-payment-options .wrap{
  width:min(calc(100% - (var(--pw-gutter)*2)),var(--pw-content-max));
  margin:0 auto
}
#pw-payment-options .pw-support-head{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr);
  gap:54px;
  align-items:end;
  margin-bottom:26px
}
#pw-payment-options h2{
  margin:0;
  max-width:620px;
  color:var(--pw-ink);
  font-size:clamp(38px,4vw,54px);
  line-height:var(--pw-leading-heading);
  letter-spacing:var(--pw-track-heading);
  overflow-wrap:break-word
}
#pw-payment-options .pw-support-lead{
  margin:0;
  max-width:600px;
  color:var(--pw-muted);
  font-size:17px;
  line-height:1.62
}
html[lang="ru"] #pw-payment-options h2{
  max-width:560px;
  font-size:clamp(36px,3.5vw,48px);
  line-height:1.08;
  letter-spacing:0
}
html[lang="ru"] #pw-payment-options .pw-support-lead{
  font-size:16px;
  line-height:1.6
}

#pw-payment-options .pw-support-surface{
  border:1px solid var(--pw-line);
  border-radius:var(--pw-support-radius);
  background:var(--pw-surface);
  padding:30px 32px 26px;
  box-shadow:0 24px 70px -62px rgba(0,0,0,.58)
}

/* Local/candidate frequency pattern: semantics stay page-owned until a second
   independent consumer validates the same interaction contract. */
#pw-payment-options .pw-support-frequency{
  display:inline-flex;
  gap:3px;
  padding:4px;
  border:1px solid var(--pw-line);
  border-radius:14px;
  background:var(--pw-bg)
}
#pw-payment-options .pw-support-frequency button{
  position:relative;
  appearance:none;
  min-height:44px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--pw-muted);
  padding:9px 16px 10px;
  font:650 14px/1.2 var(--pw-font-sans);
  letter-spacing:0;
  cursor:pointer;
  transition:
    background var(--pw-motion-quick) var(--pw-ease),
    border-color var(--pw-motion-quick) var(--pw-ease),
    color var(--pw-motion-quick) var(--pw-ease),
    box-shadow var(--pw-motion-quick) var(--pw-ease)
}
#pw-payment-options .pw-support-frequency button:hover{
  color:var(--pw-ink);
  background:var(--pw-surface)
}
#pw-payment-options .pw-support-frequency button[aria-selected="true"]{
  color:var(--pw-ink);
  border-color:var(--pw-line);
  background:var(--pw-surface);
  font-weight:700;
  box-shadow:inset 0 -2px 0 var(--pw-support-signal),0 1px 3px rgba(0,0,0,.04)
}

#pw-payment-options .pw-support-panel[hidden]{display:none!important}
#pw-payment-options .pw-support-panel{margin-top:22px}

/* Payment amounts are provider-specific direct links, not a generic CTA family.
   The full-width grid is a Help-local visual composition, not a shared component. */
#pw-payment-options .pw-support-amounts{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
  width:100%
}
#pw-payment-options .pw-support-panel[data-support-panel="one-time"] .pw-support-amounts{
  grid-template-columns:repeat(5,minmax(0,1fr))
}
#pw-payment-options .pw-support-amount{
  display:flex;
  min-width:0;
  min-height:50px;
  align-items:center;
  justify-content:center;
  padding:11px 12px;
  border:1px solid var(--pw-line);
  border-radius:14px;
  background:var(--pw-surface);
  color:var(--pw-ink);
  text-decoration:none;
  font-size:14px;
  line-height:1.2;
  font-weight:650;
  letter-spacing:0;
  transition:
    transform var(--pw-motion-quick) var(--pw-ease),
    background var(--pw-motion-quick) var(--pw-ease),
    border-color var(--pw-motion-quick) var(--pw-ease),
    box-shadow var(--pw-motion-quick) var(--pw-ease)
}
#pw-payment-options .pw-support-amount:hover{
  transform:translateY(-1px);
  border-color:var(--pw-support-signal);
  background:var(--pw-bg)
}
#pw-payment-options .pw-support-amount:focus-visible{
  border-color:var(--pw-support-signal)
}
#pw-payment-options .pw-support-amount[data-mode="one-time-custom"]{
  font-size:14px
}

#pw-payment-options .pw-support-trust{
  position:relative;
  margin:19px 0 0;
  max-width:790px;
  padding-left:18px;
  color:var(--pw-muted);
  font-size:14px;
  line-height:1.58
}
#pw-payment-options .pw-support-trust:before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pw-support-signal)
}

#pw-payment-options .pw-support-secondary{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:30px;
  align-items:center;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--pw-line)
}
#pw-payment-options .pw-support-secondary h3{
  margin:0;
  color:var(--pw-ink);
  font-size:16px;
  line-height:1.3;
  letter-spacing:var(--pw-track-title)
}
html[lang="ru"] #pw-payment-options .pw-support-secondary h3{letter-spacing:0}
#pw-payment-options .pw-support-secondary-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:stretch
}

/* Stable action-pill owns base geometry/paint. Help only supplies layout/readability values. */
#pw-payment-options .pw-support-secondary-link{
  --pw-btn-min-height:44px;
  --pw-btn-font-size:14px;
  --pw-btn-font-weight:650;
  --pw-btn-padding-y:10px;
  --pw-btn-padding-x:15px;
  --pw-btn-bg:var(--pw-bg);
  --pw-btn-border:var(--pw-line);
  --pw-btn-fg:var(--pw-ink);
  width:100%;
  white-space:nowrap
}

#pw-payment-options .pw-support-manage{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:30px;
  margin:18px 0 0;
  padding-top:17px;
  border-top:1px solid var(--pw-line)
}
#pw-payment-options .pw-support-manage a{
  grid-column:2;
  justify-self:start;
  color:var(--pw-muted);
  font-size:14px;
  line-height:1.5;
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:var(--pw-line);
  text-underline-offset:4px;
  transition:
    color var(--pw-motion-quick) var(--pw-ease),
    text-decoration-color var(--pw-motion-quick) var(--pw-ease)
}
#pw-payment-options .pw-support-manage a:hover{
  color:var(--pw-ink);
  text-decoration-color:currentColor
}
#pw-payment-options .pw-support-error{
  margin:0;
  color:var(--pw-muted);
  font-size:15px;
  line-height:1.6
}

@media(max-width:900px){
  #pw-payment-options{padding-top:50px}
  #pw-payment-options .pw-support-head{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:24px
  }
  #pw-payment-options .pw-support-lead{max-width:720px}
  #pw-payment-options .pw-support-amounts,
  #pw-payment-options .pw-support-panel[data-support-panel="one-time"] .pw-support-amounts{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:620px){
  #pw-payment-options{padding:42px 0 28px}
  #pw-payment-options .pw-support-head{margin-bottom:20px}
  #pw-payment-options h2{font-size:clamp(34px,10.8vw,44px)}
  html[lang="ru"] #pw-payment-options h2{font-size:clamp(32px,9.8vw,42px)}
  #pw-payment-options .pw-support-lead,
  html[lang="ru"] #pw-payment-options .pw-support-lead{font-size:15px;line-height:1.58}

  #pw-payment-options .pw-support-surface{
    border-radius:22px;
    padding:20px 16px 18px
  }
  #pw-payment-options .pw-support-frequency{
    width:100%
  }
  #pw-payment-options .pw-support-frequency button{
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    padding:9px 10px 10px
  }
  #pw-payment-options .pw-support-panel{margin-top:18px}
  #pw-payment-options .pw-support-amounts,
  #pw-payment-options .pw-support-panel[data-support-panel="one-time"] .pw-support-amounts{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }
  #pw-payment-options .pw-support-amount{
    min-height:50px;
    padding:11px 8px
  }
  #pw-payment-options .pw-support-trust{
    margin-top:18px;
    padding-left:16px;
    font-size:14px;
    line-height:1.55
  }
  #pw-payment-options .pw-support-secondary{
    grid-template-columns:1fr;
    gap:13px;
    margin-top:22px;
    padding-top:20px
  }
  #pw-payment-options .pw-support-secondary-links{
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  #pw-payment-options .pw-support-secondary-link{
    --pw-btn-min-height:46px;
    --pw-btn-padding-y:10px;
    --pw-btn-padding-x:11px
  }
  #pw-payment-options .pw-support-manage{
    grid-template-columns:1fr;
    gap:0;
    margin-top:16px;
    padding-top:15px
  }
  #pw-payment-options .pw-support-manage a{
    grid-column:1;
    justify-self:start
  }
}
@media(max-width:360px){
  #pw-payment-options .pw-support-secondary-links{grid-template-columns:1fr}
}