:root {
  --burgundy: #7a2230;
  --burgundy-soft: #9c3b4a;
  --ink: #2b2320;
  --papyrus: #fbf8f0;
  --papyrus-line: #efe9dc;

  /* Re-theme Bootstrap's "primary" and link colours to burgundy, so all
     buttons, links, form focus rings, etc. follow without per-element rules. */
  --bs-primary: #7a2230;
  --bs-primary-rgb: 122, 34, 48;
  --bs-link-color: #7a2230;
  --bs-link-color-rgb: 122, 34, 48;
  --bs-link-hover-color: #9c3b4a;
  --bs-link-hover-color-rgb: 156, 59, 74;
}

/* Burgundy focus ring instead of Bootstrap's default blue glow. */
.form-control:focus, .form-select:focus, .btn:focus, .btn:focus-visible {
  border-color: var(--burgundy-soft);
  box-shadow: 0 0 0 0.2rem rgba(122, 34, 48, 0.2);
}

/* Faint papyrus background with a barely-there texture. */
body {
  background-color: var(--papyrus);
  background-image:
    repeating-linear-gradient(0deg, rgba(122, 34, 48, 0.008) 0 2px, transparent 2px 4px);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  line-height: 1.65;
}

h1, h2, h3 { color: var(--burgundy); font-weight: 600; letter-spacing: 0.2px; }
a { color: var(--burgundy); }
a:hover { color: var(--burgundy-soft); }

.container { max-width: 820px; margin: 0 auto; padding: 0 1rem; }

/* Centred navbar with no background; the crest sits in the middle, nav items
   flow on either side. The two nav groups share equal width so the crest stays
   centred on the page regardless of how many items each side has. */
.navbar-simple {
  padding-top: 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: 1.6rem;
}
.navbar-simple .nav-group {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin: 0; padding: 0; flex: 1 1 0;
}
.navbar-simple .nav-left { justify-content: flex-end; }
.navbar-simple .nav-right { justify-content: flex-start; }
.navbar-simple a {
  text-decoration: underline; text-underline-offset: 4px;
  color: var(--burgundy); font-size: 1.05rem; white-space: nowrap;
}
.navbar-simple a:hover { color: var(--burgundy-soft); }
/* Make the logout POST button look like a nav link. */
.navbar-simple .nav-signout { display: inline; margin: 0; }
.navbar-simple .nav-link-button {
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  color: var(--burgundy); font-size: 1.05rem; font-family: inherit; white-space: nowrap;
}
.navbar-simple .nav-link-button:hover { color: var(--burgundy-soft); }

.brand { text-align: center; margin: 0; flex: 0 0 auto; }
.brand .crest { height: 76px; width: auto; opacity: 0.95; }

.page-title { text-align: center; margin: 0.6rem 0 1.4rem; }

/* Fleuron / tilde section separators. */
.sep { text-align: center; color: var(--burgundy); font-size: 1.3rem; margin: 2rem 0; }

/* Content blocks fill the container width. */
.prose { margin: 0 auto; }
.section-heading { text-align: left; margin-bottom: 1.8rem; }
/* Sub-headers grouping items by type on the index page. */
.item-group-heading {
  margin-top: 2rem; margin-bottom: 1rem;
  font-size: 1.15rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--burgundy); border-bottom: 1px solid var(--papyrus-line); padding-bottom: 0.3rem;
}
.muted { color: #8a7f74; }
/* Narrow wrapper, only for standalone forms (auctioneer login). */
.page-narrow { max-width: 420px; margin: 0 auto; }
/* Sign-in form: email + password + button on one row (desktop), stacked on
   mobile via Bootstrap's col-md. align-items-end lines the button up with the
   inputs; cancel render_field's bottom margin so the row stays aligned. */
.signin-form { max-width: 760px; }
.signin-form .row .mb-3 { margin-bottom: 0 !important; }
.signin-submit-col .btn { width: 100%; }

/* Borderless tables: just a grid for arranging content. */
.table-plain {
  width: 100%; border-collapse: collapse; background: transparent; margin: 1rem 0;
}
.table-plain th, .table-plain td {
  border: none; padding: 0.5rem 0.7rem; text-align: left; vertical-align: top;
}
.table-plain thead th {
  border-bottom: 1px solid var(--papyrus-line); color: var(--burgundy); font-weight: 600;
}
.table-plain tfoot th { border-top: 1px solid var(--papyrus-line); }
.table-plain .num { text-align: right; white-space: nowrap; }
.table-plain .bid-num { font-weight: 600; color: var(--burgundy); }
/* Separator between bids (not between items within a bid). */
.table-plain tr.bid-start td { border-top: 1px solid var(--papyrus-line); }
/* "or" between the items of a single (XOR) bid — small caps, centred, compact. */
.table-plain tr.or-row td {
  text-align: center; padding: 0 0.7rem;
  font-variant: small-caps; font-size: 0.75rem; color: #a89c8c; line-height: 1;
}

/* Item list on index: image left, details right. */
.item-list { display: flex; flex-direction: column; gap: 1.4rem; }
.item-row { display: flex; gap: 1.2rem; align-items: flex-start; }
.item-img { flex: 0 0 160px; }
.item-img > img {
  max-width: 160px; max-height: 220px;
  width: auto; height: auto;
  object-fit: contain; border-radius: 3px;
  display: block;
}
/* Small thumbnails (page + signature) under the cover. Click to open full. */
.item-thumbs { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.item-thumbs a { display: block; line-height: 0; }
.item-thumbs img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--papyrus-line);
  opacity: 0.92; transition: opacity 0.15s;
}
.item-thumbs a:hover img { opacity: 1; border-color: var(--burgundy-soft); }
/* Hover affordance: zoomable images get a subtle cursor + lift. */
.zoom-on-click { cursor: zoom-in; transition: opacity 0.15s; }
.zoom-on-click:hover { opacity: 0.85; }

/* Native <dialog> lightbox. */
.img-modal {
  border: none; padding: 0; background: transparent;
  max-width: 98vw; max-height: 98vh;
  position: fixed; /* dialog default, but make it explicit so child absolutes anchor here */
  overflow: visible; /* allow the close button to sit outside the corner */
}
.img-modal form { margin: 0; }
.img-modal::backdrop { background: rgba(20, 16, 14, 0.85); }
.img-modal img {
  display: block;
  /* Show at the source's natural size; cap at the viewport so very large
     originals still fit. No upscaling (small originals stay small rather than
     being blurred by enlargement). */
  max-width: 98vw; max-height: 98vh;
  width: auto; height: auto;
  border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.img-modal-close {
  position: absolute; top: -12px; right: -12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--burgundy); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.img-modal-close:hover { background: var(--burgundy-soft); }

/* Admin: per-bidder password (re)set <dialog>. */
.pw-modal {
  border: 1px solid #d9cfc6; border-radius: 6px;
  padding: 1.25rem 1.5rem; max-width: 28rem; width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.pw-modal::backdrop { background: rgba(20, 16, 14, 0.55); }
.pw-modal h3 { margin: 0 0 0.5rem; color: var(--burgundy); font-size: 1.05rem; }
.pw-modal label { display: block; margin: 0.75rem 0 0; font-weight: 500; }
.pw-modal label .form-control { margin-top: 0.25rem; }
.pw-modal-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem;
}
.item-detail h3 { margin: 0 0 0.3rem; }
.item-detail h4 { margin: 0 0 0.1rem; color: var(--burgundy); font-weight: 600; }
.item-title + .item-subtitle { margin-top: -0.05rem; }
.item-subtitle {
  font-style: italic; color: #6a5f55; font-size: 0.95rem;
  margin: 0 0 0.5rem;
}
.item-desc p { margin: 0 0 0.4rem; }
.item-meta { display: flex; gap: 1rem; align-items: center; }
.reserve { color: #8a7f74; font-size: 0.95rem; }
.logged-in-as { font-size: 0.85rem; font-weight: 400; }
/* "You are logged in as ..." text with the Log out button inline beside it. */
.signed-in { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.signed-in .inline-form { display: inline; margin: 0; }

.hero-img { text-align: center; margin: 1rem 0; }
.hero-img img { max-width: 160px; border-radius: 10px; }

/* Bid builder */
.builder, .bids-section { margin: 0 auto; }
.add-row { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.add-row .form-select { flex: 1 1 220px; }
.add-row .form-control { flex: 0 0 140px; }

/* Buttons: tint Bootstrap primary toward burgundy. */
/* Re-theme the primary buttons via Bootstrap's own per-button variables
   (the compiled CSS hardcodes blue here, so --bs-primary alone isn't enough). */
.btn-primary {
  --bs-btn-bg: var(--burgundy);
  --bs-btn-border-color: var(--burgundy);
  --bs-btn-hover-bg: var(--burgundy-soft);
  --bs-btn-hover-border-color: var(--burgundy-soft);
  --bs-btn-active-bg: var(--burgundy-soft);
  --bs-btn-active-border-color: var(--burgundy-soft);
  --bs-btn-disabled-bg: var(--burgundy);
  --bs-btn-disabled-border-color: var(--burgundy);
}
.btn-outline-primary {
  --bs-btn-color: var(--burgundy);
  --bs-btn-border-color: var(--burgundy);
  --bs-btn-hover-bg: var(--burgundy);
  --bs-btn-hover-border-color: var(--burgundy);
  --bs-btn-active-bg: var(--burgundy);
  --bs-btn-active-border-color: var(--burgundy);
}
.btn-link { --bs-btn-color: var(--burgundy); --bs-btn-hover-color: var(--burgundy-soft); }

footer { text-align: center; margin: 2rem 0; }

@media (max-width: 560px) {
  .item-row { flex-direction: column; }
  .item-img, .item-img img { width: 100%; flex-basis: auto; height: auto; }

  /* Stack the navbar: nav items in one centred row, crest centred below. */
  .navbar-simple { flex-direction: column; gap: 0.8rem; }
  .navbar-simple .nav-group { flex: 0 1 auto; justify-content: center; }
  .navbar-simple .nav-left { order: 1; }
  .navbar-simple .brand { order: 2; margin-top: 0.4rem; }
  .navbar-simple .nav-right { order: 3; }
}