:root{
  --ink:#0b2239; --muted:#6a7a89;
  --brand:#0c8c73; --brand-weak:#e6f6f3;
  --accent:#b83b5e; --error:#d72c2c; --surface:#fff;
  --shadow:0 16px 44px rgba(10,36,60,.18);
}

.modal{position:fixed;inset:0;display:none;z-index:999}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(8,18,28,.55);backdrop-filter:blur(2px)}
.modal__dialog{
  position:relative;max-width:860px;margin:6vh auto;background:var(--surface);
  border-radius:18px;box-shadow:var(--shadow);padding:22px 22px 26px
}
.modal__close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:#f2f4f6;color:#334;cursor:pointer;font-size:20px;line-height:36px}

.modal__title{margin:6px 0 4px;color:var(--ink);font:800 28px/1.2 system-ui}
.modal__subtitle{margin:0 0 12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
label{font-weight:600;color:var(--ink)}
input,select,textarea{border:1px solid #e1e6ea;border-radius:10px;padding:10px 12px;font:500 14px/1.4 system-ui;outline:0}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--brand-weak);border-color:#bfeee3}
.error{color:var(--error);min-height:14px;font-size:12px}

.privacy{font-size:12px;color:var(--muted);margin:8px 0 14px}

.btn-submit{position:relative;border:0;border-radius:999px;background:var(--accent);
  color:#fff;font-weight:800;padding:12px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.btn-submit[disabled]{opacity:.7;cursor:not-allowed}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:none;animation:spin .7s linear infinite}
.btn-submit.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:720px){.grid{grid-template-columns:1fr}}
/* ==== responsive modal sizing + internal scroll ==== */

/* give the overlay a little padding so the dialog can shrink on narrow screens */
.modal { padding: 12px; }

/* the dialog is a vertical layout: title, subtitle, then a scrollable form */
.modal__dialog{
  width: min(860px, 100%);
  max-height: calc(100dvh - 8vh);   /* use dynamic viewport height on mobile */
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr; /* h2, p, form grows & scrolls */
}

/* make the form the scroll container */
#demoForm{
  overflow: auto;
  min-height: 0;                     /* allow the grid child to shrink */
  -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
  padding-right: 2px;                /* avoid scrollbar overlap on some UAs */
}

/* keep inputs comfortable on small screens */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }  /* single column sooner */
}

/* full-screen modal on very small phones */
@media (max-width: 560px){
  .modal{ padding: 0; }                     /* edge-to-edge */
  .modal__dialog{
    margin: 0; border-radius: 0;
    width: 100vw; height: 100dvh; max-height: 100dvh;
    grid-template-rows: auto auto 1fr;
  }
  .modal__title{ font-size: 22px; }
  .modal__subtitle{ font-size: 14px; }
  .modal__close{ top: 8px; right: 8px; }
  #demoForm{ padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
}

/* optional: keep the submit button visible while scrolling */
@supports (position: sticky){
  #submitBtn{
    position: sticky;
    bottom: 0;
    margin-top: 12px;
  }
}
/* ===== Modal scroll + sticky submit ===== */

/* Make the dialog a 3-row grid: title, subtitle, scrollable form */
.modal__dialog{
  display: grid;
  grid-template-rows: auto auto 1fr;     /* h2, p, form */
  width: min(860px, 100%);
  max-height: min(92dvh, 820px);         /* avoid cutting on small screens */
  overflow: hidden;
}

/* The form is the scroll container */
#demoForm{
  overflow: auto;
  min-height: 0;                          /* allow grid child to shrink */
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;                      /* keep scrollbar off the edge */
  padding-bottom: 80px;                    /* 40px breathing room + 40px for sticky btn */
}

/* Keep the submit button always visible (sticky within the scrolling form) */
#submitBtn{
  position: sticky;
  bottom: 24px;                            /* distance from bottom edge */
  z-index: 2;
  margin-top: 16px;
  box-shadow: 0 8px 24px rgba(184, 59, 94, 0.28); /* slight elevation */
}

/* Optional: soften the content behind the floating button */
#demoForm::after{
  content: "";
  display: block;
  height: 40px;                            /* breathing space at very end */
}

/* Responsive tweaks */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }     /* single column sooner */
}

@media (max-width: 560px){
  .modal{ padding: 0; }
  .modal__dialog{
    margin: 0; border-radius: 0;
    width: 100vw; height: 100dvh; max-height: 100dvh;
  }
  #demoForm{
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 96px;                  /* bit more room on tiny screens */
  }
  .modal__title{ font-size: 22px; }
  .modal__subtitle{ font-size: 14px; }
  .modal__close{ top: 8px; right: 8px; }
}
/* --- Outside padding so the dialog breathes: 40px top/bottom on desktop --- */
.modal{ padding: 40px 16px; }  /* outside space (not inside the form) */

/* Dialog is a grid: title, subtitle, scrollable form, fixed footer */
.modal__dialog{
  width: min(860px, 100%);
  margin: auto;
  max-height: calc(100dvh - 80px);      /* match the 40px top/bottom padding */
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* h2, p, FORM, FOOTER */
}

/* Form is the only scrollable area */
#demoForm{
  overflow: auto;
  min-height: 0;                         /* allow it to shrink inside the grid */
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;                    /* keep scrollbar off the edge */
  padding-bottom: 0;                     /* no internal bottom space */
}

/* Footer stays put at the bottom of the dialog */
.modal__footer{
  padding-top: 12px;
  background: transparent;
  display: flex;
  justify-content: flex-start;           /* or: space-between / center */
}

/* Submit button is normal (not sticky) */
#submitBtn{
  position: static;
  box-shadow: 0 8px 24px rgba(184, 59, 94, 0.18);
}

/* One-column fields sooner for comfort */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

/* Full-height mobile sheet; outside space not needed on tiny phones */
@media (max-width: 560px){
  .modal{ padding: 0; }
  .modal__dialog{
    margin: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    grid-template-rows: auto auto 1fr auto;
  }
  #demoForm{ padding: 0 16px; }
  .modal__footer{ padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  .modal__title{ font-size: 22px; }
  .modal__subtitle{ font-size: 14px; }
  .modal__close{ top: 8px; right: 8px; }
}