/* ═══════════════════════════════════════════════════════════════
   PPV Auction – UI (matches auction_redesign.html mockup)
   ═══════════════════════════════════════════════════════════════ */

/* ── Theme tokens (dark) ───────────────────────────────────────── */
.ppva-wrap {
    --color-bg-wrap:        #111113;
    --color-bg-card:        #1c1c1e;
    --color-bg-input:       #242426;
    --color-bg-success:     #0c1d09;
    --color-text-primary:   #f0f0f2;
    --color-text-secondary: #9a9a9e;
    --color-text-tertiary:  #5a5a60;
    --color-border-soft:    rgba(255,255,255,.07);
    --color-border-mid:     rgba(255,255,255,.12);
    --color-border-strong:  rgba(255,255,255,.22);
    --color-accent:         #378ADD;
    --color-accent-hover:   #285fa0;
    --color-red:            #E24B4A;
    --color-green:          #639922;
    --color-green-border:   #97C459;
    --color-gold:           #d4942a;

    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-bg-wrap);
    /* border-radius: 20px; */
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    color: var(--color-text-primary);
    position: relative;
}
.ppva-wrap *, .ppva-wrap *::before, .ppva-wrap *::after { box-sizing: border-box; }

/* ── Notice ────────────────────────────────────────────────────── */
.ppva-notice {
    padding: 14px 18px;
    color: var(--color-text-secondary);
    font-size: 14px;
    text-align: center;
}

/* ── Banner ────────────────────────────────────────────────────── */
.ppva-banner {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center;
}
.ppva-banner--ended {
    background: var(--color-bg-success);
    color: #81c784;
    border: 0.5px solid var(--color-green-border);
}
.ppva-banner--pending {
    background: #1e1800;
    color: #ffd54f;
    border: 0.5px solid #6b5900;
}

/* ── Header ────────────────────────────────────────────────────── */
.ppva-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.25rem;
}
.ppva-header-main { display: flex; flex-direction: column; gap: 6px; }
.ppva-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 20px !important;
    font-weight: 400;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.2;
}

.ppva-description {
    color: var(--color-text-secondary);
    margin-top: 8px;
    font-size: 14px;
    max-width: 70%;
}
.ppva-live-badge {
    font-size: 11px;
    font-weight: 500;
    background: var(--color-red);
    color: #fff;
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: .07em;
    text-transform: uppercase;
    animation: ppva-pulse-badge 2s infinite;
    flex-shrink: 0;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 6;
}
.ppva-live-badge--ended { background: #444; animation: none; }
.ppva-live-badge--soon  { background: #185FA5; animation: none; }
@keyframes ppva-pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* ── 3-column grid ─────────────────────────────────────────────── */
.ppva-grid {
    display: grid;
    grid-template-columns: 290px 1fr 260px;
    gap: 16px;
    align-items: start;
}

/* ── Left: image column ────────────────────────────────────────── */
.ppva-img-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ppva-main-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: #222;
    overflow: hidden;
    border: 0.5px solid var(--color-border-soft);
    position: relative;
}
.ppva-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    font-size: 13px;
}

/* Slides inside main image */
.ppva-slide         { display: none; width: 100%; height: 100%; }
.ppva-slide--active { display: block; }
.ppva-slide img     { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hidden arrows kept for JS compat */
.ppva-arrow--hidden { display: none !important; }

/* Thumbnails */
.ppva-thumbs-wrap { display: flex; align-items: center; gap: 8px; }
.ppva-thumbs { display: block; padding: 4px 0; }
.ppva-thumbs.swiper { overflow: hidden; }
.ppva-thumbs .swiper-wrapper { display: flex; gap: 8px; align-items: center; }
.ppva-thumbs::-webkit-scrollbar { height: 8px; }
.ppva-thumbs { scrollbar-width: thin; }
.ppva-thumbs-btn { background: transparent; border: none; color: var(--color-text-secondary); font-size: 20px; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ppva-thumbs-btn:hover { background: rgba(255,255,255,0.03); color: var(--color-text-primary); }
.ppva-thumb {
    height: 76px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1.5px solid transparent; cursor: pointer; transition: border-color .15s; background: #222; display: flex; align-items: center; justify-content: center;
}
.ppva-thumbs.swiper .ppva-thumb { width: auto; min-width: 0; flex: 0 0 auto; }
.ppva-thumb img        { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppva-thumb:hover      { border-color: var(--color-border-strong); }
.ppva-thumb--active    { border-color: var(--color-accent); }

/* ── Middle: main card ─────────────────────────────────────────── */
.ppva-main-col { display: flex; flex-direction: column; gap: 14px; }

.ppva-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border-soft);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

/* meta row: bid amount + timer */
.ppva-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.ppva-bid-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
}
.ppva-bid-amount {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 34px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1;
}
.ppva-bid-by {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 5px;
}
.ppva-bid-by span { color: var(--color-accent); font-weight: 500; }

.ppva-timer-block { text-align: right; }
.ppva-timer-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
}
.ppva-timer {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 26px;
    font-weight: 500;
    color: var(--color-red);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ppva-timer--warn { animation: ppva-tick 1s infinite; }
@keyframes ppva-tick {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* divider */
.ppva-divider {
    height: 0.5px;
    background: var(--color-border-soft);
    margin: 1rem 0;
}

/* "Bidding as" pill */
.ppva-bidding-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0c1d09;
    color: #81c784;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 100px;
    border: 0.5px solid var(--color-green-border);
    margin-bottom: 14px;
}
.ppva-bidding-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-green);
    animation: ppva-pulse-badge 1.4s infinite;
    flex-shrink: 0;
}

/* Guest fields */
.ppva-form__guest {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ppva-form__guest .ppva-input { flex: 1; min-width: 120px; }

/* Bid input row */
.ppva-bid-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ppva-currency {
    font-family: 'DM Mono', monospace;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.ppva-input {
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border-mid);
    border-radius: 10px !important;
    color: var(--color-text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    padding: 0 12px;
    height: 42px !important;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
.ppva-input--amount {
    font-family: 'DM Mono', monospace;
    font-size: 15px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.ppva-input::placeholder { color: var(--color-text-tertiary); font-family: 'Outfit', sans-serif; font-size: 13px; }
.ppva-input:focus         { border-color: var(--color-accent); }

/* Lock In button */
.ppva-lock-btn {
    height: 42px;
    padding: 0 18px;
    background: #185FA5;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ppva-lock-btn:hover    { background: var(--color-accent-hover); }
.ppva-lock-btn:active   { transform: scale(.97); }
.ppva-lock-btn:disabled { background: #1a3a5a; color: #555; cursor: not-allowed; }

/* Min hint */
.ppva-min-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 7px;
}
.ppva-min-hint strong { color: var(--color-text-secondary); }

/* messages */
.ppva-form__msg {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}
.ppva-form__msg--ok  { background: #0c1d09; color: #81c784; border: 0.5px solid var(--color-green-border); }
.ppva-form__msg--err { background: #2b0d0d; color: #ef9a9a; border: 0.5px solid #7a2020; }

/* ── Right: bid log ────────────────────────────────────────────── */
.ppva-log-col {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border-soft);
    border-radius: 16px;
    overflow: hidden;
}
.ppva-log-header {
    padding: .9rem 1.25rem .7rem;
    border-bottom: 0.5px solid var(--color-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ppva-log-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-tertiary);
}
.ppva-log-count {
    font-size: 11px;
    color: var(--color-text-tertiary);
    background: var(--color-bg-input);
    padding: 2px 8px;
    border-radius: 100px;
}
.ppva-log {
    padding: .4rem 0;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.ppva-log::-webkit-scrollbar       { width: 4px; }
.ppva-log::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* log rows */
.ppva-log__row {
    padding: 9px 1.25rem;
    border-bottom: 0.5px solid var(--color-border-soft);
    transition: background .1s;
}
.ppva-log__row:last-child { border-bottom: none; }
.ppva-log__row:hover      { background: var(--color-bg-input); }
.ppva-log__row--top       { background: rgba(99,153,34,.08); }
.ppva-log__row--new       { animation: ppva-row-flash .8s ease; }
@keyframes ppva-row-flash {
    0%   { background: rgba(55,138,221,.15); }
    100% { background: transparent; }
}

.ppva-log__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}
.ppva-log__user {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    min-width: 0;
}
.ppva-log__user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ppva-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #1d3c5e;
    color: #82b8f0;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ppva-avatar--top { background: #3d2a07; color: var(--color-gold); }
.ppva-log__amount {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-left: 8px;
}
.ppva-log__amount--top { color: var(--color-green); font-size: 14px; }
.ppva-log__time {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--color-text-tertiary);
}
.ppva-log__empty {
    padding: 20px 1.25rem;
    color: var(--color-text-tertiary);
    font-size: 13px;
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .ppva-wrap   { padding: 1rem;}
    .ppva-grid   { grid-template-columns: 1fr; }
    .ppva-header { justify-content: center; text-align: center; flex-direction: column; }
    /* Center header contents and description on mobile */
    .ppva-header-main { align-items: center; }
    /* On mobile place the live badge above the title and center it */
    .ppva-live-badge {
        position: static;
        order: -1;
        margin-bottom: 8px;
        right: auto;
        top: auto;
    }
    .ppva-description { max-width: 100%; text-align: center; }
    .ppva-title  { text-align: center; }
    .ppva-img-col { flex-direction: column; gap: 10px; align-items: center; }
    .ppva-main-img { width: 200px; height: 200px; aspect-ratio: 1 / 1; flex-shrink: 0; margin: 0 auto; }
    .ppva-thumbs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        width: 200px;
        justify-items: center;
    }
    .ppva-thumb { width: 44px; height: 44px; }
    .ppva-bid-amount { font-size: 26px; }
    .ppva-timer      { font-size: 20px; }
    .ppva-log        { max-height: 180px; }
}

/* ── Admin badges (admin pages only) ──────────────────────────── */
.ppva-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.ppva-badge--active  { background: #e8f5e9; color: #2e7d32; }
.ppva-badge--pending { background: #fff8e1; color: #7a5c00; }
.ppva-badge--ended   { background: #f5f5f5; color: #888; }