/* Listing video (feat_listing_claim_media) -- see listing-video.js.
   Own file for the same reason as lead-rescue.css: styles.css is written by
   several sessions at once. */

/* ---- agent panel (Listings tab) ---- */
/* The workspace around this panel is dark and its text colour is inherited, so
   the panel sets its own dark-on-white colours explicitly (found on staging
   2026-10-04: headings and addresses rendered pale grey on white). */
.lv-panel { margin: 18px 0; padding: 16px; border: 1px solid var(--line, #dce3df); border-radius: 10px; background: var(--white, #fff); color: var(--ink, #17211d); }
.lv-panel h3, .lv-panel strong, .lv-panel label { color: var(--ink, #17211d); }
.lv-panel h3 { margin: 0 0 6px; }
.lv-panel a { color: #0b5c6b; }
.lv-muted { color: var(--muted, #455350); margin: 4px 0 10px; }
.lv-listing { padding: 12px 0; border-top: 1px solid var(--line, #dce3df); display: grid; gap: 8px; }
.lv-listing small { display: block; }
.lv-video-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lv-video-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lv-badge { font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef2f0; color: var(--ink, #17211d); }
.lv-badge-live { background: #dff3e6; color: #11592c; }
.lv-badge-pending_review { background: #fff4d6; color: #6b4b00; }
.lv-badge-rejected { background: #fde2e2; color: #8a1c1c; }
.lv-note { color: #8a1c1c; flex-basis: 100%; }
.lv-upload { display: grid; gap: 8px; max-width: 640px; }
.lv-upload label { display: grid; gap: 4px; font-size: 0.92rem; }
/* The global `input, select, textarea { width: 100%; padding ... }` rule hits
   checkboxes too (CLAUDE.md): give this one its natural size. */
/* Text in its own span: as bare flex children the words and the link each
   became a narrow column. */
.lv-upload label.lv-accept { display: flex; align-items: flex-start; gap: 8px; }
.lv-accept-text { flex: 1 1 auto; min-width: 0; }
.lv-upload label.lv-accept input[type="checkbox"] { width: auto; min-width: 0; height: auto; padding: 0; margin: 3px 0 0; flex: 0 0 auto; }
.lv-upload input[type="file"] { padding: 6px; }
.lv-upload .secondary-button { justify-self: start; }
.lv-ok { color: #11592c; }
.lv-error { color: #8a1c1c; }

/* ---- listing page: top video ---- */
.lv-hero-play {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(10, 20, 24, 0.78); color: #fff; font-size: 1.05rem; font-weight: 700;
}
.lv-hero-play:hover, .lv-hero-play:focus-visible { background: rgba(10, 20, 24, 0.92); }
.lv-hero-source { position: absolute; left: 50%; top: calc(42% + 40px); transform: translateX(-50%); z-index: 4; width: max-content; max-width: 90%; }
.lv-hero-source .lv-source { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); text-align: center; }
.lv-hero-stage {
  position: absolute; inset: 0; z-index: 6; background: #000;
  display: grid; grid-template-rows: auto 1fr auto; padding: 10px;
}
.lv-hero-holder { min-height: 0; display: flex; align-items: center; justify-content: center; }
.lv-hero-holder .lv-video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.lv-hero-close { justify-self: start; border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; }
.lv-hero-stage .lv-source { color: #e8eeec; text-align: center; }

/* ---- listing page: body video ---- */
.lv-body { margin: 24px 0 8px; }
.lv-body h3 { margin: 0 0 10px; }
.lv-body-holder { position: relative; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.lv-body-holder .lv-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lv-body-poster { width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.lv-play-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(10, 20, 24, 0.78); color: #fff; font-size: 1.8rem; }

/* Both names the same element and size: 22 TAC 535.155 asks the broker's to
   be at least half the agent's. */
.lv-source { margin: 8px 0 0; font-size: 0.95rem; }
.lv-source-name { font-weight: 700; font-size: inherit; }

/* ---- per-listing video dialog (opened from the card's Video button) ----
   Ids, not just classes, carry the colours: this page's workspace sets pale
   text on many descendants, and a class rule lost to it on staging. */
.lv-card-slot { display: inline-flex; }
.lv-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.lv-modal-backdrop { position: fixed; inset: 0; background: rgba(5, 12, 16, 0.6); }
#lvModal .lv-modal-dialog { position: relative; width: min(720px, 100%); margin: 0; background: #fff; color: #17211d; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
#lvModal .lv-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#lvModal .lv-modal-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid #dce3df; }
#lvModal h3, #lvModal strong, #lvModal label, #lvModal .lv-accept-text { color: #17211d; }
#lvModal .lv-muted, #listingVideoAgent .lv-muted { color: #455350; }
#lvModal a { color: #0b5c6b; }
#listingVideoAgent { color: #17211d; }

/* `hidden` must win. .lv-hero-play sets display:inline-flex and .lv-hero-source
   a positioned block, and an author `display` beats the browser's [hidden]
   rule -- so the button stayed on screen on photo 2 although the script had
   hidden it (found on staging 2026-10-04 by screenshot; every script check
   passed). */
.lv-hero-play[hidden], .lv-hero-source[hidden] { display: none !important; }