/* Страницы родителя. Цвета лагеря приходят из camp.json (design.colors) как переменные --deep, --bay и т. д.
   Оформление светлое: белые карточки на почти белом фоне, цвет лагеря (--bay) — для кнопок и акцентов. */

@font-face{font-family:"Golos";font-weight:400;font-display:swap;src:url(fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos";font-weight:400;font-display:swap;src:url(fonts/golos-text-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212}
@font-face{font-family:"Golos";font-weight:600;font-display:swap;src:url(fonts/golos-text-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos";font-weight:600;font-display:swap;src:url(fonts/golos-text-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212}

:root{
  --deep:#0F4C8A; --bay:#1877D2; --brass:#F5A524; --sail:#F5F8FC; --mist:#E2E9F1; --ink:#182433;
  --good:#16865A; --bad:#C9372C; --soft:#5F6F81;
  --text:"Golos",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:var(--text);
  /* оттенки цвета лагеря; для старых браузеров — готовые значения, для новых они считаются из --bay */
  --tint:#E8F1FB; --tint-strong:#D3E5F8; --bay-dark:#125FA8; --ring:rgba(24,119,210,.28);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --r:16px;
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --tint:color-mix(in srgb,var(--bay) 9%,#fff); --tint-strong:color-mix(in srgb,var(--bay) 18%,#fff);
    --bay-dark:color-mix(in srgb,var(--bay) 82%,#000); --ring:color-mix(in srgb,var(--bay) 30%,transparent);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sail);color:var(--ink);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--bay);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,.pick:focus-within .pick-btn{outline:3px solid var(--ring);outline-offset:2px}
h1,h2,h3,p{margin:0}

/* шапка */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--mist)}
.top a{color:inherit;text-decoration:none}
.top-name{display:flex;align-items:center;gap:10px;font:600 19px/1 var(--text);letter-spacing:-.02em;color:var(--ink)}
.top-name::before{content:"";width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--bay),var(--brass))}
.top nav{display:flex;align-items:center;gap:8px;font-size:15px;white-space:nowrap}
.top nav a{padding:8px 12px;border-radius:10px;color:var(--soft);font-weight:600}
.top nav a:hover{background:var(--sail);color:var(--ink)}
.top nav a:last-child{background:var(--tint);color:var(--bay)}
@media (max-width:520px){.top nav a:first-child{display:none}}

/* первый экран */
.hero{position:relative;overflow:hidden;padding:56px 20px 150px;background:linear-gradient(165deg,var(--tint-strong) 0%,var(--tint) 45%,var(--sail) 100%)}
.hero-text{position:relative;z-index:2;max-width:800px;margin:0 auto}
.hero-org{display:inline-block;font-size:14px;font-weight:600;color:var(--bay);background:rgba(255,255,255,.8);border:1px solid var(--mist);border-radius:999px;padding:6px 14px}
.hero h1{font:600 clamp(44px,9vw,84px)/1 var(--text);letter-spacing:-.04em;margin:22px 0 16px;color:var(--ink)}
.hero-tag{font:600 clamp(20px,3vw,26px)/1.25 var(--text);letter-spacing:-.01em;color:var(--bay)}
.hero-about{max-width:32em;margin-top:12px;font-size:18px;color:var(--soft)}
/* украшение: солнце и два круга; не зависит от того, какой это лагерь */
.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-art i{position:absolute;border-radius:50%}
.hero-art i:nth-child(1){width:min(30vw,300px);aspect-ratio:1;right:max(24px,calc(50% - 600px));top:44px;
  background:radial-gradient(circle at 35% 30%,#fff 0,var(--brass) 55%);opacity:.9;box-shadow:0 0 0 22px rgba(255,255,255,.35),0 0 0 54px rgba(255,255,255,.18)}
.hero-art i:nth-child(2){width:120px;aspect-ratio:1;right:max(8px,calc(50% - 660px));top:300px;border:18px solid var(--bay);opacity:.14}
.hero-art i:nth-child(3){width:26px;aspect-ratio:1;right:max(60px,calc(50% - 300px));top:70px;background:var(--bay);opacity:.5}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;z-index:1;display:block}
@media (max-width:760px){
  .hero{padding:36px 20px 120px}
  .hero-art i:nth-child(1){width:170px;right:-50px;top:-30px;opacity:.55}
  .hero-art i:nth-child(2),.hero-art i:nth-child(3){display:none}
}

/* первый экран с фотографией лагеря (camp.json → design.hero): слева текст, справа фото; текст фото не закрывает */
.hero.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px;align-items:center;
  padding:44px max(28px,calc(50% - 590px)) 150px}
.hero.has-photo .hero-text{order:1;max-width:none;margin:0}
.hero.has-photo h1{font-size:clamp(40px,5.4vw,72px)}
.hero-photo{order:2;position:relative;z-index:2;display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:88% 50%;
  border-radius:28px;box-shadow:0 2px 4px rgba(16,24,40,.06),0 24px 60px rgba(16,24,40,.18)}
@media (max-width:860px){
  /* на телефоне фото идёт полосой сверху, текст под ним */
  .hero.has-photo{grid-template-columns:1fr;gap:0;padding:0 0 120px}
  .hero-photo{order:0;aspect-ratio:16/10;border-radius:0;box-shadow:none;object-position:70% 50%}
  .hero.has-photo .hero-text{padding:24px 20px 0}
}

/* лист с содержимым */
.sheet{position:relative;z-index:3;max-width:800px;margin:0 auto;padding:36px 20px 64px}
.has-hero .sheet{margin-top:-78px;padding-top:0}
.sheet.narrow{max-width:720px}
.sheet>section,.sheet>p,.sheet>.keep{margin-top:22px}
.h-page{font:600 clamp(30px,5.4vw,44px)/1.08 var(--text);letter-spacing:-.03em;margin-bottom:10px}
.sheet h2{font:600 24px/1.2 var(--text);letter-spacing:-.02em}
.lead{font-size:18px;color:var(--soft)}

/* шаги формы: каждая часть — отдельная карточка с номером */
.course{display:grid;gap:18px}
.leg{background:#fff;border:1px solid var(--mist);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 28px 12px}
.leg.last{padding-bottom:28px}
.leg h2{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mark{flex:none;width:36px;height:36px;border-radius:11px;background:var(--tint);color:var(--bay);display:grid;place-items:center;font:600 17px/1 var(--text)}
.leg-note{color:var(--soft);margin:-8px 0 18px;max-width:38em}
@media (max-width:560px){.leg{padding:20px 18px 6px}.leg.last{padding-bottom:22px}}

/* поля */
.field{display:block;margin-bottom:16px}
.field-label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.field-label i{font-style:normal;font-weight:400;color:var(--soft)}
.field input,.remind input{width:100%;font:inherit;color:inherit;background:#fff;border:1.5px solid var(--mist);border-radius:12px;padding:12px 14px;min-height:50px;
  transition:border-color .15s,box-shadow .15s}
.field input::placeholder,.remind input::placeholder{color:#A3B0BD}
.field input:hover,.remind input:hover{border-color:#C3CFDB}
.field input:focus,.remind input:focus{outline:0;border-color:var(--bay);box-shadow:0 0 0 4px var(--ring)}
.field-hint{display:block;font-size:14px;color:var(--soft);margin-top:5px}
.field-error{display:none;font-size:14px;color:var(--bad);margin-top:5px;font-weight:600}
.bad .field-error{display:block}
.bad input[type=text],.bad input[type=tel],.bad input[type=email],.bad input[type=date]{border-color:var(--bad)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.pair{grid-template-columns:1fr}}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{background:#FDECEA;border:1px solid #F6CFCB;color:#8A1F17;padding:12px 16px;margin-bottom:4px;border-radius:12px;font-weight:600}

/* смены: полоска показывает, сколько мест занято */
.shifts{display:grid;gap:12px;margin-bottom:16px}
.shift{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;background:#fff;border:1.5px solid var(--mist);border-radius:14px;padding:16px 18px;cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s}
.shift:hover{border-color:var(--bay)}
.shift input{width:22px;height:22px;accent-color:var(--bay);margin:0}
.shift:has(input:checked){border-color:var(--bay);background:var(--tint);box-shadow:0 0 0 4px var(--ring)}
.shift.closed{opacity:.6;cursor:default}
.shift.closed:hover{border-color:var(--mist)}
.shift-dates{font:600 20px/1.2 var(--text);letter-spacing:-.02em}
.shift-price{font-weight:600;white-space:nowrap;color:var(--bay);background:var(--tint);border-radius:999px;padding:4px 12px;font-size:15px}
.shift:has(input:checked) .shift-price{background:#fff}
.meter{grid-column:2/4;height:8px;border-radius:999px;background:var(--mist);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:#2FB67C}
.shift-free{grid-column:2/4;font-size:14px;color:var(--soft)}

/* окошки документов */
.docs{display:grid;gap:12px;margin-bottom:16px}
.doc{background:#FBFCFE;border:1.5px dashed #C7D3DF;border-radius:14px;padding:16px 18px;transition:border-color .15s,background-color .15s}
.doc.has{border-style:solid;border-color:#A9DCC4;background:#F3FBF7}
.doc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.doc h3{font:600 17px/1.3 var(--text)}
.doc-hint{font-size:15px;color:var(--soft);margin:4px 0 12px;max-width:40em}
.tag{font-size:13px;font-weight:600;color:var(--soft);background:var(--sail);border:1px solid var(--mist);border-radius:999px;padding:2px 10px;white-space:nowrap}
.tag.ok{color:var(--good);background:#DDF4E9;border-color:#DDF4E9}
.pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;cursor:pointer;margin:0}
.pick input[type=file]{position:absolute;opacity:0;width:1px;height:1px}
.pick-btn{display:inline-block;font-weight:600;font-size:15px;color:var(--bay);background:var(--tint);border-radius:10px;padding:10px 16px;cursor:pointer;transition:background-color .15s,color .15s}
.pick-btn:hover{background:var(--bay);color:#fff}
.pick-list{font-size:15px;color:var(--soft)}
.pick-list.err{color:var(--bad);font-weight:600}
.doc-files{list-style:none;padding:0;margin:0 0 12px;font-size:15px}
.doc-files li{padding:3px 0}.doc-files span{color:var(--soft);margin-left:8px;font-size:14px}

/* отправка */
.check{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;margin-bottom:18px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--bay)}
.check .field-error{grid-column:2}
.btn{display:inline-block;font:600 17px/1 var(--text);color:#fff;background:var(--bay);border:0;border-radius:12px;padding:15px 22px;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(16,24,40,.1);transition:background-color .15s,transform .05s}
.btn:hover{background:var(--bay-dark)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--tint);color:var(--bay);box-shadow:none}
.btn.ghost:hover{background:var(--bay);color:#fff}
.btn.big{font-size:18px;padding:18px 30px}
@media (max-width:560px){.btn.big{width:100%;text-align:center}}
.btn[disabled]{opacity:.6;cursor:progress}
.progress{margin-top:14px;font-weight:600;color:var(--bay)}
.progress.err{color:var(--bad)}

.remind{margin-top:18px;padding:24px 28px;background:#fff;border:1px solid var(--mist);border-radius:var(--r)}
.remind p{color:var(--soft);margin:6px 0 14px;max-width:38em}
.remind-row{display:flex;gap:10px;flex-wrap:wrap}
.remind-row input{flex:1 1 240px}
@media (max-width:560px){.remind{padding:20px 18px}}

/* личная страница */
.done-flag{display:inline-block;background:#DDF4E9;color:var(--good);font-weight:600;font-size:15px;padding:5px 14px;border-radius:999px;margin-bottom:12px}
.keep{background:#FFF7E6;border:1px solid #F6E2B8;padding:14px 18px;border-radius:14px}
.pack{background:#fff;border:1px solid var(--mist);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 26px}
.pack p{margin-top:8px}
.pack .btn{margin:8px 8px 0 0}
.left{margin:8px 0 16px;font-weight:600}
.after{color:var(--soft)}

/* вопросы и ответы */
.faq{margin-top:20px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:16px 20px}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{font:600 18px/1.35 var(--text);cursor:pointer}
.faq p{margin:10px 0 0;max-width:38em;color:var(--soft)}
.faq-end{margin:26px 0 18px}

.foot{background:#fff;border-top:1px solid var(--mist);color:var(--soft);padding:26px 20px;font-size:14px}
.foot p{max-width:800px;margin:0 auto 6px}
.foot a{color:var(--bay);margin-right:18px}

/* политика обработки персональных данных */
.policy section{background:#fff;border:1px solid var(--mist);border-radius:var(--r);padding:22px 26px}
.policy section h2{font-size:20px;margin-bottom:10px}
.policy section p{margin-top:8px}
@media (max-width:560px){.policy section{padding:18px}}

/* промокод в форме */
.promo{max-width:340px}
.promo input{text-transform:uppercase;letter-spacing:.04em}
.promo .field-hint.ok{color:var(--good);font-weight:600}
.promo .field-hint.no{color:var(--bad);font-weight:600}

/* объявление над страницей (camp.json → texts.notice), например «демонстрационная версия» */
.notice{background:#FFF1CC;color:#5C3D00;font-size:14px;font-weight:600;line-height:1.4;text-align:center;padding:9px 16px}
.shift-program{display:block;font:500 14px/1.3 var(--text);letter-spacing:0;color:var(--soft);margin-top:3px}

/* удобство и доступность: меньше движения тем, кто об этом просил; заголовки без висячих слов; без задержки касания */
h1,h2,h3{text-wrap:balance}
a,button,label,summary,input,select{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* спокойнее: без плашки над названием и цветного кружка в шапке */
.top-name::before{display:none}
.hero-org{background:none;border:0;padding:0;color:var(--soft);border-radius:0}
.hero-tag{color:var(--ink)}
.shift-price{background:none;padding:0;color:var(--ink);font-size:18px}
.shift:has(input:checked) .shift-price{background:none}
/* несколько детей в одной форме */
.addkid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 22px}
.addkid .leg-note{margin:0}
.kid-extra h2{flex-wrap:wrap}
.kid-remove{margin-left:auto;background:none;border:0;padding:0;font:600 15px var(--text);color:var(--bad);cursor:pointer}
.kid-docs-title{font:600 18px/1.2 var(--text);margin:18px 0 10px}
.others ul{margin:8px 0 0 18px}.others li{margin:4px 0}
/* отзыв о смене */
.review textarea,#review-text{width:100%;font:inherit;border:1.5px solid var(--mist);border-radius:12px;padding:12px 14px;background:#fff;resize:vertical}
.stars{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.stars legend{width:100%;margin-bottom:8px}
.stars label{display:flex;gap:6px;align-items:center;font:600 20px var(--text);border:1.5px solid var(--mist);border-radius:12px;padding:10px 18px;cursor:pointer;background:#fff}
.stars label:has(input:checked){border-color:var(--bay);background:var(--tint)}
.stars input{width:20px;height:20px;accent-color:var(--bay)}

/* Печать: чёрным по белому, без фонов и теней; блоки не разрываются между страницами */
@page{margin:12mm}
@media print{
  html,body{background:#fff!important}
  *,*::before,*::after{background:transparent!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;
    color:#000!important;border-color:#000!important;animation:none!important;transition:none!important}
  button,.btn,input[type=file],nav,video{display:none!important}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  section,li,tr,fieldset,details,.card,.slot,.step{break-inside:avoid;page-break-inside:avoid}
  a{text-decoration:none}
}