/* Venue quick ask (Release M, 22 Oct 2026). Printed by scripts/publish-venue-quick-ask.cjs on composed, non-held
   flagship venue pages. Three pieces, all in the HTML before first paint, so nothing moves after load:
   the hero's WhatsApp button, the rail's two fields under the answer paragraph (phones and tablets, where the rail
   stacks below the hero), and one fee line beside whichever form is on screen. Ids carry the weight because the house
   stylesheets restyle links and form controls at (0,2,3) with !important. */

/* 1. The hero's action row: the venue-named WhatsApp button (same look as js/capture-asks.js gives #pg-hero-wa). */
html body .vr-hero-copy .vp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
html body #pg-hero-wa {
  box-sizing: border-box; display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; max-width: 100%;
  margin: 0 !important; padding: 10px 18px !important; background: #167c43 !important; color: #fff !important;
  border: 1px solid #167c43 !important; border-radius: 4px !important; font: 600 15px/1.25 Manrope, Arial, sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; box-shadow: none !important;
}
html body #pg-hero-wa:hover { background: #11683a !important; border-color: #11683a !important; }
html body #pg-hero-wa :is(span, svg) { color: #fff !important; }
html body #pg-hero-wa svg { width: 16px; height: 16px; flex: 0 0 16px; }
html body #pg-hero-wa path { fill: #fff !important; stroke: none !important; }
html body #pg-hero-wa:focus-visible { outline: 3px solid #75435f; outline-offset: 3px; }

/* 3. The fee line: quiet, one or two lines, never a headline. */
html body.vr-page .vp-fee-line {
  margin: 10px 0 0 !important; padding: 0 !important; max-width: none; font: 400 13px/1.5 Manrope, Arial, sans-serif !important;
  color: #5f4b57 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body.vr-page .vp-rail .vp-fee-line--rail { margin: 0 0 10px !important; }

/* 2. The quick form: hidden where the rail sits beside the hero, shown where it stacks below it. */
html body.vr-page .vp-quick { display: none; }
@media (max-width: 960px) {
  html body.vr-page .vp-rail .vp-fee-line--rail { display: none !important; }
  html body.vr-page .vr-hero-copy .vp-quick {
    display: block; box-sizing: border-box; margin: 4px 0 14px; padding: 14px 14px 12px; background: #faf8f6;
    border: 1px solid #eadfe6; border-radius: 6px;
  }
  html body.vr-page .vp-quick .vp-quick-lead { margin: 0 0 10px !important; max-width: none; font: 400 14px/1.5 Manrope, Arial, sans-serif !important; color: #362731 !important; }
  html body #venue-flagship-enquiry-hero.vp-quick-form { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html body #venue-flagship-enquiry-hero .vr-form-grid { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; margin: 0 !important; }
  html body #venue-flagship-enquiry-hero label { display: block; margin: 0 !important; font: 600 12px/1.3 Manrope, Arial, sans-serif !important; color: #5f4b57 !important; letter-spacing: 0 !important; text-transform: none !important; }
  /* 16px text: iOS zooms the page into any smaller field on focus. */
  html body #venue-flagship-enquiry-hero :is(input:not([type="hidden"]), textarea) {
    box-sizing: border-box; display: block; width: 100% !important; min-height: 44px; margin: 4px 0 0 !important; padding: 9px 11px !important;
    font: 400 16px/1.3 Manrope, Arial, sans-serif !important; color: #362731 !important; background: #fff !important;
    border: 1px solid #d9c9d3 !important; border-radius: 4px !important;
  }
  html body #venue-flagship-enquiry-hero textarea { min-height: 76px; }
  html body #venue-flagship-enquiry-hero .vp-rail-more { grid-column: 1 / -1; font: 400 13px/1.4 Manrope, Arial, sans-serif; }
  html body #venue-flagship-enquiry-hero .vp-rail-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 32px; color: #75435f; }
  html body #venue-flagship-enquiry-hero .vp-rail-more summary::-webkit-details-marker { display: none; }
  html body #venue-flagship-enquiry-hero .vp-rail-more label { margin-top: 8px !important; }
  html body #venue-flagship-enquiry-hero button.studio-button {
    box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 46px;
    margin: 8px 0 0 !important; padding: 10px 16px !important; font: 600 15px/1.2 Manrope, Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  }
  html body #venue-flagship-enquiry-hero .studio-status:empty { display: none; }
  html body #venue-flagship-enquiry-hero .vr-small { margin: 6px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; }
}
/* Two fields side by side from 360px, so both sit in one row under the answer. */
@media (min-width: 360px) and (max-width: 960px) {
  html body #venue-flagship-enquiry-hero .vr-form-grid { grid-template-columns: 1fr 1fr; }
}