/* swapshop.css */

/* Sticky Market/My tab bar */
.swapshop-tabs{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(238,221,185,0.98);
    backdrop-filter:blur(6px);
    padding:10px;
    border-bottom:1px solid rgba(0,0,0,0.12);
    display:flex;
    gap:8px;
    justify-content:center;
}

.swapshop-tab{
    flex:1;
    max-width:220px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.15);
    background:#fff;
    font-weight:800;
    font-size:0.85rem;
    cursor:pointer;
}
.swapshop-tab.active{
    background:#111;
    color:#fff;
    border-color:#111;
}

/* Swapshop-only helpers */
.swapshop-wrap{ margin-top:10px; }
.swapshop-title{ text-align:center; margin:12px 0; font-family:'CavemanRegular',system-ui; }
.swapshop-sub{ text-align:center; font-size:0.8rem; margin:0 10px 14px; }
.swapshop-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }

.panel{ padding:0 12px 12px 12px; }
.link-row{ text-align:center; margin-top:10px; font-size:0.85rem; }
.list{ margin-top:12px; }
.list-item{
    padding:10px 10px;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:10px;
    margin-bottom:8px;
    background:#fff;
}

.divider{ height:1px; background:rgba(0,0,0,0.12); margin:10px 0; }

/* Pills */
.pill{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.25);
    font-size:0.7rem;
    margin-left:6px;
}

.pill-online{
    background:var(--ug-green);
    border-color:var(--ug-green-dark);
    color:var(--ug-black);
    font-weight:800;
}
.pill-offline{
    background:#f3f4f6;
    border-color:rgba(0,0,0,0.25);
    color:#111827;
    font-weight:700;
}

.swapshop-online{
    border:2px solid var(--ug-green-dark);
    box-shadow:0 8px 18px rgba(0,0,0,0.22);
}

/* Seller link button */
.seller-link{
    background:none;
    border:none;
    padding:0;
    font:inherit;
    cursor:pointer;
    text-decoration:underline;
    font-weight:900;
    color:var(--ug-blue);
}

/* Watch button state */
.btn.secondary.watching{ background:var(--ug-blue); }

/* Live listing card layout */
.live-card{
    display:flex;
    gap:12px;
    align-items:stretch;
}

.live-img{
    width:86px;
    height:86px;
    border-radius:8px;
    background:#788793; /* your placeholder background */
    position:relative;
    overflow:hidden;
    flex:0 0 86px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.live-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.live-noimg{
    color:#fff;
    font-weight:700;
    font-size:0.65rem;
    text-align:center;
    padding:8px;
    line-height:1.1;
}

.live-level{
    position:absolute;
    left:8px;
    bottom:6px;
    font-weight:900;
    font-size:1.0rem;
    color:#ffd54a;
    text-shadow:0 2px 0 rgba(0,0,0,0.35);
}

.live-main{
    flex:1 1 auto;
    min-width:0;
}

.live-title{
    font-weight:900;
    font-size:1.50rem;
    line-height:1.05;
}

.live-subrow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    flex-wrap:wrap;
}

.live-right{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
    min-width:108px;
}

.live-date-row{
    font-size:0.75rem;
    font-weight:800;
    opacity:0.9;
}

.loader-overlay{
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
}

.spinner{
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loader-text{
    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight: 600;
}

@keyframes spin{
    to { transform: rotate(360deg); }
}

/* hidden state */
.loader-overlay.is-hidden{
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

/* Swapshop responsive */
@media (max-width:600px){
    .live-img{ width:66px; height:66px; flex:0 0 66px; }
    .live-title, .live-level{ font-size:0.8rem; line-height:1.20; }
    .live-subrow{ font-size:0.6rem; }
    .live-date-row{ font-size:0.5rem; }
    .pill{ font-size:0.6rem; margin-left:0px; }
    .list-item{ padding:8px 8px; }
    .live-right{ min-width:28px; }
    .panel{ padding:0 12px 12px 12px; }
}