/* Snowstyle Travel — guest details form
   Brand: red #B91D25 (Pantone 186) · slate #8F9BA2 (7543) · charcoal #231F20 */

:root{
  --red:#B91D25;
  --red-dark:#96161d;
  --slate:#8F9BA2;
  --charcoal:#231F20;
  --ink:#2b2b2d;
  --ink-soft:#5f6367;
  --line:#d9dde0;
  --line-soft:#e8ebed;
  --paper:#ffffff;
  --bg:#eef1f3;
  --focus:#1d6fd6;
  --radius:10px;
  --shadow:0 1px 2px rgba(35,31,32,.06), 0 8px 24px -12px rgba(35,31,32,.18);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
}

.wrap{width:100%;max-width:700px;margin:0 auto;padding-inline:18px}

.hidden{display:none !important}

/* ---------- header ---------- */
.topbar{background:var(--charcoal);padding-block:18px}
.topbar .logo{display:block;width:220px;height:auto}

/* ---------- trip heading ---------- */
.trip-head{padding-block:28px 6px}
.eyebrow{
  margin:0 0 6px;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--red);
}
.trip-head h1{
  margin:0;
  font-size:clamp(1.7rem,6vw,2.3rem);
  line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--charcoal);
}
.trip-meta{margin:.5rem 0 0;color:var(--ink-soft);font-weight:600}

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-block:16px;
}
.card h1{margin-top:0}

.intro p{margin:0 0 .8rem}
.intro p:last-child{margin-bottom:0}

.deadline{
  margin-top:.4rem !important;
  background:#fdf1f2;border-left:4px solid var(--red);
  padding:10px 14px;border-radius:0 6px 6px 0;font-weight:600;
}

/* ---------- fieldsets ---------- */
fieldset{border:0;margin:0;padding:22px;}
fieldset.card{padding:22px}

/* A <legend> normally renders inside the fieldset's top border, which leaves the
   heading sitting astride the edge of the card. Floating it makes it an ordinary
   block at the top of the padding box instead, so it lines up with everything else. */
legend{
  float:left;width:100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:0;margin:0 0 10px;
}
legend + *{clear:both}
fieldset::after{content:"";display:block;clear:both}
.legend-text{
  font-size:1.2rem;font-weight:800;letter-spacing:-.01em;color:var(--charcoal);
}
.badge{
  display:inline-block;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;color:#fff;background:var(--slate);
}
.badge-lead{background:var(--red)}

/* ---------- fields ---------- */
.field{margin-top:18px}
.field:first-of-type{margin-top:14px}

label{display:block;font-weight:650;color:var(--charcoal);margin-bottom:2px}
.req{color:var(--red)}
.opt{color:var(--ink-soft);font-weight:500;font-size:.9em}

.hint{margin:.15rem 0 .5rem;font-size:.88rem;color:var(--ink-soft);line-height:1.45}

input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;
  font:inherit;
  color:var(--ink);
  background:#fff;
  padding:11px 12px;
  border:1.5px solid var(--line);
  border-radius:8px;
  transition:border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance:none;appearance:none;
}
textarea{resize:vertical;min-height:84px}

select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6367' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;
}

input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus);
}
input:hover,select:hover,textarea:hover{border-color:var(--slate)}

input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{
  border-color:var(--red);background:#fffafa;
}

.error{margin:.3rem 0 0;color:var(--red-dark);font-size:.88rem;font-weight:600;min-height:0}
.error:empty{display:none}
.error.block{margin-bottom:.6rem}

/* checkbox */
.checkfield{
  display:flex;gap:12px;align-items:flex-start;
  background:#f7f9fa;border:1.5px solid var(--line);border-radius:8px;padding:14px;
}
.checkfield input[type=checkbox]{
  flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--red);
}
.checkfield label{margin:0;font-weight:600}
.checkfield:has(input[aria-invalid=true]){border-color:var(--red);background:#fffafa}

/* ---------- travellers ---------- */
.person .field:first-of-type{margin-top:14px}
#others .card{animation:rise .18s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- privacy ---------- */
.privacy-list{margin:.6rem 0 .8rem;padding-left:1.15rem}
.privacy-list li{margin-bottom:.45rem}

/* ---------- submit ---------- */
.submit-card{text-align:left}
.turnstile{margin-bottom:14px;min-height:0}

.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  font:inherit;font-weight:800;font-size:1.05rem;letter-spacing:.01em;
  color:#fff;background:var(--red);
  border:0;border-radius:8px;padding:15px 20px;
  cursor:pointer;
  transition:background .12s ease, transform .06s ease;
}
.btn:hover{background:var(--red-dark)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--slate);cursor:progress}

.spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.busy .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- done ---------- */
.done{text-align:center;padding-block:38px;margin-top:32px}
.done .tick{
  width:62px;height:62px;line-height:60px;margin:0 auto 14px;
  border-radius:50%;background:var(--red);color:#fff;font-size:2rem;font-weight:700;
}
.done h1{font-size:1.7rem;letter-spacing:-.02em}

/* ---------- index of links ---------- */
.trip-index{list-style:none;margin:1rem 0 0;padding:0}
.trip-index li{border-top:1px solid var(--line-soft);padding:14px 0}
.trip-index a{color:var(--red-dark);font-weight:700;word-break:break-all}
.trip-index .t-name{font-weight:800;color:var(--charcoal);display:block}
.trip-index .t-sub{color:var(--ink-soft);font-size:.9rem;display:block;margin-bottom:6px}

/* ---------- misc ---------- */
.muted{color:var(--ink-soft)}
.small{font-size:.87rem}
.centre{text-align:center}

.footer{padding:30px 0 44px;color:var(--ink-soft);font-size:.9rem}
.footer p{margin:0 0 3px}

@media (max-width:480px){
  body{font-size:16px}
  .card{padding:18px 16px;border-radius:8px}
  fieldset.card{padding:16px}
  .topbar .logo{width:180px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}