/* Оформление сайта «Калькулятора ювелира».
 *
 * Цвета взяты из тёмной темы приложения (composeApp/theme/AppColors.kt):
 * человек, пришедший из приложения по ссылке, должен попасть в то же место,
 * а не в похожее. Значения продублированы, а не импортированы — общего
 * источника у Kotlin и CSS нет, при правке палитры меняются оба.
 *
 * Тема одна — тёмная, как экран приложения с золотыми плитками. Золото
 * кнопок — градиент тех же плиток: от тёмного золота к светлому.
 *
 * Разметка и названия классов — от сайта HappinessLab: там они проверены
 * на телефонах и компьютерах.
 */

:root {
  --gold: #EABF5B;
  --gold-dark: #9C7526;
  --gold-light: #F6EBD0;
  --gold-gradient: linear-gradient(180deg, #F3D58A 0%, #EABF5B 45%, #C99A3E 100%);
  --gold-bar: linear-gradient(90deg, #9C7526 0%, #EABF5B 50%, #F6EBD0 100%);

  /* Текст на золоте — тёмный, как подписи плиток в приложении (onGold) */
  --on-gold: #2A2416;

  --bg: #141310;
  --surface: #24221B;
  --surface-2: #2C2920;
  --border: #3E3A2F;
  --text: #ECE7DD;
  --muted: #A8A296;
  --link: #EABF5B;
  --error: #FF9A8A;
  --ok: #8FD49A;

  color-scheme: dark;
}

* { box-sizing: border-box }

/* Спрятанное должно быть спрятано: любое правило с display перебило бы
 * браузерное display: none у [hidden], и скрытое показалось бы. */
[hidden] { display: none !important }

html { overflow-x: hidden }

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

.bar {
  height: 6px;
  margin: 0 -20px;
  background: var(--gold-bar);
}

.envbar {
  margin: 0 -20px;
  padding: 6px 20px;
  background: #7A2E12;
  color: #FFE7D6;
  font-size: 13px;
  text-align: center;
}

.wrap { max-width: 760px; margin: 0 auto }
.wrap.wide { max-width: 1080px }

h1 { margin: 32px 0 12px; font-size: 32px; line-height: 1.2 }
h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.25 }
h3 { margin: 24px 0 8px; font-size: 18px }
p, li { margin: 0 0 12px }
ul, ol { padding-left: 22px }
a { color: var(--link) }
.lead { font-size: 20px; line-height: 1.5 }
.muted { color: var(--muted) }
section + section { margin-top: 72px }

/* --- шапка ------------------------------------------------------------- */

.top {
  /* Над подложкой главной: та заходит под шапку и иначе закрыла бы её */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
}
.brand img { border-radius: 9px }

.top-actions { display: flex; gap: 8px; flex-wrap: wrap }

/* --- кнопки ------------------------------------------------------------ */

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--gold-gradient);
  color: var(--on-gold);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
button[disabled],
button[data-busy] { opacity: .55; cursor: default }
.button.small, button.small { padding: 7px 16px; font-size: 14px }
.button.ghost, button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.button.ghost:hover, button.ghost:hover { border-color: var(--gold-dark) }

.linklike {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--link);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

/* --- главная ----------------------------------------------------------- */

/* Подложка с фотографией мастера: снизу она растворяется в фоне страницы,
 * поверх неё — затемнение, иначе белый текст на светлых участках не читается. */
.shaded { position: relative; isolation: isolate; margin: 0 -20px; padding: 0 20px 72px }
/* Первый раздел после подложки: без отступа он прилипал к кнопкам магазинов */
.shaded + section { margin-top: 64px }
.shade {
  position: absolute;
  /* Во всю ширину окна, а не контейнера: фотография — фон страницы, а не
   * картинка в рамке. Сверху заходит под шапку. */
  top: -90px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,19,16,.55) 0%, rgba(20,19,16,.75) 60%, var(--bg) 100%),
    url('hero.jpg') center 35% / cover no-repeat;
}

/* Первый экран просторный: заголовок, описание и кнопки магазинов — три
 * отдельных шага, а не один плотный блок */
.hero { text-align: center; padding-top: 96px }
.hero h1 { font-size: 44px; margin: 0 0 24px }
.hero .lead { max-width: 640px; margin: 0 auto 24px }
.hero-note { max-width: 640px; margin: 0 auto; color: #D9D2C3; line-height: 1.7 }

.download { text-align: center; margin-top: 96px }
.download h2 { margin-bottom: 24px }

.stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.store {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(36,34,27,.85);
  color: var(--text);
  text-decoration: none;
  text-align: left;
}
a.store:hover { border-color: var(--gold) }
.store-mark { width: 30px; height: 30px; flex: none }
.store-text { display: flex; flex-direction: column; line-height: 1.3 }
.store-text b { font-size: 15px }
.store-text small { font-size: 13px; color: var(--muted) }
.soon {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--gold);
  font-size: 11px;
}
.store--soon { cursor: default; opacity: .8 }

@media (max-width: 760px) {
  .hero { padding-top: 56px }
  .hero h1 { font-size: 34px }
  .download { margin-top: 56px }
  .shaded { padding-bottom: 48px }
}

/* Шесть карточек: на широком экране — ровно по три в ряд, без сироты внизу */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.feature {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.feature b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 16px;
}
.feature span { color: var(--muted); font-size: 15px }

/* --- карточки и формы ---------------------------------------------------- */

.panel {
  margin: 0 0 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.panel h2 { margin-top: 0 }

.field { display: block; margin-bottom: 14px }
.field-label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted) }

input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
input:focus { outline: 2px solid var(--gold); outline-offset: -1px }

.hint { display: block; margin-top: 4px; font-size: 13px; color: var(--muted) }

.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 }
.check input { width: auto; margin-top: 4px; accent-color: var(--gold) }
.check span { font-size: 14px }

.error { color: var(--error); font-size: 14px }
.ok { color: var(--ok); font-size: 14px }
.under { margin: 16px 0 0; font-size: 14px }

.tabs { display: flex; gap: 6px; margin-bottom: 16px }
.tab {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 400;
}
.tab.is-active { background: var(--gold-gradient); color: var(--on-gold); border-color: transparent; font-weight: 700 }

.notice {
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid var(--gold-dark);
  border-radius: 14px;
  background: rgba(156,117,38,.12);
}

/* --- кабинет ------------------------------------------------------------- */

.who b { display: block; font-size: 18px }
.who span { color: var(--muted); font-size: 14px }

.status {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.status.on { background: rgba(234,191,91,.18); color: var(--gold) }
.status.off { background: var(--surface-2); color: var(--muted) }

.facts { margin: 16px 0 0; padding: 0; list-style: none }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border) }
.facts li span:first-child { color: var(--muted) }

/* --- тарифы -------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.plan.is-best { border-color: var(--gold) }
.plan b { font-size: 18px }
.plan-price { font-size: 30px; font-weight: 700; color: var(--gold) }
.plan-old { color: var(--muted); text-decoration: line-through }
.plan-permonth { color: var(--muted); font-size: 14px }
.plan-period { color: var(--text); font-size: 14px }
.renew-note { font-size: 14px; margin: 20px 0 8px }
/* Согласие на автоматические списания — заметной плашкой: без него оплаты нет */
#autopay-row {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
#autopay-row span { font-size: 15px }
#autopay-row input { width: 18px; height: 18px }
/* Нажали «Оформить» без согласия — подсветить, где его дать */
.check.is-error span { color: #E8806B }
.check.is-error input { outline: 2px solid #E8806B; outline-offset: 2px }
.plan .button { margin-top: auto }
.plan-badge {
  position: absolute;
  top: -11px;
  right: 16px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--gold-gradient);
  color: var(--on-gold);
  font-size: 12px;
  font-weight: 700;
}

.perks { margin: 0; padding: 0; list-style: none; columns: 2 260px }
.perks li { padding-left: 22px; position: relative; break-inside: avoid }
.perks li::before { content: "✓"; position: absolute; left: 0; color: var(--gold) }

/* --- документы ----------------------------------------------------------- */

.draft {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid #B0573A;
  border-radius: 12px;
  background: rgba(176,87,58,.12);
  font-size: 14px;
}
.revisions {
  margin-top: 40px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 14px;
}
.revisions ul { margin: 8px 0 0 }

/* --- подвал -------------------------------------------------------------- */

footer {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.doclinks { display: flex; flex-wrap: wrap; gap: 8px 20px }
.doclinks a { color: var(--muted) }
.doclinks a:hover { color: var(--gold) }
.footline { margin: 16px 0 0; color: var(--muted) }

/* Страница загрузки: кнопка скачивания по центру панели */
.download-panel { text-align: center }