/* =========================
   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;
  max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
  overflow: auto;
}

.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;
  max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
  overflow: auto;
}

.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;
  /*
    Keep this block-level.
    Some iOS Safari versions can mis-measure the height of long, wrapping
    inline labels inside a flex row which may lead to the next block (the
    submit button) visually overlapping the consent text.
  */
  display: block;
  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{
  /* On a red error background, red text/border becomes invisible.
     Make the button readable by default (also helps non-hover/touch). */
  border-color: #fff;
  color: #fff;
}
.status-overlay[data-status="error"] .status-close:hover,
.status-overlay[data-status="error"] .status-close:focus {
  background: rgba(255,255,255,0.16);
  color: #fff;
  outline: none;
}

.form-actions {
  position: relative;
  text-align: left;
  margin-top: var(--space-md);
  /* Extra breathing room on iOS devices with a home indicator */
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
}
.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){
  /*
    Align consent row with the other inputs.
    Normal rows use a fixed label column + a fixed input column that is
    pushed to the RIGHT edge via margin-left:auto.
    The previous grid version anchored the consent column to the left,
    which made it drift away from the inputs on wide screens.
  */
  .inputWrapper.consentWrapper{
    display: flex !important;
    align-items: flex-start;
    width: 100%;
  }

  /* spacer = "label column" so the checkbox/text starts exactly under inputs */
  .inputWrapper.consentWrapper::before{
    content: "";
    flex: 0 0 var(--label-col);
    margin-right: var(--space-sm);
  }

  .inputWrapper.consentWrapper > .field{
    flex: 1;
    max-width: var(--field-max);
    margin-left: auto;
    width: 100%;
    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; }
}

/* ==================================================
   iOS 26.0–26.2 consent gate popup
   ================================================== */

.ios26-consent-toast{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* Centered message box (not fullscreen UI; overlay itself is transparent)
     with safe-area padding so it stays inside the visible viewport on iOS. */
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    16px
    calc(16px + env(safe-area-inset-bottom, 0px))
    16px;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  /* Helps some iOS Safari builds that misplace fixed elements during viewport
     recalculations */
  transform: translateZ(0);
}

.ios26-consent-toast .ios26-consent-box{
  pointer-events: auto;
}

.ios26-consent-box{
  width: min(560px, 100%);
  background: var(--color-form-bg, #fff);
  color: var(--color-text, #333);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  padding: 18px 16px;
  box-sizing: border-box;
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
}

.ios26-consent-message{
  margin: 0 0 14px 0;
  line-height: 1.35;
}

.ios26-consent-message a{
  color: inherit;
  text-decoration: none;
}

.ios26-consent-message a:visited,
.ios26-consent-message a:hover,
.ios26-consent-message a:active,
.ios26-consent-message a:focus{
  color: inherit;
  text-decoration: none;
}

.ios26-consent-actions{
  display: flex;
  gap: 12px;
  width: 100%;
}

.ios26-consent-btn{
  appearance: none;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 10px;
  padding: 12px 0;
  font: inherit;
  cursor: pointer;
  flex: 1 1 0;
  width: 50%;
  text-align: center;
}

.ios26-consent-btn:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,122,204,0.25);
  border-color: var(--color-primary, #007acc);
}

.ios26-consent-yes{
  background: var(--color-primary, #007acc);
  border-color: var(--color-primary, #007acc);
  color: #fff;
}

.ios26-consent-no{
  background: transparent;
  color: var(--color-text, #333);
}