/* ===== Личный кабинет (/account/, Этап 4) =====
   Компоненты нового дизайна: сетка как .product-layout (меню + контент),
   карточки в стиле .product-sidebar-card, формы — .review-form/.leave-comment-box
   (см. catalog.css / product.css). Здесь только специфика ЛК. */

/* --- каркас страницы --- */

.account-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .account-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- вертикальное меню ЛК --- */

.account-menu {
  padding: 14px;
  border: 1px solid #f1e2d3;
  border-radius: 24px;
  background: #fff;
}

.account-menu-title {
  margin: 8px 12px 10px;
  color: #b3a497;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  color: #4a4038;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.account-menu a:hover {
  background: #fff3e8;
  color: #ff6400;
}

.account-menu a.is-active {
  background: linear-gradient(135deg, #fff1e6, #ffe4d1);
  color: #e05a00;
}

.account-menu a.is-logout {
  color: #a08c7c;
}

.account-menu svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #b98a5f;
}

.account-menu a:hover svg,
.account-menu a.is-active svg {
  color: #ff6400;
}

/* счётчик-бейдж (непрочитанные отзывы/сообщения) */
.account-menu-count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* зелёная точка «подписка активна» (Мои объявления) */
.account-menu-dot {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36b75e;
}

.account-menu-dot.is-off {
  background: #d8cfc6;
}

/* --- sticky-меню на десктопе: при прокрутке прижимается под шапкой (68px) ---
   как у сайдбара страницы питомника (product.css #sticky, top: 80px) */
@media (min-width: 769px) {
  /* aside должен тянуться на высоту контентной колонки, иначе sticky некуда ехать
     (у .account-layout задан align-items: start) */
  .account-layout > aside {
    align-self: stretch;
  }

  .account-layout .account-menu {
    position: sticky;
    top: 82px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

/* --- выпадающее меню на мобильных (<details>/<summary>, без JS-зависимостей) --- */

/* тоггл и стрелка — только на мобильных */
.account-menu-toggle {
  display: none;
  list-style: none;
  cursor: pointer;
}

.account-menu-toggle::-webkit-details-marker {
  display: none;
}

@media (max-width: 768px) {
  .account-menu {
    padding: 0;
  }

  .account-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    color: #4a4038;
    font-size: 15px;
    font-weight: 700;
  }

  .account-menu-toggle > svg:first-of-type {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #ff6400;
  }

  .account-menu-toggle-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .account-menu-caret {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #b98a5f;
    transition: transform .2s ease;
  }

  .account-menu[open] .account-menu-caret {
    transform: rotate(180deg);
  }

  /* разделитель под тогглом в раскрытом состоянии */
  .account-menu[open] .account-menu-toggle {
    border-bottom: 1px solid #f1e2d3;
  }

  .account-menu ul {
    padding: 6px;
  }

  .account-menu-title {
    margin: 8px 12px 2px;
  }
}

/* --- карточка контента --- */

.account-card {
  margin-bottom: 22px;
  padding: 24px 26px;
  border: 1px solid #f1e2d3;
  border-radius: 24px;
  background: #fff;
}

.account-card:last-child {
  margin-bottom: 0;
}

.account-card > h2,
.account-card > h3 {
  margin: 0 0 14px;
  font-size: 20px;
}

@media (max-width: 760px) {
  .account-card {
    padding: 18px 16px;
  }
}

/* --- заголовок страницы ЛК --- */

.account-title {
  margin: 18px 0 0;
  font-size: 30px;
  line-height: 1.2;
}

@media (max-width: 760px) {
  .account-title {
    font-size: 24px;
  }
}

/* --- уведомления (поверх .review-form-success/.review-form-error) --- */

.account-alert {
  margin: 0 0 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
}

/* --- аватар владельца --- */

.account-owner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.account-owner-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffab19, #ff6400);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.account-owner-name {
  font-size: 19px;
  font-weight: 800;
  color: #231f20;
}

.account-owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.account-owner-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #ffd9b8;
  border-radius: 12px;
  background: #fff4ea;
  color: #e05a00;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease;
}

.account-owner-actions a svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.account-owner-actions a:hover {
  background: #ffe4d1;
}

/* --- галерея дашборда (замена fotorama) --- */

.account-gallery {
  margin: 0 0 20px;
}

.account-gallery-main {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #f4ede4;
}

.account-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.account-gallery-thumbs button {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.account-gallery-thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-gallery-thumbs button.is-active {
  border-color: #ff6400;
}

/* --- таблица (породы/цены, операции, отзывы) --- */

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.account-table th {
  padding: 0 12px 10px 0;
  color: #b3a497;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.account-table td {
  padding: 12px 12px 12px 0;
  border-top: 1px dashed #f1dfd0;
  color: #3d3940;
  vertical-align: top;
}

.account-table tr:first-child td {
  border-top: 0;
}

/* статусные метки в таблицах */
.account-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #f4f8ed;
  color: #566f35;
}

.account-status.is-wait {
  background: #fff4ea;
  color: #e05a00;
}

.account-status.is-off {
  background: #f3efe9;
  color: #8a7a6e;
}

/* --- списки контактов/условий/услуг на дашборде --- */

.account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.account-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #f1dfd0;
}

.account-list li:last-child {
  border-bottom: 0;
}

.account-list li.head {
  color: #8a7a6e;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 0;
}

.account-list li.head + li {
  border-top: 0;
  padding-top: 0;
}

.account-list a {
  color: #ff6400;
  text-decoration: none;
}

.account-list a:hover {
  text-decoration: underline;
}

/* условия содержания — чипы */
.account-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-chips li {
  padding: 7px 14px;
  border: 1px solid #eee2d8;
  border-radius: 999px;
  background: #fffdfb;
  color: #6b5c4e;
  font-size: 14px;
  font-weight: 600;
}

/* услуги — строка с точечным лидером */
.account-services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-services li {
  padding: 12px 0;
  border-bottom: 1px dashed #f1dfd0;
}

.account-services li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-services .svc-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #231f20;
  font-size: 15.5px;
  font-weight: 700;
}

.account-services .svc-fill {
  flex: 1;
  border-bottom: 2px dotted #e4d5c6;
  transform: translateY(-3px);
}

.account-services .svc-price {
  color: #ff6400;
  font-weight: 800;
  white-space: nowrap;
}

.account-services .svc-desc {
  margin: 5px 0 0;
  color: #8a7a6e;
  font-size: 14px;
  line-height: 1.5;
}

/* --- формы ЛК (login/register/forgot) --- */

.account-auth {
  max-width: 560px;
  margin: 22px auto 0;
  padding: 28px 30px;
  border: 1px solid #f1e2d3;
  border-radius: 24px;
  background: #fff;
  font-size: 16px;
  color: #3d3940;
}

/* вводный текст формы — полноценный абзац, а не серая подпись */
.account-auth .account-empty {
  color: #3d3940;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .account-auth {
    padding: 20px 16px;
  }
}

.account-auth .review-form-field {
  margin-bottom: 14px;
}

.account-auth input[type="text"],
.account-auth input[type="email"],
.account-auth input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #eee6de;
  border-radius: 14px;
  background: #fffdfb;
  font: inherit;
  font-size: 16px;
}

.account-auth input:focus {
  outline: 0;
  border-color: #ffc49a;
  box-shadow: 0 0 0 3px #fff1e6;
}

.account-auth input::placeholder,
.account-auth textarea::placeholder {
  color: #a89a8c;
}

.account-auth .review-form-hint {
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 13px;
}

.account-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #554a43;
}

.account-auth-check input {
  margin-top: 3px;
}

/* текст согласия — рядом с чекбоксом (занимает остаток строки и переносит
   внутри себя слова), а не под ним */
.account-auth-check > span:first-of-type {
  flex: 1 1 0;
  min-width: 0;
}

/* иконка ошибки перед текстом подсказки под полем (register/login/forgot) */
.account-auth .review-form-hint {
  position: relative;
  padding-left: 21px;
}

.account-auth .review-form-hint::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* верхний алерт «Есть ошибки при заполнении формы!» — тоже с иконкой */
.review-form-error.account-alert::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* алерт успеха (register-ok, confirm-ok и др.) — зелёная галочка в кружке */
.review-form-success.account-alert::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566f35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ошибка согласия: отдельной строкой под чекбоксом (wrap + flex-basis:100%) */
.account-auth-check {
  flex-wrap: wrap;
}

.account-auth-check .review-form-hint {
  flex-basis: 100%;
  margin: 2px 0 0;
}

.account-auth-check a,
.account-auth-links a {
  color: #ff6400;
  text-decoration: none;
}

.account-auth-check a:hover,
.account-auth-links a:hover {
  text-decoration: underline;
}

.account-auth-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* мобильная: кнопка во всю ширину */
@media (max-width: 640px) {
  .account-auth-actions .btn {
    width: 100%;
  }
}

.account-auth-links {
  margin: 16px 0 0;
  color: #554a43;
  font-size: 15.5px;
  line-height: 1.6;
}

.account-auth-links a {
  color: #ff6400;
  text-decoration: none;
}

.account-auth-links a:hover {
  text-decoration: underline;
}

/* кнопка-CTA-плашка (дашборд: «получить доступ») */
.account-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px dashed #ffd9b8;
  border-radius: 14px;
  background: #fff4ea;
  color: #e05a00;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.account-cta:hover {
  background: #ffe4d1;
}

.account-cta svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.account-empty {
  margin: 0;
  color: #b3a497;
  font-size: 15px;
}

/* пустое состояние раздела: иконка + заголовок + подпись */
.account-empty-state {
  padding: 44px 24px;
  border: 1px dashed #f1e2d3;
  border-radius: 18px;
  background: #fffdfb;
  text-align: center;
}

.account-empty-state .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fff4ea;
  color: #ff941f;
}

.account-empty-state .ico svg {
  width: 32px;
  height: 32px;
}

.account-empty-state .tt {
  margin: 0 0 6px;
  color: #231f20;
  font-size: 17px;
  font-weight: 800;
}

.account-empty-state p:not(.tt) {
  margin: 0;
  color: #8a7a6e;
  font-size: 15px;
  line-height: 1.5;
}

/* прайс-лист «Породы и цены» */
.account-pricelist .pl-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed #f1dfd0;
}

.account-pricelist .pl-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-pricelist .pl-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #231f20;
  font-size: 15.5px;
  font-weight: 600;
}

.account-pricelist .pl-fill {
  flex: 1;
  min-width: 20px;
  border-bottom: 2px dotted #e4d5c6;
  transform: translateY(-3px);
}

.account-pricelist .pl-price {
  color: #ff6400;
  font-weight: 800;
  white-space: nowrap;
}

.account-pricelist .pl-price.is-empty {
  color: #b3a497;
  font-weight: 500;
}

/* контакты с иконками */
.account-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #f1dfd0;
  color: #3d3940;
  font-size: 15px;
}

.account-contact li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-contact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #b98a5f;
}

.account-contact .cl {
  flex: 0 0 88px;
  padding-top: 1px;
  color: #8a7a6e;
  font-size: 13.5px;
  font-weight: 700;
}

.account-contact .cv {
  min-width: 0;
  word-break: break-word;
}

.account-contact a {
  color: #ff6400;
  text-decoration: none;
}

.account-contact a:hover {
  text-decoration: underline;
}

/* условия содержания — плитки с иконками (как на странице питомника) */
.account-cond {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.account-cond-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #eee2d8;
  border-radius: 14px;
  background: #fffdfb;
}

.account-cond-item img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.account-cond-item strong {
  display: block;
  color: #231f20;
  font-size: 14px;
}

.account-cond-item span {
  display: block;
  margin-top: 2px;
  color: #8a7a6e;
  font-size: 12.5px;
  line-height: 1.35;
}

/* ===== Формы ЛК (dec-add/dec-edit, pitomnik и др.) ===== */
/* Имена классов сохранены со старой версии (form-group2, section-header,
   progress, img-list) — старый css больше не подключается, стили здесь. */

.account-form {
  padding: 24px 26px;
  border: 1px solid #f1e2d3;
  border-radius: 24px;
  background: #fff;
}

@media (max-width: 760px) {
  .account-form {
    padding: 18px 14px;
  }
}

/* нумерованные секции формы */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 16px;
}

.section-header:first-child {
  margin-top: 0;
}

.section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffab19, #ff6400);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.section-title {
  margin: 0;
  font-size: 19px;
  color: #231f20;
}

/* строка поля */
.form-group2 {
  margin-bottom: 16px;
}

.form-group2 label,
.account-form label {
  display: block;
  margin: 0 0 7px;
  color: #6b5c4e;
  font-size: 14px;
  font-weight: 700;
}

label.required::after {
  content: " *";
  color: #ff6400;
}

.form-group2 .help-text {
  margin: 0 0 8px;
  color: #b3a497;
  font-size: 13px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #eee6de;
  border-radius: 14px;
  background: #fffdfb;
  color: #231f20;
  font: inherit;
  font-size: 16px;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b98a5f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.form-control:focus {
  outline: 0;
  border-color: #ffc49a;
  box-shadow: 0 0 0 3px #fff1e6;
}

.form-control::placeholder {
  color: #c9bcae;
}

/* поле цены с символом валюты справа */
.input-rub {
  position: relative;
  display: block;
}

.input-rub.right::after {
  content: "₽";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b98a5f;
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
}

.input-rub.right .form-control {
  padding-right: 38px;
}

/* подсказка/ошибка под полем */
.help-block {
  margin: 6px 0 0;
}

.help-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-block li {
  color: #c0392b;
  font-size: 13px;
}

/* кнопки форм */
.account-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

/* узкие экраны: кнопки в колонку на всю ширину — длинные подписи
   («Пристроен — снять с публикации») не ломаются и не переносятся всреднюю */
@media (max-width: 760px) {
  .account-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .account-actions .btn {
    width: 100%;
  }
}

/* самые узкие: компактнее паддинги и шрифт, чтобы подписи влезали в строку */
@media (max-width: 480px) {
  .account-actions .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

.account-actions .btn.primary,
.btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff8b15, #ff6400);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.account-actions .btn.primary svg,
.btn.primary svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.account-actions .btn.primary:hover,
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255, 100, 0, 0.25);
}

.btn.primary[disabled],
.btn.primary.disabled-btn {
  background: #d8cfc6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid #ffd9b8;
  border-radius: 14px;
  background: #fff;
  color: #e05a00;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn.ghost svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.btn.ghost:hover {
  background: #fff4ea;
  border-color: #ffc9a0;
}

.btn.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff5f52, #e03e31);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.btn.danger svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.btn.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(224, 62, 49, 0.3);
}

/* ===== загрузка фотографий ===== */

#js-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.account-file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  border: 2px dashed #ffd9b8;
  border-radius: 16px;
  background: #fff9f4;
  color: #e05a00;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}

.account-file:hover {
  background: #fff4ea;
  border-color: #ffb27a;
}

.account-file svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* .account-file — это label внутри .form-group2, и общее правило
   .form-group2 label { display:block } (0,1,1) перебивает flex базового
   .account-file (0,1,0) — возвращаем строку «иконка + текст»;
   display:flex (не inline-flex) — зона на всю ширину формы */
label.account-file {
  display: flex;
}

/* текст зоны загрузки: строки выровнены по левому краю, иконка — по центру блока */
.account-file span {
  display: block;
  text-align: left;
  line-height: 1.3;
}

/* прогресс загрузки фото: карточка со строкой статуса и полосатым баром */
.progress {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid #ffe1c4;
  border-radius: 14px;
  background: #fff9f2;
  overflow: hidden;
}

/* строка «Загрузка фото… … %»: подпись слева, процент справа */
.progress-value {
  order: 1;
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e05a00;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.progress-value::before {
  content: "Загрузка фото…";
  color: #6b5c4e;
  font-weight: 700;
}

/* сам бар — тонкий трек с оранжевой заливкой и бегущими полосками */
.progress-track {
  order: 2;
  height: 10px;
  border-radius: 999px;
  background: #f4e8da;
  overflow: hidden;
}

.progress-bar {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffab19, #ff6400);
  transition: width .2s ease;
  overflow: hidden;
}

.progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%);
  background-size: 22px 22px;
  animation: progress-stripes .7s linear infinite;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 22px 0; }
}

/* мобильная версия: кнопки в подвале карточки объявления — в колонку
   на всю ширину, «Удалить» не прижата вправо */
@media (max-width: 640px) {
  .account-dec-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .account-dec-foot a {
    width: 100%;
    justify-content: center;
  }

  .account-dec-foot a.is-del {
    margin-left: 0;
  }
}

/* мобильная версия: таблица операций — строки превращаются в карточки
   с подписями полей (thead скрывается), таблица больше не уезжает за экран.
   ВАЖНО: display:block не должен задевать tr:first-child td своей
   специфичностью (0,2,2) — иначе первая строка не становится flex
   и её содержимое прижимается влево; border-top гасим отдельным правилом */
@media (max-width: 640px) {
  .account-table-wrap {
    padding: 14px;
  }

  .account-table thead {
    display: none;
  }

  .account-table,
  .account-table tbody,
  .account-table tr,
  .account-table td {
    display: block;
    width: 100%;
  }

  .account-table td,
  .account-table tr:first-child td {
    border-top: 0;
  }

  .account-table tr {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #eee2d8;
    border-radius: 12px;
    background: #fffdfb;
  }

  .account-table tr:last-child {
    margin-bottom: 0;
  }

  /* подпись поля слева, значение (текст/кнопка) — справа */
  .account-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    color: #3d3940;
    font-size: 14px;
  }

  .account-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: #b3a497;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

.img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.img-item {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  border: 1px solid #f1e2d3;
}

.img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

/* Кнопка удаления: бейдж-крест за правым верхним углом плитки — не
   перекрывает фото, видна на любом фоне. Без transform на hover —
   иначе бейдж дёргается; расширенная зона ::after держит курсор */
.img-item a {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #f3d2cb;
  color: #e03e31;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* невидимая зона вокруг кнопки: курсор не «соскальзывает» с края */
.img-item a::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}

.img-item a::before {
  content: "×";
}

.img-item a:hover {
  background: #e03e31;
  border-color: #e03e31;
  color: #fff;
  box-shadow: 0 5px 14px rgba(224, 62, 49, 0.4);
}

.img-item a:active {
  background: #c62d21;
  border-color: #c62d21;
}

/* ===== объявления ЛК: карточки как в публичном списке /koshki/ads/ ===== */
/* сетка: авто-колонки под ширину контентной колонки ЛК (в публичном каталоге
   фиксированные брейкпоинты по вьюпорту, здесь колонка уже) */
.account-cards.kennel-cards {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 14px;
}

.account-cards .kennel-card {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* подвал карточки: статус + управление (как плашка питомника в .ads-card-pit) */
.account-dec-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: auto -14px -16px;
  padding: 12px 16px;
  border-top: 1px solid #eee2d8;
  background: #fffdfb;
}

/* действия-плашки с иконками: редактировать / просмотр / удалить */
.account-dec-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #ffd9b8;
  border-radius: 10px;
  background: #fff4ea;
  color: #e05a00;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

.account-dec-foot a svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.account-dec-foot a:hover {
  background: #ffe4d1;
  border-color: #ffc9a0;
  text-decoration: none;
}

.account-dec-foot a.is-del {
  margin-left: auto;
  border-color: #ffd2ce;
  background: #fff1f0;
  color: #c0392b;
}

.account-dec-foot a.is-del:hover {
  background: #ffe0dd;
  border-color: #f5b8b1;
  color: #a52f24;
}

/* бейдж «Не опубликовано» на фото (PAUSE) */
.account-badge-pause {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 244, 234, 0.95);
  color: #e05a00;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

/* ===== карточка объявления в реестре ЛК (старый вид, dec-delete) ===== */

.account-dec-card {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid #f1e2d3;
  border-radius: 18px;
  background: #fff;
  transition: box-shadow .15s ease;
}

.account-dec-card:hover {
  box-shadow: 0 8px 22px rgba(102, 85, 68, 0.12);
}

.account-dec-photo {
  position: relative;
  flex: 0 0 150px;
}

.account-dec-photo img {
  display: block;
  width: 150px;
  height: 112px;
  object-fit: cover;
  border-radius: 12px;
  background: #f4ede4;
}

.account-dec-photo .account-dec-cnt {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #6b5c4e;
  font-size: 12px;
  font-weight: 700;
}

.account-dec-body {
  flex: 1;
  min-width: 0;
}

.account-dec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.account-dec-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.account-dec-title a {
  color: #231f20;
  text-decoration: none;
}

.account-dec-title a:hover {
  color: #ff6400;
}

.account-dec-price {
  color: #ff6400;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.account-dec-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 5px 0 10px;
  color: #6b5c4e;
  font-size: 14px;
  line-height: 1.5;
}

.account-dec-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 5px 16px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff9f4;
}

.account-dec-meta .m {
  display: flex;
  gap: 5px;
  color: #3d3940;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
  word-break: break-word;
}

.account-dec-meta .m b {
  flex-shrink: 0;
  color: #b3a497;
  font-weight: 600;
}

.account-dec-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed #f1dfd0;
}

.account-dec-actions a {
  padding: 6px 13px;
  border: 1px solid #ffd9b8;
  border-radius: 10px;
  background: #fff4ea;
  color: #e05a00;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.account-dec-actions a:hover {
  background: #ffe4d1;
}

.account-dec-actions a.is-del {
  border-color: #ffd2ce;
  background: #fff1f0;
  color: #c0392b;
}

.account-dec-actions a.is-del:hover {
  background: #ffe0dd;
}

.account-dec-remove {
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .account-dec-card {
    flex-direction: column;
  }

  .account-dec-photo img {
    width: 100%;
    height: 170px;
  }
}

/* ===== тарифы подписки ===== */

.plans {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.plan-option {
  flex: 1;
  padding: 18px;
  border: 2px solid #eee2d8;
  border-radius: 16px;
  background: #fffdfb;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.plan-option:hover {
  border-color: #ffb27a;
}

.plan-option.selected {
  border-color: #ff6400;
  background: #fff4ea;
}

.plan-name {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #231f20;
}

.plan-price {
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 800;
  color: #ff6400;
}

.plan-savings {
  color: #8a7a6e;
  font-size: 13px;
  font-weight: 600;
}

.summary {
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff9f4;
}

.summary-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #231f20;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #6b5c4e;
  font-size: 15px;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e4d5c6;
  font-size: 17px;
  font-weight: 800;
  color: #231f20;
}

@media (max-width: 640px) {
  .plans {
    flex-direction: column;
  }
}

/* ===== звёзды рейтинга (отзывы) ===== */

.account-stars {
  color: #ff941f;
  font-size: 15px;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* обёртка широких таблиц */
.account-table-wrap {
  overflow-x: auto;
  padding: 20px 22px;
  border: 1px solid #f1e2d3;
  border-radius: 18px;
  background: #fff;
}

/* кликабельные строки (диалоги поддержки) */
.account-table tbody tr.is-click {
  cursor: pointer;
}

.account-table tbody tr.is-click:hover {
  background: #fff9f4;
}

.account-table tbody tr.is-active {
  background: #fff4ea;
}

.account-inline-form {
  display: inline-block;
  margin: 0;
}

/* ===== переписка с поддержкой ===== */

/* список диалогов */
.account-conv-list {
  margin-bottom: 20px;
  border: 1px solid #f1e2d3;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.account-conv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid #f4ede4;
  cursor: pointer;
  transition: background .15s ease;
}

.account-conv:first-child {
  border-top: 0;
}

.account-conv:hover {
  background: #fff9f4;
}

.account-conv.is-active {
  background: #fff4ea;
}

.account-conv-body {
  flex: 1;
  min-width: 0;
}

.account-conv-subject {
  overflow: hidden;
  color: #231f20;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-conv.is-active .account-conv-subject {
  color: #ff6400;
}

.account-conv-date {
  margin-top: 3px;
  color: #b3a497;
  font-size: 12.5px;
}

.account-conv-count {
  flex-shrink: 0;
  color: #8a7a6e;
  font-size: 13px;
  white-space: nowrap;
}

.account-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: #ff6400;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.account-back:hover {
  text-decoration: underline;
}

/* тред сообщений */
.account-msg-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #f1e2d3;
  border-radius: 18px;
  background: #fff9f4;
}

.account-msg {
  max-width: 85%;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eee2d8;
}

.account-msg.is-admin {
  align-self: flex-start;
  background: #f0f7e6;
  border-color: #cfe3b8;
}

.account-msg.is-user {
  align-self: flex-end;
}

.account-msg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.account-msg-who {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.account-msg-who.is-admin {
  background: #e4f0d5;
  color: #4a5a33;
}

.account-msg-who.is-user {
  background: #fff4ea;
  color: #e05a00;
}

.account-msg-date {
  color: #b3a497;
  font-size: 12px;
}

.account-msg-text {
  color: #3d3940;
  font-size: 15px;
  line-height: 1.55;
  word-wrap: break-word;
}

.account-msg-text a {
  color: #ff6400;
}

/* иконка диалога и стрелка-переход в списке */
.account-conv-ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff4ea;
  color: #ff6400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-conv-ico svg {
  width: 18px;
  height: 18px;
}

.account-conv.is-active .account-conv-ico {
  background: #ff6400;
  color: #fff;
}

.account-conv-arrow {
  flex: 0 0 auto;
  color: #d8c9bd;
  font-size: 22px;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

.account-conv:hover .account-conv-arrow {
  color: #ff6400;
  transform: translateX(2px);
}

/* заголовок темы диалога */
.account-msg-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 20px;
}

.account-msg-title svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #ff6400;
}

/* страница запроса доступа: шаги с иконками */
.access-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #6b5c4e;
  line-height: 1.5;
}

.access-step b {
  color: #231f20;
}

.access-step svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  color: #ff6400;
}

.access-step + .access-step {
  margin-top: 12px;
}

/* /account/decs/ — питомник ещё не добавлен: заголовок карточки
   (строки объяснений используют формат .access-step как на /account/access/) */
.decs-nokennel .dnk-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #231f20;
}

.decs-nokennel .dnk-title svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #ff6400;
}

.decs-nokennel .account-actions {
  margin-top: 18px;
}

/* ===== оффер владельцу питомника на /account/ (питомник не привязан) ===== */
.account-hero-offer {
  position: relative;
  overflow: hidden;
  padding: 34px 34px 30px;
  border: 1px solid #ffe1c4;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff4ea 0%, #fffdfb 55%, #fff9f2 100%);
}

/* декоративные лапки: большая градиентная справа сверху, маленькая слева снизу */
.account-hero-offer .aho-paw {
  position: absolute;
  pointer-events: none;
}

.account-hero-offer .aho-paw--big {
  top: -34px;
  right: -26px;
  width: 250px;
  height: 250px;
  transform: rotate(12deg);
}

.account-hero-offer .aho-paw--small {
  bottom: -26px;
  left: -30px;
  width: 140px;
  height: 140px;
  transform: rotate(-22deg);
}

.account-hero-offer .aho-title {
  position: relative;
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: #231f20;
}

.account-hero-offer .aho-text {
  position: relative;
  margin: 0 0 18px;
  max-width: 560px;
  color: #6b5c4e;
  font-size: 15.5px;
  line-height: 1.55;
}

.account-hero-offer .aho-benefits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.account-hero-offer .aho-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #3d3940;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.account-hero-offer .aho-benefits li svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 2px;
  color: #ff6400;
}

.account-hero-offer .aho-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.account-hero-offer .aho-actions .btn.primary svg,
.account-hero-offer .aho-actions .btn.ghost svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.account-hero-offer .aho-note {
  position: relative;
  margin: 16px 0 0;
  color: #8a7a6e;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .account-hero-offer {
    padding: 24px 20px 22px;
  }

  .account-hero-offer .aho-title {
    font-size: 21px;
  }

  .account-hero-offer .aho-benefits {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .account-hero-offer .aho-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .account-hero-offer .aho-actions .btn {
    width: 100%;
  }
}