/* Полные стили Loan Prepayment Calculator — вынесены из инлайн <style> внутри
   render_calculator() в отдельный подключаемый файл (кэшируется браузером,
   не дублируется при каждом вызове шорткода на странице). */

.loan-container { max-width: 750px; width: 100%; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.loan-calculator { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.1); padding: 32px; overflow: hidden; }
.loan-language-switcher { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; justify-content: center; padding: 6px; background: #f4f6f8; border-radius: 10px; }
.loan-lang-switch { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1px solid #d0d5dd; background: #ffffff; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; text-decoration: none; color: #344054; transition: all 0.2s; white-space: nowrap; }
.loan-lang-switch:hover { background: #eaf0f6; border-color: #b0bbc7; transform: translateY(-1px); text-decoration: none; color: #344054; }
.loan-lang-switch.active { background: #007cba; color: #ffffff; border-color: #007cba; pointer-events: none; }
.loan-header { text-align: center; margin-bottom: 28px; }
.loan-header h1 { margin: 0 0 8px; color: #1a1a1a; font-size: 26px; font-weight: 700; line-height: 1.3; }
.loan-header p { margin: 0; color: #5a6e8a; font-size: 14px; }
.loan-form { margin-bottom: 30px; }
.form-row { display: flex; gap: 20px; margin-bottom: 0; }
.form-group { flex: 1; margin-bottom: 22px; }
.form-group label { display: block; margin-bottom: 7px; color: #344054; font-weight: 600; font-size: 14px; }
.loan-input { width: 100%; padding: 11px 14px; border: 2px solid #d0d5dd; border-radius: 8px; font-size: 16px; transition: all .25s; background: #fff; color: #101828; box-sizing: border-box; }
.loan-input:focus { outline: none; border-color: #007cba; box-shadow: 0 0 0 3px rgba(0,124,186,.15); }
.radio-group { display: flex; gap: 18px; flex-wrap: wrap; background: #f8f9fa; padding: 14px; border-radius: 8px; margin-top: 5px; }
.radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #344054; flex: 1; }
.radio-label input[type="radio"] { width: 17px; height: 17px; cursor: pointer; accent-color: #007cba; flex-shrink: 0; }
.tooltip-info { margin-top: 16px; margin-bottom: 25px; padding: 8px 12px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; font-size: 12px; color: #7a5800; display: flex; align-items: center; gap: 8px; }
.info-icon { cursor: help; color: #e6a017; font-weight: 700; }
.loan-button { width: 100%; padding: 14px 20px; background: #007cba; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all .25s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.loan-button:hover:not(:disabled) { background: #005f8e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,124,186,.3); }
.loan-button:disabled { opacity: .7; cursor: not-allowed; }
.loan-result { margin-top: 30px; padding-top: 22px; border-top: 2px solid #f0f0f0; animation: loan-fadeIn .45s ease; }
.loan-result h3 { margin: 0 0 18px; color: #1a1a1a; font-size: 18px; font-weight: 600; text-align: center; }
.result-card { border-radius: 10px; padding: 18px 20px; margin-bottom: 15px; transition: transform .25s; }
.result-card:hover { transform: translateY(-2px); }
.original-card { background: linear-gradient(135deg, #fef3c7, #fde68a); border-left: 4px solid #f59e0b; }
.new-card { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-left: 4px solid #10b981; }
.result-card h4 { margin: 0 0 12px; color: #1e293b; font-size: 15px; font-weight: 600; }
.result-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.result-item:last-child { border-bottom: none; }
.result-label { font-weight: 500; color: #475569; font-size: 13px; }
.result-value { font-weight: 700; font-size: 17px; color: #1e293b; }
.savings-card { background: linear-gradient(135deg, #1a1a2e, #16213e) !important; border-radius: 10px; padding: 20px; margin-top: 10px; color: white; border: 2px solid rgba(255,255,255,.15); }
.savings-item { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.savings-label { font-weight: 500; opacity: 0.9; }
.savings-value { font-weight: 800; font-size: 20px; }
.loan-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top: 2px solid #fff; border-radius: 50%; animation: loan-spin 0.9s ease-in-out infinite; margin-right: 6px; vertical-align: middle; }
.loan-error { background: #fde8e8; color: #7b1f1f; padding: 14px; border-radius: 8px; margin-top: 18px; text-align: center; border: 1px solid #f5c6c6; animation: loan-slideDown .3s ease; }
@keyframes loan-spin { to { transform: rotate(360deg); } }
@keyframes loan-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes loan-slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .loan-calculator { padding: 20px; } .loan-header h1 { font-size: 20px; } .loan-language-switcher { justify-content: center; } .radio-group { flex-direction: column; } }
@media (max-width: 600px) { .form-row { flex-direction: column; gap: 0; } .loan-calculator { padding: 14px; } .loan-lang-switch { font-size: 11px; padding: 6px 8px; } .savings-value { font-size: 18px; } }
@media print { .loan-language-switcher, .loan-button { display: none !important; } .loan-calculator { box-shadow: none; padding: 0; } .result-card { background: #f8f9fa !important; color: #333 !important; border: 1px solid #dee2e6; } .savings-card { background: #f8f9fa !important; color: #333 !important; } }