/* Quote Requests — rules shared by the map screen and the account screen.
   The timing / property type / site access strip appears in both the lead modal
   (quote-leads-map.css) and the unlocked-lead popup (quote-account.css), and the
   two entry points never load each other's stylesheet. This file is the single
   copy; both of those files declare it as a wp_enqueue_style() dependency so it
   always prints first and their media-query overrides win on source order.

   Only the collapse breakpoint differs between the two screens (575.98px on the
   map, 767.98px on the account table), so that override stays local to each. */

/* --mlq-ink is defined in quote-leads-map.css, which is not loaded on the
   account screen — hence the literal fallback. */
.mlq-meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 8px; background: #FAFBFB; }
.mlq-meta-label { font-size: 10.5px; color: #9AA3AC; margin-bottom: 3px; }
.mlq-meta-value { font-size: 12.5px; color: var(--mlq-ink, #414A54); font-weight: 500; }

/* A "pick any" answer is a list and reads as one. Run together into a sentence,
   four site-access notes are four things a contractor has to pick apart. */
.mlq-meta-value .mlq-meta-list { list-style: none; margin: 0; padding: 0; }
.mlq-meta-value .mlq-meta-list li { position: relative; padding-left: 12px; margin-bottom: 2px; line-height: 1.45; }
.mlq-meta-value .mlq-meta-list li:last-child { margin-bottom: 0; }
.mlq-meta-value .mlq-meta-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; }

/* ---- media tiles and the lightbox (mlq-media.js) ----------------------------
   Shared here because the same grid renders in the map's lead modal, the
   account popup and the admin queue popup. The per-screen stylesheets size the
   inner img/video (grid columns on the map, fixed-width flex row in the app
   shell); the tile wrapper just wraps that and carries the play badge. */
.mlq-media-tile { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 6px; }
.mlq-media-tile img,
.mlq-media-tile video { display: block; pointer-events: none; }
.mlq-media-tile:focus-visible { outline: 2px solid var(--mlq-green, #3E7D4C); outline-offset: 2px; }

.mlq-media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mlq-media-play svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); }

/* Above everything: Bootstrap modals sit at ~1055 and the wp-admin bar at
   99999, and this opens from inside both worlds. */
.mlq-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(10, 14, 16, .88); }
.mlq-lightbox[hidden] { display: none; }
.mlq-lightbox-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.mlq-lightbox-stage img,
.mlq-lightbox-stage video { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; height: auto; border-radius: 8px; background: #000; }
.mlq-lightbox-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.mlq-lightbox-close:hover { background: rgba(255, 255, 255, .22); }
.mlq-lightbox-close svg { width: 16px; height: 16px; }