﻿/* Containers & alignment */
.textContainer {
    text-align: left;
}

.textContainerCenter {
    text-align: center;
}

.containerBid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.remove-padding {
    padding-left: 0;
}

/* Auction titles & texts */
.auctionText {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    color: var(--color-primary);
}

.auctiontimeEndingText {
    color: var(--text-heading) !important;
    font-weight: 700 !important;
    font-size: 27px !important;
}

.auctionInfoText {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 150%;
}

.CurrentPriceStyle {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: .36px;
    color: var(--text-heading);
}

.currentbid {
    padding-bottom: 10px;
}

/* Badges & labels */
.awe-rt-ReserveStatusText {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #317151 !important;
}

.awe-rt-AcceptedListingActionCountText {
    color: var(--color-primary);
}

.badgeText {
    font-weight: 600;
    font-size: 18px;
    color: var(--color-primary);
    background: var(--bg-surface);
}

/* Layout helpers */
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Seller section */
.seller-section {
    margin-top: 16px;
}

.seller-title {
    position: relative;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
}

    .seller-title .seller-loc {
        color: var(--text-muted);
        font-weight: 400;
        white-space: nowrap;
    }

.sellerAuctionsContain {
    text-align: left;
    border-left: 8px solid var(--color-primary);
}

.seller-link {
    display: inline-block;
    margin-top: 4px;
    text-decoration: underline;
    color: var(--color-primary);
    font-weight: 500;
}

    .seller-link:hover {
        text-decoration: underline;
    }

/* Buttons */
.btn-pill {
    border-radius: 9999px;
}

.btnCircle {
    border-radius: 1.375rem;
}

.btnSubmitCustom {
    border-radius: 50px !important;
    background-color: var(--color-primary) !important;
}




.follow-btn {
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
}

    .follow-btn .plus-badge {
        height: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
    }

    .follow-btn:hover, .follow-btn:focus, .follow-btn:active {
        color: var(--color-primary);
        text-decoration: none;
    }

/* Misc */
.wantToBidText {
    font-size: 18px;
    line-height: 150%;
    font-weight: 600;
    text-align: center;
    color: #fff;
}

/* ── Proxy bid card (action box) ── */
.proxy-bid-info {
    padding: 0;
}

.proxy-bid-header {
    margin-bottom: 6px;
}

.proxy-bid-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-primary);
    background: rgba(53, 134, 187, 0.12);
    border-radius: 20px;
    padding: 3px 10px;
}

.proxy-bid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.proxy-bid-detail {
    flex: 1;
    min-width: 0;
}

.proxy-bid-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 1px;
}

.proxy-bid-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}

.proxy-bid-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

    .proxy-bid-hint i {
        color: var(--color-primary);
        margin-right: 3px;
    }

.proxy-bid-actions {
    flex-shrink: 0;
}

/* ── Proxy bid value (details table row) ── */
.proxy-bid-value {
    font-weight: 700;
    color: var(--color-primary);
}

/* ── Shared remove button ── */
.proxyBid-btn {
    transition: all .2s ease;
}

    .proxyBid-btn:hover {
        color: #fff !important;
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }


/* Visual hints */
.dollarColor { /* add any specific style if needed */
}

.dollarsignred {
    color: #dc3545 !important;
}

.bidboxerrorborder {
    border-color: #dc3545 !important;
}

/* Divider */
.bidboxhr {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: 16px 0;
}

.currentbid h3 {
    color: #214964
}

.currentbid h3 {
    font-family: 'Inter', sans-serif;
    font-size: 16px !important;
    color: #214964
}

.auctionText {
    font-family: 'Inter', sans-serif;
    font-size: 16px !important;
}

/* === Mobile: separar los botones dentro del card === */
@media (max-width: 575.98px) {
    .itempage-account {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 12px; /* espacio entre "Create..." y "Sign In" */
        text-align: center;
    }

        .itempage-account .btnCircle {
            margin: 0 !important; /* anulamos márgenes heredados */
            width: 100%;
            max-width: 280px; /* opcional */
        }
        /* fallback por si algún estilo externo pisa gap */
        .itempage-account a + a {
            margin-top: 12px !important;
        }
}

/* === Solo entre 1200px y 1350px: un poco más de espacio === */
@media (min-width: 1200px) and (max-width: 1350px) {
    .itempage-account {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 16px;
        text-align: center;
    }

        .itempage-account .btnCircle {
            margin: 0 !important;
            width: 100%;
            max-width: 300px; /* opcional */
        }

        .itempage-account a + a {
            margin-top: 16px !important;
        }
}


/* ============================================================
   DARK MODE — Auction Action Box
   (Must be here because this file loads after dark-mode-overrides.css)
   Uses html[data-theme="dark"] for maximum specificity.
   ============================================================ */

/* --- Badges (Bids, Buyer's Fee) --- */
html[data-theme="dark"] .badgeText,
html[data-theme="dark"] .badge.badgeText,
html[data-theme="dark"] .badge-outline-secondary.badgeText,
html[data-theme="dark"] span.badge.badgeText {
    background: transparent !important;
    color: #e8edf2 !important;
    border: 1px solid #2a3f54 !important;
}
html[data-theme="dark"] .badge-outline-secondary,
html[data-theme="dark"] span.badge-outline-secondary {
    background: transparent !important;
    color: #d4dce6 !important;
    border-color: #2a3f54 !important;
}

/* --- Timer section: "This Auction Ends In" --- */
html[data-theme="dark"] .auctionText,
html[data-theme="dark"] h2.auctionText,
html[data-theme="dark"] .textContainer .auctionText,
html[data-theme="dark"] .col-12.auctiontime .auctionText {
    color: #e8edf2 !important;
}

/* --- Timer countdown: "2 Days, 17 Hours" --- */
html[data-theme="dark"] .auctiontimeEndingText,
html[data-theme="dark"] h2.auctiontimeEndingText,
html[data-theme="dark"] .textContainer .auctiontimeEndingText,
html[data-theme="dark"] .col-12.auctiontime .auctiontimeEndingText {
    color: #f0f3f6 !important;
}

/* --- Info text: "Auction may be extended..." --- */
html[data-theme="dark"] .auctionInfoText,
html[data-theme="dark"] h6.auctionInfoText,
html[data-theme="dark"] .textContainer .auctionInfoText {
    color: #8fa3b8 !important;
}

/* --- "Current Highest Bid:" label --- */
html[data-theme="dark"] .currentbid h3,
html[data-theme="dark"] .containerBid .currentbid h3,
html[data-theme="dark"] .textContainer .currentbid h3 {
    color: #e8edf2 !important;
}

/* --- Price: "$7,300.00" --- */
html[data-theme="dark"] .CurrentPriceStyle,
html[data-theme="dark"] .Bidding_Current_Price,
html[data-theme="dark"] span.CurrentPriceStyle,
html[data-theme="dark"] span.Bidding_Current_Price,
html[data-theme="dark"] .currentbid .CurrentPriceStyle {
    color: #ffffff !important;
}

/* --- Bid count text --- */
html[data-theme="dark"] .awe-rt-AcceptedListingActionCountText {
    color: #5ab0e0 !important;
}

/* --- Seller section --- */
html[data-theme="dark"] .seller-title {
    color: #e8edf2 !important;
}
html[data-theme="dark"] .seller-title .seller-loc {
    color: #8fa3b8 !important;
}

/* --- Proxy bid card --- */
html[data-theme="dark"] .proxy-bid-pill {
    background: rgba(74, 159, 212, 0.15) !important;
    color: #5ab0e0 !important;
}
html[data-theme="dark"] .proxy-bid-label {
    color: #8fa3b8 !important;
}
html[data-theme="dark"] .proxy-bid-amount {
    color: #e8edf2 !important;
}
html[data-theme="dark"] .proxy-bid-hint {
    color: #8fa3b8 !important;
}

/* --- Dividers --- */
html[data-theme="dark"] .bidboxhr {
    border-top-color: #2a3f54 !important;
}

/* --- CTA Buttons (Create Account / Sign In) --- */
html[data-theme="dark"] .itempage-account .btn-white,
html[data-theme="dark"] .itempage-account .btn.btn-white,
html[data-theme="dark"] .itempage-account a.btn.btn-white {
    background: #162231 !important;
    color: #5ab0e0 !important;
    border-color: #2a3f54 !important;
}
html[data-theme="dark"] .itempage-account .btn-white:hover,
html[data-theme="dark"] .itempage-account a.btn.btn-white:hover {
    background: #1f3048 !important;
}
html[data-theme="dark"] .itempage-account .btn-outline-white,
html[data-theme="dark"] .itempage-account .btn.btn-outline-white,
html[data-theme="dark"] .itempage-account a.btn.btn-outline-white {
    background: transparent !important;
    color: #e8edf2 !important;
    border-color: #2a3f54 !important;
}
html[data-theme="dark"] .itempage-account .btn-outline-white:hover,
html[data-theme="dark"] .itempage-account a.btn.btn-outline-white:hover {
    background: #1f3048 !important;
}
html[data-theme="dark"] .itempage-account a[style*="color:#214964"] {
    color: #5ab0e0 !important;
}

/* --- Follow button --- */
html[data-theme="dark"] .follow-btn {
    color: #5ab0e0 !important;
}

/* --- Minimum bid text --- */
html[data-theme="dark"] #minimumBid-div,
html[data-theme="dark"] #minimumBid-div p {
    color: #d4dce6 !important;
}
html[data-theme="dark"] #minimumBid-div .Bidding_Listing_MinPrice,
html[data-theme="dark"] #minimumBid-div b {
    color: #ffffff !important;
}

/* --- Bid prefix pill: solid brand green to match light mode --- */
html[data-theme="dark"] .input-group-addonbid,
html[data-theme="dark"] .dollarColor,
html[data-theme="dark"] span.input-group-addon.input-group-addonbid.dollarColor {
    background: #17c671 !important;
    border: 1px solid #17c671 !important;
    color: #ffffff !important;
}

/* --- Bid input: distinct surface from card so it reads as an input --- */
html[data-theme="dark"] .form-control-bid,
html[data-theme="dark"] input.form-control-bid,
html[data-theme="dark"] .input-group .form-control-bid {
    background: #1a2940 !important;
    border: 1px solid #2a3f54 !important;
    color: #ffffff !important;
    font-weight: 600;
}
html[data-theme="dark"] .form-control-bid:focus,
html[data-theme="dark"] input.form-control-bid:focus {
    background: #1f3048 !important;
    border-color: #4a9fd4 !important;
    box-shadow: 0 0 0 3px rgba(74, 159, 212, 0.25) !important;
}
html[data-theme="dark"] .form-control-bid::placeholder {
    color: #8fa3b8 !important;
}

/* --- Divider between timer section and bid section --- */
html[data-theme="dark"] .bidboxhr {
    border-top: 1px solid #2a3f54 !important;
    opacity: 1 !important;
}

/* --- "No Reserve" / reserve status — vivid emerald in dark --- */
html[data-theme="dark"] .awe-rt-ReserveStatusText,
html[data-theme="dark"] .awe-rt-ReserveStatus {
    color: #4ade80 !important;   /* emerald-400, punchy on navy */
    font-weight: 700 !important;
}

/* --- Reserve status --- */
html[data-theme="dark"] .awe-rt-ReserveStatusText {
    color: #2dd183 !important;
}
