/* ============================================================
   SFIRA Mini App — оформление
   Палитра снята с фирменного макета: аптечная зелень, много воздуха,
   белые карточки на светлом фоне, засечки только в логотипе.
   ============================================================ */

:root{
  /* Зелень бренда */
  --g-900:#243326;   /* самый тёмный — заголовки */
  --g-700:#3E5A3C;   /* текст заголовков, активные элементы */
  --g-600:#4F6F49;   /* основная кнопка */
  --g-500:#5E7B52;   /* акценты, кружки шагов */
  --g-300:#A9BFA0;   /* иконки, вторичное */
  --g-200:#CFDCC7;   /* границы */
  --g-100:#E9F0E4;   /* светло-зелёные плашки */
  --g-50 :#F4F5F3;   /* фон страницы — нейтральный светло-серый, как в макете */

  --ink:#2B3A2B;     /* основной текст */
  --muted:#6E7D6B;   /* подписи */
  --white:#FFFFFF;
  --line:#DFE5DB;
  --card:#EAF0E6;     /* блоки — светло-зелёные, как сообщения на макете */

  --radius:16px;
  --radius-sm:12px;
  --gap:14px;
  --shadow:0 1px 2px rgba(36,51,38,.05), 0 8px 24px rgba(36,51,38,.05);

  --font-text:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}

/* Атрибут hidden обязан побеждать любой display из классов:
   без этого .loader{display:grid} не давал заглушке исчезнуть. */
[hidden]{display:none !important}

html,body{height:100%}

body{
  margin:0;
  background:var(--g-50);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

.shell{
  min-height:100%;
  max-width:560px;
  margin:0 auto;
  padding:0 20px calc(28px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}

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

.top{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:18px 0 14px;
  background:linear-gradient(var(--g-50) 72%, rgba(244,245,243,0));
}

.logo{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  letter-spacing:.20em;
  color:var(--g-700);
  padding-left:.20em;
}

.steps{display:flex; gap:6px; align-items:center}

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--g-200);
  transition:background .25s ease, transform .25s ease;
}
.dot.is-on{background:var(--g-500); transform:scale(1.25)}
.dot.is-done{background:var(--g-300)}

/* ---------- экраны ---------- */

main{flex:1; display:flex; flex-direction:column}

.screen{
  display:none;
  flex-direction:column;
  gap:var(--gap);
  padding-bottom:8px;
  animation:rise .32s ease both;
}
.screen.is-active{display:flex}

@keyframes rise{
  from{opacity:0; transform:translateY(10px)}
  to  {opacity:1; transform:none}
}

@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  *{transition:none !important}
}

/* ---------- типографика ---------- */

.h1,.h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--g-900);
  letter-spacing:-.005em;
  line-height:1.18;
  text-wrap:balance;
}
.h1{font-size:34px}
.h2{font-size:27px}
.h1 .soft{color:var(--g-600)}

.lead{margin:0; color:var(--ink)}
.note{margin:0; color:var(--muted); font-size:14.5px}
.accent{
  margin:0;
  color:var(--g-700);
  font-weight:600;
}
.hint{
  margin:0;
  font-size:14.5px;
  color:var(--g-700);
  background:var(--g-100);
  border-radius:var(--radius-sm);
  padding:11px 14px;
}
.hint.is-bad{background:#FBEAEA; color:#8E3B3B}

/* ---------- списки с галочками ---------- */

.checks{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.checks li{
  position:relative;
  padding-left:28px;
  color:var(--ink);
}
.checks li::before{
  content:"";
  position:absolute; left:2px; top:.52em;
  width:13px; height:7px;
  border-left:2px solid var(--g-500);
  border-bottom:2px solid var(--g-500);
  transform:rotate(-45deg) translateY(-2px);
  border-radius:1px;
}
.checks.tight{gap:7px; font-size:15px}

/* ---------- карточки шагов ---------- */

.step-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.step-card b{display:block; color:var(--g-900); margin-bottom:3px}
.step-card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5}

.num{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--g-500); color:var(--white);
  font-weight:700; font-size:14px;
}

/* ---------- герой: флакон и печать ---------- */

.hero{display:grid; place-items:center; padding:10px 0 2px}

.bottle{position:relative; width:84px; height:128px}
.bottle-cap{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:34px; height:34px;
  background:var(--g-700);
  border-radius:7px 7px 4px 4px;
}
.bottle-cap::after{
  content:""; position:absolute; left:50%; top:-11px; transform:translateX(-50%);
  width:19px; height:14px; background:var(--g-700); border-radius:9px 9px 3px 3px;
}
.bottle-body{
  position:absolute; left:0; bottom:0;
  width:84px; height:100px;
  background:linear-gradient(160deg,#FBFDFA,#E7EFE2 65%,#DCE7D6);
  border:1px solid var(--g-200);
  border-radius:12px 12px 16px 16px;
  display:grid; place-items:center;
  box-shadow:inset 0 10px 18px rgba(255,255,255,.75);
}
.bottle-label{
  font-family:var(--font-display);
  font-size:15px; letter-spacing:.18em;
  color:var(--g-700);
  padding-left:.18em;
}

.seal{
  width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--g-100);
  border:2px solid var(--g-300);
  color:var(--g-600);
  font-size:34px; font-weight:700;
}

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

.btn{
  appearance:none; border:none; cursor:pointer;
  width:100%;
  padding:15px 18px;
  border-radius:var(--radius-sm);
  font-family:var(--font-text);
  font-size:16px; font-weight:600;
  transition:transform .12s ease, background .2s ease, opacity .2s ease;
  margin-top:2px;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55; cursor:default}
.btn:focus-visible{outline:2px solid var(--g-500); outline-offset:2px}

.btn-primary{background:var(--g-600); color:var(--white)}
.btn-primary:hover:not(:disabled){background:var(--g-700)}

.btn-outline{
  background:var(--white);
  color:var(--g-700);
  border:1px solid var(--g-200);
}
.btn-outline:hover{background:var(--g-100)}

.btn-ghost{background:transparent; color:var(--muted); font-weight:500}

/* ---------- подарок ---------- */

.gift-card{
  display:flex; gap:16px; align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.gift-art{
  flex:0 0 auto;
  width:92px; height:124px;
  border-radius:10px;
  background:linear-gradient(170deg,#F7FAF5,#E4EDDE);
  border:1px solid var(--g-200);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:12px 10px;
}
.gift-art-title{
  font-family:var(--font-display);
  font-size:15px; line-height:1.15; font-weight:600;
  color:var(--g-700); letter-spacing:.04em;
}
.gift-art-sub{font-size:8.5px; color:var(--muted); line-height:1.3}
.gift-body b{display:block; color:var(--g-900); margin-bottom:8px}

/* ---------- промокод ---------- */

.promo{
  background:var(--g-100);
  border:1px dashed var(--g-300);
  border-radius:var(--radius);
  padding:18px 16px;
  text-align:center;
  display:flex; flex-direction:column; gap:7px; align-items:center;
}
.promo-label{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--g-600);
}
.promo-code{
  appearance:none; cursor:pointer;
  background:var(--white);
  border:1px solid var(--g-200);
  border-radius:10px;
  padding:11px 22px;
  font-family:var(--font-text);
  font-size:24px; font-weight:700; letter-spacing:.08em;
  color:var(--g-900);
  transition:background .2s ease, transform .12s ease;
}
.promo-code:active{transform:scale(.97)}
.promo-code.is-copied{background:var(--g-500); color:var(--white); border-color:var(--g-500)}
.promo-desc{margin:0; font-size:14.5px; color:var(--ink)}
.promo-term{margin:0; font-size:13px; color:var(--muted)}

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

.bottom{
  padding:22px 0 4px;
  text-align:center;
  color:var(--g-300);
  font-size:12.5px;
  letter-spacing:.06em;
}

/* ---------- загрузка ---------- */

.loader{
  position:fixed; inset:0; z-index:20;
  background:rgba(244,245,243,.80);
  display:grid; place-items:center;
  backdrop-filter:blur(2px);
}
.spin{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--g-200);
  border-top-color:var(--g-600);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- узкие экраны ---------- */

@media (max-width:360px){
  .h1{font-size:29px}
  .h2{font-size:24px}
  .gift-card{flex-direction:column; align-items:flex-start}
}