/* ===== docgen-form: стили модальной формы генерации ОХЛП/листка-вкладыша =====
   Используются дизайн-токены страницы (--color-*, --space-*, --font-*, --radius-*).
   Общий файл: подключается на landing/smpc и landing/pil. */

/* Danger-tokens — фолбэк, если страница их не определяет */
:root,[data-theme="light"]{--color-danger:#b3261e;--color-danger-light:rgba(179,38,30,0.10);}
[data-theme="dark"]{--color-danger:#ff8a80;--color-danger-light:rgba(255,138,128,0.12);}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-danger:#ff8a80;--color-danger-light:rgba(255,138,128,0.12);}}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(13,35,64,0.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn .2s ease;}
.modal-overlay[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:620px;max-height:92dvh;overflow-y:auto;background:var(--color-surface-2);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-8);position:relative;animation:slideUp .25s ease;}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:var(--space-4);right:var(--space-4);width:34px;height:34px;border-radius:var(--radius-md);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;}
.modal-close:hover{color:var(--color-text);background:var(--color-navy-light);}
.modal-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2);padding-right:var(--space-8);}
.modal-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6);}
.modal-step-hidden{display:none;}
.modal-step-visible{display:block;}
.modal-note{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.5;margin-top:var(--space-3);}

.modal-progress{display:flex;gap:var(--space-2);margin-bottom:var(--space-6);}
.modal-progress-step{flex:1;height:3px;border-radius:2px;background:var(--color-divider);}
.modal-progress-step.active{background:var(--color-primary);}

/* Dropzone */
.dropzone{border:2px dashed var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center;cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.dropzone:hover,.dropzone.drag{border-color:var(--color-primary);background:var(--color-primary-light);}
.dropzone-icon{width:44px;height:44px;margin:0 auto var(--space-4);color:var(--color-primary);}
.dropzone-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1);}
.dropzone-hint{font-size:var(--text-xs);color:var(--color-text-faint);}
.dropzone input[type=file]{display:none;}
.file-attached{display:none;align-items:center;gap:var(--space-3);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-4);}
.file-attached.show{display:flex;}
.file-icon{width:38px;height:38px;border-radius:var(--radius-md);background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.file-icon svg{width:20px;height:20px;color:var(--color-primary);}
.file-meta{flex:1;min-width:0;}
.file-name{font-size:var(--text-sm);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-size{font-size:var(--text-xs);color:var(--color-text-faint);}
.file-remove{width:30px;height:30px;border-radius:var(--radius-md);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.file-remove:hover{color:var(--color-danger);background:var(--color-danger-light);}

/* Form fields */
.field{margin-bottom:var(--space-5);}
.field-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2);}
.field-hint{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-1);}
.select-input{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.select-input:focus{border-color:var(--color-primary);outline:none;}

/* Estimate results */
.estimate-card{background:var(--color-primary-light);border:1px solid rgba(250,159,0,0.25);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin-top:var(--space-3);}
.estimate-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;}
.estimate-label{font-size:var(--text-sm);color:var(--color-text-muted);}
.estimate-value{font-size:var(--text-lg);font-family:var(--font-display);font-weight:700;color:var(--color-text);}
.estimate-divider{border:none;border-top:1px solid rgba(250,159,0,0.2);margin:var(--space-3) 0;}
.balance-note{font-size:var(--text-sm);color:var(--color-text-muted);background:rgba(28,124,62,0.08);border:1px solid rgba(28,124,62,0.25);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);}

/* Login: текстовая кнопка «У меня уже есть аккаунт» */
.login-link{margin-top:var(--space-4);text-align:center;}
.login-link a{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.login-link a:hover{color:var(--color-primary);}

/* Amount presets */
.amount-presets{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.amount-option{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1.5px solid var(--color-border);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);background:var(--color-surface);}
.amount-option:hover{border-color:var(--color-primary);color:var(--color-primary);}
.amount-option.selected{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.amount-custom{width:100%;margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);}
.amount-custom:focus{border-color:var(--color-primary);outline:none;}

/* Error / notice */
.notice{display:none;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;background:var(--color-danger-light);border:1px solid var(--color-danger);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-top:var(--space-4);}
.notice.show{display:grid;}
.notice-icon{width:20px;height:20px;color:var(--color-danger);margin-top:2px;}
.notice-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1);}
.notice-text{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}

.loading-spinner{display:inline-flex;align-items:center;gap:var(--space-2);}
.spinner{width:20px;height:20px;border:3px solid var(--color-divider);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner--lg{width:34px;height:34px;border-width:3px;}
.loading-center{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8) 0;text-align:center;color:var(--color-text-muted);}
.modal-btn-row{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;}
.modal-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;}
.modal-btn--primary{background:var(--color-primary);color:#fff;}
.modal-btn--primary:hover{background:var(--color-primary-hover);}
.modal-btn--ghost{background:transparent;color:var(--color-text-muted);border:1.5px solid var(--color-border);}
.modal-btn--ghost:hover{color:var(--color-text);border-color:var(--color-text-muted);}
.modal-btn:disabled{opacity:0.5;cursor:not-allowed;}

@media(max-width:560px){.modal{max-width:100%;padding:var(--space-6);}}