/* =====================================================================
   ФОРМА ЗАЯВКИ · Школа байкальского гостеприимства
   Загрузка документов. Два режима: модальное окно и инлайн-форма
   внутри секции лендинга (.gf-inline, тема .gf-inline--on-paper).
   Все переменные с префиксом --gf- : стили не конфликтуют с лендингом,
   но повторяют его палитру (фиолетовый + золото).
   ================================================================== */

.gf-root{
  --gf-bg:        #1f0e3a;
  --gf-bg-deep:   #17082C;
  --gf-bg-up:     #2a1450;
  --gf-line:      rgba(232,222,255,.12);
  --gf-line-str:  rgba(232,222,255,.24);
  --gf-ink:       #ffffff;
  --gf-ink-soft:  #d8cce8;
  --gf-ink-mute:  #9a8cb5;
  --gf-accent:      #b362d6;
  --gf-accent-soft: #d49aec;
  --gf-accent-deep: #833CA3;
  --gf-accent-glow: rgba(179,98,214,.25);
  --gf-gold:      #c8a35a;
  --gf-gold-soft: #e0c882;
  --gf-ok:        #4bbf88;
  --gf-err:       #e57373;
  --gf-err-ink:   #f0c4c4;
  /* фоновые подложки (дроп-зона, карточка сотрудника, примечание) */
  --gf-tint:       rgba(42,20,80,.5);
  --gf-tint-2:     rgba(23,8,44,.5);
  --gf-tint-hover: rgba(131,60,163,.18);
  --gf-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --gf-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gf-ease:  cubic-bezier(.22,.61,.36,1);
}

/* ---------- Карточка формы (общая для модалки и инлайна) ---------- */
.gf-card{
  position:relative;
  background:var(--gf-bg);
  border:1px solid var(--gf-line);
  color:var(--gf-ink);
  font-family:var(--gf-sans);
  font-size:15px; line-height:1.55;
}
.gf-card *,.gf-card *::before,.gf-card *::after{box-sizing:border-box}

/* ---------- Оверлей ---------- */
.gf-overlay{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(12px, 4vh, 56px) clamp(12px, 4vw, 40px);
  background:rgba(9,3,20,.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--gf-ease), visibility .35s var(--gf-ease);
}
.gf-overlay.is-open{opacity:1; visibility:visible}

.gf-modal{
  width:100%; max-width:760px;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.85);
  transform:translateY(20px) scale(.985);
  transition:transform .4s var(--gf-ease);
}
.gf-overlay.is-open .gf-modal{transform:none}

/* ---------- Инлайн-режим (форма внутри секции лендинга) ---------- */
.gf-inline{display:block; width:100%; max-width:100%}
.gf-inline .gf-card{
  width:100%;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.6);
}
.gf-inline .gf-head{padding-top:34px}

/* Светлая («бумажная») секция — section--paper на лендингах */
.gf-inline--on-paper{
  --gf-bg:        #ffffff;
  --gf-bg-deep:   #f7f4fa;
  --gf-bg-up:     #f2edf7;
  --gf-line:      rgba(26,15,46,.12);
  --gf-line-str:  rgba(26,15,46,.26);
  --gf-ink:       #1a0f2e;
  --gf-ink-soft:  #5a4a6e;
  --gf-ink-mute:  #7d6d95;
  --gf-accent:      #833CA3;
  --gf-accent-soft: #6c2e8c;
  --gf-accent-deep: #5f2478;
  --gf-accent-glow: rgba(131,60,163,.3);
  --gf-gold:      #8a6a1f;
  --gf-gold-soft: #6f5416;
  --gf-err:       #c0392b;
  --gf-err-ink:   #8c2d22;
  --gf-tint:       #f6f2fa;
  --gf-tint-2:     #faf8fc;
  --gf-tint-hover: rgba(131,60,163,.08);
}
.gf-inline--on-paper .gf-card{
  box-shadow:0 30px 80px -40px rgba(26,15,46,.3);
}

/* ---------- Шапка ---------- */
.gf-head{
  padding:38px clamp(22px,4vw,46px) 0;
  position:relative;
}
.gf-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gf-accent); font-weight:500; margin-bottom:14px;
}
.gf-eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.6}
.gf-title{
  font-family:var(--gf-serif); font-weight:300;
  font-size:clamp(28px,4vw,40px); line-height:1.05;
  letter-spacing:-.015em; margin:0 0 10px; color:var(--gf-ink);
}
.gf-title em{font-style:normal; color:var(--gf-gold)}
.gf-sub{color:var(--gf-ink-mute); font-size:14px; margin:0 0 26px; max-width:52ch}

.gf-close{
  position:absolute; top:20px; right:20px;
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--gf-line);
  color:var(--gf-ink-soft); cursor:pointer; padding:0;
  transition:all .3s var(--gf-ease);
}
.gf-close:hover{border-color:var(--gf-accent); color:var(--gf-accent-soft); transform:rotate(90deg)}

/* ---------- Табы ---------- */
.gf-tabs{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--gf-line);
  border-bottom:1px solid var(--gf-line);
  margin-top:4px;
}
.gf-tab{
  background:transparent; border:none; cursor:pointer;
  padding:18px 12px; color:var(--gf-ink-mute);
  font-family:var(--gf-sans); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  position:relative; transition:color .3s var(--gf-ease);
}
.gf-tab + .gf-tab{border-left:1px solid var(--gf-line)}
.gf-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--gf-accent); transform:scaleX(0);
  transition:transform .35s var(--gf-ease);
}
.gf-tab:hover{color:var(--gf-ink-soft)}
.gf-tab.is-active{color:var(--gf-ink)}
.gf-tab.is-active::after{transform:scaleX(1)}

/* ---------- Тело формы ---------- */
.gf-body{padding:32px clamp(22px,4vw,46px) 38px}
.gf-pane{display:none}
.gf-pane.is-active{display:block; animation:gf-fade .35s var(--gf-ease)}
@keyframes gf-fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.gf-section-title{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gf-gold); font-weight:600;
  margin:32px 0 18px; padding-bottom:10px;
  border-bottom:1px solid var(--gf-line);
}
.gf-section-title:first-child{margin-top:0}

.gf-field{display:block; margin-bottom:20px}
.gf-label{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gf-ink-mute); margin-bottom:8px;
}
.gf-label .gf-req{color:var(--gf-accent-soft)}
.gf-input, .gf-textarea{
  width:100%; background:transparent; color:var(--gf-ink);
  border:none; border-bottom:1px solid var(--gf-line-str);
  padding:11px 2px 12px;
  font-family:var(--gf-sans); font-size:15px;
  transition:border-color .3s var(--gf-ease);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.gf-input::placeholder, .gf-textarea::placeholder{color:var(--gf-ink-mute); opacity:.55}
.gf-input:focus, .gf-textarea:focus{outline:none; border-bottom-color:var(--gf-accent)}
.gf-textarea{min-height:84px; resize:vertical}
.gf-field.has-error .gf-input,
.gf-field.has-error .gf-textarea{border-bottom-color:var(--gf-err)}
.gf-field-err{display:none; color:var(--gf-err); font-size:12px; margin-top:6px}
.gf-field.has-error .gf-field-err{display:block}

.gf-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.gf-row--3{grid-template-columns:1.2fr 1fr 1fr}

/* honeypot — только для ботов */
.gf-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---------- Загрузка файлов ---------- */
.gf-upload{margin-bottom:22px}
.gf-upload__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px}
.gf-upload__title{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gf-ink-mute);
}
.gf-upload__hint{font-size:11px; color:var(--gf-ink-mute); opacity:.7}
.gf-drop{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:18px 20px; cursor:pointer;
  background:var(--gf-tint);
  border:1px dashed var(--gf-line-str);
  color:var(--gf-ink-soft); text-align:left;
  transition:all .3s var(--gf-ease);
}
.gf-drop:hover, .gf-drop.is-drag{
  border-color:var(--gf-accent); background:var(--gf-tint-hover); color:var(--gf-ink);
}
.gf-drop svg{flex:none; color:var(--gf-accent)}
.gf-drop__text{font-size:13px; line-height:1.4}
.gf-drop__text b{display:block; font-weight:500; color:var(--gf-ink); font-size:14px}
.gf-drop__text span{color:var(--gf-ink-mute); font-size:11px}
.gf-upload.has-error .gf-drop{border-color:var(--gf-err)}
.gf-upload input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

.gf-filelist{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px}
.gf-file{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; background:var(--gf-bg-up);
  border:1px solid var(--gf-line); font-size:13px;
}
.gf-file__name{flex:1; color:var(--gf-ink-soft); word-break:break-all}
.gf-file__size{color:var(--gf-ink-mute); font-size:11px; white-space:nowrap}
.gf-file__del{
  flex:none; width:22px; height:22px; display:grid; place-items:center;
  background:transparent; border:none; color:var(--gf-ink-mute);
  cursor:pointer; font-size:17px; line-height:1; padding:0;
  transition:color .25s;
}
.gf-file__del:hover{color:var(--gf-err)}

/* ---------- Сотрудники ---------- */
.gf-emp{
  border:1px solid var(--gf-line); background:var(--gf-tint-2);
  padding:22px; margin-bottom:16px; position:relative;
  animation:gf-fade .3s var(--gf-ease);
}
.gf-emp__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.gf-emp__num{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--gf-serif); font-size:20px; color:var(--gf-gold);
}
.gf-emp__num b{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--gf-accent); color:var(--gf-accent-soft);
  font-family:var(--gf-sans); font-size:12px; font-weight:500;
}
.gf-emp__del{
  background:transparent; border:none; cursor:pointer; padding:4px 6px;
  color:var(--gf-ink-mute); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  transition:color .25s;
}
.gf-emp__del:hover{color:var(--gf-err)}
.gf-add{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:1px dashed var(--gf-line-str);
  color:var(--gf-ink-soft); cursor:pointer;
  padding:14px 22px; width:100%; justify-content:center;
  font-family:var(--gf-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:all .3s var(--gf-ease);
}
.gf-add:hover{border-color:var(--gf-accent); color:var(--gf-accent-soft)}
.gf-add:disabled{opacity:.4; cursor:not-allowed}

/* ---------- Согласие + кнопка ---------- */
.gf-consent{
  display:flex; gap:12px; align-items:flex-start;
  margin:26px 0 8px; font-size:12.5px; color:var(--gf-ink-mute); line-height:1.5;
  cursor:pointer;
}
.gf-consent input{margin-top:3px; accent-color:var(--gf-accent); flex:none; width:16px; height:16px}
.gf-consent a{color:var(--gf-accent-soft); text-decoration:underline; text-underline-offset:2px}
.gf-consent.has-error{color:var(--gf-err)}

.gf-note{
  background:var(--gf-tint); border-left:2px solid var(--gf-gold);
  padding:12px 16px; margin:20px 0 0;
  font-size:12px; color:var(--gf-ink-mute); line-height:1.5;
}

.gf-submit{
  width:100%; justify-content:center; margin-top:22px;
  display:inline-flex; align-items:center; gap:12px;
  background:var(--gf-accent-deep); color:#fff; border:none; cursor:pointer;
  padding:18px 26px;
  font-family:var(--gf-sans); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  transition:all .3s var(--gf-ease);
}
.gf-submit:hover:not(:disabled){background:var(--gf-accent); box-shadow:0 12px 34px -12px var(--gf-accent-glow)}
.gf-submit:disabled{opacity:.6; cursor:wait}

.gf-progress{height:2px; background:var(--gf-line); margin-top:14px; display:none}
.gf-progress.is-visible{display:block}
.gf-progress__bar{height:100%; width:0; background:var(--gf-gold); transition:width .2s linear}

.gf-alert{
  display:none; padding:13px 16px; margin-top:18px;
  font-size:13px; border-left:2px solid var(--gf-err);
  background:rgba(229,115,115,.1); color:var(--gf-err-ink);
}
.gf-alert.is-visible{display:block}

/* ---------- Успех ---------- */
.gf-success{display:none; padding:60px clamp(22px,4vw,46px) 64px; text-align:center}
.gf-success.is-visible{display:block; animation:gf-fade .4s var(--gf-ease)}
.gf-success__icon{
  width:72px; height:72px; margin:0 auto 26px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--gf-gold); color:var(--gf-gold);
}
.gf-success h3{
  font-family:var(--gf-serif); font-weight:300; font-size:clamp(26px,3.6vw,36px);
  margin:0 0 14px; color:var(--gf-ink);
}
.gf-success p{color:var(--gf-ink-mute); margin:0 auto 8px; max-width:46ch; font-size:14px}
.gf-success__code{
  display:inline-block; margin-top:18px; padding:10px 18px;
  border:1px solid var(--gf-line-str); color:var(--gf-gold-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; font-size:14px;
}
.gf-success__btn{
  margin-top:30px; background:transparent; border:1px solid var(--gf-line-str);
  color:var(--gf-ink); cursor:pointer; padding:15px 30px;
  font-family:var(--gf-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:all .3s var(--gf-ease);
}
.gf-success__btn:hover{border-color:var(--gf-accent); color:var(--gf-accent-soft)}

/* ---------- Мобильные ---------- */
@media (max-width:640px){
  .gf-overlay{padding:0; align-items:stretch}
  .gf-modal{max-width:none; min-height:100%; border:none}
  .gf-head{padding-top:30px}
  .gf-row, .gf-row--3{grid-template-columns:1fr; gap:0}
  .gf-tab{padding:16px 8px; font-size:10px; letter-spacing:.1em}
  .gf-body{padding-bottom:44px}
  /* подпись под заголовком документа, а не сбоку — иначе тесно */
  .gf-upload__head{flex-direction:column; align-items:flex-start; gap:3px}
  .gf-upload__hint{max-width:100%}
  .gf-emp{padding:18px 16px}
  .gf-inline .gf-head{padding-top:28px}
  .gf-inline .gf-card{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .gf-overlay, .gf-modal, .gf-pane, .gf-close{transition:none; animation:none}
}