/**
 * AuctionVibe — Global Frontend Styles
 * Theme-agnostic styles for auction display across all themes (Block & Classic).
 *
 * @package AuctionVibe
 */

/* ==========================================================================
   1. Design Tokens (CSS Custom Properties)
   These are the safe defaults. The plugin overrides --auctvibe-* at runtime
   from the admin Color settings via wp_add_inline_style().
   ========================================================================== */

:root {
    --auctvibe-primary: #1e40af;
    --auctvibe-primary-dark: #1e3a8a;
    --auctvibe-accent: #d97706;
    --auctvibe-accent-hover: #b45309;
    --auctvibe-success: #059669;
    --auctvibe-success-bg: #dcfce7;
    --auctvibe-success-border: #22c55e;
    --auctvibe-success-text: #166534;
    --auctvibe-danger: #dc2626;
    --auctvibe-danger-bg: #fee2e2;
    --auctvibe-danger-border: #ef4444;
    --auctvibe-danger-text: #991b1b;
    --auctvibe-text: #111827;
    --auctvibe-text-muted: #64748b;
    --auctvibe-border: #e2e8f0;
    --auctvibe-bg: #f8fafc;
    --auctvibe-card-bg: #ffffff;
    --auctvibe-radius: 8px;
    --auctvibe-radius-sm: 4px;
    --auctvibe-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --auctvibe-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --auctvibe-transition: 0.2s ease;
    --auctvibe-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}


/* ==========================================================================
   2. Accessibility Utilities
   Visually hide content while keeping it available to screen readers.
   ========================================================================== */

.auctvibe-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ==========================================================================
   3. Auction Product Badge
   Displayed on shop loop items AND single product images.
   Works in both Classic shortcode loops AND Block theme product collections.
   ========================================================================== */

/*
 * Force a positioning context on every auction product card so the badge
 * stays inside the card. This covers both Classic and Block theme markup.
 */
.woocommerce ul.products li.product.product-type-auction,
li.product.product-type-auction,
.wc-block-product.product-type-auction,
.wp-block-woocommerce-product-template .product-type-auction,
.product-type-auction.wc-block-grid__product {
    position: relative;
}

/*
 * On the single product page, the badge is rendered next to the product
 * image gallery via woocommerce_before_single_product_summary. We need a
 * positioning context on the gallery wrapper.
 */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .wp-block-woocommerce-product-image-gallery,
.single-product div.product .wc-block-components-product-image-gallery,
.single-product div.product .wp-block-woocommerce-product-image,
.single-product div.product .wc-block-components-product-image,
.single-product .product-type-auction .images,
.single-product .product-type-auction figure {
    position: relative;
}

.auctvibe-product-badge {
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: var(--auctvibe-radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    background: var(--auctvibe-accent);
    color: #fff;
    pointer-events: none;
}

.auctvibe-product-badge--live {
    background: var(--auctvibe-success);
}

.auctvibe-product-badge--ended {
    background: var(--auctvibe-danger);
}


/* ==========================================================================
   4. Shop Loop — Price & Bid Display
   ========================================================================== */

.woocommerce ul.products li.product.product-type-auction .price .auctvibe-bid-label,
.product-type-auction .price .auctvibe-bid-label,
li.product-type-auction .auctvibe-bid-label,
.wc-block-product.product-type-auction .auctvibe-bid-label {
    display: block;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--auctvibe-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.woocommerce ul.products li.product.product-type-auction .price .auctvibe-bid-amount,
.product-type-auction .price .auctvibe-bid-amount,
li.product-type-auction .auctvibe-bid-amount,
.wc-block-product.product-type-auction .auctvibe-bid-amount {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--auctvibe-primary);
    line-height: 1.3;
}

.woocommerce ul.products li.product.product-type-auction .price .auctvibe-bid-amount .woocommerce-Price-amount,
.product-type-auction .price .auctvibe-bid-amount .woocommerce-Price-amount,
li.product-type-auction .auctvibe-bid-amount .woocommerce-Price-amount,
.wc-block-product.product-type-auction .auctvibe-bid-amount .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Ended state — winning bid in green, no-bids in muted */
.product-type-auction .auctvibe-bid-amount--won,
li.product-type-auction .auctvibe-bid-amount--won {
    color: var(--auctvibe-success-text);
}

.product-type-auction .auctvibe-auction-ended-label--reserve-not-met {
    color: var(--auctvibe-danger-text);
    font-weight: 700;
}

.product-type-auction .auctvibe-auction-ended-label--no-bids {
    color: var(--auctvibe-text-muted);
    font-weight: 600;
}

.woocommerce ul.products li.product.product-type-auction .auctvibe-auction-ended-label,
.product-type-auction .auctvibe-auction-ended-label {
    display: inline-block;
    color: var(--auctvibe-danger);
    font-weight: 700;
    font-size: 0.9em;
}

/*
 * "Bid Now" / "View Bids" button in shop loop.
 * Block themes strip the .button base class effects, so we self-style with
 * high-specificity selectors that work in both classic and block layouts.
 */
.woocommerce a.button.auctvibe-loop-btn,
.woocommerce-page a.button.auctvibe-loop-btn,
li.product-type-auction a.auctvibe-loop-btn,
.wc-block-product a.auctvibe-loop-btn,
a.button.auctvibe-loop-btn,
a.auctvibe-loop-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 22px;
    background: var(--auctvibe-primary);
    color: #fff;
    border: 1px solid var(--auctvibe-primary);
    border-radius: var(--auctvibe-radius-sm);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background var(--auctvibe-transition), border-color var(--auctvibe-transition), transform var(--auctvibe-transition);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    appearance: none;
    margin-top: 8px;
}

.woocommerce a.button.auctvibe-loop-btn:hover,
.woocommerce-page a.button.auctvibe-loop-btn:hover,
li.product-type-auction a.auctvibe-loop-btn:hover,
.wc-block-product a.auctvibe-loop-btn:hover,
a.button.auctvibe-loop-btn:hover,
a.auctvibe-loop-btn:hover {
    background: var(--auctvibe-primary-dark);
    border-color: var(--auctvibe-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.woocommerce a.button.auctvibe-loop-btn--ended,
li.product-type-auction a.auctvibe-loop-btn--ended,
.wc-block-product a.auctvibe-loop-btn--ended,
a.button.auctvibe-loop-btn--ended,
a.auctvibe-loop-btn--ended {
    background: var(--auctvibe-text-muted);
    border-color: var(--auctvibe-text-muted);
}

.woocommerce a.button.auctvibe-loop-btn--ended:hover,
li.product-type-auction a.auctvibe-loop-btn--ended:hover,
.wc-block-product a.auctvibe-loop-btn--ended:hover,
a.button.auctvibe-loop-btn--ended:hover,
a.auctvibe-loop-btn--ended:hover {
    background: #475569;
    border-color: #475569;
    color: #fff;
}

/*
 * Block-theme product card layout: stack content vertically and center it.
 * The badge stays absolute (escapes flex flow). Other children fill width.
 */
.wc-block-product.product-type-auction {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wc-block-product.product-type-auction > *:not(.auctvibe-product-badge) {
    width: 100%;
}

.wc-block-product.product-type-auction .price {
    margin: 6px 0 4px;
    display: block;
    text-align: center;
}

.wc-block-product.product-type-auction a.auctvibe-loop-btn,
.wc-block-product.product-type-auction a.button.auctvibe-loop-btn {
    align-self: center;
    width: auto;
    min-width: 140px;
    max-width: 220px;
    margin: 12px auto 0;
}


/* ==========================================================================
   5. Single Product — Auction Bidding Area
   ========================================================================== */

.auctvibe-bidding-area {
    margin: 1.5em 0 2em;
    padding: 24px;
    border: 1px solid var(--auctvibe-border);
    border-radius: var(--auctvibe-radius);
    background: var(--auctvibe-bg);
    box-shadow: var(--auctvibe-shadow);
}

.auctvibe-bidding-area h3 {
    margin: 0 0 16px;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--auctvibe-text);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--auctvibe-border);
}

/* Highest bid display */
.auctvibe-bidding-area .auction-highest-bid {
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.auctvibe-bidding-area .auction-highest-bid strong {
    color: var(--auctvibe-text-muted);
    font-weight: 500;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auctvibe-bidding-area .highest-bid-amount {
    font-size: 1.5em !important;
    font-weight: 800 !important;
    color: var(--auctvibe-success-text) !important;
    display: inline-block;
    line-height: 1.2;
}

.auctvibe-bidding-area .highest-bid-amount .woocommerce-Price-amount {
    color: var(--auctvibe-success-text);
}

/* User status messages */
.auctvibe-bidding-area .auction-user-status {
    margin: 12px 0 16px;
    padding: 10px 14px;
    border-radius: var(--auctvibe-radius-sm);
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.5;
}

.auctvibe-bidding-area .auction-user-status--winning {
    background: var(--auctvibe-success-bg);
    color: var(--auctvibe-success-text);
    border-left: 4px solid var(--auctvibe-success-border);
}

.auctvibe-bidding-area .auction-user-status--outbid {
    background: var(--auctvibe-danger-bg);
    color: var(--auctvibe-danger-text);
    border-left: 4px solid var(--auctvibe-danger-border);
}

/* Countdown timer */
.auctvibe-bidding-area .auction-countdown {
    margin: 16px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.auctvibe-bidding-area .auction-countdown strong {
    color: var(--auctvibe-text-muted);
    font-weight: 500;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auctvibe-bidding-area .auctvibe-timer {
    font-family: var(--auctvibe-font-mono);
    font-size: 1.05em;
    font-weight: 700;
    color: var(--auctvibe-text);
    display: inline-block;
    background: var(--auctvibe-card-bg);
    padding: 6px 14px;
    border-radius: var(--auctvibe-radius-sm);
    border: 1px solid var(--auctvibe-border);
    white-space: nowrap;
}

/* Auction ended banner */
.auctvibe-bidding-area #auctvibe-ended-status {
    margin-top: 1em;
    padding: 16px;
    background: var(--auctvibe-danger-bg);
    border-left: 4px solid var(--auctvibe-danger-border);
    color: var(--auctvibe-danger-text);
    border-radius: 0 var(--auctvibe-radius-sm) var(--auctvibe-radius-sm) 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auctvibe-bidding-area #auctvibe-ended-status strong {
    font-size: 1.05em;
    color: var(--auctvibe-danger-text);
}


/* ==========================================================================
   6. Bid Form — Stacked Layout
   Each element on its own line. The button is fully styled using our
   color settings, regardless of theme button styles.
   ========================================================================== */

#auctvibe-bid-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* Visible label above input (auctvibe-sr-only is hidden via .auctvibe-sr-only) */
#auctvibe-bid-form label:not(.auctvibe-sr-only) {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--auctvibe-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

#auctvibe-bid-form input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: var(--auctvibe-radius-sm);
    border: 1px solid var(--auctvibe-border);
    font-size: 16px;
    font-weight: 600;
    color: var(--auctvibe-text);
    background: var(--auctvibe-card-bg);
    outline: none;
    transition: border-color var(--auctvibe-transition), box-shadow var(--auctvibe-transition);
    -moz-appearance: textfield;
    line-height: 1.4;
}

#auctvibe-bid-form input[type="number"]:focus {
    border-color: var(--auctvibe-primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

/* Description (Minimum bid: ...) on its own line */
#auctvibe-bid-form .description {
    margin: 0;
    font-size: 0.85em;
    color: var(--auctvibe-text-muted);
    line-height: 1.5;
}

#auctvibe-bid-form .description .woocommerce-Price-amount {
    font-weight: 700;
    color: var(--auctvibe-text);
}

/*
 * Place Bid button — fully self-styled.
 * Uses high-specificity selector (with ID) to override theme button defaults
 * without needing !important. Adopts plugin primary color setting.
 */
#auctvibe-bid-form button[type="submit"],
#auctvibe-bid-form input[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    min-width: 160px;
    max-width: 320px;
    margin-top: 4px;
    padding: 12px 28px;
    background: var(--auctvibe-primary);
    color: #fff;
    border: 1px solid var(--auctvibe-primary);
    border-radius: var(--auctvibe-radius-sm);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--auctvibe-transition), border-color var(--auctvibe-transition), transform var(--auctvibe-transition), box-shadow var(--auctvibe-transition);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    appearance: none;
}

#auctvibe-bid-form button[type="submit"]:hover,
#auctvibe-bid-form input[type="submit"]:hover {
    background: var(--auctvibe-primary-dark);
    border-color: var(--auctvibe-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#auctvibe-bid-form button[type="submit"]:active,
#auctvibe-bid-form input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#auctvibe-bid-form button[type="submit"]:focus-visible,
#auctvibe-bid-form input[type="submit"]:focus-visible {
    outline: 3px solid var(--auctvibe-primary);
    outline-offset: 2px;
}

#auctvibe-bid-form button[type="submit"]:disabled,
#auctvibe-bid-form input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Bid response message */
#auctvibe-bid-message {
    margin-top: 12px;
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.5;
}

.auctvibe-success-msg { color: var(--auctvibe-success-text); }
.auctvibe-error-msg { color: var(--auctvibe-danger-text); }


/* ==========================================================================
   7. Buy It Now / Pay Now Buttons (winner)
   ========================================================================== */

.auctvibe-bidding-area .auctvibe-buy-now-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--auctvibe-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#auctvibe-buy-now-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pay Now / "You Won" button */
.auctvibe-bidding-area a.button.alt.auctvibe-pay-now-btn,
a.button.alt.auctvibe-pay-now-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.05em;
    padding: 14px 28px;
    background: var(--auctvibe-success);
    color: #fff;
    border: 1px solid var(--auctvibe-success);
    border-radius: var(--auctvibe-radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--auctvibe-transition);
}

.auctvibe-bidding-area a.button.alt.auctvibe-pay-now-btn:hover,
a.button.alt.auctvibe-pay-now-btn:hover {
    background: #047857;
    border-color: #047857;
    color: #fff;
}

/* Login prompt */
.auctvibe-bidding-area .auctvibe-login-prompt {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--auctvibe-bg);
    border: 1px dashed var(--auctvibe-border);
    border-radius: var(--auctvibe-radius-sm);
    color: var(--auctvibe-text-muted);
    font-style: italic;
    font-size: 0.95em;
    text-align: center;
}

.auctvibe-bidding-area .auctvibe-login-prompt a {
    color: var(--auctvibe-primary);
    text-decoration: underline;
    font-weight: 600;
}


/* ==========================================================================
   8. Bid History Tab (single product)
   ========================================================================== */

.auctvibe-bids-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.auctvibe-bids-table th {
    background: var(--auctvibe-bg);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--auctvibe-text-muted);
    border-bottom: 2px solid var(--auctvibe-border);
}

.auctvibe-bids-table td {
    padding: 12px;
    border-bottom: 1px solid var(--auctvibe-border);
    vertical-align: middle;
}

.auctvibe-bids-table tr:last-child td {
    border-bottom: none;
}


/* ==========================================================================
   9. My Bids Account Page
   ========================================================================== */

.auctvibe-my-bids-table,
table.my_account_bids {
    width: 100%;
    border-collapse: collapse;
}

.auctvibe-my-bids-table th,
table.my_account_bids th {
    background: var(--auctvibe-bg);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--auctvibe-text-muted);
    border-bottom: 2px solid var(--auctvibe-border);
}

.auctvibe-my-bids-table td,
table.my_account_bids td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--auctvibe-border);
    vertical-align: middle;
}

.auctvibe-my-bids-table tr:last-child td,
table.my_account_bids tr:last-child td {
    border-bottom: none;
}


/* ==========================================================================
   10. Status Badges (My Bids and elsewhere)
   ========================================================================== */

.auctvibe-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.auctvibe-status-badge--winning {
    background: var(--auctvibe-success-bg);
    color: var(--auctvibe-success-text);
}

.auctvibe-status-badge--outbid {
    background: #fef3c7;
    color: #92400e;
}

.auctvibe-status-badge--won {
    background: var(--auctvibe-success-bg);
    color: var(--auctvibe-success-text);
}

.auctvibe-status-badge--lost {
    background: var(--auctvibe-danger-bg);
    color: var(--auctvibe-danger-text);
}

.auctvibe-status-badge--processing {
    background: #e0e7ff;
    color: #3730a3;
}

.auctvibe-status-badge--reserve-not-met {
    background: var(--auctvibe-danger-bg);
    color: var(--auctvibe-danger-text);
    border-left: 4px solid var(--auctvibe-danger-border);
}


/* ==========================================================================
   11. Bid Confirmation Modal
   ========================================================================== */

.auctvibe-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.auctvibe-modal-content {
    background: var(--auctvibe-card-bg);
    padding: 30px;
    border-radius: var(--auctvibe-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: auctvibe-modal-slide 0.25s ease-out;
}

@keyframes auctvibe-modal-slide {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.auctvibe-modal-content h3 {
    margin: 0 0 12px;
    color: var(--auctvibe-text);
    font-size: 1.4em;
}

.auctvibe-modal-content p {
    color: var(--auctvibe-text-muted);
    margin: 0 0 20px;
    font-size: 1.05em;
    line-height: 1.5;
}

.auctvibe-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.auctvibe-modal-actions button {
    padding: 10px 20px;
    border-radius: var(--auctvibe-radius-sm);
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background var(--auctvibe-transition);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}

#auctvibe-confirm-bid-btn {
    background: var(--auctvibe-primary);
    color: #fff;
}

#auctvibe-confirm-bid-btn:hover {
    background: var(--auctvibe-primary-dark);
}

#auctvibe-cancel-bid-btn {
    background: #f1f5f9;
    color: #475569;
}

#auctvibe-cancel-bid-btn:hover {
    background: #e2e8f0;
}


/* ==========================================================================
   12. Responsive Breakpoints
   ========================================================================== */

@media (max-width: 600px) {
    .auctvibe-bidding-area {
        padding: 16px;
    }

    #auctvibe-bid-form input[type="number"] {
        max-width: 100%;
    }

    #auctvibe-bid-form button[type="submit"],
    #auctvibe-bid-form input[type="submit"] {
        width: 100%;
        max-width: 100%;
    }

    .auctvibe-bidding-area .auctvibe-timer {
        font-size: 1em;
    }
}


/* ==========================================================================
   13. Elementor Widgets
   ========================================================================== */

.auctvibe-ending-item:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.auctvibe-ending-item:not(.auctvibe-card):hover {
    background: #f9fafb;
}

.auctvibe-auction-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .auctvibe-auction-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .auctvibe-auction-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ==========================================================================
   14. Single Product Badge — Theme-Agnostic Positioning
   On single-product pages the MAIN product badge HTML is rendered before
   the gallery (via woocommerce_before_single_product_summary). The JS init
   relocates it into the gallery container. While JS loads, hide it to
   prevent FOUC.

   Note: Related product badges inside <li> elements are not affected;
   they are rendered inline by the block filter and need no JS repositioning.
   ========================================================================== */

.single-product > .auctvibe-product-badge,
.single-product .product > .auctvibe-product-badge,
.single-product .wp-block-group.product > .auctvibe-product-badge {
    visibility: hidden;
}

.single-product > .auctvibe-product-badge[data-auctvibe-positioned],
.single-product .product > .auctvibe-product-badge[data-auctvibe-positioned],
.single-product .wp-block-group.product > .auctvibe-product-badge[data-auctvibe-positioned] {
    visibility: visible;
}

/* If JS is disabled, show the badge at the top of the product wrapper as a fallback. */
.no-js .single-product > .auctvibe-product-badge,
.no-js .single-product .product > .auctvibe-product-badge {
    visibility: visible;
}

/* Listing-card live countdown (shop, archive, shortcode/grid). */
.auctvibe-loop-timer {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-top: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 0.95rem;
	line-height: 1.4;
	font-weight: 500;
	max-width: 100%;
}
.auctvibe-loop-timer__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--auctvibe-danger, #dc2626);
	white-space: nowrap;
}
.auctvibe-loop-timer--ended .auctvibe-loop-timer__value {
	color: var(--auctvibe-danger, #dc2626);
}
@media ( max-width: 782px ) {
	.auctvibe-loop-timer {
		font-size: 0.92rem;
	}
}
@media ( max-width: 480px ) {
	.auctvibe-loop-timer {
		display: flex;
		width: fit-content;
		font-size: 0.9rem;
		padding: 5px 10px;
	}
}

/* Winner call-to-action button (Pay Now / View Order / Add to Cart & Pay). */
.auctvibe-pay-now-btn {
	display: block;
	width: 100%;
	margin-top: 15px;
	padding: 12px;
	text-align: center;
	font-size: 1.1em;
}

/* Dismissible bid notice (shown when AJAX bidding is off). */
/* Some themes reserve a second, separate notices container in the main content
   area in addition to the one WooCommerce actually prints into (Storefront and
   several others do this). When empty it still takes up layout space, showing
   as a blank gap above the bidding area right after a non-AJAX bid. Hiding it
   only when empty is safe — it never hides a real notice. */
.woocommerce-notices-wrapper:empty {
	display: none;
}
.woocommerce-message {
	position: relative;
	padding-right: 48px;
	word-break: break-word;
}
.auctvibe-notice-dismiss {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 4px;
	font-size: 22px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
}
.auctvibe-notice-dismiss:hover,
.auctvibe-notice-dismiss:focus {
	opacity: 1;
	background: rgba(0, 0, 0, 0.08);
}
@media (max-width: 480px) {
	.woocommerce-message {
		font-size: 0.95em;
	}
}