:root { 
   --primary: #0052cc; 
   --primary-hover: #0041a3; 
   --dark: #091e42; 
   --light: #f4f5f7; 
   --text: #172b4d; 
   --max-color: #0077ff; 
   --success: #00875a; 
   --success-hover: #006644;
}
* { 
   box-sizing: border-box; 
   margin: 0; 
   padding: 0; 
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}
body { 
   background-color: var(--light); 
   color: var(--text); 
   line-height: 1.6; 
}
.logo {
   white-space: nowrap;
}
header { 
   background-color: var(--dark); 
   color: #fff; 
   padding: 18px 0; 
   border-bottom: 4px solid var(--primary); 
}
.header-wrap {
   max-width: 800px;
   margin: 0 auto;
   padding: 0 20px;
   text-align: left;
   font-size: 24px; 
   font-weight: bold;
}
header span { 
   color: #4c9aff; 
} 
.header-wrap .subtitle {
   font-size: 14px;
   font-weight: normal;
   color: #97a0af;
   display: inline-block;
   vertical-align: middle;
   margin-left: 8px;
}
@media (max-width: 576px) {
   .header-wrap { gap: 2px; }
   .header-wrap .subtitle { width: 100%; margin-top: -2px; }
}
header span { color: #4c9aff; } 
.container { 
   max-width: 800px; 
   margin: 25px auto; 
   padding: 0 20px; 
}
.block { 
   background: #fff; 
   padding: 22px; 
   border-radius: 12px; 
   margin-bottom: 22px; 
   box-shadow: 0 2px 8px rgba(9, 30, 66, 0.08); 
   border: 1px solid #dfe1e6; 
}
h2 { 
   color: var(--dark); 
   margin-bottom: 12px; 
   font-size: 20px; 
   border-left: 4px solid var(--primary); 
   padding-left: 10px; 
}
.tariff { 
   padding: 12px 0; 
   border-bottom: 1px solid #ebecf0; 
}
.tariff:last-of-type { border: none; }
.tariff-header { 
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
   margin-bottom: 5px; 
}
.price { 
   font-weight: bold; 
   color: var(--primary); 
   font-size: 18px; 
 }
.form-group { margin-bottom: 12px; }
label { 
   display: block; 
   margin-bottom: 4px; 
   font-weight: 500; 
   font-size: 14px; 
   color: #5e6c84; 
}
input, textarea, select { 
   width: 100%; 
   padding: 10px; 
   border: 1px solid #dee2e6; 
   border-radius: 6px; 
   font-size: 16px; 
   background: #fff; 
   color: var(--text); 
   resize: none; /* Запрещает пользователю растягивать поле вручную */
}

input:focus, textarea:focus, select:focus { 
   border-color: var(--primary); 
   outline: none; 
}
.btn { 
   display: inline-block; 
   width: 100%; 
   background: var(--primary); 
   color: #fff; 
   border: none; 
   padding: 12px; 
   border-radius: 6px; 
   font-size: 16px; 
   font-weight: bold; 
   cursor: pointer; 
   text-align: center; 
   text-decoration: none; 
   transition: background 0.2s ease;
}
.btn:hover { background: var(--primary-hover); }
.btn-max { background: var(--max-color); margin-top: 10px; }

/* Старые стили .payment-row, .payment-select и .btn-pay можно удалить */
background: var(--success);
button[onclick="redirectToPayment()"]:hover {
   background: var(--success-hover) !important;
}


.btn-back { 
   display: inline-block; 
   color: var(--primary); 
   text-decoration: none; 
   font-size: 14px; 
   font-weight: bold; 
   margin-bottom: 20px;
   transition: color 0.2s ease; 
}
.btn-back:hover { 
   color: var(--primary-hover); 
   text-decoration: underline; 
}
.card { 
   background: #fff; 
   padding: 25px; 
   border-radius: 12px; 
   box-shadow: 0 2px 8px rgba(9, 30, 66, 0.08); 
   border: 1px solid #dfe1e6; 
}
table { 
   width: 100%; 
   border-collapse: collapse; 
   font-size: 14px; 
}
td { 
   padding: 10px; 
   border: 1px solid #ebecf0; 
}
td:first-child { 
   font-weight: 500; 
   color: #5e6c84; 
   width: 120px; 
   background: #fafbfc; 
}

footer {
   margin-top: 30px;
   padding: 20px 0;
   border-top: 1px solid #ebecf0;
   text-align: center;
   font-size: 13px;
   color: #5e6c84;
}
footer p {
   margin-bottom: 6px;
}

ul, ol { margin-left: 20px; padding-left: 5px; font-size: 14px; }
li { margin-bottom: 6px; }
a { color: var(--primary); text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }

@media (max-width: 576px) {
   .payment-row { flex-direction: column; }
   .btn-pay { width: 100%; }
}