/* ============================================================
   Lot Detail — Light-touch styling
   Applies to both the full lotdetail.php page and the modal
   loaded via lotdetail-modal.php. Preserves existing DOM IDs
   and only styles elements we explicitly add class hooks for;
   the bid-info table, image carousel, thumbnails, and tabs
   are left to render with their original Bootstrap 3 styles.
   ============================================================ */

/* ---------- Countdown bar ---------- */
.lot-countdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    background: #f7f7f9;
    border: 1px solid #e6e6ea;
    border-radius: 6px;
}

.lot-countdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex: 1 1 auto;
    min-width: 160px;
}

.lot-countdown-label i {
    color: #CD1F29;
    font-size: 16px;
}

.lot-countdown-blocks {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lot-countdown .count-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #dcdce1;
    border-radius: 4px;
}

.lot-countdown .count-block .numbers {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #1a1a2e;
}

.lot-countdown .count-block .title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #777;
    margin-top: 2px;
}

.lot-countdown #count2 {
    font-size: 15px;
    font-weight: 700;
    color: #CD1F29;
    margin-left: auto;
}

/* ---------- Empty image state ---------- */
/* When the lot has no images, hide the image column so the bid-info
   column isn't sitting next to an empty box. */
.lot-detail-no-image .lot-detail-image-col {
    display: none;
}

/* ---------- Back-to-catalog button (full page only) ---------- */
.lot-detail-back-catalog {
    margin: 20px 0 10px 0;
}

/* ---------- Modal-specific overrides ---------- */
/* When rendered inside the modal, hide elements that duplicate modal chrome. */
#lotDetailModalBody .lot-detail-title {
    display: none;
}
#lotDetailModalBody .lot-detail-back-catalog {
    display: none;
}
#lotDetailModalBody .lot-countdown {
    margin-top: 0;
}

/* Stack the image column and bid-panel column inside the modal so the bid
   buttons/inputs/nav links don't overflow a 300px-wide col-md-4 slot. */
#lotDetailModalBody .lot-detail-image-col,
#lotDetailModalBody .lot-detail-bid-col {
    width: 100% !important;
    float: none !important;
    padding-left: 15px;
    padding-right: 15px;
}
/* Keep media inside the stacked panel from busting out horizontally either. */
#lotDetailModalBody .lot-detail-bid-col img,
#lotDetailModalBody .lot-detail-bid-col table {
    max-width: 100%;
}

/* The site logo and floating catalog UI (scroll-to-top, mini pagination,
   winsPill, mobile-top-bar) use z-index 9998–9999, which would otherwise
   punch through the Bootstrap 3 modal (default z-index 1050). Cover both
   the AJAX modal (#lotDetailModal) and every per-lot inline modal rendered
   inside the catalog grid (#myModal{LotID}, #myModalbids{LotID}). */
#lotDetailModal,
[id^="myModal"] {
    z-index: 10500 !important;
}
.modal-backdrop.in {
    z-index: 10400 !important;
}

#lotDetailModal .modal-header .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}

/* ---------- Bid info — compact, enlarged, eye-catching ---------- */
/* The table HTML is a 4-row vertical stack (5 if the Reserve row shows for
   signed-in users). We DO NOT restructure markup — only override display
   modes via CSS. Current Bid stays as the headline; Total Bids / High Bidder
   / Next Bid collapse onto a single inline row beneath it.
   Row targeting uses :nth-child / :nth-last-child (not :has()) so it works
   in every browser. Anatomy:
     row 1                       → Current Bid (always)
     row 2 (sometimes)           → Reserve Price (only when signed in + reserve > current)
     last 3 rows                 → Total Bids / High Bidder / Next Bid
   :nth-last-child(-n+3) catches the trio whether or not Reserve is present. */

/* Let the table behave as a block container so we can lay rows out manually. */
.lot-detail-bid-col .table,
.lot-detail-bid-col .table tbody {
    display: block;
}
.lot-detail-bid-col .table tbody {
    font-size: 18px !important;
    text-align: center;
}

/* ----- Current Bid row (always row 1) — full-width centered headline ----- */
.lot-detail-bid-col tr.bid-stat-current {
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 14px 6px 10px !important;
    padding: 14px 16px 12px !important;
    background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%);
    border: 1px solid #c9302c;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(205, 31, 41, 0.28);
}
.lot-detail-bid-col tr.bid-stat-current td {
    padding: 0 !important;
    border-top: 0 !important;
    display: inline-flex !important;
    align-items: baseline;
    gap: 4px;
    width: auto !important;
}
.lot-detail-bid-col tr.bid-stat-current td > div {
    float: none !important;
    width: auto !important;
    display: inline-block;
}
.lot-detail-bid-col #thecurrentbiddisp {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
/* Label text on the Current Bid row */
.lot-detail-bid-col tr.bid-stat-current td > div[style*="width: 80%"] {
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffdada !important;
}
/* $ prefix on the Current Bid row — match the red value */
.lot-detail-bid-col tr.bid-stat-current td > div[style*="width: 20%"] {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* ----- Reserve Price row (row 2 when present; not in the last-3 trio) -----
   Selector: row 2 that is NOT one of the last three. When the trio is rows
   2/3/4 (no reserve), row 2 IS in the last three and this rule won't match.
   When reserve is present (5 rows total), row 2 is reserve and not in last-3. */
.lot-detail-bid-col tr.bid-stat-reserve {
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 14px;
}
.lot-detail-bid-col tr.bid-stat-reserve td {
    padding: 0 !important;
    border-top: 0 !important;
    display: inline-flex !important;
    width: auto !important;
}
.lot-detail-bid-col tr.bid-stat-reserve td > div {
    float: none !important;
    width: auto !important;
    display: inline-block;
}

/* ----- Total Bids / High Bidder / Next Bid — inline trio on one line ----- */
.lot-detail-bid-col tr.bid-stat-trio {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 4px !important;
    padding: 12px 10px 10px !important;
    border-top: 0 !important;
    vertical-align: top;
    background: linear-gradient(135deg, #f5f7fb 0%, #e9eef7 100%);
    border: 1px solid #d6dde9;
    border-radius: 10px;
    /* Two pills per row — Total Bids on the left, High Bidder on the right.
       Matches #myModal{LotID}'s .modal-bid-stats 1fr 1fr layout. The extra
       slack (vs an exact 50%) absorbs the whitespace between the inline tiles
       so the second one doesn't wrap to its own line. */
    width: calc(50% - 16px) !important;
    box-sizing: border-box;
}
/* Hide the Next Bid pill — its amount is already on the BID $X.XX button below.
   This keeps the AJAX fallback modal visually identical to the inline modal,
   which never had a separate Next Bid pill. */
.lot-detail-bid-col tr.bid-stat-nextbid {
    display: none !important;
}
.lot-detail-bid-col tr.bid-stat-trio td {
    padding: 0 !important;
    border-top: 0 !important;
    display: block !important;
    text-align: center !important;
    width: auto !important;
}
.lot-detail-bid-col tr.bid-stat-trio td > div {
    float: none !important;
    width: auto !important;
    display: inline-block;
}
/* Label color for the inline trio */
.lot-detail-bid-col tr.bid-stat-trio td > div[style*="width: 80%"] {
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #777;
}
/* Fold the "#" prefix into the High Bidder value so the pill stays two lines
   (label / #value) and matches the Total Bids pill height. The standalone
   prefix div otherwise wraps to its own line in the narrow pill, making the
   High Bidder tile taller than Total Bids. */
.lot-detail-bid-col tr.bid-stat-trio td > div[style*="width: 20%"] {
    display: none !important;
}
.lot-detail-bid-col #bidderusername::before {
    content: "#";
    font-weight: 700;
    margin-right: 1px;
}
/* The three values */
.lot-detail-bid-col #thenumbids,
.lot-detail-bid-col #bidderusername,
.lot-detail-bid-col #thenextbiddisp {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    line-height: 1.2;
}

/* Narrow screens — keep 2-per-row layout, tighten margins so they fit. */
@media (max-width: 480px) {
    .lot-detail-bid-col tr.bid-stat-trio {
        margin: 3px !important;
        padding: 10px 6px 8px !important;
        width: calc(50% - 12px) !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .lot-countdown {
        padding: 10px 12px;
        gap: 8px;
    }
    .lot-countdown-label {
        width: 100%;
        min-width: 0;
        font-size: 13px;
    }
    .lot-countdown-blocks {
        width: 100%;
        gap: 5px;
    }
    .lot-countdown .count-block {
        flex: 1 1 auto;
        min-width: 0;
        padding: 5px 3px;
    }
    .lot-countdown #count2 {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
}

/* ---------- Bid buttons — match the inline #myModal look ----------
   #bidbutton1 (BID $X) → blue, #bidbutton2 (BID $X+) → green, side by side.
   Their <td> cells (#bidagainsub1/#bidagainsub2) are already in one row.
   #bidbutton ("YOUR MAX BID") + #MaximumBid form the Set-Max row below.
   Applies on the full lotdetail.php page AND the AJAX quick-view modal. */
.lot-detail-bid-col #bidagainsub1,
.lot-detail-bid-col #bidagainsub2 {
    width: 50%;
    padding: 2px 3px !important;
    vertical-align: top;
    border-top: 0 !important;
}
.lot-detail-bid-col #bidagain1,
.lot-detail-bid-col #bidagain2 { float: none !important; }
.lot-detail-bid-col #bidbutton1,
.lot-detail-bid-col #bidbutton2 {
    width: 100%;
    height: auto;
    padding: 12px 6px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border-radius: 8px;
    color: #fff !important;
    background-image: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    border: 1px solid #1e7e34;
    box-shadow: 0 3px 12px rgba(40, 167, 69, 0.25);
    white-space: normal;
}
.lot-detail-bid-col #bidbutton2:hover,
.lot-detail-bid-col #bidbutton2:focus {
    background-image: linear-gradient(135deg, #2fbf50 0%, #23913d 100%);
}
.lot-detail-bid-col #bidbutton1 {
    background-image: linear-gradient(135deg, #0654ba 0%, #043e8c 100%);
    border-color: #043e8c;
    box-shadow: 0 3px 12px rgba(13, 110, 253, 0.25);
}
.lot-detail-bid-col #bidbutton1:hover,
.lot-detail-bid-col #bidbutton1:focus {
    background-image: linear-gradient(135deg, #0a63d6 0%, #064aa3 100%);
}
/* Set-Max row: YOUR MAX BID button + amount input, aligned and full width. */
/* Status message row (YOU ARE WINNING! / OUTBID! / YOU HAVE NOT BID): full
   width and centered instead of stuck in the right-hand cell. */
.lot-detail-bid-col #turnoffbidmessage {
    display: block !important;
    text-align: center;
    margin: 6px 0 4px;
}
.lot-detail-bid-col #turnoffbidmessage > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
}
.lot-detail-bid-col #turnoffbidmessage > td:first-child { display: none !important; }

/* Set-Max row (#turnoffbid): amount field on the left, YOUR MAX BID button on
   the right, on one aligned row (matching the modal's SET MAX BID row). The
   markup order is button-then-input, so row-reverse puts the field first. */
.lot-detail-bid-col #turnoffbid {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.lot-detail-bid-col #turnoffbid > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
}
.lot-detail-bid-col #turnoffbid > td:first-child { flex: 1 1 auto; min-width: 0; }  /* button cell — fills */
.lot-detail-bid-col #turnoffbid > td:last-child  { flex: 0 0 120px; }               /* input cell — fixed */
/* Collapse the leading &nbsp; in the button wrappers so the full-width button
   doesn't wrap below the space (which added phantom height and misaligned the
   YOUR MAX BID button against the amount field). The buttons set their own
   font-size, so font-size:0 here only kills the stray whitespace. */
.lot-detail-bid-col #bidagain,
.lot-detail-bid-col #bidagain1,
.lot-detail-bid-col #bidagain2 {
    float: none !important;
    width: 100%;
    margin: 0 !important;
    font-size: 0;
}
.lot-detail-bid-col #bidbutton {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    color: #fff !important;
    background-image: linear-gradient(135deg, #5a6678 0%, #444f5e 100%);
    border: 1px solid #444f5e;
    white-space: nowrap;
}
.lot-detail-bid-col #bidbutton:hover,
.lot-detail-bid-col #bidbutton:focus {
    background-image: linear-gradient(135deg, #66728a 0%, #4d596a 100%);
}
.lot-detail-bid-col #MaximumBid {
    width: 100% !important;
    height: 44px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

/* ---------- Full lot detail page (desktop) only ----------
   On the full page the bid column is a narrow col-md-4 sidebar, where the
   inline "CURRENT BID: $202.50" headline wraps to two lines. Stack the label
   over the value there (matching the inline #myModal), and move the "$" onto
   the value. The AJAX quick-view modal (#lotDetailModalBody, no .content-right)
   and mobile keep their roomier inline layout. */
@media (min-width: 768px) {
    .content-right .lot-detail-bid-col tr.bid-stat-current {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .content-right .lot-detail-bid-col tr.bid-stat-current td > div[style*="width: 20%"] {
        display: none !important;
    }
    .content-right .lot-detail-bid-col #thecurrentbiddisp::before {
        content: "$";
        font-size: 0.8em;
        font-weight: 800;
        margin-right: 1px;
    }
    /* Tighten the gap between the "$" and the amount so it reads "$202.50". */
    .content-right .lot-detail-bid-col #thecurrentbiddisp {
        gap: 1px !important;
    }
}