/* =========================
   VARIABLES
   ========================= */
:root {
  --color-overlay:    rgba(0, 0, 0, 0.5);
  --color-status-text: #fff;
  --color-success-bg: rgba(40, 167, 69, 1);
  --color-error-bg:   rgba(220, 53, 69, 1);

  --consent-font-size: 1rem;
  --label-col: 245px;          /* DESKTOP label column (can vary per breakpoint) */
  --field-max: 480px;          /* DESKTOP fixed input-column width */
  --consent-gap: 2px;          /* (mobile) gap in consent row if needed */
  --space-xs: 0.25rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;

  /* theme placeholders used elsewhere in your CSS */
  --color-form-bg: #fff;
  --color-text: #333;
  --color-muted: #777;
  --color-border: #ccc;
  --color-primary: #007acc;
  --color-primary-dark: #0064b0;
}

/* =========================
   GENERAL LAYOUT / FORM
   ========================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
  z-index: 1000;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
}

.modal-form {
  background-color: var(--color-form-bg);
  padding: var(--space-md);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}

.modal-form > form,
.contact-form {
  background-color: var(--color-form-bg);
  padding: var(--space-md);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

fieldset { border: none; margin: 0; padding: 0; }

.inputWrapper { margin-bottom: var(--space-md); }

.inputWrapper label {
  display: block;
  text-align: left;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  font-weight: 600; /* bold for normal labels; consent overrides below */
}

/* Field shell */
.field { position: relative; }

.field input,
.field textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  color: var(--color-text);
  box-sizing: border-box;
}

.field textarea { resize: vertical; min-height: 8rem; }

/* clear buttons */
.clear-button {
  position: absolute;
  top: 50%;
  right: var(--space-sm);
  transform: translateY(-50%);
  display: none;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
}
.clear-button.visible { display: inline-flex !important; align-items: center; justify-content: center; }

/* focus ring */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,122,204,0.25);
}

/* character counter */
.field .char-counter {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* required marker for normal fields (label comes BEFORE input) */
label.required::after {
  content: '*';
  color: red;
  margin-left: var(--space-xs);
}

.inputWrapper.consentWrapper .field label {
  font-weight: normal;                      /* not bold */
  font-size: var(--consent-font-size, 0.9rem); /* slightly smaller text */
  color: var(--color-text, #333);           /* optional: match normal text color */
  line-height: 1.4;                         /* better readability for longer text */
}

/* Ensure the link inside keeps accessible color */
.inputWrapper.consentWrapper .field label a {
  color: var(--color-text);
  _text-decoration: underline;
}

.inputWrapper.consentWrapper .field label a:hover,
.inputWrapper.consentWrapper .field label a:focus {
  text-decoration: none;
}

/* The red star inserted before the label */
.req-star {
  color: red;
  margin: 0 var(--space-xs, 0.25rem);
  line-height: 1;
  display: inline;
   margin-left: 3px;    /* checkbox → star */
  margin-right: 10px;  /* star → label text */
}

/* =========================
   CONSENT ROW (shared)
   ========================= */
.inputWrapper.consentWrapper .field{
  display:flex;
  align-items:flex-start;
  gap: 0; /* we’ll control exact spacing with the star margins */
}

/* consent label is lighter and slightly smaller */
.inputWrapper.consentWrapper .field label {
  font-weight: normal;
  font-size: var(--consent-font-size);
  color: var(--color-text);
  line-height: 1.4;
  display: inline;                 /* act like normal inline text */
  flex: 1 1 auto; min-width: 0;    /* wrap naturally */
  white-space: normal; overflow-wrap: anywhere;
}

/* links inside consent label */
.inputWrapper.consentWrapper .field label a {
  color: var(--color-text);
  _text-decoration: underline;
}
.inputWrapper.consentWrapper .field label a:hover,
.inputWrapper.consentWrapper .field label a:focus {
  text-decoration: none;
  color: var(--color-button-bg-hover);
}

/* checkbox: never stretch */
.inputWrapper.consentWrapper .field input[type="checkbox"]{
  flex: 0 0 auto;
  width:auto !important;
  height:auto !important;
  margin-top: 2px;
  margin-left: 2px;
}

/* Put the star BEFORE the label text (between checkbox and text) with exact spacing */
.inputWrapper.consentWrapper .field > input[type="checkbox"][required] + label::before{
  content: '*';
  color: red;
  display: inline-block;
  line-height: 1;
  margin-left: 3px;    /* checkbox → star */
  margin-right: 10px;  /* star → text */
}

/* If JS ever adds label.required to consent, suppress the normal ::after star there */
.inputWrapper.consentWrapper .field > label.required::after { content: none; }

/* =========================
   STATUS OVERLAY + BUTTONS
   ========================= */
.status-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1020;
  background: var(--color-overlay);
}
.status-overlay.visible { opacity: 1; visibility: visible; display: flex !important; }
.status-overlay[data-status="success"] { background: var(--color-success-bg); }
.status-overlay[data-status="error"]   { background: var(--color-error-bg); }
.status-text { flex: 1; font-size: .9rem; color: var(--color-status-text); }

.status-close {
  display: none;
  background: none;
  border: 1px solid #dc3545;
  color: #dc3545;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.status-overlay[data-status="error"] .status-close { display: inline-flex; }
.status-overlay[data-status="error"] .status-close:hover,
.status-overlay[data-status="error"] .status-close:focus {
  background: #dc3545; color: #fff; outline: none;
}

.form-actions { position: relative; text-align: left; }
.submit-button {
  padding: .625rem 1rem;
  font-size: 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  transition: background-color .2s ease-in-out;
  width: 100%;
}
.submit-button:hover,
.submit-button:focus { background: var(--color-primary-dark); }
.submit-button:disabled { opacity: .5; cursor: not-allowed; }

/* CSRF init overlay */
.csrf-init-overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.csrf-init-overlay.hidden { opacity: 0; visibility: hidden; }
#contact-form { position: relative; }

/* =========================
   DESKTOP (≥768px)
   ========================= */
@media (min-width: 768px) {

  /* 1) Make the FORM CONTAINER wide enough to fit label + gap + field */
  .modal-form > form,
  .contact-form {
    width: 100%;
    max-width: calc(var(--label-col) + var(--space-sm) + var(--field-max));
    display: inline-block;
  }

  /* 2) Normal rows: labels and fields side by side using the same vars */
  .inputWrapper { display: flex; align-items: center; }

  .inputWrapper label {
    flex: 0 0 var(--label-col);   /* <- keep in sync with --label-col */
    margin-right: var(--space-sm);
    text-align: left;
  }

  .inputWrapper .field {
    flex: 1;
    max-width: var(--field-max);  /* <- keep in sync with --field-max */
    margin-left: auto;            /* push field to the right edge of container */
  }

  /* Textarea label alignment */
  .textareaWrapper { display: flex; align-items: flex-start; }
  .textareaWrapper label { margin-top: var(--space-sm); }

  /* Buttons smaller on desktop */
  .submit-button { width: auto; }
}

/* =========================
   CONSENT DESKTOP (≥768px)
   - first col tracks --label-col (variable)
   - second col is FIXED to --field-max (no breathing)
   ========================= */
@media (min-width:768px){
  .inputWrapper.consentWrapper{
    display: grid !important;
    /* second track is capped at --field-max but will shrink to fit the container */
    grid-template-columns:
      var(--label-col)
      min( var(--field-max), calc(100% - var(--label-col) - var(--space-sm, 12px)) );
    column-gap: var(--space-sm, 12px);
    justify-content: start;
    align-items: start;
    width: 100%;
  }

  /* remove any legacy spacer hack */
  .inputWrapper.consentWrapper::before{ content:none !important; }

  /* place the field in col 2; let it fill the computed track (no fixed 480px here) */
  .inputWrapper.consentWrapper > .field{
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 !important;          /* beat .inputWrapper .field { margin-left:auto } */
    width: 100% !important;        /* fill the track width */
    max-width: 100% !important;    /* never exceed track */
    min-width: 0 !important;       /* allow shrink */
    box-sizing: border-box;
    justify-content: flex-start;
  }
}
/* =========================
   MOBILE (<768px)
   ========================= */
@media (max-width: 767.98px){
  /* On mobile, everything stacks naturally */
  .inputWrapper.consentWrapper .field{ display:flex; align-items:flex-start; gap:0; }
}