/* Synced from the Olive Data platform by tools/Sync-Theme.ps1 on 2026-09-24. Edit there, then re-sync. */
/* ==========================================================================
   Olive Data Forms — public form theme (FillForm / OpenForm)
   Drop in AFTER bootstrap in _LayoutOnline, or via @section styles:
       <link href="~/css/olive-forms.css" rel="stylesheet" />
   Palette shared with OliveTickets / OliveGiving via olive-tokens.css.
   No markup changes required. Optional tweaks are noted at the bottom.
   ========================================================================== */

@import url('olive-tokens.css');

/* Palette, fonts, radius and shadow scale live in olive-tokens.css. */

/* ===== Page canvas: soft gradient wash, no image needed ================= */
html, body { min-height: 100%; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink-900);
  background-color: var(--cream);
  background-image:
    radial-gradient(1100px 620px at 12% -8%,  rgba(var(--om-secondary-rgb), .16), transparent 62%),
    radial-gradient(900px  540px at 92% 4%,   rgba(var(--om-accent-rgb), .20), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(var(--om-primary-rgb), .10), transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep the form column readable on wide screens */
#_frm, #_blk { max-width: 900px; margin-inline: auto; }

/* ===== Typography ======================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink-900);
  text-wrap: pretty;
}
.text-black { color: var(--ink-900) !important; }

/* Form title (the big Label field at the top of most forms) */
#_frm h1, #_frm .h1 { font-size: clamp(1.5rem, 1rem + 1.9vw, 2.15rem); line-height: 1.2; }
#_frm h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); line-height: 1.25; }
#_frm h3 { font-size: 1.4rem; }

/* Section headings rendered as h4/h5.text-black and h5.mb-1 */
#_frm h4, #_frm h5 {
  font-size: 1.05rem;
  letter-spacing: .005em;
  color: var(--plum-900);
  margin: 0 0 .35rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
#_frm h6 { font-size: .95rem; color: var(--ink-700); }

/* Section blurb under a heading */
#_frm p, #_frm .small { color: var(--ink-700); }
#_frm p { line-height: 1.6; }
#_frm .m-b-30.small { margin-bottom: 1.25rem !important; color: var(--ink-500); }

/* The generic .lbl wrapper used all over the form */
.lbl { font-weight: inherit; }
span.lbl { font-weight: 600; }

/* Required / optional asterisks */
.text-danger  { color: #C0392B !important; }
.text-warning { color: var(--olive-600) !important; }

/* ===== Header (logo + intro) =========================================== */
.navbar-brand img, a[href="#"] > img[src*="logo"] { max-height: 44px; width: auto; }

/* Client logo uploaded into the form body */
#_frm img { max-width: 100%; height: auto; border-radius: 10px; }
#_frm > .row:first-child img[src*="/images/"] { max-height: 130px; width: auto; display: block; margin: 0 auto 1.25rem; }

/* ===== Cards ============================================================ */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 18, 48, .04), 0 12px 32px -24px rgba(var(--om-primary-rgb), .35);
}
.card.m-b-20 { margin-bottom: 1.25rem !important; }
.card > .card-body { padding: 1.6rem 1.75rem; }
/* nested .card-body (one per Information section) — don't double the padding */
.card > .card-body > .card-body { padding: 0 0 .25rem; }
.card > .card-body > .card-body + .card-body { padding-top: 1.5rem; }

hr { border-color: var(--line); opacity: 1; }

/* ===== Fields =========================================================== */
.mb-3 { margin-bottom: 1.15rem !important; }

.form-label,
.col-form-label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink-700);
  margin-bottom: .4rem;
  line-height: 1.45;
}

.form-control,
.form-select {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: .65rem .85rem;
  font-size: .95rem;
  color: var(--ink-900);
  background-color: #fff;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: #A79FBA; }
.form-control:hover,
.form-select:hover { border-color: var(--plum-300); }
.form-control:focus,
.form-select:focus {
  border-color: var(--plum-500);
  box-shadow: 0 0 0 4px rgba(var(--om-secondary-rgb), .15);
  outline: 0;
}
.form-control[readonly], .form-control:disabled,
.form-select:disabled { background-color: var(--cream-2); color: var(--ink-500); }
textarea.form-control { min-height: 7.5rem; line-height: 1.6; }
select[multiple].form-select { padding: .35rem; }
.input-group-text { background: #fff; border-color: var(--line-2); color: var(--ink-500); }

/* Validation (parsley) */
.parsley-errors-list { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .82rem; color: #C0392B; font-weight: 600; }
.form-control.parsley-error, .form-select.parsley-error { border-color: #C0392B; }

/* ===== Checkboxes & radios ============================================= */
input[type="checkbox"],
input[type="radio"],
.form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .1rem;
  border: 1.5px solid var(--plum-300);
  background-color: #fff;
  accent-color: var(--plum-900);
  cursor: pointer;
  flex: none;
}
.form-check-input:checked { background-color: var(--plum-900); border-color: var(--plum-900); }
.form-check-input:focus,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  border-color: var(--plum-500);
  box-shadow: 0 0 0 4px rgba(var(--om-secondary-rgb), .15);
  outline: 0;
}
.form-check-label { font-size: .95rem; color: var(--ink-900); cursor: pointer; }
.form-check { display: flex; align-items: flex-start; gap: .6rem; padding-left: 0; }
.form-check .form-check-input { margin-left: 0; }

/* Checkbox / radio option lists (.form-ckeck row in the Razor view) */
.form-ckeck.row > .form-label,
.form-ckeck.row > label.form-label { margin-bottom: .7rem; }

.form-ckeck.row > [class*="col-md-"] {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .45rem .75rem !important;
  margin-bottom: .4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.form-ckeck.row > [class*="col-md-"]:hover { border-color: var(--plum-300); background: var(--plum-50); }
.form-ckeck.row > [class*="col-md-"]:has(input:checked) {
  border-color: var(--plum-900);
  background: var(--plum-50);
  box-shadow: inset 0 0 0 1px var(--plum-900);
  font-weight: 600;
}
/* the &nbsp; before each option title */
.form-ckeck.row > [class*="col-md-"] { text-indent: 0; }

/* ===== Rating rows (1–5 / 1–10) ======================================== */
/* Label column + one .col-md-1 per option. Turn the scattered radios into an
   even, tappable scale strip. */
.mb-3.row:has(> .col-md-1 input[type="radio"]) {
  align-items: center;
  gap: .25rem 0;
  padding: .85rem 1rem;
  margin-bottom: .6rem !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.mb-3.row:has(> .col-md-1 input[type="radio"]):hover { border-color: var(--plum-100); background: #FFFDFA; }

.mb-3.row:has(> .col-md-1 input[type="radio"]) > .col-form-label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-900);
  margin-bottom: 0;
  padding-right: 1.25rem;
}

.mb-3.row > .col-md-1:has(input[type="radio"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 46px;
  min-height: 46px;
  padding: .35rem .25rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
  transition: background-color .12s ease;
}
.mb-3.row > .col-md-1:has(input[type="radio"]):hover { background: var(--plum-50); }
.mb-3.row > .col-md-1:has(input[type="radio"]:checked) { background: var(--plum-50); color: var(--plum-900); }
.mb-3.row > .col-md-1 input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; }

/* Yes / No rows: label + two .col-sm-2 blocks */
.mb-3.row > .col-sm-2 > .row { align-items: center; margin: 0; }
.mb-3.row > .col-sm-2 .col-md-4,
.mb-3.row > .col-sm-2 .col-md-8 { padding-left: .35rem; padding-right: .35rem; }
.mb-3.row > .col-sm-2 .lbl { font-size: .95rem; font-weight: 500; }

/* ===== Buttons ========================================================== */
.btn {
  font-weight: 600;
  border-radius: 10px;
  padding: .58rem 1.05rem;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:focus-visible { box-shadow: 0 0 0 4px rgba(var(--om-secondary-rgb), .2); }
.btn-sm { padding: .38rem .75rem; border-radius: 8px; font-size: .85rem; }

.btn-primary, .btn-success {
  background-color: var(--plum-900);
  border-color: var(--plum-900);
  color: #fff;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
  background-color: var(--om-primary-hover);
  border-color: var(--om-primary-hover);
  color: #fff;
}
.btn-outline-primary, .btn-outline-info {
  color: var(--plum-900);
  border-color: var(--plum-300);
  background: #fff;
}
.btn-outline-primary:hover, .btn-outline-info:hover {
  background-color: var(--plum-900);
  border-color: var(--plum-900);
  color: #fff;
}
.btn-secondary, .btn-light {
  background-color: #fff;
  border-color: var(--line-2);
  color: var(--ink-700);
}
.btn-secondary:hover, .btn-light:hover { background-color: var(--cream-2); color: var(--plum-900); border-color: var(--line-2); }
.btn-danger { background-color: #C0392B; border-color: #C0392B; }

/* The submit button (#saveBtn2 / #saveBtn) — give it real presence */
#saveBtn2, #saveBtn {
  padding: .85rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px -12px rgba(var(--om-primary-rgb), .55);
}
#saveBtn2:hover, #saveBtn:hover { transform: translateY(-1px); }
#saveBtn2 i, #saveBtn i { opacity: .85; }

/* ===== Modals, tables, footer ========================================== */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 64px -24px rgba(27, 18, 48, .45); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1.1rem 1.35rem; }
.modal-header .modal-title { font-size: 1.05rem; }
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--line); padding: 1rem 1.35rem; }

.table { --bs-table-border-color: var(--line); color: var(--ink-900); }
.table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--ink-500);
  background: transparent;
  border-bottom: 1px solid var(--line) !important;
  padding: .8rem .9rem;
}
.table tbody td { padding: .85rem .9rem; vertical-align: middle; }

/* Privacy / disclaimer paragraph and footer credit */
#_frm .card-body > p:last-child small,
footer, .footer {
  color: var(--ink-500);
  font-size: .82rem;
  line-height: 1.6;
}
footer a, .footer a { color: var(--plum-700); text-decoration: none; }
footer a:hover, .footer a:hover { color: var(--plum-900); text-decoration: underline; }

a { color: var(--plum-700); }
a:hover { color: var(--plum-900); }

/* ===== Mobile =========================================================== */
@media (max-width: 767.98px) {
  .card > .card-body { padding: 1.15rem 1.1rem; }
  #_frm { padding-inline: .25rem; }

  .mb-3.row:has(> .col-md-1 input[type="radio"]) { padding: .9rem .85rem; }
  .mb-3.row:has(> .col-md-1 input[type="radio"]) > .col-form-label {
    padding-right: 0;
    margin-bottom: .6rem;
  }
  /* scale strip stays on one row instead of stacking five deep */
  .mb-3.row > .col-md-1:has(input[type="radio"]) {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    border: 1px solid var(--line);
  }
  .mb-3.row > .col-sm-2 { width: 50%; }
  .form-ckeck.row > [class*="col-md-"] { width: 100%; max-width: 100%; }

  #saveBtn2, #saveBtn { width: 100%; justify-content: center; }
}

/* ===== Print ============================================================ */
@media print {
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ddd; }
  .btn, .modal { display: none !important; }
}

/* ==========================================================================
   Sneat / OpenForm integration fixes (added on top of the design handoff)
   ========================================================================== */

/* Sneat's core.css uppercases form labels; the design uses sentence case. */
.form-label,
.col-form-label {
  text-transform: none;
  letter-spacing: normal;
}

/* Non-flat MultiSelect/SingleSelect lists emit an empty
   <div class="col-md-12"></div> spacer before each option; without this
   rule each spacer renders as an empty bordered option card. */
.form-ckeck.row > [class*="col-md-"]:empty {
  display: none;
}

/* Date fields sit in an .input-group with an empty append — drop the empty
   append and keep the full 10px radius instead of squared right corners. */
.input-group-append:empty { display: none; }
.input-group > .form-control { border-radius: 10px; }

/* The view separates page cards with <br /><br />; the cards' own margin
   already provides the intended 1.25rem rhythm. */
#_frm > br { display: none; }

/* Form-owner disclaimer above the submit button (was .text-white for the
   old dark background image). */
.form-disclaimer {
  color: var(--ink-500);
  font-size: .82rem;
  line-height: 1.6;
  margin: .5rem 0 1rem;
}

/* The disclaimer and submit rows land outside #_frm — keep them aligned
   with the 900px form column. */
.row:has(> .form-disclaimer),
.row:has(#saveBtn2) {
  max-width: 900px;
  margin-inline: auto;
}

/* ==========================================================================
   OPTIONAL markup tweaks (not required — CSS above works as-is)

   1. Rating fields have no visible 1–5 numbers in the view. To show them,
      add the value inside each .col-md-1 after the input:
        <input ... value="3" /> <span class="scale-n">3</span>
      and it will pick up the .col-md-1 styling automatically.

   2. To widen the label column on rating rows, swap col-sm-3 for col-sm-6
      on the rating <label> — the strip flexes to fit.

   3. A sticky submit bar: wrap the #saveBtn2 container in
        <div class="submit-bar"> ... </div>
      and add:
        .submit-bar { position: sticky; bottom: 0; background: rgba(255,248,241,.9);
                      backdrop-filter: blur(8px); border-top: 1px solid var(--line);
                      padding: .9rem 1rem; margin-top: 1rem; z-index: 5; }
   ========================================================================== */