/* ===========================================================
   Quote dialog. Inherits the brand tokens from the child theme
   and falls back to literals so the panel still reads correctly
   if this file loads on its own.
   =========================================================== */

.si-quote-dialog {
  padding: 0;
  border: 0;
  border-radius: 4px;
  width: min(680px, calc(100vw - 32px));
  max-width: min(680px, calc(100vw - 32px));
  /* Column layout so the heading stays put and only the form scrolls;
     without it the submit button is clipped out of reach. */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  color: var(--ink, #23262B);
  background: var(--paper, #FFFFFF);
  box-shadow: 0 12px 40px rgba(35, 38, 43, .18);
}

.si-quote-dialog::backdrop { background: rgba(35, 38, 43, .55); }

.si-quote-dialog__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 0;
}

.si-quote-dialog__title {
  margin: 0;
  font-family: var(--display, Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.2;
}

.si-quote-dialog__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--warm, #6E7378);
  background: transparent;
  border: 1px solid var(--rule, #EAE7E2);
  border-radius: 3px;
  cursor: pointer;
}

.si-quote-dialog__close::before { content: "\00d7"; }
.si-quote-dialog__close:hover { color: var(--ink, #23262B); border-color: var(--warm, #6E7378); }
.si-quote-dialog__close:focus-visible { outline: 2px solid var(--brass, #CE1417); outline-offset: 1px; }

.si-quote-dialog__body {
  flex: 1 1 auto;
  padding: 0 1.5rem 1.6rem;
  overflow-y: auto;
}

/* Two columns inside the panel so the whole form fits without scrolling on a
   normal screen. The hidden inputs and the off-screen honeypot are out of flow,
   so only the visible controls take grid slots. */
@media (min-width: 560px) {
  .si-quote-dialog .si-quote-form { grid-template-columns: 1fr 1fr; column-gap: 1.1rem; }
  .si-quote-dialog .si-quote-form > label:last-of-type,
  .si-quote-dialog .si-quote-form > .si-turnstile,
  .si-quote-dialog .si-quote-form > .si-note,
  .si-quote-dialog .si-quote-form > button,
  .si-quote-dialog .si-quote-form > .si-form-status { grid-column: 1 / -1; }
}

/* Inside the panel the form fills the width rather than the page measure. */
.si-quote-dialog .si-quote-form,
.si-quote-dialog .si-form-intro,
.si-quote-dialog .si-form-notice,
.si-quote-dialog .si-form-error { max-width: 100%; }

.si-quote-dialog .si-form-intro { margin-top: .8rem; }

/* The page form gives the textarea six rows; in the panel that pushes Send
   against the bottom edge, so trade a little height for breathing room. */
.si-quote-dialog .si-quote-form textarea { height: 120px; min-height: 96px; }

/* Turnstile reserves its own height; keep it clear of the submit button. */
.si-turnstile { margin-top: 1.2rem; min-height: 65px; }

.si-form-status { margin: .9rem 0 0; font-size: 14px; color: var(--warm, #6E7378); }
.si-form-status:empty { margin: 0; }

.si-form-status.si-form-error {
  padding: .8rem 1rem;
  color: var(--brass-deep, #A50F12);
  background: var(--brass-tint, #FBF4F3);
  border: 1px solid #F0CDCD;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .si-quote-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .si-quote-dialog__head { padding: 1.2rem 1.1rem 0; }
  .si-quote-dialog__title { font-size: 1.3rem; }
  .si-quote-dialog__body { padding: 0 1.1rem 1.3rem; }
}

/* Honour a reduced-motion preference: no entrance animation is defined, but
   the dialog must not inherit one from the theme either. */
@media (prefers-reduced-motion: reduce) {
  .si-quote-dialog { animation: none; transition: none; }
}