@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700&display=swap');

:root { font-family: 'Roboto Condensed', Verdana, sans-serif; color: #333; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; font-size: 15px; }
.site-shell { width: min(1140px, calc(100% - 30px)); margin: 0 auto; padding-top: 28px; }
.site-header { min-height: 112px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.site-header img { display: block; width: 166px; height: 79px; object-fit: contain; }
.language-switcher { display: flex; gap: 5px; padding-top: 8px; }
.language-switcher a { min-width: 38px; padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #555; text-align: center; text-decoration: none; font-weight: 600; }
.language-switcher a:hover { border-color: #337ab7; color: #337ab7; }
.language-switcher a.active { border-color: #337ab7; background: #337ab7; color: #fff; }
.payment-tabs { display: flex; align-items: stretch; margin-top: 22px; }
.payment-tabs a { padding: 12px 16px; color: #fff; background: #5bc0de; border: 1px solid #46b8da; text-decoration: none; border-radius: 4px 4px 0 0; }
.payment-tabs a.active { background: #337ab7; border-color: #2e6da4; }
.payment-tabs a.manual.active { background: #31b0d5; border-color: #269abc; }
.payment-panel { border: 1px solid #e3e3e3; border-radius: 0 0 4px 4px; background: #f5f5f5; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); padding: 18px 12px 12px; min-height: 106px; }
.form-row { display: grid; grid-template-columns: minmax(180px, 32%) 1fr; gap: 28px; align-items: start; margin-bottom: 15px; }
.form-label { text-align: right; font-weight: 700; padding-top: 8px; }
.form-field input:not([type=checkbox]), .form-field textarea, .form-field select { display: block; width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #555; font: inherit; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
.form-field textarea { resize: vertical; }
.amount-edit { display: grid; grid-template-columns: minmax(160px, 1fr) 120px; }
.amount-edit input { border-radius: 4px 0 0 4px !important; }
.amount-edit select { border-radius: 0 4px 4px 0 !important; }
.order-box { padding: 10px 12px; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; }
.order-box strong, .order-box span { display: block; margin-bottom: 5px; }
.amount-input { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; background: #fff; overflow: hidden; }
.amount-input strong { flex: 1; padding: 8px 12px; }
.amount-input span { padding: 8px 14px; border-left: 1px solid #ccc; background: #eee; }
.action-row { margin: 0 0 4px calc(32% + 28px); }
button, .btn-primary { display: inline-block; width: auto; border: 1px solid transparent; border-radius: 4px; padding: 8px 13px; color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.btn-success { background: #5cb85c; border-color: #4cae4c; }
.btn-success:hover { background: #449d44; }
.btn-success:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: #337ab7; border-color: #2e6da4; }
.contract-check { display: block; margin-top: 16px; }
.contract-check input { width: auto; min-height: auto; margin-right: 5px; }
.bot-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contract-modal { width: min(860px, calc(100% - 24px)); max-width: none; height: min(80vh, 720px); padding: 0; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #333; overflow: hidden; }
.contract-modal[open] { display: flex; flex-direction: column; }
.contract-modal::backdrop { background: rgba(0,0,0,.55); }
.contract-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e3e3e3; background: #f5f5f5; }
.contract-modal-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.contract-modal-close { padding: 0 6px; border: 0; background: none; color: #777; font-size: 26px; line-height: 1; }
.contract-modal-close:hover { color: #333; }
.contract-modal iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.contract-modal-foot { padding: 10px 16px; border-top: 1px solid #e3e3e3; background: #f5f5f5; text-align: right; }
.alert { padding: 12px 15px; border: 1px solid transparent; border-radius: 4px; margin: 0 0 16px; }
.alert.error, .validation { color: #a94442; }
.alert.error { background: #f2dede; border-color: #ebccd1; }
.alert.success { color: #3c763d; background: #dff0d8; border-color: #d6e9c6; }
.validation { display: block; margin-top: 5px; font-size: 13px; }
.site-footer { text-align: center; margin: 72px 0 35px; color: #333; }
.site-footer img { display: inline-block; max-height: 32px; width: auto; vertical-align: middle; }
.site-footer h4 { margin: 34px 0 8px; font-size: 19px; font-weight: 400; }
.site-footer small { color: #888; }
.card.center { max-width: 640px; margin: 0 auto; padding: 38px; text-align: center; border: 1px solid #ddd; background: #f5f5f5; }
.spinner { width: 42px; height: 42px; border: 4px solid #ddd; border-top-color: #337ab7; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
.result-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; font-size: 30px; font-weight: 700; }
.result-icon.ok { background: #dff0d8; color: #3c763d; }
.result-icon.fail { background: #f2dede; color: #a94442; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .site-shell { width: min(100% - 20px, 540px); padding-top: 18px; }
  .site-header { min-height: 90px; }
  .language-switcher { gap: 3px; }
  .language-switcher a { min-width: 34px; padding: 6px 5px; }
  .payment-tabs { display: grid; grid-template-columns: 1fr; gap: 3px; }
  .payment-tabs a { border-radius: 4px; text-align: center; }
  .payment-panel { border-radius: 4px; margin-top: 7px; padding: 18px 14px; }
  .form-row { grid-template-columns: 1fr; gap: 6px; }
  .form-label { text-align: left; padding-top: 0; }
  .action-row { margin-left: 0; }
  .action-row button { width: 100%; }
  .site-footer { margin-top: 48px; }
}