/* ═══════════════════════════════════════════════════════════════
   Блок «Портрет личности / Западная астрология» на таро-страницах.
   Светлая «бумажная» карточка на тёмном фоне раздела (#0d1029),
   золотая рамка в эстетике таро. Внутри живут lp-widget (свои
   светлые токены) и астро-вкладка.
   ═══════════════════════════════════════════════════════════════ */

.tpa-section { margin: 40px auto; }

/* Обёртка = flex-колонка. Форма (беж), тумблер и результат (белый) —
   визуально независимые карточки. Порядок задаётся order, потому что
   .lp-widget__form и .lp-widget__result лежат внутри одного <section
   class="lp-widget">, а тумблер и результаты — его сиблинги. Через
   display:contents дети .lp-widget становятся flex-items родителя. */
.tpa-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.tpa-card .lp-widget { display: contents; }
.tpa-card .lp-widget__head { display: none; }

/* Шапка по левому краю, заголовок — в масштабе остальных h2 страницы
   (Forum 7.6rem, как «Кратко о карте»); по фидбеку владельца 2026-08-14
   центрированный мелкий вариант убран. */
.tpa-head { order: 1; text-align: left; max-width: none; margin: 0 0 4px; }
/* Селекторы с .tpa-section: страничные правила таро (.section h2 { color:#fbf8ec },
   .bg-shell h2 { font-size:7.6rem }) специфичнее одиночного класса — перебиваем. */
/* Шапка стоит на тёмном фоне таро-раздела (#0d1029) — красим в светлое. */
.tpa-section .tpa-title,
.bg-shell .tpa-section .tpa-title {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: 7.6rem;
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: #fbf8ec;
  margin: 0 0 24px;
  max-width: none;
}
.tpa-lead {
  font: 400 15.5px/1.6 'Manrope', sans-serif;
  color: rgba(251, 248, 236, 0.78);
  margin: 0;
}

/* ── Форма (беж-карточка вокруг lp-widget__form) ── */
.tpa-card .lp-widget__form {
  order: 2;
  background: #fcf7ed;
  border: 1px solid rgba(204, 166, 86, 0.55);
  border-radius: 22px;
  padding: 28px 32px 30px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
  margin: 0;
}

/* ── Тумблер (появляется после первого расчёта, слева над результатом) ── */
.tpa-tabs[hidden] { display: none; }
.tpa-tabs {
  order: 3;
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  width: fit-content;
  background: #f0e7d2;
  border: 1px solid rgba(204, 166, 86, 0.5);
  border-radius: 999px;
  padding: 4px;
}
.tpa-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 10px 22px;
  font: 600 14px/1 'Manrope', sans-serif;
  color: #6b6247;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.tpa-tab:hover { color: #2a2b41; }
.tpa-tab.is-active {
  background: #cca656;
  color: #fff;
}

/* lp-widget внутри блока: свой заголовок мы уже дали выше */
.tpa-card .lp-widget { margin: 0; }

/* Сетка формы с полем «Город» — 4×2 вместо родной 3+4 (lichnost-portrait.css:30-33):
   День · Месяц · Год · Город / Час · Минута · Пол · Кнопка */
.tpa-card .lp-widget__grid .lp-field:nth-of-type(-n+3),
.tpa-card .lp-widget__grid .lp-field:nth-of-type(n+4) { grid-column: span 3; }
.tpa-card .lp-widget__grid .lp-widget__submit { grid-column: span 3; }
@media (max-width: 900px) {
  .tpa-card .lp-widget__grid .lp-field:nth-of-type(-n+3),
  .tpa-card .lp-widget__grid .lp-field:nth-of-type(n+4) { grid-column: span 1; }
  .tpa-card .lp-widget__grid .lp-widget__submit { grid-column: 1 / -1; }
}

/* ── Поле «Город» (JS переносит его в .lp-widget__grid после «Год») ── */
.tpa-city-field[hidden] { display: none; }
.tpa-city-field { position: relative; }
/* 1-в-1 повторяем стили select из lichnost-portrait.css:49 (padding, border,
   font, радиус) — только так гарантируется одинаковая высота и позиция
   базовой линии текста с соседними День/Месяц/Год. */
.tpa-city-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--lp-line, #e6dfc9);
  border-radius: 10px;
  background: #fff;
  font: 400 15px/1.3 var(--lp-body, 'Manrope', sans-serif);
  color: var(--lp-ink, #2a2b41);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tpa-city-input::placeholder { color: var(--lp-muted, #a39a7a); opacity: 1; }
.tpa-city-input:focus {
  border-color: var(--lp-accent, #cca656);
  box-shadow: 0 0 0 3px rgba(204, 166, 86, 0.18);
}
.tpa-city-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e3d9bd;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 25, 50, 0.14);
  max-height: 260px;
  overflow-y: auto;
}
.tpa-city-list li {
  padding: 9px 12px;
  border-radius: 8px;
  font: 500 14px/1.3 'Manrope', sans-serif;
  color: #2a2b41;
  cursor: pointer;
}
.tpa-city-list li:hover,
.tpa-city-list li.is-active { background: #f7efd8; }
.tpa-city-list li .tpa-city-region {
  display: block;
  font-size: 12px;
  color: #9a927b;
}
.tpa-city-list li.is-empty { color: #9a927b; cursor: default; line-height: 1.45; }
.tpa-city-list li.is-searching { animation: tpaCitySearch 1.1s ease-in-out infinite; }
@keyframes tpaCitySearch { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.tpa-city-list .ct-support { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

.tpa-astro-note {
  margin: 14px 0 0;
  font: 400 13px/1.5 'Manrope', sans-serif;
  color: #8a8368;
  text-align: center;
}
.tpa-astro-error {
  margin: 12px 0 0;
  font: 600 14px/1.4 'Manrope', sans-serif;
  color: #a33c2a;
  text-align: center;
}

/* ── Результат: белые карточки (отдельно от беж-формы) ── */
.tpa-card .lp-widget__result:not([hidden]) {
  order: 4;
  background: #fff;
  border: 1px solid #ece3cb;
  border-radius: 22px;
  padding: 28px 32px 30px;
  margin: 0;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.14);
}

/* ── Выдача: астро-результат (белая карточка) ── */
.tpa-astro-result[hidden] { display: none; }
.tpa-astro-result {
  order: 4;
  background: #fff;
  border: 1px solid #ece3cb;
  border-radius: 22px;
  padding: 28px 32px 30px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.14);
  margin: 0;
}
.tpa-bigthree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.tpa-b3 {
  background: #fff;
  border: 1px solid #ece3cb;
  border-radius: 16px;
  padding: 20px 18px;
  text-align: center;
}
.tpa-b3__glyph { font-size: 26px; line-height: 1; color: #cc9e4a; display: block; margin-bottom: 8px; }
.tpa-b3__label {
  font: 700 12px/1 'Manrope', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8368;
  display: block;
  margin-bottom: 6px;
}
.tpa-b3__value {
  font-family: 'Forum', serif;
  font-size: 24px;
  line-height: 1.15;
  color: #2a2b41;
}
.tpa-b3__deg { display: block; margin-top: 4px; font: 600 12.5px/1 'Manrope', sans-serif; color: #9aa1ad; }
.tpa-b3--loading {
  grid-column: 1 / -1;
  font: 500 15px/1.4 'Manrope', sans-serif;
  color: #8a8368;
  padding: 26px 18px;
}

/* Сводка chart-summary (psw-chart) рисует свои стили сама — только отступ */
.tpa-summary { margin-top: 6px; }

/* ── Кнопка 3D ── */
.tpa-3d-btn[hidden] { display: none; }
.tpa-3d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px auto 0;
  padding: 14px 28px;
  background: #2a2b41;
  color: #fbd890;
  border: 1px solid rgba(204, 166, 86, 0.6);
  border-radius: 999px;
  font: 600 15px/1 'Manrope', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.tpa-3d-btn:hover { background: #1c1d30; transform: translateY(-1px); }
.tpa-3d-btn__glyph { display: flex; color: #cca656; }

/* ── Лайтбокс 3D (свой, без зависимости от natal CSS) ── */
.tpa-3d-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 10, 26, 0.96);
  display: flex;
}
.tpa-3d-lightbox iframe { flex: 1; border: 0; width: 100%; height: 100%; }
.tpa-3d-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(20, 22, 44, 0.8);
  color: #fff;
  cursor: pointer;
}
.tpa-3d-lightbox__close:hover { background: rgba(42, 43, 65, 0.95); }
.tpa-3d-lightbox__close svg { width: 20px; height: 20px; }
body.tpa-3d-open { overflow: hidden; }

/* ── Слот love-promo (общий баннер флагманского калькулятора) ── */
.tpa-love-slot[hidden] { display: none; }
.tpa-love-slot { order: 5; }
.tpa-love-slot .love-promo-sec { margin: 0; }
/* Перебиваем таро-правило .bg-shell a { color: inherit } — иначе на кнопке
   тёмный текст сливается с белым фоном. */
.tpa-love-slot a.love-promo__cta { color: #4d0e1d; }

/* ── Баннер полной натальной (остался мой кастомный) ── */
.tpa-natal-banner[hidden] { display: none; }
.tpa-natal-banner {
  order: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  padding: 20px 24px;
  border-radius: 16px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
  background: linear-gradient(135deg, #1d2447, #10142e);
  border: 1px solid rgba(204, 166, 86, 0.4);
}
.tpa-natal-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 25, 50, 0.16); }
.tpa-natal-banner__title {
  display: block;
  font-family: 'Forum', serif;
  font-size: 20px;
  color: #fff;
  margin-bottom: 4px;
}
.tpa-natal-banner__text {
  display: block;
  font: 400 13.5px/1.5 'Manrope', sans-serif;
  color: rgba(255, 255, 255, 0.75);
}
.tpa-natal-banner__arrow { margin-left: auto; color: #fbd890; font-size: 22px; flex: 0 0 auto; }

/* ── Адаптив ── */
@media (max-width: 900px) {
  .tpa-card .lp-widget__form { padding: 22px 20px 24px; border-radius: 18px; }
  .tpa-card .lp-widget__result:not([hidden]),
  .tpa-astro-result { padding: 22px 20px 24px; border-radius: 18px; }
  /* Масштаб h2 страницы на этой ширине (5.9rem), не мелкий врезной */
  .tpa-section .tpa-title,
  .bg-shell .tpa-section .tpa-title { font-size: 5.9rem; }
  .tpa-bigthree { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .tpa-card .lp-widget__form { padding: 18px 14px 20px; border-radius: 16px; }
  .tpa-card .lp-widget__result:not([hidden]),
  .tpa-astro-result { padding: 18px 14px 20px; border-radius: 16px; }
  /* Масштаб h2 страницы на мобиле (4.2rem), как у «Кратко о карте» */
  .tpa-section .tpa-title,
  .bg-shell .tpa-section .tpa-title { font-size: 4.2rem; line-height: 0.95; }
  .tpa-tabs { width: 100%; }
  .tpa-tab { flex: 1; padding: 10px 10px; font-size: 13px; text-align: center; }
  .tpa-natal-banner { flex-wrap: wrap; padding: 16px 18px; }
  .tpa-natal-banner__arrow { display: none; }
}

/* ═══ Поля формы — эталон Ба Цзы (фидбек владельца 2026-08-14) ═══
   Высота 54px, radius 12, кремовый фон, label 700 14px/.16em — как
   .bazi-wrap .inp/.sel/.flabel. Скоуп .tpa-card: /lichnost/ не трогаем. */
.tpa-card .lp-field__lbl{
  font:700 14px/1 'Manrope',sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#AEA99D;
}
.tpa-card .lp-field select,
.tpa-card .lp-field input[type="text"],
.tpa-card .tpa-city-field input{
  height:54px; padding-top:0; padding-bottom:0;
  background-color:#FBFAF6;
  border:1px solid #E8E4DA; border-radius:12px;
  font:500 15px/1 'Manrope',sans-serif;
}
/* Триггеры cs-sheet-picker в тех же полях — та же геометрия и палитра */
.tpa-card{
  --cs-bg:#FBFAF6;
  --cs-line:#E8E4DA;
  --cs-line-strong:#C9BFA8;
}
.tpa-card .cs-trigger{
  min-height:54px; height:54px;
  border-radius:12px;
  background:#FBFAF6; border-color:#E8E4DA;
  padding:0 14px;
  font-size:15px; font-weight:500;
}
/* iOS: font-size <16px на инпутах вызывает автозум при тапе */
@media (max-width:580px){
  .tpa-card .lp-field select,
  .tpa-card .tpa-city-field input,
  .tpa-card .cs-trigger,
  .tpa-card .cs-trigger-value{ font-size:16px !important; }
}