/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* One place to tune the wood-grain wash used by the body, navbar, and status bar.
   Higher alpha = lighter/more washed out (more readable); lower = more grain. */
:root {
    --wood-wash: rgba(255, 255, 255, 0.1);
    --wood-line: transparent;   /* divider lines under the navbar and status bar (set a grey like #888 to show them) */
}

header {
    margin: 0;
}

#status-bar {
    padding: 3px 12px;
    font-size: 0.82em;
    color: #666;
    background-color: #f8f8f8;   /* fallback shown under the texture */
    background-image:
        linear-gradient(var(--wood-wash), var(--wood-wash)),
        url("../img/fine-wood-grain-3.d05a65e32f33.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--wood-line);
}

/* Navbar shares the same fixed texture so nav + status + body read as one surface. */
#site-nav {
    background-image:
        linear-gradient(var(--wood-wash), var(--wood-wash)),
        url("../img/fine-wood-grain-3.d05a65e32f33.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Darken the divider (overrides Bootstrap's light .border-bottom). */
    border-bottom: 1px solid var(--wood-line) !important;
}

#status-bar .status-sep {
    margin: 0 0.5em;
    color: #bbb;
}

body {
    margin: 8px;
    margin-bottom: 60px; /* Margin bottom by footer height */
    /* Wood-grain page background, lightened by the shared --wood-wash (defined
       above) so text stays readable. Tune it in that one place. */
    background-image:
        linear-gradient(var(--wood-wash), var(--wood-wash)),
        url("../img/fine-wood-grain-3.d05a65e32f33.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-contents: center;
    grid-auto-rows: auto;
    gap: 8px;
    font-family: sans-serif;
    padding-top: 20px;
    padding-bottom: 30px;
}

.cards * {
    box-sizing: border-box;
}

.card {
    position: relative;
    width: 175px;
    max-width: 175px;
    background-color: #dddddd;
}

/* Grid card size slider: zoom scales the whole card (image, text, padding)
   uniformly and reflows the grid, so the same text fits at any size.
   Detail hero (#big_card/.big-card) is excluded. */
.cards .card:not(#big_card):not(.big-card) {
    zoom: var(--card-zoom, 1);
}

.image-card:focus,
.image-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px #64968c;
}


#big_card, .big-card {
    width: 400px;
    max-width: 400px;
}


.card__image {
    width: auto;
    height: auto;
    object-fit: cover;
    display: block;
    border-top: 2px solid #333333;
    border-right: 2px solid #333333;
    border-left: 2px solid #333333;
}

.card__content {
    line-height: 1.0;
    font-size: 0.9em;
    background: #fafafa;
    border-right: 2px solid #333333;
    border-bottom: 2px solid #333333;
    border-left: 2px solid #333333;
    padding: 3px;
}


.card__content > p:first-of-type {
    margin-top: 0;
}

.card__content > p:last-of-type {
    margin-bottom: 0;
}

.card__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555555;
    background: #eeeeee;
    font-size: 0.8em;
    border-bottom: 2px solid #333333;
    border-right: 2px solid #333333;
    border-left: 2px solid #333333;
    padding: 3px;
}

/* The same bar at the *top* of a detail card, where it is the first thing in the card and
   has to finish the card's top edge. The border is composed from the parts here — the image
   draws the top, the content the sides, the bar the bottom — so a bar that moved up without
   this drew a line under itself and left the card open above it.

   Both classes in the selector on purpose. The rule above warns that `.card__info` and a
   single-class override have equal specificity and that source order decides — which is a
   footgun to leave armed when the symptom is a card with no top edge and the cause is two
   lines of CSS in the wrong order. */
.card__info.card__info--top {
    border-top: 2px solid #333333;
    border-bottom: none;
}

/* Collapse the info bar when it has no buttons (e.g. logged-out visitors),
   so it doesn't render a grey strip + second bottom border. Placed AFTER the
   base .card__info rule: both selectors have equal specificity, so source
   order decides which display value wins. */
.card__info:not(:has(*)) {
    display: none;
}

.card__info i {
    font-size: 0.9em;
    margin-right: 8px;
}

/* Score radio buttons — display horizontally */
.score-radios .form-check {
    display: inline-flex;
    align-items: center;
    margin-right: 1.2em;
}
.score-radios .form-check-input {
    margin-top: 0;
}

.card__link {
    color: #64968c;
    text-decoration: none;
}

.card__link:hover {
    text-decoration: underline;
}

/* Drag-and-drop file inputs (image_dropzone.js) */
.dz-hint { font-size: 0.8rem; color: #999; margin-top: 0.25rem; }
.dz-file { font-size: 0.82rem; color: #198754; margin-top: 0.15rem; }
.dz-over { outline: 2px dashed #64968c; outline-offset: 4px; background: rgba(100,150,140,0.06); border-radius: 4px; }

/* The primary action on a page, and for a long time a class with no rule behind it.

   `new-button` is used in 29 templates for the thing the page most wants you to press —
   Submit, Send it in, Pay, Open it, Start the review. It has always been written as
   `class="card__link new-button"`, and `card__link` alone styles an ordinary text link, so
   every one of them rendered as a line of teal text among other lines of text.

   Found in a submitter's own words: "there was another 'submit' button that was not (in my
   interface) very visible but which I eventually clicked on". He had paid, and could not see
   how to send his other two works. It is a button now. */
.card__link.new-button,
a.new-button,
button.new-button {
    display: inline-block;
    background: #64968c;
    color: #fff;
    /* Square, with the same 2px dark edge the cards and their info bars carry. A rounded,
       soft-filled button read as something imported from another site — correct as the one
       prominent thing on the page, and wearing a different dialect to everything around it. */
    border: 2px solid #333333;
    border-radius: 0;
    padding: 0.4rem 1rem;
    font: inherit;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.card__link.new-button:hover,
a.new-button:hover,
button.new-button:hover {
    background: #4d7a71;
    color: #fff;
    text-decoration: none;
}

.card__link.new-button:focus-visible,
a.new-button:focus-visible,
button.new-button:focus-visible {
    outline: 2px solid #2b4a45;
    outline-offset: 2px;
}

/* A <button> styled as a card link: strip the default button chrome so it looks
   like the plain highlighted text links used elsewhere in cards. */
button.card__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.nav-active {
    font-weight: bold;
    text-decoration: underline;
}

#footer {
    display: flex;
    flex-direction: row;
    background-color: lightgray;
    border: 2px solid black;
    justify-content: space-between;
    padding: 10px
}

.asteriskField {
    color: #dc3545;
}

.footlet {
    /* height: 200px;
    width: 200px; */
    font-size: 0.8em;
    background-color: lightgray;
}

h1,h2,h3,h4,h5 {
    font-weight: bold;
}

h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 1.25rem;
}

h2 {
    font-size: 1rem;
    margin: 1em 0 .5em 0;
}

h2.subhead {
    font-weight: normal;
    margin-top: 0;
}

h3 {
    font-size: 0.875rem;
    margin: .8em 0 .3em 0;
    color: var(--body-medium-color);
    font-weight: bold;
}

h4 {
    font-size: 0.75rem;
    margin: 1em 0 .8em 0;
    padding-bottom: 3px;
    color: var(--body-medium-color);
}

h5 {
    font-size: 0.625rem;
    margin: 1.5em 0 .5em 0;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

th, td {
  padding: 8px; /* Adds 8px padding on all sides of the cell content */
}

.social-login-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        radial-gradient(circle at 15% 10%, #f8f4ec 0%, #f8f4ec 15%, transparent 45%),
        radial-gradient(circle at 85% 80%, #e6e0d2 0%, #e6e0d2 20%, transparent 42%),
        linear-gradient(145deg, #f3eee4 0%, #e5dece 100%);
}

.social-login-card {
    width: 100%;
    max-width: 560px;
    border: 3px solid #333333;
    background: #fffdf8;
    padding: 0;
    box-shadow: 10px 10px 0 #d2ccbf;
}

.social-login-header {
    padding: 24px 24px 14px;
    border-bottom: 2px solid #ded8cb;
    background: linear-gradient(180deg, #fffcf5 0%, #f8f2e6 100%);
}

.social-login-eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: #6f6859;
    font-weight: 700;
}

.social-login-title {
    font-size: 1.55rem;
    margin: 0 0 8px;
    color: #2b2b2b;
    line-height: 1.2;
}

.social-login-copy {
    color: #4a4a4a;
    margin: 0;
    line-height: 1.45;
}

.social-login-provider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 24px 0;
    padding: 10px 12px;
    border: 2px solid #d8d0be;
    background: #faf5ea;
    font-size: 0.93rem;
}

.social-login-provider-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6f6859;
    font-weight: 700;
}

.social-login-form {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 24px 10px;
}

.social-login-button {
    border-radius: 0;
    border: 2px solid #7b1919;
    min-width: 150px;
    font-weight: 700;
}

.social-login-cancel {
    color: #366f67;
    text-decoration: none;
    font-weight: 600;
}

.social-login-cancel:hover {
    text-decoration: underline;
}

.social-login-note {
    margin: 2px 24px 22px;
    color: #6a665c;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .social-login-page {
        padding: 16px;
    }

    .social-login-header,
    .social-login-form {
        padding-left: 16px;
        padding-right: 16px;
    }

    .social-login-provider,
    .social-login-note {
        margin-left: 16px;
        margin-right: 16px;
    }

    .social-login-form {
        flex-direction: column;
        align-items: stretch;
    }

    .social-login-button {
        width: 100%;
    }
}
.section-label {
    padding: 0.75rem 0;
}

.section-label h2 {
    margin: 0;
}

.dim-input {
    width: 7.5em !important;   /* 1.5x the original 5em */
    display: inline-block;
    text-align: center;
}

.dim-sep {
    font-size: 1.2em;
    padding: 0 2px;
    line-height: 2.4;
}

/* Show-page controls: a wrapping row of buttons and small dropdown menus. Gap does
   the spacing, so a group that is empty for this viewer costs no room at all —
   the old layout used fixed full-width spacers and left holes instead. */
/* Must not defeat the .card__info:not(:has(*)) hide-when-empty rule above: equal
   specificity, and this comes later in the file. The template also refuses to emit
   the element when there is nothing in it, which is the real guard. */
.show-actions:not(:has(*)) {
    display: none;
}
.show-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
}
.show-actions .dropdown-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.show-actions .dropdown-menu {
    font-size: .9rem;
    --bs-dropdown-min-width: 11rem;
}
.show-actions .dropdown-menu form {
    margin: 0;
}
.show-actions .dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

/* "Add to calendar" — small on purpose: it repeats on every future row of the agenda, so a
   full button would outweigh the event it belongs to. */
.add-to-cal { white-space: nowrap; font-size: .85rem; }
/* The agenda repeats this on every future row, so it shrinks there. */
.add-to-cal--compact { font-size: .8rem; }
.add-to-cal a {
  display: inline-block;
  padding: .1rem .4rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .25rem;
  text-decoration: none;
  color: #2f7d55;
  line-height: 1.4;
  vertical-align: middle;
}
.add-to-cal a:hover { background: #f2f8f4; border-color: #2f7d55; }
.add-to-cal svg { vertical-align: -2px; margin-right: .15rem; }
/* Joined to the button before it, so the pair reads as one control. */
.add-to-cal__ics { border-left: 0 !important; border-top-left-radius: 0 !important;
                   border-bottom-left-radius: 0 !important; margin-left: -1px;
                   color: #777 !important; }

/* Room under the reply form: the description used to sit against the Send button, so the two
   read as one block. */
.rsvp { margin-bottom: 1rem; }

/* Reply + add-to-calendar, sitting on the same line as an event's date. These live inside
   headings, so the font size has to be overridden or they inherit h3/h4 and dwarf the date they
   belong to. */
/* em, not rem: these sit inside an h3 on a show page and an h4 on a card, which this stylesheet
   sets to 0.875rem and 0.75rem — and .card__content scales by another 0.9. A fixed size came out
   smaller than the date in one place and larger than it in the other.

   Sized once, here, and inherited by both children. Setting it on the group *and* on the links
   was the previous bug: .85 × .85 made the .ics link visibly smaller than the RSVP beside it. */
.event-actions {
  white-space: nowrap;
  font-weight: 400;
  font-size: .85em;
}

/* One rule for both, so they cannot end up different sizes again. */
.event-actions .event-actions__rsvp,
.event-actions .add-to-cal a {
  display: inline-block;
  font-size: inherit;
  padding: .1rem .4rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .25rem;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: middle;
}
.event-actions .event-actions__rsvp { color: #2f7d55; }
.event-actions .event-actions__rsvp:hover { background: #f2f8f4; border-color: #2f7d55; }
/* Sold out is the same shape so a row of events stays aligned, but plainly not a control:
   nothing to press, and the quiet grey rather than the green that means "you can". */
.event-actions .event-actions__soldout { color: #888; cursor: default; }
.event-actions .event-actions__soldout:hover { background: none; }
/* Neutralise the standalone sizes: inside this group the container decides. */
.event-actions .add-to-cal,
.event-actions .add-to-cal--compact { font-size: inherit; margin-left: .25rem; }
.event-actions .add-to-cal svg { width: 1em; height: 1em; }

/* ── Rounded panels ──────────────────────────────────────────────────────────
   One radius, matching Bootstrap's form controls (its $border-radius is .375rem),
   so a panel next to an input does not have squarer corners than the input.

   `.card__box` was used in three templates and defined nowhere, so those boxes were
   styling nothing at all — which is why the consignment pages read as bare text and
   square-cornered tables on the background. */
:root {
    --panel-radius: .375rem;
}

.card__box {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: var(--panel-radius);
}

/* Tables need `border-collapse: separate` for a radius to take on the corners at all,
   with zero spacing so cells still meet. Bootstrap draws its lines with box-shadow
   inset on cells rather than real borders, so nothing doubles up. Clipping the corners
   is what keeps the first and last header cells from poking out of the curve. */
table.table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--panel-radius);
    overflow: hidden;
}

/* The bid box's example. Bootstrap's own placeholder colour is 75% of the body colour,
   which at three characters in a short field is close enough to typed text that the field
   looked already filled in — see gallery/templates/gallery/_artwork_display.html. Grey
   enough to be unmistakably a hint, still dark enough to read. */
.bid-amount::placeholder {
    color: #8a8f94;
    opacity: 1;
}