/* ════════════════════════════════════════════════════════════════════════
   nk-account.css — сторінки кабінету: «Завантаження» (список товарів) і
   «Завантаження товару» (формати ебука / аудіо). Токени BrandBook як у nk-home.css:
   #111/#444/#666/#999, лінії #e5e7eb, акцент #ee2c2c.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Список завантажень (згруповано по товарах) ─────────────────────────── */
.nk-dl-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.nk-dl-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.nk-dl-item__cover {
  flex: 0 0 auto;
}

.nk-dl-item__cover img {
  display: block;
  width: 60px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.nk-dl-item__info {
  flex: 1 1 auto;
  min-width: 0;
}

.nk-dl-item__name {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: #111;
  margin-bottom: 6px;
}

.nk-dl-item__name:hover {
  color: #ee2c2c;
}

.nk-dl-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.nk-dl-item__date {
  font-size: 13px;
  color: #999;
}

.nk-dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

.nk-dl-badge--ebook {
  background: #eef4ff;
  color: #2b5fb8;
}

.nk-dl-badge--audio {
  background: #f3ecff;
  color: #6b3fb8;
}

.nk-dl-badge--app {
  background: #fff1f0;
  color: #ee2c2c;
}

.nk-dl-item__actions {
  flex: 0 0 auto;
}

/* ─── Сторінка завантажень товару ────────────────────────────────────────── */
.nk-dlp-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.nk-dlp-head__cover {
  width: 80px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nk-dlp-head__info .page-title {
  margin: 0 0 8px;
}

.nk-dlp-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin: 22px 0 12px;
}

.nk-dlp-files {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nk-dlp-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  padding: 14px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
}

.nk-dlp-file:hover {
  border-color: #ee2c2c;
  text-decoration: none;
}

.nk-dlp-file__format {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}

.nk-dlp-file__size {
  font-size: 13px;
  color: #999;
}

.nk-dlp-file__action {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ee2c2c;
}

.nk-dlp-appnote,
.nk-dlp-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
  background: #fafafa;
  margin-bottom: 8px;
}

.nk-dlp-appnote p,
.nk-dlp-soon p {
  margin: 0;
  color: #444;
}

/* ─── Аудіокнига: ZIP + список розділів ─────────────────────────────────────── */
.nk-dlp-audio__loading {
  padding: 14px 0;
  color: #999;
  font-size: 14px;
}

.nk-dlp-audio__zip {
  margin-bottom: 16px;
}

.nk-dlp-audio__chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
}

.nk-dlp-chapter + .nk-dlp-chapter {
  border-top: 1px solid #f0f0f0;
}

.nk-dlp-chapter a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  color: #111;
  text-decoration: none;
  background: #fff;
}

.nk-dlp-chapter a:hover {
  background: #fafafa;
  text-decoration: none;
}

.nk-dlp-chapter__num {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  background: #f3f4f6;
  border-radius: 8px;
}

.nk-dlp-chapter__title {
  flex: 1 1 auto;
  font-size: 15px;
}

.nk-dlp-chapter__action {
  flex: 0 0 auto;
  color: #ee2c2c;
  font-size: 15px;
}

/* ─── Банер застосунку (nk_app_banner) на сторінках завантажень ──────────────
   На головній він темний (#111, nk-home.css); тут — світла версія + відступ
   зверху, щоб не злипався з контентом. Банер рендериться під колонками
   (усередині .container сторінки), тож нейтралізуємо його вкладений .container. */
#account-download .nk-app,
#account-download-product .nk-app {
  margin-top: 48px;
  padding: 40px 0;
  background: #fafafa;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

#account-download .nk-app .container,
#account-download-product .nk-app .container {
  width: auto;
  max-width: none;
  padding: 0 32px;
}

#account-download .nk-app__title,
#account-download-product .nk-app__title {
  color: #111 !important;
}

#account-download .nk-app__desc,
#account-download-product .nk-app__desc,
#account-download .nk-app__features li,
#account-download-product .nk-app__features li {
  color: #444;
}

#account-download .nk-app__eyebrow,
#account-download-product .nk-app__eyebrow,
#account-download .nk-app__screen figcaption,
#account-download-product .nk-app__screen figcaption {
  color: #999;
}

#account-download .nk-app__store,
#account-download-product .nk-app__store {
  background: #111;
  color: #fff;
  border-radius: 8px;
}

#account-download .nk-app__store:hover,
#account-download-product .nk-app__store:hover {
  color: #fff;
}

#account-download .nk-app__store-label strong,
#account-download-product .nk-app__store-label strong {
  color: #fff;
}

#account-download .nk-app__store-label small,
#account-download-product .nk-app__store-label small {
  color: #aaa;
}

#account-download .nk-app__notify,
#account-download-product .nk-app__notify {
  border-top-color: #e5e7eb;
}

#account-download .nk-app__notify-label,
#account-download-product .nk-app__notify-label {
  color: #666;
}

#account-download .nk-app__email,
#account-download-product .nk-app__email {
  background: #fff;
  border-color: #ddd;
  color: #111;
}

#account-download .nk-app__email:focus,
#account-download-product .nk-app__email:focus {
  border-color: #999;
}

#account-download .nk-app__notify-btn,
#account-download-product .nk-app__notify-btn {
  border-color: transparent;
}

#account-download .nk-app__notify-done,
#account-download-product .nk-app__notify-done {
  color: #3d8b3d;
}

/* ─── Мобільна адаптація ─────────────────────────────────────────────────────
   На вузьких екранах картка перебудовується: обкладинка + інфо в рядок, кнопка
   «Всі завантаження» на всю ширину під ними. Явні width:100% потрібні, бо в
   мобільному контексті теми flex-колонка .nk-dl-list інакше схлопується в нуль
   ширини й картки роздуваються за екран. */
@media (max-width: 576px) {
  .nk-dl-list {
    width: 100%;
  }

  .nk-dl-item {
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 12px 14px;
  }

  .nk-dl-item__cover img {
    width: 54px;
    height: 81px;
  }

  .nk-dl-item__info {
    flex: 1 1 0;
    min-width: 0;
  }

  .nk-dl-item__name {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .nk-dl-item__actions {
    flex: 1 1 100%;
    width: 100%;
  }

  .nk-dl-item__actions .btn {
    display: block;
    width: 100%;
    white-space: normal;
  }

  /* Сторінка товару. width:100% обов'язковий на всіх flex-блоках під #content —
     без нього тема на мобілці схлопує їх у нуль ширини (як .nk-dl-list вище),
     і обкладинка/формати/нотатки зникають. */
  .nk-dlp-head {
    width: 100%;
    gap: 14px;
  }

  .nk-dlp-head__cover {
    width: 64px;
    height: 96px;
  }

  .nk-dlp-head__info {
    flex: 1 1 0;
    min-width: 0;
  }

  .nk-dl-item__meta {
    width: 100%;
  }

  .nk-dlp-files {
    width: 100%;
    flex-direction: column;
  }

  .nk-dlp-file {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .nk-dlp-file__action {
    margin-top: 0;
  }

  .nk-dlp-appnote,
  .nk-dlp-soon {
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
  }

  .nk-dlp-audio__zip {
    display: block;
    width: 100%;
    white-space: normal;
  }

  /* Банер застосунку: не давати блоку email-підписки (max-width:460 у nk-home.css)
     та info роздувати вузьку колонку кабінету — інакше сторінка виходить ширшою за
     екран і контент карток обрізається праворуч. */
  #account-download .nk-app,
  #account-download-product .nk-app {
    overflow: hidden;
  }

  #account-download .nk-app .container,
  #account-download-product .nk-app .container {
    padding: 0 16px;
  }

  #account-download .nk-app__info,
  #account-download-product .nk-app__info,
  #account-download .nk-app__notify,
  #account-download-product .nk-app__notify {
    max-width: 100%;
  }

  #account-download .nk-app__notify-row,
  #account-download-product .nk-app__notify-row {
    flex-wrap: wrap;
  }

  #account-download .nk-app__email,
  #account-download-product .nk-app__email {
    min-width: 0;
  }
}