/* SUNDUQ v408 — «Моя реклама»: результаты размещений в кабинете.
   Цвета и радиусы взяты у соседних экранов кабинета (v308/v403/v310),
   чтобы вкладка не выглядела приклеенной. */

.as408List{display:flex;flex-direction:column;gap:12px}

.as408Card{
  padding:14px 16px;
  border:1px solid #22415a;border-radius:14px;background:#10293d;
}
.as408Head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.as408Head h3{margin:0;font-size:16px;overflow-wrap:anywhere}

.as408Status{
  flex:none;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid #2c5877;background:#0b2233;color:#9fc6dd;
}
.as408Status--active{border-color:#2f7d4f;background:#0e2a1c;color:#7fd8a3}
.as408Status--waiting{border-color:#7a6320;background:#2a2310;color:#e3c46a}
.as408Status--moderation{border-color:#7a6320;background:#2a2310;color:#e3c46a}
.as408Status--finished{border-color:#2c5877;background:#0b2233;color:#8fb2c8}
.as408Status--rejected,.as408Status--refunded,.as408Status--cancelled{
  border-color:#7d3040;background:#2a1119;color:#f08fa4}

/* Факты идут парами «подпись — значение» и переносятся на узком экране. */
.as408Facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 12px}
.as408Facts>div{min-width:0}
.as408Facts dt{margin:0;color:#6f96ad;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.as408Facts dd{margin:2px 0 0;color:#eef7ff;font-size:14px;overflow-wrap:anywhere}
.as408Facts--wide{gap:8px 26px;margin-bottom:10px}

/* Три счётчика в ряд. На телефоне остаются в ряд: цифры короткие,
   переносить их в столбец значило бы растянуть карточку впустую. */
.as408Counters{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  padding:10px;border:1px solid #22415a;border-radius:12px;background:#0b2233;
}
.as408Counter{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.as408Counter b{font-size:20px;line-height:1.1;color:#eef7ff;font-variant-numeric:tabular-nums}
.as408Counter span{color:#6f96ad;font-size:11px;text-transform:uppercase;letter-spacing:.05em}

/* Цвет НЕ задаём намеренно: на сайте действует общее правило
   [class*="Price"] — деньги везде зелёные, и стоимость размещения
   должна читаться так же, как суммы в Маркете и в кошельке.
   Своё объявление цвета здесь всё равно проиграло бы ему по каскаду,
   и получилось бы правило, которое выглядит рабочим, но ни на что не влияет. */
.as408Price{margin:10px 0 0;font-size:13px}
.as408Actions{margin-top:12px}

.as408Detail{margin-top:12px}
.as408DetailBox{padding:12px;border:1px solid #22415a;border-radius:12px;background:#0b2233}
.as408Total{margin:0 0 10px;color:#cdeeff;font-size:13px}

/* Таблица по дням прокручивается ВНУТРИ карточки: страница
   горизонтально ехать не должна ни при какой ширине. */
.as408TableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.as408Table{width:100%;border-collapse:collapse;font-size:13px;min-width:320px}
.as408Table th,.as408Table td{padding:8px 10px;text-align:right;white-space:nowrap}
.as408Table th:first-child,.as408Table td:first-child{text-align:left}
.as408Table thead th{
  color:#6f96ad;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid #22415a;
}
.as408Table tbody td{border-bottom:1px solid #16334a;color:#eef7ff;font-variant-numeric:tabular-nums}
.as408Table tbody tr:last-child td{border-bottom:0}
.as408NoDays{color:#8fb2c8;text-align:left!important}

@media (max-width:600px){
  .as408Card{padding:12px 13px}
  .as408Head h3{font-size:15px}
  .as408Facts{gap:6px 16px}
  .as408Counter b{font-size:18px}
  .as408Counters{padding:9px;gap:6px}
}