:root {
  --color-blue: #3d6d95;
  --color-blue-dark: #2f5679;
  --color-blue-darker: #1f3a52;
  --color-gold: #f0b429;
  --color-gold-dim: #d9d9d9;
  --color-text: #1c2733;
  --color-text-soft: #5b6b78;
  --color-border: #e6e9ec;
  --color-bg: #ffffff;
  --color-bg-soft: #f7f8f9;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-full: 999px;
  --shadow-card: 0 1px 3px rgba(20, 30, 40, 0.08);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 480px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ===================== STATE SCREENS ===================== */
.state-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 10px;
}

.state-screen h2 {
  margin: 4px 0 0;
  font-size: 1.25rem;
}

.state-screen p {
  color: var(--color-text-soft);
  max-width: 320px;
  margin: 0;
}

.state-icon {
  font-size: 2.4rem;
  margin-bottom: 4px;
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-blue);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-primary {
  margin-top: 8px;
  background: var(--color-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--color-blue-dark); }

/* ===================== APP SHELL ===================== */
.app {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.25s ease;
}

@media (min-width: 900px) {
  .app {
    max-width: 720px;
    margin: 24px auto;
    min-height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
}

.header-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--color-text);
  display: inline-flex;
  padding: 4px;
}

.lot-main {
  padding: 4px 20px 28px;
  flex: 1;
}

/* ===================== SALE INFO BLOCK ===================== */
/* Centered stack: ranch name (bold) / sale title / date (bold) / time /
   physical location / online location — matches the reference design. */
.lot-top.sale-info-block {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding-top: 40px;
}

.sale-info-line {
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.5;
}

.sale-info-line:empty { display: none; }

.sale-info-bold {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ===================== LOT TOP (legacy / lot pages) ===================== */
.lot-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-top: 8px;
}

.lot-number-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.lot-number {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-text);
}

.lot-number-label {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-top: 2px;
}

.lot-meta {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  gap: 2px;
}

.meta-line {
  font-size: 0.95rem;
  color: var(--color-text);
}

.meta-line:empty { display: none; }

/* ===================== LOT IDENTITY ===================== */
.lot-identity {
  text-align: center;
  margin-top: 22px;
}

.lot-name {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
}

.lot-breed {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 2px 0 0;
}

/* ===================== ACTION BUTTONS ===================== */
.lot-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 90px;
}

.btn-blue {
  background: var(--color-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 12px 0;
  width: 100%;
  max-width: 320px;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-blue:hover { background: var(--color-blue-dark); }
.btn-blue:active { transform: scale(0.98); }

.links-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.links-label {
  flex: 1;
}

.carousel-arrow {
  background: none;
  border: none;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}
.carousel-arrow:disabled {
  color: var(--color-gold-dim);
  cursor: default;
}

/* ===================== MEDIA GRID ===================== */
.media-section { margin-top: 22px; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.media-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.media-tile img,
.media-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-tile.is-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 40%, transparent 41%);
}

.media-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.media-tile.is-error {
  border: 1px solid #f3a6a6;
  background: repeating-linear-gradient(45deg, #fff5f5, #fff5f5 8px, #fdeaea 8px, #fdeaea 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #c0392b;
  font-size: 0.7rem;
  padding: 6px;
  cursor: default;
}

/* ===================== CONTENT SECTIONS ===================== */
.content-section {
  margin-top: 26px;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
  margin: 0 0 10px;
}

.section-body {
  margin: 0;
  line-height: 1.55;
  font-size: 0.98rem;
  white-space: pre-line;
}

.specs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0;
}

.specs-list div.spec-item {
  display: contents;
}

.specs-list dt {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  grid-column: 1;
}

.specs-list dd {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  grid-column: 2;
  text-align: right;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.spec-row:last-child { border-bottom: none; }
.spec-row .spec-key { color: var(--color-text-soft); }
.spec-row .spec-value { font-weight: 600; }

.seller-info, .bid-info {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.seller-info .row, .bid-info .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.seller-info .row span:first-child, .bid-info .row span:first-child {
  color: var(--color-text-soft);
}

/* ===================== LOTS / DOCUMENTS LIST ===================== */
.documents-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.documents-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-blue-darker);
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  transition: background 0.15s ease;
}
.documents-list a:hover { background: #eef1f3; }

/* ===================== BOTTOM BAR ===================== */
.bottom-bar {
  height: 46px;
  background: var(--color-blue);
  margin-top: 30px;
}

/* ===================== LIGHTBOX ===================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 18, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.lightbox-nav {
  background: none;
  border: none;
  color: #fff;
  font-size: 2.6rem;
  padding: 10px 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev { left: 6px; }
.lightbox-next { right: 6px; }

.video-wrap {
  width: min(92vw, 640px);
}

#video-player {
  width: 100%;
  border-radius: 8px;
  background: #000;
}

/* ===================== LINK POPUP ===================== */
.link-popup {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 18, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.link-popup-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--max-width);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 44px;
  scrollbar-width: none;
  cursor: grab;
}
.link-popup-track::-webkit-scrollbar { display: none; }

.link-popup-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.link-popup-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 18px 20px 20px;
  width: 78%;
  max-width: 260px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transform: scale(0.94);
  transition: transform 0.25s ease;
  position: relative;
  z-index: 1;
}

.link-popup-card.is-active {
  transform: scale(1.06);
  z-index: 2;
}

.link-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 14px;
}

.btn-outline {
  display: block;
  text-align: center;
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  border-radius: var(--radius-md);
  padding: 9px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease;
}
.btn-outline:hover { background: #eef4f9; }

/* ===================== QR SCANNER (logo button) ===================== */

/* Card wrapping the logo button + hint text: centered, own background,
   border, and box-shadow — matches the visual language of the .app shell
   and other cards on the page (var(--shadow-card), var(--radius-lg)),
   so it reads as a distinct, self-contained control rather than just
   floating text/logo in the page flow.
   NOTE: on the sale page this section lives inside .lot-actions (a flex
   column with `gap: 10px` between the buttons above it). The id selector
   below is more specific than `.content-section`'s `margin-top: 26px`, so
   this card's own `margin: 48px auto 0` wins and stacks on top of that
   10px gap — giving noticeably more breathing room above the card than
   between the buttons themselves. Drop the 48px if you want it flush with
   the button stack instead. */
#qr-scanner-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 280px;
  margin: 48px auto 0; /* top value = space above the card; auto left/right keeps it centered on the page */
  padding: 22px 26px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.qr-hint {
  color: #777;
  font-size: 14px;
  text-align: center;
  margin: 0; /* spacing between logo and hint now comes from the card's `gap` */
}

/* Wraps the logo image so the button can sit exactly on top of it.
   NOTE: this element has an explicit width (320px / 90vw) but its height
   is left to "auto" (it just follows the image's natural aspect ratio).
   That matters below: percentage-based heights only work on children when
   the parent has an explicit height, so #qr-btn can't get a percentage
   height fallback from this wrapper alone — see the fixed-px fallback
   comment on #qr-btn. */
#logo-wrap {
  position: relative;
  display: inline-block;
  width: 160px;      /* shrunk from 320px so the logo reads as a small tappable
                         button/icon instead of a full-width banner. Everything
                         below (the "o" button size/position, in both this CSS
                         fallback and the JS positionButton() fractions) scales
                         off this value automatically — just change this one
                         number to resize the whole thing. At 160px the "o"
                         button works out to ~38px, close to the ~44px min
                         touch-target guideline; go smaller only if you don't
                         need great tap accuracy on mobile. */
  max-width: 90vw;
  margin: 0 auto;
}
#qcow-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Invisible clickable circle sitting on top of the "o".
   JS (setupQrScanner -> positionButton) sets precise inline width/height/
   left/top once the logo has actually finished laying out, using the same
   fractions as below. Those inline styles win once JS runs (inline beats
   an external stylesheet regardless of specificity).

   The block below is a FALLBACK ONLY: it guarantees the button already
   has *some* clickable area and a roughly-correct position from the very
   first paint, in case there's ever a gap between the page rendering and
   JS finishing its calculation (e.g. a slow-loading script, a slow
   stylesheet, or a browser reporting img.complete before layout has fully
   settled). Without this, the button can sit at 0x0 during that gap and
   feel like "nothing happens" when clicked, even though the click handler
   is already attached.

   IMPORTANT: `position: absolute` is required here. #logo-wrap above is
   `position: relative`, which only creates a positioning context for
   children — it does nothing on its own. Without `position: absolute`
   (or `relative`/`fixed`) on #qr-btn itself, the `left`/`top` values below
   are ignored entirely and the button renders as a normal block, in the
   page's normal flow, right after the logo image — which is exactly the
   "scanner button appears below the logo instead of over the 'o'" bug.

   These fallback numbers approximate the same "o" position used by
   O_CENTER_X_FRAC / O_CENTER_Y_FRAC / O_DIAMETER_FRAC in the JS, assuming
   the default 320px-wide logo at its native ~240x85 aspect ratio. If JS
   runs correctly (the normal case), it immediately overrides these with
   exact pixel values, so this fallback only ever matters for a brief
   instant, if at all. */
#qr-btn {
  position: absolute; /* required for left/top to have any effect */
  width: 38px;   /* 0.2375 * 160px (O_DIAMETER_FRAC at the new, smaller logo width) */
  height: 38px;
  left: 75px;    /* (0.5854 * 160px) - (38px / 2) */
  top: 3px;      /* (0.3765 * (160px * 85/240)) - (38px / 2) */

  /* Without these, the browser's default button chrome (a light gray
     fill + border) shows up as an opaque box sitting on top of the "o" —
     that's the "gray square covering the letter o" you were seeing.
     `button {}` earlier in this file only resets font-family/cursor, not
     appearance/background/border, so this element needs its own reset.
     appearance: none removes the native OS/browser button look; the rest
     makes it fully see-through until the :hover rule below reveals it. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: 50%; /* matches the round "o" so the hover highlight below reads as a circle */
  padding: 0;
}
#qr-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4) inset;
}
#qr-btn svg {
  width: 55%;
  height: 55%;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#qr-btn:hover svg {
  opacity: 0.9;
}

/* ===== Scanner modal ===== */
#scanner-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#scanner-modal.hidden { display: none; }

#scanner-panel {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 420px;
  text-align: center;
}
#qr-reader { width: 100%; }
#scanner-close-btn {
  margin-top: 14px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #3a6f96;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
#qr-result {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

/* ===================== RESPONSIVE TWEAKS ===================== */
@media (min-width: 640px) {
  .lot-main { padding: 4px 40px 36px; }
  .media-grid { grid-template-columns: repeat(4, 1fr); }
}