/* The contact form's base look (lib/contact.php, lbw_contact_form). Every rule that shapes it
   sits inside :where(), so it has NO specificity: a site's own stylesheet wins without a fight,
   and a new site still looks tidy before it is styled. Sites tune it with these variables:
   --lbwc-gap, --lbwc-radius, --lbwc-border, --lbwc-field-bg, --lbwc-accent, --lbwc-accent-text. */

/* These three must hold whatever the site does, so they keep normal specificity. */
.lbwc-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.lbwc-status[hidden], .lbwc-error[hidden], .lbwc .is-sent-hidden { display: none !important; }
.lbwc.is-sending .lbwc-send { opacity: 0.6; cursor: progress; }

:where(.lbwc) { display: grid; gap: var(--lbwc-gap, 18px); }
:where(.lbwc-fields) { display: grid; gap: var(--lbwc-gap, 18px); }

/* Columns (lbw_contact_form): the form is the container, so they follow the room it has, not the
   screen. Below 520px of form it is one column whatever the setting. Normal specificity on
   purpose: a site styling .lbwc-fields should not undo the columns the owner chose. */
.lbwc { container-type: inline-size; }
@container (min-width: 520px) {
  .lbwc-cols-2, .lbwc-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lbwc-col-gap, 20px); }
  .lbwc-cols-2 > .lbwc-wide, .lbwc-cols-3 > .lbwc-wide { grid-column: 1 / -1; }
}
@container (min-width: 760px) {
  .lbwc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:where(.lbwc-field) { display: grid; gap: 6px; font-weight: 600; }
:where(.lbwc-optional) { font-weight: 400; opacity: 0.75; }
:where(.lbwc-field input, .lbwc-field textarea) {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--lbwc-border, #b9c3cc); border-radius: var(--lbwc-radius, 8px);
  background: var(--lbwc-field-bg, #fff); color: inherit; font: inherit; font-size: 16px; font-weight: 400;
}
:where(.lbwc-field textarea) { resize: vertical; }
:where(.lbwc-chips) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.lbwc-chips legend) { width: 100%; margin-bottom: 8px; padding: 0; font-weight: 600; }
:where(.lbwc-chip) { position: relative; }
:where(.lbwc-chip input) { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
:where(.lbwc-chip span) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--lbwc-border, #b9c3cc); border-radius: 22px; background: var(--lbwc-field-bg, #fff);
}
:where(.lbwc-chip input:checked + span) { background: var(--lbwc-accent, #142b42); border-color: var(--lbwc-accent, #142b42); color: var(--lbwc-accent-text, #fff); }
:where(.lbwc-chip input:focus-visible + span) { outline: 3px solid var(--lbwc-accent, #142b42); outline-offset: 2px; }
:where(.lbwc-send) { min-height: 48px; padding: 0 24px; cursor: pointer; }
:where(.lbwc-privacy) { margin: 0; font-size: 14px; opacity: 0.85; }
:where(.lbwc-error) { margin: 0; color: #b42318; font-size: 14px; font-weight: 600; }
:where(.lbwc-hint) { margin: 0; color: var(--lbwc-muted, #536579); font-size: 13px; font-weight: 400; }
:where(.lbwc-files input[type=file]) { min-height: 44px; padding: 8px 0; font: inherit; max-width: 100%; }
:where(.lbwc-status) { margin: 0; font-weight: 600; }
:where(.lbwc-status.is-error) { color: #b42318; }

/* Drop fields (drop.js, shared with our account pages). :where() keeps them easy to restyle; the
   hiding rules keep normal specificity because they must hold. Without script the plain box shows. */
.drop-zone { display: none; }
.drop.is-enhanced input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop.is-enhanced .drop-zone { display: grid; }
.drop-list:empty, .drop-note:empty { display: none; }
:where(.drop.is-enhanced .drop-zone) { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--lbwc-border, #b9c3cc); border-radius: var(--lbwc-radius, 8px); background: var(--lbwc-field-bg, #fff); font-weight: 400; }
:where(.drop.is-dragging .drop-zone) { border-color: var(--lbwc-accent, #1f5fa8); }
:where(.drop-icon) { color: var(--lbwc-accent, #1f5fa8); }
:where(.drop-title) { margin: 0; font-weight: 600; }
:where(.drop-choose) { min-height: 44px; padding: 0 18px; border: 1px solid var(--lbwc-accent, #1f5fa8); border-radius: var(--lbwc-radius, 8px); background: transparent; color: var(--lbwc-accent, #1f5fa8); font: inherit; font-weight: 600; cursor: pointer; }
:where(.drop-list) { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-weight: 400; }
:where(.drop-list li) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--lbwc-border, #b9c3cc); border-radius: var(--lbwc-radius, 8px); font-size: 14px; }
:where(.drop-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.drop-size) { opacity: 0.7; font-size: 13px; }
:where(.drop-remove) { min-height: 32px; border: 0; background: none; color: #b42318; font: inherit; font-size: 13px; cursor: pointer; }
@media (max-width: 480px) { :where(.drop.is-enhanced .drop-zone) { grid-template-columns: auto 1fr; } :where(.drop.is-enhanced .drop-choose) { grid-column: 1 / -1; width: 100%; } }