:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #020304;
  color: #f5f5f6;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020304; }
button, input, select { font: inherit; }
body {
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.09), transparent 27%), linear-gradient(180deg, #0b0c0e 0%, #030405 48%, #000 100%);
}
.payment-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom));
}
.payment-panel {
  width: min(100%, 430px);
  min-height: min(860px, calc(100dvh - 30px));
  padding: 24px 4px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.language-picker {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 2px;
  padding: 6px 7px 6px 11px;
  border: 1px solid #575a5e;
  border-radius: 11px;
  background: rgba(17,19,21,.9);
  color: #cfd1d3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.language-picker select {
  width: 102px;
  padding: 7px 8px;
  border: 1px solid #74777b;
  border-radius: 7px;
  outline: 0;
  background: #050607;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.language-picker select:focus { border-color: #d0d1d3; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.payment-logo {
  display: block;
  width: min(88%, 340px);
  height: 150px;
  object-fit: contain;
  margin: 0 auto 24px;
  filter: drop-shadow(0 4px 12px rgba(255,255,255,.08));
}
h1 {
  margin: 0 0 34px;
  text-align: center;
  font-size: clamp(30px, 8vw, 41px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.035em;
}
.payment-form { display: grid; gap: 0; }
.payment-form label { margin: 0 4px 12px; color: #d4d4d6; font-size: 21px; font-weight: 400; }
.pay-field {
  position: relative;
  height: 76px;
  margin-bottom: 29px;
  display: flex;
  align-items: center;
  border: 2px solid #6d6e72;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(30,31,34,.65), rgba(8,9,11,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.18);
  overflow: hidden;
}
.pay-field:focus-within { border-color: #d0d1d3; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.pay-field input {
  width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #fff;
  padding: 0 20px 0 68px; font-size: 24px;
}
.field-icon {
  position: absolute; left: 24px; color: #d4d5d7; font-size: 30px; line-height: 1;
  text-shadow: 0 1px 4px #000;
}
.invoice-icon { font-size: 31px; }
.card-icon { transform: scaleX(1.18); }
.cardholder-field input { padding-left: 20px; }
#cardholder::placeholder { color: #a4a6aa; opacity: .42; font-size: clamp(12px, 3.8vw, 16px); letter-spacing: .02em; }
#card::placeholder { color: #a4a6aa; opacity: .42; font-size: clamp(17px, 5vw, 22px); letter-spacing: .02em; }
.amount-field { justify-content: center; gap: 4px; }
.amount-field .currency { margin-left: 24px; color: #fff; font-size: clamp(38px, 11vw, 55px); font-weight: 500; }
.amount-field input {
  width: 290px; padding: 0; font-size: clamp(38px, 11vw, 55px); font-weight: 500;
  letter-spacing: -.04em; appearance: textfield;
}
.amount-field input::-webkit-inner-spin-button { display: none; }
.amount-field input::placeholder { color: #a4a6aa; opacity: .42; font-size: clamp(25px, 7.5vw, 38px); }
.customer-details {
  min-width: 0;
  margin: 1px 0 28px;
  padding: 18px 16px 16px;
  border: 1px solid #414449;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24,26,29,.68), rgba(6,7,9,.82));
}
.customer-details legend {
  padding: 0 8px;
  color: #f2f3f4;
  font-size: 18px;
  font-weight: 650;
}
.customer-intro { margin: 0 0 15px; color: #9fa3a7; font-size: 12px; line-height: 1.4; }
.customer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 11px; }
.customer-field { display: grid; gap: 7px; min-width: 0; }
.customer-field-wide { grid-column: 1 / -1; }
.customer-field span { color: #c8cacc; font-size: 12px; }
.customer-field input,
.customer-field select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #5e6165;
  border-radius: 10px;
  outline: 0;
  background: #08090b;
  color: #fff;
  font-size: 15px;
}
.customer-field select { color-scheme: dark; cursor: pointer; }
.customer-field input:focus,
.customer-field select:focus { border-color: #d0d1d3; box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.customer-field input::placeholder { color: #707479; }
.receipt-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 11px;
  border: 1px solid rgba(108,175,130,.28);
  border-radius: 9px;
  background: rgba(36,104,58,.12);
  color: #bdd5c4;
  font-size: 11px;
  line-height: 1.4;
}
.payment-methods {
  min-width: 0; margin: 0 0 28px; padding: 16px;
  border: 1px solid #414449; border-radius: 16px;
  background: linear-gradient(145deg, rgba(24,26,29,.68), rgba(6,7,9,.82));
}
.payment-methods legend { padding: 0 8px; color: #f2f3f4; font-size: 18px; font-weight: 650; }
.payment-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.payment-method {
  min-height: 78px; padding: 10px 7px; display: grid; place-items: center; gap: 5px;
  border: 1px solid #50545a; border-radius: 12px; background: #080a0c; color: #cfd3d6;
  cursor: pointer; text-align: center;
}
.payment-method > span { font-size: 23px; line-height: 1; }
.payment-method strong { font-size: 11px; line-height: 1.2; }
.payment-method.active { border-color: #e7e9eb; background: linear-gradient(145deg, #292d31, #111416); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.07); }
.bank-payment-panel { margin: 0 0 30px; padding: 22px 18px; border: 1px solid #596169; border-radius: 16px; background: linear-gradient(145deg, rgba(29,38,45,.9), rgba(6,8,10,.94)); }
.bank-method-content { text-align: center; }
.bank-method-content[hidden] { display: none; }
.bank-method-icon { display: block; margin-bottom: 7px; font-size: 36px; }
.bank-method-content strong { display: block; color: #fff; font-size: 21px; }
.bank-method-content p { margin: 9px auto 17px; max-width: 350px; color: #b9c3c9; font-size: 13px; line-height: 1.55; }
.bank-safety { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(108,175,130,.3); border-radius: 10px; background: rgba(36,104,58,.12); color: #c2d9c8; font-size: 11px; line-height: 1.45; }
.bank-contact-message { margin: 17px 3px 10px; color: #fff; font-size: 14px; font-weight: 650; line-height: 1.45; text-align: center; }
.bank-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.bank-contact-actions a { min-height: 46px; display: grid; place-items: center; padding: 9px 10px; border: 1px solid #777e84; border-radius: 10px; background: #121619; color: #fff; font-size: 12px; font-weight: 750; text-align: center; text-decoration: none; }
.bank-contact-actions a:first-child { border-color: #eef1f2; background: linear-gradient(#fff,#d8dcde); color: #0a0c0d; }
.card-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: -8px 0 28px;
}
.payment-form .card-detail-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.card-detail-field span {
  color: #c8cacc;
  font-size: 13px;
  line-height: 1.25;
}
.card-detail-field input {
  width: 100%;
  height: 55px;
  padding: 0 15px;
  border: 1px solid #5e6165;
  border-radius: 11px;
  outline: 0;
  background: linear-gradient(145deg, rgba(25,27,30,.8), rgba(7,8,10,.9));
  color: #fff;
  font-size: 19px;
  letter-spacing: .06em;
}
.card-detail-field input:focus { border-color: #d0d1d3; box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.card-detail-field input::placeholder { color: #86898e; }
.accepted-cards {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -17px 2px 22px;
}
.accepted-label { margin-right: auto; color: #8f9195; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.visa-mark {
  min-width: 58px;
  padding: 5px 8px 4px;
  border-radius: 6px;
  background: #f7f8fa;
  color: #17357f;
  font-size: 17px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.05em;
  text-align: center;
}
.mastercard-mark {
  width: 58px;
  min-height: 31px;
  padding: 3px 4px 2px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #f7f8fa;
  color: #161719;
  font-size: 6px;
  line-height: 1;
  letter-spacing: -.02em;
}
.mastercard-circles { display: flex; justify-content: center; height: 17px; }
.mastercard-circles i { width: 17px; height: 17px; border-radius: 50%; background: #eb001b; }
.mastercard-circles i + i { margin-left: -5px; background: rgba(247,158,27,.92); }
.mastercard-mark b { margin-top: 1px; font-weight: 700; }
.amex-mark {
  width: 58px;
  min-height: 31px;
  padding: 4px 3px 3px;
  display: grid;
  place-content: center;
  border: 1px solid #63b5e5;
  border-radius: 6px;
  background: linear-gradient(145deg, #1575aa, #005485);
  color: #fff;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.international-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 2px 18px;
  padding: 9px 11px;
  border: 1px solid rgba(144,185,210,.25);
  border-radius: 9px;
  background: rgba(55,105,135,.11);
  color: #b7c9d4;
  font-size: 12px;
  line-height: 1.3;
}
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 2px 0 40px; }
.wallet {
  height: 76px; border: 2px solid #5f6064; border-radius: 16px;
  background: linear-gradient(145deg, #191a1c, #08090a); color: #f8f8f8;
  font-size: 29px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.wallet.active { border-color: #a2a3a6; background: linear-gradient(145deg, #252629, #0b0c0e); }
.apple { position: relative; margin-right: 2px; font-size: 31px; }
.apple::after {
  content: ""; position: absolute; width: 9px; height: 5px; top: -4px; left: 14px;
  rotate: -28deg; border-radius: 8px 2px; background: #fff;
}
.google-g {
  margin-right: 3px; font-weight: 800;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.secure-pay {
  min-height: 83px; border: 1px solid #fafafa; border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #dedfe0 44%, #aaaeb1 100%);
  color: #08090a; font-size: clamp(21px, 5.4vw, 28px); font-weight: 400; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 9px 0 #303236, 0 18px 28px rgba(0,0,0,.45);
}
.secure-pay:active { transform: translateY(4px); box-shadow: inset 0 1px 0 #fff, 0 5px 0 #303236, 0 12px 20px rgba(0,0,0,.4); }
.payment-trust {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 24px auto 0; padding: 15px 17px; max-width: 500px;
  border: 1px solid rgba(167,205,226,.42); border-radius: 13px;
  background: linear-gradient(135deg, rgba(61,116,148,.2), rgba(25,63,84,.13)); color: #d6e1e7;
  font-size: 13px; line-height: 1.45; text-align: left;
}
.trust-lock { flex: 0 0 auto; color: #edf7fb; font-size: 22px; }
.trust-copy { display: grid; gap: 2px; }
.trust-copy strong { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.payment-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  width: min(calc(100% - 32px), 410px); padding: 14px 16px; border-radius: 12px;
  background: #eceeef; color: #090a0b; text-align: center; font-weight: 650;
  opacity: 0; pointer-events: none; transition: .25s ease; box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.payment-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-height: 760px) {
  .payment-panel { min-height: 0; justify-content: start; padding-top: 4px; }
  .payment-logo { height: 105px; margin-bottom: 12px; }
  h1 { margin-bottom: 20px; }
  .pay-field { height: 64px; margin-bottom: 19px; }
  .wallet { height: 64px; }
  .wallet-grid { margin-bottom: 24px; }
  .secure-pay { min-height: 70px; }
  .language-picker { margin-bottom: -4px; }
}
@media (max-width: 390px) {
  .customer-grid { grid-template-columns: 1fr; }
  .customer-field-wide { grid-column: auto; }
  .card-detail-field span { font-size: 12px; }
  .payment-method-grid { grid-template-columns: 1fr; }
  .payment-method { min-height: 58px; grid-template-columns: auto 1fr; justify-items: start; padding: 10px 16px; }
}
@media (min-width: 650px) {
  body { padding: 24px 0; }
  .payment-screen { min-height: calc(100dvh - 48px); }
  .payment-panel {
    padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 36px;
    background: rgba(4,5,6,.7); box-shadow: 0 28px 80px rgba(0,0,0,.55);
  }
}