/* ============ AS PAY — design tokens ============ */
:root{
  --navy: #17243A;
  --gold: #D2A15C;
  --gold-soft: #E9CFA3;
  --gold-wash: #F7EEE0;
  --bg: #FAFAF8;
  --gray: #ECECEC;
  --white: #FFFFFF;
  --text-muted: #6B7280;
  --text-faint: #9AA1AC;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-card: 0 2px 8px rgba(23,36,58,0.04), 0 20px 48px -24px rgba(23,36,58,0.18);
  --ease: cubic-bezier(.25,.8,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:'Manrope','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
}

.page{
  max-width:560px;
  margin:0 auto;
  padding:28px 16px 48px;
}

/* ============ Header ============ */
.brand{
  text-align:center;
  margin-bottom:22px;
}
.brand__logo{
  height:64px;
  width:auto;
  margin-bottom:18px;
}
@media (min-width:600px){
  .brand__logo{ height:84px; }
}
.brand__title{
  margin:0 0 8px;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  letter-spacing:2.5px;
  text-transform:uppercase;
}
.brand__subtitle{
  margin:0;
  font-size:12.5px;
  font-weight:500;
  color:var(--text-muted);
  letter-spacing:0.2px;
}

/* ============ Card ============ */
.card{
  background:var(--white);
  border:1px solid rgba(23,36,58,0.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:26px 22px 22px;
}
@media (min-width:600px){
  .card{ padding:36px 40px 30px; }
}

.field{ margin-bottom:22px; }
.field__label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:9px;
}
.field__label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
}
.field__label-row .field__label{ margin-bottom:0; }
.field__hint{
  font-size:12.5px;
  font-weight:600;
  color:var(--gold);
  white-space:nowrap;
}

/* ============ Money input ============ */
.input-money{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--bg);
  border:1.5px solid var(--gray);
  border-radius:var(--radius-md);
  padding:0 16px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input-money:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(210,161,92,0.14);
}
.input-money input{
  flex:1;
  border:none;
  background:transparent;
  outline:none;
  font-family:inherit;
  font-size:22px;
  font-weight:700;
  color:var(--navy);
  padding:15px 0;
  min-width:0;
  -webkit-appearance:none;
}
.input-money input::placeholder{ color:var(--text-faint); font-weight:600; }
.input-money__suffix{
  font-size:18px;
  font-weight:700;
  color:var(--text-faint);
  margin-left:8px;
}

/* ============ Quick chips ============ */
.quick-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.chip{
  border:1.5px solid var(--gray);
  background:var(--white);
  color:var(--navy);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chip:hover{ border-color:var(--gold-soft); }
.chip:active{ transform:scale(0.96); }
.chip.is-active{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--white);
}
.chip--outline.is-active{
  background:var(--gold-wash);
  border-color:var(--gold);
  color:var(--navy);
}

.field__note{
  margin:10px 2px 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
}
.field__note--positive{ color:var(--gold); }
.field__note + .field__note{ margin-top:4px; }

.divider{
  height:1px;
  background:var(--gray);
  margin:26px 0 24px;
}

/* ============ Result: hero ============ */
.payments-section .result{
  margin-top:22px;
  padding-top:20px;
  border-top:1px dashed var(--gray);
}
.result__hero{
  text-align:center;
  padding-bottom:22px;
}
.result__hero-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:8px;
}
.result__hero-value{
  font-size:44px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.5px;
  line-height:1.1;
  transition:opacity .15s var(--ease);
}
@media (min-width:600px){
  .result__hero-value{ font-size:52px; }
}
.result__hero-caption{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text-faint);
  margin-top:6px;
}
.fixed-note{
  text-align:center;
  font-size:12px;
  line-height:1.5;
  color:var(--text-faint);
  max-width:320px;
  margin:14px auto 22px;
}

/* ============ Summary grid ============ */
.summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
}
.summary-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.summary-item__label{
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.summary-item__value{
  font-size:16px;
  font-weight:700;
  color:var(--navy);
}

.summary-totals{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin:18px 0 22px;
  padding-top:16px;
  border-top:1px dashed var(--gray);
}
.summary-totals .summary-item__label{ color:var(--gold); }
.summary-totals .summary-item__value{ font-size:17px; }
@media (max-width:360px){
  .summary-totals{ grid-template-columns:1fr; }
}

/* ============ Section titles ============ */
.section-title{
  margin:0 0 14px;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
}
.section-title--sub{
  font-size:12.5px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:10px;
}

/* ============ Payments table (3–12 months) ============ */
.payments-section{ margin-bottom:24px; }
.terms-list__header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:0 18px 8px;
}
.terms-list__header span{
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  color:var(--text-faint);
}
.terms-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.term-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  text-align:left;
  border:1.5px solid var(--gray);
  background:var(--white);
  border-radius:var(--radius-md);
  padding:14px 18px;
  font-family:inherit;
  cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.term-row:hover{ border-color:var(--gold-soft); }
.term-row:active{ transform:scale(0.995); }
.term-row.is-active{
  border-color:var(--gold);
  background:var(--gold-wash);
  box-shadow:0 4px 14px -6px rgba(210,161,92,0.45);
}
.term-row.is-unavailable{
  cursor:default;
  opacity:0.55;
  background:var(--bg);
}
.term-row.is-unavailable:hover{ border-color:var(--gray); }
.term-row:disabled{ pointer-events:none; }

.term-row__meta{
  order:1;
  display:flex;
  align-items:center;
  gap:22px;
  flex:1;
  min-width:0;
}
.term-row__meta-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.term-row__col-label{ display:none; }
.term-row__months-value{ font-size:15px; font-weight:700; color:var(--navy); white-space:nowrap; }
.term-row__markup-value,
.term-row__total-value{ font-size:14px; font-weight:700; color:var(--navy); white-space:nowrap; }
.term-row__badge{
  display:block;
  margin-top:4px;
  font-size:9.5px;
  font-weight:700;
  color:var(--gold);
  background:var(--gold-wash);
  border-radius:999px;
  padding:2px 8px;
  width:max-content;
  white-space:nowrap;
}

.term-row__monthly{
  order:2;
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
}
.term-row__monthly-value{ font-size:19px; font-weight:800; color:var(--navy); }
.term-row__monthly-caption{ font-size:11.5px; font-weight:600; color:var(--text-faint); }

.term-row__unavailable-reason{
  display:none;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
}
.term-row.is-unavailable .term-row__meta-item:not(:first-child),
.term-row.is-unavailable .term-row__monthly{ display:none; }
.term-row.is-unavailable .term-row__unavailable-reason{ display:block; }

@media (max-width:600px){
  .terms-list__header{ display:none; }
  .term-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .term-row__monthly{ order:-1; justify-content:flex-start; }
  .term-row__monthly-value{ font-size:23px; }
  .term-row__meta{ order:0; flex-wrap:wrap; row-gap:8px; gap:18px; }
  .term-row__col-label{
    display:block;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.3px;
    color:var(--text-faint);
  }
  .term-row.is-unavailable .term-row__unavailable-reason{ margin-top:-2px; }
}

/* ============ Eligibility summary ("По вашим параметрам") ============ */
.eligibility-section{ margin-bottom:24px; }
.eligibility{
  background:var(--bg);
  border:1.5px solid var(--gray);
  border-radius:var(--radius-md);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.eligibility__line{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--navy);
}
.eligibility__line--warn{ color:var(--gold); }
.eligibility__reason{
  margin:-2px 0 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
}

/* ============ Terms & conditions ============ */
.terms-conditions{ margin-bottom:22px; }
.conditions-list{
  list-style:none;
  margin:10px 0 0;
  padding:14px 16px;
  background:var(--bg);
  border-radius:var(--radius-sm);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.conditions-list li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--navy);
}
.conditions-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:7px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}
.self-check-group{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--gray);
}
.self-check__question{
  margin:0 0 10px;
  font-size:13.5px;
  font-weight:700;
  color:var(--navy);
}
.self-check__buttons{
  display:flex;
  gap:8px;
}
.self-check__note{
  margin:10px 0 0;
  font-size:13px;
  font-weight:600;
  color:var(--gold);
}

.guarantor-requirements{
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--gray);
}
.guarantor-status{
  margin:14px 0 0;
  font-size:13px;
  font-weight:700;
  color:var(--gold);
}

.result__guarantor-status{
  text-align:center;
  margin:-10px 0 18px;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
}
.result__guarantor-status--warn{ color:var(--gold); }

/* ============ Accordion ============ */
.accordion{ margin-bottom:16px; }
.accordion__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg);
  border:1.5px solid var(--gray);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  transition:border-color .16s var(--ease);
}
.accordion__toggle:hover{ border-color:var(--gold-soft); }
.accordion__chevron{ transition:transform .22s var(--ease); color:var(--gold); flex-shrink:0; }
.accordion__toggle[aria-expanded="true"] .accordion__chevron{ transform:rotate(180deg); }
.accordion__panel{
  overflow:hidden;
  animation:expand .22s var(--ease);
}
@keyframes expand{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }

.schedule-list{
  list-style:none;
  margin:10px 0 0;
  padding:6px 16px;
  background:var(--bg);
  border-radius:var(--radius-sm);
}
.schedule-list li{
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  font-size:14px;
  border-bottom:1px solid var(--gray);
}
.schedule-list li:last-child{ border-bottom:none; font-weight:700; color:var(--navy); }
.schedule-list li span:first-child{ color:var(--text-muted); font-weight:600; }
.schedule-list li span:last-child{ font-weight:700; color:var(--navy); }

/* ============ Buttons ============ */
.btn{
  width:100%;
  border:none;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  padding:16px;
  cursor:pointer;
  transition:transform .12s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(0.98); }
.btn--ghost{
  background:var(--white);
  color:var(--navy);
  border:1.5px solid var(--gray);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn--ghost:hover{ border-color:var(--gold-soft); }
.btn--copy.is-copied{ border-color:var(--gold); color:var(--gold); }

/* ============ Empty state ============ */
.empty-state{
  text-align:center;
  padding:24px 8px;
  color:var(--text-faint);
  font-size:14px;
  font-weight:600;
}

/* ============ Benefits ============ */
.benefits{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--gray);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 10px;
}
.benefits__item{
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:7px;
}
.benefits__check{
  color:var(--gold);
  font-weight:800;
}

.page-footer{
  text-align:center;
  margin-top:20px;
}
.page-footer p{
  font-size:11.5px;
  color:var(--text-faint);
  font-weight:500;
}

/* ============ Notice (gentle, non-alarming) ============ */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

.notice{
  text-align:center;
  padding:22px 20px;
  background:var(--bg);
  border:1.5px solid var(--gray);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-md);
  animation:fadeUp .3s var(--ease);
}
.notice__text{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  color:var(--navy);
}
.notice__subtext{
  margin:8px 0 0;
  font-size:13px;
  font-weight:600;
  color:var(--gold);
}

/* ============ Toast ============ */
.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%) translateY(8px);
  background:var(--navy);
  color:var(--white);
  font-size:13.5px;
  font-weight:600;
  padding:13px 22px;
  border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(23,36,58,0.5);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

[hidden]{ display:none !important; }