/* =========================================
   Contact / Demo form — DRY, scoped to #demo
   ========================================= */
.form{
  /* Card + control tokens (Light Theme) */
  --control-h: 45px; /* Aligned with standard input height (approx 45px) */
  --card-bg: #ffffff;
  --card-border: var(--border);
  
  --ctrl-bg: #f8fafc;
  --ctrl-border: #cbd5e1;
  --ctrl-border-hover: #94a3b8;
  --ctrl-ring: color-mix(in srgb, var(--brand-accent) 22%, transparent);
  --ctrl-focus-border: var(--brand-accent);
  
  --txt-label: var(--ink);
  --txt-placeholder: var(--muted);

  --err-border: #ef4444;
  --err-ring: rgba(239,68,68,0.15);

  margin-top: var(--space-6);
  background: var(--card-bg);
  background-clip: padding-box;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl); /* Deep shadow for pop */
  padding: clamp(1.25rem, 2.5vw, 2rem); /* Reduced padding */
}

/* ---------- Sections / legends ---------- */
/* ==============================
   Notice Modal (success / error)
   ============================== */

.notice-dialog{
  width: min(520px, 92vw);
  padding: 0;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-2);
}
.notice-dialog::backdrop{
  background: color-mix(in srgb, var(--black) 65%, transparent);
  backdrop-filter: blur(2px);
}

.notice{
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .5rem;
}

.notice__header{
  display:flex; align-items:center; gap:.55rem;
  padding: .9rem 1rem .25rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.notice__header h3{
  margin:0;
  font: 800 1.1rem/1.3 var(--font-ui);
  color: var(--brand-primary);
}

.notice__badge{
  width:.7rem; height:.7rem; border-radius:999px;
  background: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}
.notice__badge.is-success{
  background:#22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
}
.notice__badge.is-error{
  background:#ef4444;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent);
}

.notice__body{
  padding: .75rem 1rem 1rem;
  font: 400 1rem/1.6 var(--font-ui);
  color: var(--ink);
}
.notice__body p{ margin:0; }

.notice__footer{
  display:flex; justify-content:flex-end; gap:.6rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.notice-dialog [data-close]{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  .notice-dialog::backdrop{ backdrop-filter:none; }
}

/* Submit loading state (paired with JS) */
button[data-loading].is-loading{
  pointer-events:none; opacity:.7;
}

/* With this more robust disabled styling */
button[data-loading].is-loading,
button:disabled,
.button:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .55;              /* tweak to taste */
  filter: saturate(.75);
}

/* Optional: tone down primary button when disabled */
.button--primary:disabled {
  box-shadow: none;
  /* if you use gradient backgrounds, flatten them a bit when disabled */
  background-image: none;
  /* keep brand-ish but muted */
  background: color-mix(in srgb, var(--brand-accent) 60%, #ccc);
  border-color: color-mix(in srgb, var(--brand-accent) 35%, #ddd);
}
/* Optional: small utility for the primary button inside dialogs
   (keeps look consistent if your global .button styles vary) */
.notice__footer .button--primary{
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 28%, transparent);
}
/* Modal buttons refinement */
.notice__footer .button--primary{
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 28%, transparent);
  border-radius: 8px; /* Less boxy */
  padding: 0.6rem 1.5rem;
}
.notice__footer .button--secondary{
  display: none; /* Hide redundant close button */
}

/* form starts  */

#demo .form__section + .form__section{ margin-top: var(--space-4); /* Reduced from space-5 */ }

#demo .form__section{
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0 0 var(--space-3); /* Reduced padding */
  margin-bottom: var(--space-3); /* Reduced bottom margin */
}
#demo .form__section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Let the Why-section subtitle use full container width */
#demo .section-subtitle{
  display: flex;
  max-width: 100%;        /* or 100% */
  justify-content: center;
}

#demo .form__legend{
  display:block;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-weight: 700;
  color: var(--brand-primary); /* Navy */
  font-size: clamp(1.1rem, 1.2vw + .2rem, 1.25rem);
  border: 0; 
}

/* ---------- Grid ---------- */
#demo .form__grid{ display:grid; gap: 0.75rem; grid-template-columns: 1fr; } /* Reduced gap from space-4 */
@media (min-width:860px){ #demo .form__grid{ grid-template-columns: repeat(3,1fr); } }
#demo .form__grid--2{ grid-template-columns: 1fr; }
@media (min-width:860px){ #demo .form__grid--2{ grid-template-columns: repeat(2,1fr); } }
#demo .form__grid > .form__field{ align-self:start; } /* Safari quirk */

/* ---------- Fields & labels ---------- */
#demo .form__field{ position:relative; display:grid; gap:.4rem; }
#demo .form__field--full{ grid-column: 1 / -1; }
#demo .form__label{ font-weight:600; color:var(--txt-label); font-size: 0.95rem; }
#demo .req{ color: #ef4444; margin-left:.15rem; }

/* ---------- Controls (inputs / selects / grouped input) ---------- */
/* Using global styles from components.css for World-Class consistency */

#demo .form .input-group{ display:flex; align-items:stretch; }
#demo .form .input-prefix{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 40px; /* Match global min-height */
  padding: 0 .65rem;
  color: var(--muted); background: #f1f5f9;
  border: 1px solid var(--border);
  /* border-right: 0;  <-- Removed to give it a full box look per user request "add left border as well" usually implies separation or full borders */
  border-radius: 0; 
  font-weight: 500;
  margin-right: -1px; /* Overlap borders so it looks like one line but both have borders */
  z-index: 1; /* Ensure overlap order */
}
/* Ensure the input next to it also is squared on the left */
#demo .form .input.input--with-prefix {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* border-left: 0; <-- User wants left border back */
  position: relative;
  z-index: 0; 
}
#demo .form .input.input--with-prefix:focus {
  z-index: 2; /* Bring to front on focus to show full ring */
}
/* ---------- Controls (inputs / selects / grouped input) ---------- */
#demo .form .select{ cursor: pointer; } /* Fix: cursor pointer on select */

#demo .form .input-group{ display:flex; align-items:stretch; }

/* ---------- Invalid state & errors ---------- */
#demo .form .is-invalid{
  border-color: var(--err-border) !important;
  box-shadow: 0 0 0 3px var(--err-ring);
  background: #fff;
}

#demo .form .form__error{
  color: var(--err-border); font-size: var(--fs-300); line-height:1.35; margin-top:.3rem; font-weight: 500;
}

@supports selector(:has(*)){
  #demo .form .form__field:has(.form__error){ padding-bottom: 1.1rem; }
  #demo .form .form__error{ position:absolute; left:0; bottom:.05rem; margin:0; line-height:1.2; pointer-events:none; }
}

/* ---------- Global alerts ---------- */
#demo .form :is(.form__alert, .form__success){
  display:none; margin: var(--space-3) 0 0; padding:.75rem 1rem; border-radius:8px; font-size: var(--fs-300); font-weight: 500;
}
#demo .form .form__alert{ background: #fef2f2; border:1px solid #fca5a5; color:#991b1b; }
#demo .form .form__success{ background: #f0fdf4; border:1px solid #86efac; color:#166534; }
#demo .form :is(.form__alert, .form__success).is-visible{ display:block; }

/* ---------- Checkbox ---------- */
#demo .form .form__check{ grid-column:1 / -1; display:flex; gap:.6rem; align-items:flex-start; color:var(--muted); font-size: 0.9rem; }
#demo .form .form__check a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
#demo .form .check{ width:18px; height:18px; margin-top:.1rem; accent-color: var(--brand-accent); border-color: var(--ctrl-border); }

/* ---------- Actions (CTA + assurance) ---------- */
#demo .form .form__actions{
  --btn-h: 44px; /* Reduced from 48px */
  margin-top: var(--space-4); /* Reduced margin */
  display:flex; align-items:center; gap: clamp(12px, 2vw, 20px); flex-wrap:wrap; padding-top: var(--space-4); border-top: 1px solid var(--border);
}
#demo .form .form__actions .button{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--btn-h); padding-inline:1.5rem; line-height:1; border-radius:999px; white-space:nowrap;
}
#demo .form .form__assure{
  margin:0; display:inline-flex; align-items:center; min-height: var(--btn-h);
  line-height:1.3; color: var(--muted);
}
@media (max-width:560px){
  #demo .form .form__actions{ flex-direction:column; align-items:stretch; gap:.5rem; }
  #demo .form .form__assure{ min-height:0; display:block; text-align:center; }
}

/* ---------- Datetime input (standard colors for light theme) ---------- */
#demo .form input[type="datetime-local"]{
  color-scheme: light; color:var(--ink); caret-color:var(--brand-primary); padding-right:1rem; cursor: pointer;
  height: var(--control-h);
}
#demo .form input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: none; opacity: 0.6; cursor:pointer;
}
#demo .form input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ---------- Misc ---------- */
#demo .hp{ position:absolute; left:-9999px; height:0; width:0; overflow:hidden; }
@media (prefers-reduced-motion: reduce){ #demo .form *{ transition:none !important; } }