/* Личный кабинет Sonder.by */
:root {
   --cab-primary: #ff5b2e;
   --cab-primary-2: #ff8a5c;
   --cab-dark: #172b43;
   --cab-text: #4b5280;
   --cab-bg: #f6f7fb;
   --cab-border: #e5e8f2;
   --cab-green: #22a95c;
   --cab-orange: #e8930c;
   --cab-red: #d64545;
}

.cabinet-body {
   font-family: Roboto, sans-serif;
   font-size: 19px;
   line-height: 1.5;
   background: var(--cab-bg);
   color: var(--cab-text);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.cab-h1, .cab-h2, .cab-nav-links, .cab-btn, .cab-status, .cab-step-label,
.cab-details summary, .cab-card-head, .cab-price {
   font-family: 'Poppins', sans-serif;
}

.cab-nav { background: #fff; border-bottom: 1px solid var(--cab-border); }
.cab-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; }
.cab-logo img { height: 34px; }
.cab-nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cab-nav-links a { color: var(--cab-dark); text-decoration: none; font-size: 16px; font-weight: 500; }
.cab-nav-links a:hover { color: var(--cab-primary); }
/* кнопки в навигации («Регистрация») — белый текст, а не тёмный цвет ссылок */
.cab-nav-links a.cab-btn { color: #fff; }
.cab-nav-links a.cab-btn:hover { color: var(--cab-primary); }
.cab-user { font-size: 15px; color: var(--cab-text); }
.badge-staff { background: var(--cab-primary); color: #fff; font-size: 11px; border-radius: 10px; padding: 2px 8px; }
.cab-link-btn { background: none; border: none; color: var(--cab-red); font-size: 16px; cursor: pointer; padding: 0; font-family: inherit; }

.cab-main { flex: 1; padding: 40px 15px 60px; max-width: 1000px; }

.cab-h1 { font-size: 30px; color: var(--cab-dark); font-weight: 600; margin-bottom: 10px; }
.cab-h2 { font-size: 21px; color: var(--cab-dark); font-weight: 600; margin-bottom: 8px; }
.cab-muted { color: #8a90ad; font-size: 16px; }
.cab-muted a { color: var(--cab-primary); }
.cab-date { color: #8a90ad; font-size: 14px; }
.cab-section { margin-top: 34px; }
.mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; }

.cab-btn {
   display: inline-block; background: var(--cab-primary);
   color: #fff; border: 1px solid var(--cab-primary); border-radius: 100px;
   line-height: 44px; padding: 0 28px;
   font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none;
   white-space: nowrap; transition: all .2s;
   box-shadow: 0 19px 40px -10px #ffe0d2;
}
.cab-btn:hover {
   background: #fff; color: var(--cab-primary); border-color: var(--cab-primary);
   text-decoration: none;
}
.cab-btn-sm { line-height: 34px; padding: 0 18px; font-size: 14px; box-shadow: none; }
.cab-btn-wide { width: 100%; }

.cab-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 16px; }
.cab-alert-success, .cab-alert-info { background: #e9f9f0; color: var(--cab-green); }
.cab-alert-error { background: #fdeaea; color: var(--cab-red); }

.cab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 12px; }
.cab-card { background: #fff; border: 1px solid var(--cab-border); border-radius: 14px; padding: 18px; }
.cab-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; color: var(--cab-dark); }
.cab-price { font-size: 22px; font-weight: 600; color: var(--cab-primary); }
.cab-row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.cab-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--cab-border); border-radius: 14px; }
.cab-table { width: 100%; font-size: 16px; border-collapse: collapse; }
.cab-table th, .cab-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cab-border); vertical-align: middle; }
.cab-table thead th { color: #8a90ad; font-weight: 500; font-size: 14px; }
.cab-table tr:last-child td { border-bottom: none; }
.cab-table a { color: var(--cab-dark); font-weight: 500; }
/* кнопки внутри таблицы не должны наследовать тёмный цвет ссылок таблицы */
.cab-table a.cab-btn { color: #fff; }
.cab-table a.cab-btn:hover { color: var(--cab-primary); }
.cab-table-sm th, .cab-table-sm td { padding: 8px 10px; font-size: 15px; }

.cab-status { display: inline-block; border-radius: 12px; padding: 4px 14px; font-size: 13.5px; background: #eef0f8; color: var(--cab-text); white-space: nowrap; }
.st-tz_pending, .st-tz_ready, .st-rev-requested, .st-rev-estimated { background: #fdf3e2; color: var(--cab-orange); }
.st-in_development, .st-review, .st-revisions, .st-rev-in_progress, .st-rev-paid { background: #fff5f0; color: var(--cab-primary); }
.st-approved, .st-paid, .st-launched, .st-rev-done { background: #e9f9f0; color: var(--cab-green); }
.st-declined, .st-rev-declined { background: #fdeaea; color: var(--cab-red); }

.cab-empty { background: #fff; border: 1px dashed var(--cab-border); border-radius: 14px; padding: 40px; text-align: center; }

.cab-project-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.cab-project-price { text-align: right; }
.cab-breadcrumbs { margin-bottom: 16px; }
.cab-breadcrumbs a { color: #8a90ad; text-decoration: none; font-size: 15px; }

.cab-timeline { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; margin-top: 14px; padding-bottom: 6px; }
.cab-step { flex: 1 0 96px; min-width: 96px; text-align: center; position: relative; padding-top: 22px; }
.cab-step-dot { width: 14px; height: 14px; border-radius: 50%; background: #d7dbeb; margin: 0 auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; }
.cab-step::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #d7dbeb; }
.cab-step:first-child::before { display: none; }
.cab-step.done .cab-step-dot, .cab-step.done::before { background: var(--cab-green); }
.cab-step.current .cab-step-dot { background: var(--cab-primary); box-shadow: 0 0 0 4px rgba(255,91,46,.18); }
.cab-step.current::before { background: var(--cab-green); }
.cab-step-label { font-size: 13px; line-height: 1.3; padding: 4px 6px 0; }
.cab-step.current .cab-step-label { color: var(--cab-primary); font-weight: 600; }

.cab-label { display: block; font-size: 16px; font-weight: 500; color: var(--cab-dark); margin: 14px 0 6px; }
.cab-input {
   width: 100%; border: 1px solid var(--cab-border); border-radius: 10px;
   padding: 10px 14px; font-size: 16px; font-family: inherit; color: var(--cab-dark);
   background: #fff;
}
.cab-input:focus { outline: none; border-color: var(--cab-primary-2); }
.cab-input-sm { width: auto; padding: 6px 10px; font-size: 14px; }
.cab-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cab-inline-form .cab-input { width: auto; flex: 1; min-width: 160px; }

.cab-staff-box { background: #fff8ec; border: 1px solid #f3e3c2; border-radius: 14px; padding: 16px 18px; }

.cab-chat { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cab-msg { max-width: 75%; border-radius: 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--cab-border); }
.cab-msg.from-studio { align-self: flex-start; background: #fff5f0; border-color: #ffd8c7; }
.cab-msg.from-client { align-self: flex-end; }
.cab-msg-meta { font-size: 13px; color: #8a90ad; margin-bottom: 3px; }
.cab-msg-text { font-size: 16px; color: var(--cab-dark); }

.cab-details summary { cursor: pointer; font-weight: 500; color: var(--cab-dark); font-size: 17px; }
.cab-details[open] summary { margin-bottom: 10px; }

.cab-auth-card { max-width: 420px; margin: 30px auto; background: #fff; border: 1px solid var(--cab-border); border-radius: 16px; padding: 34px; }

.cab-footer { border-top: 1px solid var(--cab-border); padding: 18px 0; font-size: 14px; color: #8a90ad; background: #fff; }

@media (max-width: 640px) {
   .cab-main { padding-top: 24px; }
   .cab-msg { max-width: 95%; }
   .cab-step { min-width: 86px; flex-basis: 86px; }
}

/* Профиль пользователя */
.cab-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 20px; }
.cab-profile-card { min-width: 0; }
.cab-avatar-row { display: flex; gap: 20px; align-items: flex-start; margin-top: 10px; }
.cab-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cab-avatar-empty {
   display: flex; align-items: center; justify-content: center;
   background: #fff5f0; color: var(--cab-primary);
   font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 34px;
}
.cab-file { display: block; font-size: 14px; margin-bottom: 8px; max-width: 100%; }
.cab-note-sm { font-size: 14px; margin: 6px 0 10px; }

.cab-user-link { display: inline-flex; align-items: center; gap: 8px; }
.cab-nav-avatar {
   width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
   font-size: 14px; flex-shrink: 0;
}

/* Переключатель уведомлений */
.cab-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-top: 10px; }
.cab-switch input { display: none; }
.cab-switch-slider {
   width: 46px; height: 26px; border-radius: 13px; background: #d7dbeb;
   position: relative; flex-shrink: 0; transition: background .2s; margin-top: 2px;
}
.cab-switch-slider::after {
   content: ''; position: absolute; top: 3px; left: 3px;
   width: 20px; height: 20px; border-radius: 50%; background: #fff;
   transition: left .2s;
}
.cab-switch input:checked + .cab-switch-slider { background: var(--cab-primary); }
.cab-switch input:checked + .cab-switch-slider::after { left: 23px; }
.cab-switch-text { font-size: 16px; }

/* Шапка страницы: заголовок + кнопка действия */
.cab-page-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.cab-page-head .cab-h1 { margin-bottom: 0; }
.cab-page-head .cab-btn i { font-style: normal; font-weight: 600; }

/* Бейджи (оценка ТЗ и т.п.) */
.cab-badge {
   display: inline-block; border-radius: 12px; padding: 4px 14px;
   font-size: 13.5px; font-family: 'Poppins', sans-serif;
   background: #eef0f8; color: var(--cab-text); margin-top: 6px;
}
.cab-badge-green { background: #e9f9f0; color: var(--cab-green); }
.cab-alert-warning { background: #fdf3e2; color: var(--cab-orange); }

/* Версии ТЗ */
.cab-spec summary::-webkit-details-marker { display: none; }
.cab-spec-head {
   display: flex; justify-content: space-between; align-items: center;
   gap: 12px; flex-wrap: wrap; cursor: pointer;
   font-family: 'Poppins', sans-serif; font-weight: 500; color: var(--cab-dark);
}
.cab-spec-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cab-spec-badges .cab-badge { margin-top: 0; }
.cab-spec-content {
   margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cab-border);
   white-space: normal;
}

/* Модалка подтверждения ТЗ */
.cab-modal-backdrop {
   position: fixed; inset: 0; background: rgba(23, 43, 67, .55);
   display: flex; align-items: center; justify-content: center;
   padding: 20px; z-index: 1000;
}
.cab-modal {
   background: #fff; border-radius: 16px; padding: 28px 30px;
   max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.cab-modal-note {
   background: #e9f9f0; color: var(--cab-green); border-radius: 10px;
   padding: 12px 16px; font-size: 15px; margin: 14px 0;
}
.cab-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cab-btn-outline {
   background: #fff; color: var(--cab-primary);
   border: 1px solid var(--cab-primary); box-shadow: none;
}
.cab-btn-outline:hover { background: #fff5f0; }

/* Демонстрация результата и оплата */
.cab-demo-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cab-payment-details {
   background: #f6f7fb; border: 1px dashed var(--cab-border);
   border-radius: 10px; padding: 14px 18px; font-size: 16px;
   color: var(--cab-dark);
}
.st-payment_check { background: #fdf3e2; color: var(--cab-orange); }
.st-finalizing { background: #fff5f0; color: var(--cab-primary); }
.cab-badge-red { background: #fdeaea; color: var(--cab-red); }
.cab-h2 .cab-badge { margin: 0 0 0 8px; vertical-align: middle; }
.wz-req { color: var(--cab-red); }