/* SDM Form — page styles. Plain CSS (no SCSS) so we can ship
     without the Sage build pipeline. CSS custom properties for theming. */
  .sdmform-page {
    --sdmform-accent:        #65a230;
    --sdmform-accent-light:  #d8e8c5;
    --sdmform-accent-tint:   #f1f7e8;
    --sdmform-error:         #b00020;
    --sdmform-error-tint:    #fdebee;
    --sdmform-text:          #2a2a2a;
    --sdmform-muted:         #666;
    --sdmform-bg-soft:       #f7f9f4;
    --sdmform-input-border:  #c8d3bb;

    background: #fff;
    min-height: 60vh;
    padding: 64px 16px 64px;   /* generous top padding so header isn't tight against site nav/logo */
    display: flex;
    justify-content: center;
  }
  .sdmform { margin-top: 8px; }
  .sdmform {
    width: 100%;
    max-width: 760px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--sdmform-text);
    font-size: 15px;
    line-height: 1.5;
    /* Internal padding so the form contents (title, sections, meta
       fields) all have horizontal breathing room from the container
       edge — otherwise the title text sits flush against the left
       boundary. !important defends against any theme rule that might
       widen .sdmform or reset its padding. */
    padding: 0 40px !important;
    box-sizing: border-box !important;
  }

  .sdmform-header {
    border-bottom: 2px solid var(--sdmform-accent);
    /* Header content is inset 16px more than the company invitation's own
       horizontal padding so the title text doesn't share its x with
       the prior-banner's green left-border (which lives at the same
       x as company invitation.content_left). */
    padding: 32px 16px 16px !important;
    margin-bottom: 18px;
  }
  .sdmform .sdmform-header h1#sdmform-title {
    margin-top: 0 !important;
    padding-left: 0 !important;
  }
  .sdmform-header h1#sdmform-title {
    color: var(--sdmform-accent);
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
  }
  .sdmform-header .sdmform-meta { color: var(--sdmform-muted); font-size: 13px; }

  .sdmform-state-loading { text-align: center; padding: 48px 12px; color: var(--sdmform-muted); }
  .sdmform-state-error,
  .sdmform-state-success { padding: 18px 20px; border-radius: 8px; margin-top: 16px; }
  .sdmform-state-error {
    background: var(--sdmform-error-tint);
    border: 1px solid #f4c2cc;
    color: #730018;
  }
  .sdmform-state-error h2 { margin: 0 0 6px; font-size: 18px; color: var(--sdmform-error); }
  .sdmform-state-success {
    background: var(--sdmform-accent-tint);
    border: 1px solid var(--sdmform-accent-light);
  }
  .sdmform-state-success h2 { margin: 0 0 6px; font-size: 20px; color: var(--sdmform-accent); }
  .sdmform-state-success a { color: var(--sdmform-accent); text-decoration: underline; }

  .sdmform-spinner {
    display: inline-block; width: 36px; height: 36px;
    border: 3px solid #ececec; border-top: 3px solid var(--sdmform-accent);
    border-radius: 50%; animation: sdmform-spin 0.9s linear infinite;
    margin-bottom: 8px;
  }
  @keyframes sdmform-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  .sdmform-prior-banner {
    background: var(--sdmform-accent-tint); border-left: 4px solid var(--sdmform-accent);
    padding: 10px 14px; margin: 0 0 18px; border-radius: 4px;
    color: #3f6e1d; font-size: 14px;
  }

  .sdmform-intro { margin-bottom: 12px; border: 0; }
  .sdmform-intro:empty { display: none; }

  .sdmform-section { margin: 0 0 26px; padding: 0 0 16px; border-bottom: 1px solid #e5e5e5; }
  .sdmform-section:last-child { border-bottom: none; }
  /* Section title — defensively reset the theme's global section/h2 rules
     (margin-bottom: 20px, width: 100%) and any decorative border the
     theme might add via :before/:after pseudo-elements. The form's
     section title is a heading, not a horizontal divider. */
  .sdmform-section .sdmform-section-title {
    font-size: 18px; font-weight: 600; color: var(--sdmform-accent);
    margin: 0 0 8px; padding: 0; border: 0; text-decoration: none;
    width: auto; line-height: 1.3;
    /* Renderer outputs a <div>, not <h2>, so we don't inherit theme
       `section h2 { ... }` rules. Bold via font-weight here. */
  }
  .sdmform-section .sdmform-section-title::before,
  .sdmform-section .sdmform-section-title::after { content: none; display: none; }
  .sdmform-section .sdmform-section-intro { color: var(--sdmform-muted); margin-bottom: 12px; margin-top: 6px; }
  .sdmform-section .sdmform-section-intro h1,
  .sdmform-section .sdmform-section-intro h2,
  .sdmform-section .sdmform-section-intro h3 { color: var(--sdmform-text); margin: 8px 0 4px; }
  /* If the section intro markdown leads with `---`, the resulting <hr>
     visually attaches to the section title and looks like a stray
     underline on the heading. The section title already serves as the
     divider, so hide a leading HR. (Subsequent HRs inside the intro
     are unaffected.) */
  .sdmform-section .sdmform-section-intro > hr:first-child { display: none; }
  .sdmform-section .sdmform-section-intro ul { margin: 6px 0 6px 22px; padding: 0; }
  .sdmform-section .sdmform-section-intro li { margin-bottom: 2px; }
  .sdmform-section .sdmform-section-intro hr { border: 0; border-top: 1px solid #e5e5e5; margin: 8px 0; }

  .sdmform-items > .sdmform-item { margin-bottom: 14px; }
  .sdmform-item.sdmform-required > .sdmform-field-label::after,
  .sdmform-item.sdmform-required > .sdmform-fieldset > legend.sdmform-field-label::after,
  .sdmform-required-anchor::after {
    content: ' *'; color: var(--sdmform-error);
  }
  /* Highlight a required meta-field (currently the copy-email) when it's
     missing on submit. Mirrors the .sdmform-item.sdmform-missing pattern used
     for in-schema items. */
  .sdmform-meta-fields .sdmform-field.sdmform-missing {
    border-left: 3px solid var(--sdmform-error);
    padding-left: 10px;
    background: var(--sdmform-error-tint);
    border-radius: 0 4px 4px 0;
  }
  .sdmform-item.sdmform-missing {
    border-left: 3px solid var(--sdmform-error); padding-left: 10px;
    background: var(--sdmform-error-tint); border-radius: 0 4px 4px 0;
  }

  .sdmform-field-label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
  .sdmform-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--sdmform-input-border);
    border-radius: 4px; font: inherit; background: #fff;
  }
  .sdmform-input:focus { border-color: var(--sdmform-accent); outline: 2px solid var(--sdmform-accent-light); }
  .sdmform-textarea { min-height: 80px; resize: vertical; }
  .sdmform-select { background: #fff; }

  .sdmform-fieldset { border: 0; padding: 0; margin: 0; }
  .sdmform-fieldset legend.sdmform-field-label { padding: 0; margin-bottom: 6px; }
  .sdmform-choice-list { display: block; }
  /* Bullet-proof checkbox/radio layout: keep the input inline-block with an
     explicit margin instead of flex+gap (Bootstrap label rules can collapse
     a text-node child of <label>, leaving the checkbox overlapping the text).
     The renderer wraps option/ack text in <span class="sdmform-choice-text"> /
     <span class="sdmform-ack-text"> so the layout doesn't depend on text nodes. */
  .sdmform-choice-line, .sdmform-ack-line {
    display: block;
    padding: 4px 0;
    margin: 0 0 4px;
    cursor: pointer;
    font-weight: normal; /* Bootstrap label default is bold-ish */
  }
  .sdmform-choice-line input, .sdmform-ack-line input {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px 0 0;
    width: auto;        /* override theme/global form-input width:100% rules */
    flex: none;
  }
  /* The SDM theme's global.css has `input[type="checkbox"] { position:
     absolute !important; ... }` which removes the checkbox from document
     flow and makes the next text node render at the same x — visually
     overlapping the start of the option label ("ot it" instead of "Got
     it"). Force these inputs back into static flow with a more specific
     selector + !important. Same for radios for consistency. */
  .sdmform input[type="checkbox"],
  .sdmform input[type="radio"] {
    position: static !important;
    z-index: auto !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
  }
  .sdmform-choice-text, .sdmform-ack-text {
    display: inline-block;
    vertical-align: middle;
  }
  .sdmform-ack-heading { margin-bottom: 4px; }

  /* Theme global CSS floats <ul>/<li> on this site; that takes the bulleted
     lists out of normal flow so the parent .sdmform-info-block doesn't grow
     to contain them, and the next sibling (e.g. the ack-checkbox <label>)
     visually overlaps the floated list — making bullet clicks toggle the
     checkbox. Force float:none on every list inside the form, and use
     display:flow-root on the info-block so it contains any future floats
     defensively. */
  .sdmform ul, .sdmform ol, .sdmform li { float: none !important; clear: none !important; }

  .sdmform-info-block {
    display: flow-root;
    background: var(--sdmform-bg-soft); padding: 12px 14px; border-radius: 4px;
    border-left: 3px solid var(--sdmform-accent-light); font-size: 14px;
  }
  .sdmform-info-block h1, .sdmform-info-block h2, .sdmform-info-block h3 { color: var(--sdmform-accent); margin: 6px 0 4px; }
  .sdmform-info-block ul { margin: 4px 0 4px 22px; padding: 0; }
  .sdmform-info-block li { margin-bottom: 2px; }
  .sdmform-info-block hr { border: 0; border-top: 1px solid var(--sdmform-accent-light); margin: 8px 0; }

  .sdmform-group {
    margin: 8px 0 12px; padding: 12px 14px;
    border-left: 4px solid var(--sdmform-accent-light);
    background: var(--sdmform-bg-soft); border-radius: 0 4px 4px 0;
  }
  .sdmform-group .sdmform-group-items > .sdmform-item { margin-bottom: 12px; }
  .sdmform-group .sdmform-group-items > .sdmform-item:last-child { margin-bottom: 0; }

  .sdmform-meta-fields {
    margin: 28px 0 18px; padding-top: 16px; border-top: 1px solid #e5e5e5;
  }
  .sdmform-meta-fields .sdmform-field { display: block; margin-bottom: 12px; }

  .sdmform-submit-bar { margin-top: 22px; text-align: right; }
  .sdmform-missing-banner {
    background: var(--sdmform-error-tint); border: 1px solid #f4c2cc;
    color: #730018; padding: 8px 12px; border-radius: 4px; margin: 12px 0; font-size: 14px;
  }
  .sdmform-submit-btn {
    background: var(--sdmform-accent); color: #fff; border: 0; padding: 10px 22px;
    font-size: 15px; font-weight: 600; border-radius: 4px; cursor: pointer;
    min-width: 180px; position: relative;
  }
  .sdmform-submit-btn:hover { background: #559022; }
  .sdmform-submit-btn[disabled] { opacity: 0.7; cursor: progress; }
  .sdmform-submit-btn .sdmform-submit-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid #fff; border-top: 2px solid transparent;
    border-radius: 50%; margin-left: 8px; vertical-align: middle;
    animation: sdmform-spin 0.7s linear infinite;
  }

  @media (max-width: 600px) {
    /* Mobile: tighten paddings since screen real estate is precious.
       The desktop rules use 40px sides + 32px header top — too much
       on a phone, so we scale them back. */
    .sdmform-page { padding: 32px 8px 80px; }
    .sdmform { font-size: 14px; padding: 0 18px !important; }
    /* Header keeps a horizontal inset (12px) on mobile too so the title
       sits to the right of where the prior-banner's green left-border
       vertical stripe begins below it — without this, both share
       company invitation.content_left and the title looks "squashed against the
       green line." */
    .sdmform-header { padding: 16px 12px 12px !important; }
    .sdmform-header h1#sdmform-title { font-size: 22px; }
    .sdmform-section .sdmform-section-title { font-size: 16px; }
    .sdmform-submit-bar { text-align: center; }
    .sdmform-submit-btn { width: 100%; }
  }