/* =======================================================================
   --- Base Styles & Variables (Self-Contained)
======================================================================= */
:root{
  --bg-color:#1d1e21;
  --accent-color:#cb2929;
  --text-color:#ffffff;
  --input-bg:#2a2c30;
  --border-color:#444;
  --font-title:'Oswald',sans-serif;
  --font-text:'Poppins',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%} /* prevent iOS zooming/resize */
.page-container{display:flex;flex-direction:column;min-height:100dvh} /* dynamic vh for iPad Safari */

.btn-submit{
  width:auto;padding:14px 40px;font-size:1.2rem;line-height:1.1;
  background-color:var(--accent-color);color:#fff;border:none;border-radius:8px;
  font-family:var(--font-title);text-transform:uppercase;letter-spacing:1px;
  cursor:pointer;transition:background-color .2s ease,transform .2s ease
}
.btn-submit:hover{background-color:#e06c34}
.btn-submit:active{transform:scale(.98)}

/* =======================================================================
   --- Waiver / Form Page
======================================================================= */
body.form-page{
  font-family:var(--font-text);
  color:var(--text-color);
  background-color:var(--bg-color);
  background-image:url('../assets/form-back.jpg');
  background-size:cover;background-position:center;background-repeat:repeat;
  /* iOS fix: 'fixed' causes scroll jank */
  background-attachment:scroll;
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  /* Safe-area insets for iPad with notch/gestures */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* --- Sticky Header --- */
.form-header{
  background-color:rgba(29,30,33,.92);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  padding:1rem 1.25rem;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  width:100%;position:sticky;top:0;z-index:100;
}

/* --- Header Layout --- */
.header-content{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
}
.form-logo{height:72px;flex-shrink:0}
.header-main-text{flex:1;min-width:0}
.header-main-text h1{
  font-family:var(--font-title);font-size:1.7rem;color:var(--text-color);
  margin:0;line-height:1.1
}
.header-subtitle{font-family:var(--font-text);font-size:1rem;color:var(--accent-color);margin:0}
.header-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;font-size:.9rem;color:#ccc}
.header-contact span{display:flex;align-items:center;gap:.5rem}
.header-contact i{color:var(--accent-color);width:16px;text-align:center}

/* --- Main & Container --- */
.form-main{padding:3rem 1rem;width:100%;flex-grow:1}
.waiver-container{
  max-width:960px;margin:0 auto;
  background-color:rgba(29,30,33,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:2.25rem 2.5rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
}
.waiver-intro,.waiver-conclusion{line-height:1.65;margin-bottom:2rem}
.checkbox-prompt{text-align:center;margin:1rem 0 2rem 0;font-style:italic;color:#e03434;opacity:.95;font-weight:600}
.checkbox-prompt i{margin-right:.5rem}
.waiver-points{margin:2rem 0;display:flex;flex-direction:column;gap:1.25rem}

/* --- Custom Checkbox --- */
.checkbox-group{display:flex;align-items:flex-start;gap:1rem}
.checkbox-group input[type="checkbox"]{
  flex-shrink:0;appearance:none;-webkit-appearance:none;width:22px;height:22px;
  border:2px solid var(--accent-color);border-radius:4px;margin-top:2px;cursor:pointer;position:relative;
  transition:background-color .15s ease
}
.checkbox-group input[type="checkbox"]:checked{background-color:var(--accent-color)}
.checkbox-group input[type="checkbox"]:checked::after{
  content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;color:#fff;font-size:14px;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
}
.checkbox-group label{line-height:1.6;cursor:pointer}
.checkbox-group label strong{color:var(--text-color)}

/* --- Form Fields Grid --- */
.form-fields{
  border-top:1px solid var(--border-color);margin-top:2rem;padding-top:2rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem 1.5rem
}
.field-group{display:flex;flex-direction:column}
.field-group label{font-family:var(--font-title);font-size:1.05rem;margin-bottom:.6rem;color:#ddd}
.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="date"]{
  background-color:var(--input-bg);border:1px solid var(--border-color);color:var(--text-color);
  padding:12px;border-radius:8px;font-family:var(--font-text);font-size:16px; /* >=16px avoids iOS zoom */
  transition:border-color .2s ease, box-shadow .2s ease
}
.field-group input[type="text"]:focus,
.field-group input[type="email"]:focus,
.field-group input[type="date"]:focus{
  outline:none;border-color:var(--accent-color);
  box-shadow:0 0 0 3px rgba(203,41,41,.28)
}
.field-group input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);cursor:pointer
}

/* --- Signature Pad --- */
.signature-pad-wrapper{
  border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:#fff;
  /* sensible defaults for iPad portrait */
  max-width:500px;width:100%;height:160px
}
.signature-pad{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.clear-button{
  background:none;border:1px solid #777;color:#ccc;padding:6px 12px;border-radius:6px;cursor:pointer;margin-top:10px;
  align-self:flex-start;transition:all .15s ease
}
.clear-button:hover{background-color:#333;border-color:#999}

/* --- Submit Container --- */
.submit-container{text-align:center;margin-top:2.5rem}

/* =======================================================================
   --- Responsive Tunings
======================================================================= */

/* Tablets & small desktops (600–1024px) */
@media (min-width:600px) and (max-width:1024px){
  .form-logo{height:76px}
  .waiver-container{max-width:1000px;padding:2rem 2.25rem}
  .form-fields{gap:1.25rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .signature-pad-wrapper{height:170px}
}

/* Narrow mobile (≤768px) */
@media (max-width:768px){
  .waiver-container{padding:1.75rem 1.25rem}
  .form-header{padding:.85rem 1rem}
  .header-content{flex-wrap:wrap;justify-content:center;gap:.75rem 1rem}
  .header-main-text{width:100%;text-align:center;order:-1}
  .header-main-text h1{font-size:1.45rem}
  .header-subtitle{font-size:.92rem}
  .header-contact{display:contents}
  .header-contact span{font-size:.85rem}
  .form-fields{grid-template-columns:1fr}
  .signature-pad-wrapper{max-width:100%;height:150px}
  .btn-submit{width:100%}
}

/* Desktop ≥1200px — slightly widen container for comfort */
@media (min-width:1200px){
  .waiver-container{max-width:1040px}
}

/* Reduced motion preference */
@media (prefers-reduced-motion:reduce){
  .btn-submit,.clear-button{transition:none}
}

/* --- Home Icon Button --- */
.header-home-link{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;background-color:var(--accent-color);
  color:#fff;border-radius:50%;font-size:1.35rem;text-decoration:none;margin-left:1rem;flex-shrink:0;
  transition:transform .15s ease, background-color .15s ease
}
.header-home-link:hover{background-color:#e03434;color:#fff;transform:scale(1.06)}
