/* ============================================================
   ИХ ГҮРЭНТ · Ger Camp — book.css
   Захиалгын хуудас. Mobile-first, тансаг. Цэвэр HTML/CSS/JS.
   "Warm steppe minimalism" — нүүр хуудастай нэг амьсгал:
   дулаан цаасан өнгө, Cormorant + Manrope, алтан өнгөлөг,
   үр тариа (grain), хээрийн алсын шугам, зөөлөн гэрэлтүүлэг.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#F4EFE6;
  --paper-2:#EBE3D4;
  --paper-3:#E3D9C6;
  --paper-lift:#FBF7EF;
  --ink:#23201B;
  --ink-soft:#3B362D;
  --muted:#8A8170;
  --hair:#CBC0AC;
  --hair-soft:#DBD2C0;
  --accent:#9C5A33;
  --accent-deep:#824327;
  --gold:#C39A5E;
  --gold-soft:#D8B782;
  --ok:#5E7C52;
  --danger:#A8472E;

  --tint:rgba(156,90,51,.055);
  --ring:rgba(156,90,51,.14);
  --shadow-card:0 18px 44px -30px rgba(35,32,27,.7);
  --shadow-pop:0 26px 60px -32px rgba(35,32,27,.62);

  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(1.15rem,5vw,2.4rem);
  --bar-h:80px;          /* sticky bottom bar өндөр */
  --top-h:56px;          /* top bar өндөр */
  --step-h:60px;         /* stepper өндөр */
  --r:16px;              /* картын радиус */
  --r-sm:11px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body.bk{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100svh;
  background:
    radial-gradient(135% 78% at 50% -14%, var(--paper-lift) 0%, var(--paper) 46%),
    var(--paper);
  background-attachment:fixed;
  /* доод sticky bar болон stepper-т зай гаргана */
  padding-bottom:calc(var(--bar-h) + var(--safe-b));
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
::selection{ background:var(--accent); color:var(--paper); }
.serif{ font-family:var(--serif); }
.tnum{ font-variant-numeric:tabular-nums; }

/* ============================================================
   ATMOSPHERE — дулаан гүн, хээрийн алсын шугам, үр тариа
   ============================================================ */
.bk-atmos{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bk-atmos__glow{ position:absolute; inset:0;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(195,154,94,.18), transparent 58%),
    radial-gradient(80% 50% at 100% 108%, rgba(156,90,51,.10), transparent 60%),
    radial-gradient(70% 46% at 0% 94%, rgba(90,74,50,.08), transparent 60%); }
/* зөөлөн өнхрөх толгод — steppe horizon */
.bk-atmos__ridge{ position:absolute; left:-5%; right:-5%; bottom:0; height:min(58vh,520px);
  opacity:.55; background-repeat:no-repeat; background-position:bottom; background-size:120% auto;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 65%); mask-image:linear-gradient(180deg,transparent,#000 65%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 360' preserveAspectRatio='none'%3E%3Cpath d='M0 270 C220 210 380 222 600 252 C840 286 1020 300 1440 246' fill='none' stroke='%23CBC0AC' stroke-width='1.6' stroke-opacity='.85'/%3E%3Cpath d='M0 312 C260 262 460 274 720 300 C980 326 1180 332 1440 296' fill='none' stroke='%23BBB09A' stroke-width='1.6' stroke-opacity='.6'/%3E%3Cpath d='M0 348 C300 322 540 330 760 342 C1010 356 1220 356 1440 340' fill='none' stroke='%23AFA489' stroke-width='1.6' stroke-opacity='.4'/%3E%3C/svg%3E"); }
.bk-atmos__grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Type primitives ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.66rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--accent); flex:none; }
.eyebrow--bare::before{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:1.05em 1.7em; border-radius:3px; transition:all .3s var(--ease);
  white-space:nowrap; position:relative; overflow:hidden; min-height:48px;
}
.btn svg{ width:15px; height:15px; flex:none; transition:transform .35s var(--ease); }
.btn--solid{ background:var(--accent); color:var(--paper);
  box-shadow:0 10px 26px -12px rgba(156,90,51,.7); animation:ctaGlow 3.8s ease-in-out infinite; }
.btn--solid:active{ background:var(--accent-deep); }
.btn--solid:hover svg{ transform:translateX(4px); }
.btn--ghost{ background:rgba(35,32,27,.05); color:var(--ink); }
.btn--ghost:active{ background:rgba(35,32,27,.1); }
.btn--line{ border:1px solid var(--hair); color:var(--ink-soft); }
.btn--line:active{ background:rgba(35,32,27,.05); }
.btn--full{ width:100%; }
.btn:disabled{ opacity:.45; pointer-events:none; }
/* shine */
.btn--solid::after{ content:""; position:absolute; top:0; bottom:0; left:-140%; width:55%;
  pointer-events:none; transform:skewX(-20deg); transition:left .8s var(--ease);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); }
.btn--solid:hover::after{ left:150%; }
@keyframes ctaGlow{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(156,90,51,0)); } 50%{ filter:drop-shadow(0 4px 14px rgba(156,90,51,.4)); } }

/* language toggle */
.lang{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:.1em; }
.lang button{ padding:.4em .4em; opacity:.45; transition:opacity .3s; }
.lang button.on{ opacity:1; }
.lang span{ opacity:.3; margin:0 .1em; }

/* ============================================================
   TOP BAR
   ============================================================ */
.bk-top{
  position:sticky; top:0; z-index:40; height:var(--top-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--pad);
  background:rgba(244,239,230,.82); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--hair-soft);
}
.bk-back{ display:inline-flex; align-items:center; gap:.45em; justify-self:start;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  transition:color .3s, transform .3s var(--ease); }
.bk-back svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.bk-back:active{ color:var(--accent); }
.bk-back:hover svg{ transform:translateX(-3px); }
.bk-mark{ justify-self:center; font-size:1.18rem; font-weight:600; letter-spacing:.1em; color:var(--ink); position:relative; }
.bk-mark::after{ content:""; position:absolute; left:50%; right:50%; bottom:-6px; height:1px;
  background:var(--gold); transition:left .4s var(--ease), right .4s var(--ease); }
.bk-mark:hover::after{ left:0; right:0; }
.bk-lang{ justify-self:end; }

/* ============================================================
   STEPPER — холбоост прогресс рейл
   ============================================================ */
.bk-steps{
  position:sticky; top:var(--top-h); z-index:30; min-height:var(--step-h);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:start;
  padding:.85rem var(--pad) .7rem;
  background:rgba(244,239,230,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-soft);
}
/* холбоост шугам ба дүүргэлт — цэгүүдийн төвөөр дайрна */
.bk-steps__track{ position:absolute; left:calc(10% + .8 * var(--pad)); right:calc(10% + .8 * var(--pad));
  top:calc(.85rem + 14px); height:2px; transform:translateY(-1px); border-radius:2px;
  background:var(--hair); overflow:hidden; }
.bk-steps__fill{ display:block; height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width .55s var(--ease); }
.bk-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5em;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  transition:color .3s; }
.bk-step i{ display:grid; place-items:center; width:28px; height:28px; flex:none; font-style:normal;
  font-size:.72rem; font-weight:700; border-radius:50%; border:1px solid var(--hair);
  background:var(--paper-lift); color:var(--muted); box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  transition:all .35s var(--ease); }
.bk-step b{ opacity:.75; transition:opacity .3s; line-height:1; text-align:center; }
.bk-step.on{ color:var(--ink); }
.bk-step.on b{ opacity:1; }
.bk-step.on i{ background:var(--accent); border-color:var(--accent); color:var(--paper);
  box-shadow:0 0 0 5px var(--ring), 0 8px 18px -10px rgba(156,90,51,.8); transform:translateY(-1px); }
.bk-step.done{ color:var(--ink-soft); }
.bk-step.done i{ background:var(--ink); border-color:var(--ink); color:var(--paper); font-size:0; }
.bk-step.done i::after{ content:"✓"; font-size:.76rem; }
@media (max-width:360px){ .bk-step b{ display:none; } }

/* ============================================================
   MAIN / PANELS  — багана бүрийн агуулга шатлан гарч ирнэ
   ============================================================ */
.bk-main{ max-width:720px; margin:0 auto; padding:calc(var(--pad) + .4rem) var(--pad) var(--pad); }
.bk-panel[hidden]{ display:none; }
.bk-panel.on > *{ animation:bkUp .6s var(--ease) both; }
.bk-panel.on > *:nth-child(2){ animation-delay:.06s }
.bk-panel.on > *:nth-child(3){ animation-delay:.12s }
.bk-panel.on > *:nth-child(4){ animation-delay:.18s }
.bk-panel.on > *:nth-child(5){ animation-delay:.24s }
.bk-panel.on > *:nth-child(6){ animation-delay:.3s }
.bk-panel.on > *:nth-child(7){ animation-delay:.36s }
.bk-panel.on > *:nth-child(8){ animation-delay:.42s }
@keyframes bkUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

.bk-h{ margin-bottom:1.7rem; }
.bk-h .eyebrow{ margin-bottom:.15rem; }
.bk-h h1{ font-family:var(--serif); font-weight:500; line-height:1.02;
  font-size:clamp(2.05rem,8.4vw,3rem); margin:.35rem 0 .55rem; letter-spacing:.005em; }
.bk-h h1 em{ font-style:italic; color:var(--accent); }
.bk-h p{ color:var(--ink-soft); font-size:.96rem; max-width:46ch; }

/* ---------- STEP 1 · ger cards ---------- */
.bk-gers{ display:grid; gap:1rem; }
@media (min-width:560px){ .bk-gers{ grid-template-columns:1fr 1fr; } }
.bk-ger{ position:relative; display:block; text-align:left; width:100%; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--hair); background:var(--paper-lift);
  box-shadow:var(--shadow-card); transition:transform .4s var(--ease), border-color .35s, box-shadow .4s;
  animation:bkUp .6s var(--ease) both; animation-delay:var(--d,0ms); }
@media (hover:hover){ .bk-ger:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); } }
.bk-ger:active{ transform:scale(.99); }
.bk-ger.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-pop); }
/* алтан хүрээ сонгогдсон үед */
.bk-ger::after{ content:""; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
  border:1px solid transparent; transition:border-color .35s; }
.bk-ger.on::after{ border-color:rgba(195,154,94,.5); inset:5px; border-radius:calc(var(--r) - 5px); }
.bk-ger__art{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--paper-3); }
.bk-ger__art img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.bk-ger.on .bk-ger__art img{ transform:scale(1.06); }
@media (hover:hover){ .bk-ger:hover .bk-ger__art img{ transform:scale(1.05); } }
.bk-ger__art::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,0) 38%,rgba(20,17,13,.58)); }
.bk-ger__tag{ position:absolute; top:.7rem; left:.7rem; z-index:2; font-size:.56rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--paper);
  background:rgba(35,32,27,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.45em .75em; border-radius:2px; border:1px solid rgba(244,239,230,.16); }
.bk-ger__check{ position:absolute; top:.62rem; right:.62rem; z-index:2; width:30px; height:30px;
  border-radius:50%; border:1.5px solid rgba(244,239,230,.85); background:rgba(35,32,27,.28);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:grid; place-items:center; color:transparent; transition:all .35s var(--ease); transform:scale(.85); }
.bk-ger__check svg{ width:15px; height:15px; }
.bk-ger.on .bk-ger__check{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:scale(1);
  box-shadow:0 6px 16px -8px rgba(195,154,94,.9); }
.bk-ger__cap{ position:absolute; left:.9rem; right:.9rem; bottom:.72rem; z-index:2; color:var(--paper); }
.bk-ger__name{ display:block; font-family:var(--serif); font-size:1.58rem; line-height:1.02; text-shadow:0 2px 14px rgba(20,17,13,.5); }
.bk-ger__meta{ display:block; font-size:.68rem; letter-spacing:.06em; opacity:.92; margin-top:.35rem; text-transform:uppercase; }
.bk-ger__body{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.9rem 1.05rem 1.05rem; }
.bk-ger__desc{ font-size:.82rem; color:var(--muted); line-height:1.45; flex:1; }
.bk-ger__price{ text-align:right; flex:none; }
.bk-ger__price b{ font-family:var(--serif); font-size:1.35rem; color:var(--accent); }
.bk-ger__price span{ display:block; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- STEP 2 · dates + steppers ---------- */
.bk-dates{ display:grid; gap:.9rem; }
@media (min-width:480px){ .bk-dates{ grid-template-columns:1fr 1fr; } }
.bk-field{ display:flex; flex-direction:column; gap:.45rem; }
.bk-field > span{ font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.bk-field input, .bk-field textarea{
  font-family:var(--serif); font-size:1.18rem; color:var(--ink);
  background:var(--paper-lift); border:1px solid var(--hair); border-radius:10px;
  padding:.85em .95em; width:100%; outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .3s, box-shadow .3s, background .3s; min-height:54px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.bk-field textarea{ font-family:var(--sans); font-size:1rem; line-height:1.55; resize:vertical; min-height:98px; }
.bk-field input:focus, .bk-field textarea:focus{ border-color:var(--accent); background:var(--paper-lift);
  box-shadow:0 0 0 3px var(--ring); }
.bk-field input::placeholder, .bk-field textarea::placeholder{ color:var(--muted); opacity:.55; }
.bk-field input.bad{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(168,71,46,.12); }
.bk-field input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(.4) sepia(1) saturate(3) hue-rotate(340deg); opacity:.6; cursor:pointer; }
.bk-field--solo{ margin-bottom:1rem; }
.bk-nights{ margin-top:1rem; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--accent-deep);
  background:var(--tint); border:1px solid var(--ring); border-radius:999px; padding:.35em 1em; }
.bk-nights::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
.bk-nights[hidden]{ display:none; }

/* segmented control (холбогдох суваг) */
.bk-seg{ display:flex; gap:.3rem; padding:.3rem; border:1px solid var(--hair); border-radius:12px; background:var(--paper-lift); }
.bk-seg__b{ flex:1; min-height:46px; padding:.6em .4em; border-radius:9px; font-size:.78rem; font-weight:600;
  letter-spacing:.04em; color:var(--ink-soft); transition:all .28s var(--ease); }
.bk-seg__b.on{ background:var(--accent); color:var(--paper); box-shadow:0 8px 18px -10px rgba(156,90,51,.8); }
.bk-seg__b:not(.on):active{ background:rgba(35,32,27,.06); }

.bk-steppers{ margin-top:1.6rem; display:grid; gap:.8rem; }
.bk-count{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--hair); border-radius:12px; padding:.9rem 1.05rem; background:var(--paper-lift);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset; }
.bk-count__lbl b{ display:block; font-size:1.02rem; font-weight:600; }
.bk-count__lbl small{ font-size:.74rem; color:var(--muted); }
.bk-stepper{ display:inline-flex; align-items:center; gap:.25rem; flex:none; }
.bk-stepper__b{ width:44px; height:44px; border-radius:50%; border:1px solid var(--hair); background:var(--paper);
  font-size:1.45rem; line-height:1; color:var(--ink); display:grid; place-items:center;
  transition:all .22s var(--ease); }
.bk-stepper__b:active{ background:var(--accent); border-color:var(--accent); color:var(--paper); transform:scale(.92); }
@media (hover:hover){ .bk-stepper__b:not(:disabled):hover{ border-color:var(--accent); color:var(--accent); } }
.bk-stepper__b:disabled{ opacity:.3; pointer-events:none; }
.bk-stepper output{ min-width:2.4ch; text-align:center; font-family:var(--serif); font-size:1.5rem; color:var(--ink); }

/* ---------- STEP 3 · add-ons ---------- */
.bk-addons{ display:grid; gap:.65rem; }
.bk-addon{ position:relative; display:flex; align-items:center; gap:.9rem; cursor:pointer;
  border:1px solid var(--hair); border-radius:12px; padding:.9rem 1.05rem .9rem 1.15rem; background:var(--paper-lift);
  overflow:hidden; transition:border-color .3s, background .3s, transform .25s var(--ease), box-shadow .3s; }
/* зүүн талын алтан баганан тэмдэг — сонгогдоход */
.bk-addon::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--accent),var(--gold)); transform:scaleY(0); transform-origin:center;
  transition:transform .35s var(--ease); }
.bk-addon:has(input:checked){ border-color:var(--accent); background:var(--tint); box-shadow:0 10px 26px -22px rgba(156,90,51,.8); }
.bk-addon:has(input:checked)::before{ transform:scaleY(1); }
.bk-addon:active{ transform:scale(.995); }
.bk-addon input{ position:absolute; opacity:0; width:0; height:0; }
.bk-addon__box{ flex:none; width:26px; height:26px; border-radius:8px; border:1.5px solid var(--hair); background:var(--paper);
  display:grid; place-items:center; transition:all .25s var(--ease); position:relative; }
.bk-addon__box::after{ content:"✓"; font-size:.9rem; font-weight:700; color:var(--paper); opacity:0; transform:scale(.6); transition:all .22s var(--ease); }
.bk-addon:has(input:checked) .bk-addon__box, .bk-agree:has(input:checked) .bk-addon__box{
  background:var(--accent); border-color:var(--accent); }
.bk-addon:has(input:checked) .bk-addon__box::after, .bk-agree:has(input:checked) .bk-addon__box::after{ opacity:1; transform:none; }
.bk-addon__txt{ flex:1; min-width:0; }
.bk-addon__txt b{ display:block; font-size:1rem; font-weight:600; }
.bk-addon__txt small{ font-size:.74rem; color:var(--muted); }
.bk-addon__pr{ flex:none; font-family:var(--serif); font-size:1.15rem; color:var(--accent); white-space:nowrap; }
.bk-addon:has(input:checked) .bk-addon__pr{ color:var(--accent-deep); }

/* ---------- STEP 5 · review (захиалгын тасалбар) ---------- */
.bk-review{ border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--paper-lift);
  box-shadow:var(--shadow-card); }
.bk-review__hero{ position:relative; aspect-ratio:5/2; overflow:hidden; background:var(--paper-3); }
.bk-review__hero img{ width:100%; height:100%; object-fit:cover; }
.bk-review__hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,.15),rgba(20,17,13,.05) 40%,rgba(20,17,13,.72)); }
.bk-review__cap{ position:absolute; left:1.1rem; bottom:.85rem; right:1.1rem; z-index:2; color:var(--paper);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.bk-review__cap .nm{ font-family:var(--serif); font-size:1.7rem; line-height:1; text-shadow:0 2px 14px rgba(20,17,13,.6); }
.bk-review__cap .tg{ font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:rgba(35,32,27,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.45em .75em; border-radius:2px; flex:none; }
.bk-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:.9rem 1.15rem; border-bottom:1px solid var(--hair-soft); }
.bk-row:last-child{ border-bottom:0; }
.bk-row__k{ font-size:.78rem; letter-spacing:.04em; color:var(--muted); }
.bk-row__k b{ display:block; font-size:.96rem; font-weight:600; color:var(--ink); letter-spacing:0; }
.bk-row__v{ text-align:right; font-family:var(--serif); font-size:1.08rem; color:var(--ink); white-space:nowrap; }
.bk-row--head{ background:var(--paper-2); }
/* нийт дүн — тасалбарын ёроол, цоолбортой зах */
.bk-row--total{ position:relative; background:var(--ink); margin-top:0; padding:1.05rem 1.15rem; }
.bk-row--total::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:8px;
  background:radial-gradient(circle at 8px 0, transparent 0 6px, var(--paper-lift) 6px) repeat-x;
  background-size:16px 8px; background-position:center top; }
.bk-row--total .bk-row__k, .bk-row--total .bk-row__v{ color:var(--paper); }
.bk-row--total .bk-row__k{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; align-self:center; }
.bk-row--total .bk-row__v{ font-size:1.6rem; color:var(--gold); }
.bk-sub{ display:block; font-size:.74rem; color:var(--muted); margin-top:.15rem; }
.bk-row--total .bk-sub{ color:rgba(244,239,230,.6); }

.bk-agree{ display:flex; align-items:flex-start; gap:.7rem; margin-top:1.2rem; cursor:pointer;
  font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.bk-agree input{ position:absolute; opacity:0; width:0; height:0; }
.bk-agree .bk-addon__box{ margin-top:1px; }
.bk-err{ margin-top:1rem; color:var(--danger); font-size:.85rem; font-weight:600; text-align:center;
  background:rgba(168,71,46,.07); border:1px solid rgba(168,71,46,.25); border-radius:8px; padding:.7em 1em; }
.bk-err[hidden]{ display:none; }

/* ============================================================
   STICKY BOTTOM BAR
   ============================================================ */
.bk-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:45; height:calc(var(--bar-h) + var(--safe-b));
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--pad) calc(.7rem + var(--safe-b));
  background:rgba(244,239,230,.9); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--hair);
}
/* дээд алтан туяа шугам */
.bk-bar::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(195,154,94,.6),transparent); }
.bk-bar__total{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.bk-bar__total small{ font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.bk-bar__total b{ font-family:var(--serif); font-size:1.6rem; color:var(--ink); transition:transform .25s var(--ease); }
.bk-bar__total b.is-bump{ animation:bump .4s var(--ease); }
@keyframes bump{ 0%{ transform:scale(1) } 35%{ transform:scale(1.09); color:var(--accent) } 100%{ transform:scale(1) } }
.bk-bar__nav{ display:flex; gap:.5rem; flex:none; }
.bk-bar__nav .btn{ padding:1em 1.35em; }
@media (max-width:380px){ .bk-bar__nav .btn--ghost{ padding:1em; } .bk-bar__nav .btn span{ display:none; } .btn--ghost[data-i18n]{ font-size:0; } }

/* ============================================================
   CONFIRMATION — лав тамга, сийлбэр дугаар
   ============================================================ */
.bk-done{ position:fixed; inset:0; z-index:60;
  background:radial-gradient(130% 70% at 50% -10%, var(--paper-lift), var(--paper) 52%), var(--paper);
  display:grid; place-items:start center; overflow-y:auto; padding:var(--pad);
  animation:bkFade .6s var(--ease) both; }
.bk-done::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bk-done[hidden]{ display:none; }
@keyframes bkFade{ from{ opacity:0 } to{ opacity:1 } }
.bk-done__card{ position:relative; max-width:480px; width:100%; text-align:center; padding:2.6rem 1.5rem 3rem;
  margin:auto; border:1px solid var(--hair); border-radius:var(--r); background:rgba(251,247,239,.7);
  box-shadow:var(--shadow-card); }
/* булангийн чимэглэл */
.bk-done__card::before, .bk-done__card::after{ content:""; position:absolute; width:14px; height:14px; opacity:.6; }
.bk-done__card::before{ top:10px; left:10px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
.bk-done__card::after{ bottom:10px; right:10px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); }
.bk-done__seal{ position:relative; width:78px; height:78px; margin:0 auto 1.4rem; border-radius:50%;
  display:grid; place-items:center; color:var(--paper);
  background:radial-gradient(circle at 38% 32%, #6f9162, var(--ok) 70%);
  box-shadow:0 16px 34px -14px rgba(94,124,82,.75), 0 0 0 1px rgba(94,124,82,.3); animation:seal .7s var(--ease) both; }
.bk-done__seal::before{ content:""; position:absolute; inset:7px; border-radius:50%; border:1px dashed rgba(244,239,230,.6); }
.bk-done__seal svg{ width:34px; height:34px; position:relative; }
@keyframes seal{ 0%{ transform:scale(.4) rotate(-12deg); opacity:0 } 60%{ transform:scale(1.08) rotate(2deg) } 100%{ transform:none; opacity:1 } }
.bk-done__card .eyebrow{ justify-content:center; }
.bk-done__card h2{ font-family:var(--serif); font-size:clamp(2.4rem,9vw,3.2rem); font-weight:500; margin:.3rem 0 1.4rem; }
.bk-done__ref{ font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.bk-done__code{ display:inline-block; font-family:var(--serif); font-size:1.9rem; letter-spacing:.08em; color:var(--accent-deep);
  margin:.35rem 0 1.3rem; padding:.15em .7em; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.bk-done__msg{ color:var(--ink-soft); font-size:.95rem; max-width:38ch; margin:0 auto 1.6rem; }
.bk-done__sum{ text-align:left; border:1px solid var(--hair); border-radius:var(--r-sm); overflow:hidden; margin-bottom:1.6rem; background:var(--paper-lift); }
.bk-done__acts{ display:grid; gap:.7rem; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bk-panel.on > *,.bk-ger,.bk-done,.bk-done__seal{ animation:none; }
  .btn--solid::after{ display:none; }
  .btn--solid{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ============================================================
   МОНГОЛ ХЭЭ УГАЛЗ — өлзий · эвэр угалз · алхан хээ
   ============================================================ */
:root{
  --orn-cloud:url("../assets/hee/cloud.png");
  --orn-ulzii:url("../assets/hee/ulzii.png");
  --orn-corner:url("../assets/hee/ulzii-corner.png");
  --orn-frame:url("../assets/hee/frame.png");
}
/* бүх хуудсыг дүүргэх сул өлзий хээ (textile мэт) */
.bk-atmos__khee{ position:absolute; inset:0; opacity:.11;
  background:var(--gold);
  -webkit-mask:var(--orn-ulzii) center/108px auto repeat; mask:var(--orn-ulzii) center/108px auto repeat; }

/* алхам бүрийн гарчгийн доорх чимэг — үүлэн хээ хуваагч */
.bk-h{ position:relative; }
.bk-h::after{ content:""; display:block; height:30px; margin-top:1.2rem;
  background:var(--gold); opacity:.85;
  -webkit-mask:var(--orn-cloud) center/contain no-repeat; mask:var(--orn-cloud) center/contain no-repeat; }

/* үүлэн хээ — хуваагч */
.bk-orn-pair{ display:block; width:124px; height:32px; margin:.1rem auto 1.15rem;
  background:var(--gold); opacity:.9;
  -webkit-mask:var(--orn-cloud) center/contain no-repeat; mask:var(--orn-cloud) center/contain no-repeat; }

/* (картын mask-булан ornament-ыг хассан — ulzii-corner.png цул дүүрэн тул
   дөрвөлжин болж харагдаж байв. bk-done__card нь дээрх нимгэн border-булангаа хадгална.) */

/* ============================================================
   Custom огнооны CALENDAR (нативыг орлоно)
   ============================================================ */
.bk-cal{ position:absolute; z-index:300; width:min(300px,92vw); padding:.85rem .9rem 1rem;
  border-radius:16px; background:var(--paper-lift); border:1px solid var(--hair);
  box-shadow:0 28px 64px -30px rgba(35,32,27,.6); font-family:var(--sans); color:var(--ink);
  animation:bkCalIn .22s var(--ease); }
.bk-cal[hidden]{ display:none; }
@keyframes bkCalIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.bk-cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; gap:.5rem; }
.bk-cal__head b{ font-family:var(--serif); font-size:1.18rem; font-weight:600; letter-spacing:.01em; }
.bk-cal__nav{ width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--hair);
  background:transparent; color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; transition:.2s var(--ease); }
.bk-cal__nav:hover{ background:var(--accent); color:var(--paper); border-color:var(--accent); }
.bk-cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:.25rem; }
.bk-cal__dow span{ text-align:center; font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding:.35rem 0; }
.bk-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.bk-cal__day{ aspect-ratio:1; border:0; background:transparent; border-radius:9px; cursor:pointer;
  font-family:var(--serif); font-size:1.02rem; color:var(--ink); transition:.14s var(--ease); }
.bk-cal__day:hover:not(:disabled){ background:var(--paper-3); }
.bk-cal__day.on{ background:var(--accent); color:var(--paper); box-shadow:0 8px 18px -10px var(--accent); }
.bk-cal__day:disabled{ color:var(--hair); cursor:default; }

/* ============================================================
   LIVE SUMMARY ASIDE (desktop баруун багана)
   ============================================================ */
.bk-aside{ display:none; }
.bk-aside__card{ position:relative; border:1px solid var(--hair); border-radius:var(--r); overflow:hidden;
  background:var(--paper-lift); box-shadow:var(--shadow-card); }
.bk-aside__media{ position:relative; aspect-ratio:4/3; background:var(--paper-3) center/cover no-repeat;
  display:grid; place-items:center; }
.bk-aside__media::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,rgba(20,17,13,0) 42%,rgba(20,17,13,.62)); }
.bk-aside__media.has::after{ opacity:1; }
.bk-aside__ph{ color:var(--muted); font-style:italic; font-size:1.15rem; padding:1rem; text-align:center; }
.bk-aside__name{ position:absolute; left:1.1rem; bottom:.85rem; z-index:2; color:var(--paper);
  font-size:1.55rem; line-height:1; text-shadow:0 2px 14px rgba(20,17,13,.6); }
.bk-aside__body{ position:relative; z-index:1; padding:1.25rem 1.25rem 1.4rem; }
.bk-aside__sum{ margin:1rem 0; display:flex; flex-direction:column; gap:.55rem; }
.bk-aside__row{ display:flex; justify-content:space-between; gap:1rem; font-size:.82rem; }
.bk-aside__row > span:first-child{ color:var(--muted); }
.bk-aside__row > span:last-child{ font-family:var(--serif); font-size:1rem; color:var(--ink); white-space:nowrap; }
.bk-aside__row--add > span:first-child::before{ content:"+ "; color:var(--accent); font-family:var(--sans); }
.bk-aside__hint{ font-size:.86rem; color:var(--muted); font-style:italic; line-height:1.5; }
.bk-aside__soft{ color:var(--muted); font-style:italic; }
.bk-aside__total{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--hair); padding-top:1rem; margin-top:.2rem; }
.bk-aside__total small{ font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.bk-aside__total b{ font-family:var(--serif); font-size:1.85rem; color:var(--accent); }
.bk-aside__wm{ position:absolute; right:-18px; bottom:-18px; width:140px; height:140px; z-index:0;
  background:var(--accent); opacity:.08; pointer-events:none;
  -webkit-mask:var(--orn-ulzii) center/contain no-repeat; mask:var(--orn-ulzii) center/contain no-repeat; }

/* ============================================================
   DESKTOP — 2 багана: агуулга | хураангуй
   ============================================================ */
@media (min-width:960px){
  .bk-shell{ display:grid; grid-template-columns:minmax(0,1fr) clamp(330px,34%,400px);
    gap:clamp(1.8rem,3.2vw,3.2rem); max-width:1180px; margin:0 auto; padding:0 var(--pad); align-items:start; }
  .bk-main{ max-width:none; margin:0; padding:calc(var(--pad) + .4rem) 0 var(--pad); }
  .bk-aside{ display:block; position:sticky; top:calc(var(--top-h) + var(--step-h) + 14px);
    padding-top:calc(var(--pad) + .4rem); }
  /* доод бар — агуулгыг 1180px-д төвлөрүүлнэ (хоосон зах багасна) */
  .bk-bar{ padding-inline:max(var(--pad), calc(50% - 590px + var(--pad))); }
}

/* ============================================================
   CONFIRMATION — өлзий watermark + эвэр угалз
   ============================================================ */
.bk-done__card > *{ position:relative; z-index:1; }
.bk-done__wm{ position:absolute; top:50%; left:50%; width:320px; height:320px;
  transform:translate(-50%,-54%); z-index:0 !important; background:var(--gold); opacity:.14; pointer-events:none;
  -webkit-mask:var(--orn-frame) center/contain no-repeat; mask:var(--orn-frame) center/contain no-repeat; }

@media (prefers-reduced-motion:reduce){
  .bk-aside__media::after{ transition:none; }
}