/* ============ BI Auctions – arkusz komponentu (shadow DOM) ============ */

/* Reset & bazowe */
:host{display:block;font-family:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;font-optical-sizing:auto;margin:0;padding:0}
:host, :host *, :host *::before, :host *::after{box-sizing:border-box}
.wrap{max-width:1100px;margin:0;padding:0}
.title{font:700 28px/1.2 'Montserrat',system-ui;color:#0b1d3c;margin:10px 0 14px}
.list{display:flex;flex-direction:column;gap:16px}

/* Karta */
.auction-card{
  display:flex;gap:18px;align-items:flex-start;position:relative;
  background:#fff;border:1px solid #ecedf1;border-radius:14px;
  box-shadow:0 4px 18px rgba(60,80,120,.06);padding:14px 16px;
  transition:box-shadow .18s,border-color .18s,filter .18s,background .18s;
}
.auction-card:hover{box-shadow:0 6px 20px rgba(60,80,120,.08)}

/* Stany */
.auction-card.state-live{border-color:#bfead0;animation:liveGlow 1.8s ease-in-out infinite}
@keyframes liveGlow{0%{box-shadow:0 0 0 0 rgba(27,181,90,.18)}70%{box-shadow:0 0 0 8px rgba(27,181,90,0)}100%{box-shadow:0 0 0 0 rgba(27,181,90,0)}}
.auction-card.state-scheduled{border-color:#ffd1bd;animation:scheduledGlow 1.8s ease-in-out infinite}
@keyframes scheduledGlow{0%{box-shadow:0 0 0 0 rgba(255,122,60,.18)}70%{box-shadow:0 0 0 10px rgba(255,122,60,0)}100%{box-shadow:0 0 0 0 rgba(255,122,60,0)}}
.auction-card.state-ended{background:#f6f7fa;border-color:#e3e5ea;filter:grayscale(.25) opacity(.95)}
.auction-card.state-ended .photo img{filter:grayscale(.35) brightness(.98)}
.auction-card.state-ended .vin{color:#616773}

/* Kolumna lewa (foto) */
.left{flex:0 0 320px;max-width:320px}
.photo{position:relative;width:100%;height:200px;border-radius:14px;overflow:hidden;background:#f3f6fb;border:1px solid #e6e9f1}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.ribbon{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;background:#2f6af2;color:#fff;padding:6px 12px;border-radius:10px;font-weight:700;font-size:13px;box-shadow:0 2px 10px #2f6af233;white-space:nowrap;letter-spacing:.02em}
.plchip{display:inline-flex;align-items:center;gap:6px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);line-height:1}
.corner-tag{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.35);color:#fff;padding:6px 10px;border-radius:10px;font-weight:700;font-size:12px;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(2px);letter-spacing:.02em}
.vin{margin:6px 0 0;font-family:"Courier New",monospace;font-size:13px;font-weight:500;letter-spacing:.12em;color:#2d3240;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;text-align:center}

/* Kolumna środkowa */
.mid{flex:1 1 auto;min-width:0}
.head{display:flex;align-items:flex-end;gap:10px;justify-content:space-between;margin-bottom:6px}
.ttl{font:600 20px/1.3 'Montserrat',system-ui;padding-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72%}
.meta{color:#a0a7b7;font-weight:500;font-size:14px;margin:2px 0}
.mile{font-size:.93em;margin-bottom:6px;white-space:nowrap}
.mile .label{font-weight:500;color:#23272f;margin-right:6px}
.mile .val{font-weight:400;color:#23272f}

.info-row{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 14px}
.info-box{flex:1 1 0;min-width:240px;max-width:420px;background:#f7f9fb;border:1px solid #e4e7ef;border-radius:10px;padding:8px 14px}
.info-box .label{font-size:12px;color:#7c8393;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.info-box .value{font-size:1.10em;font-weight:600;color:#212228;margin-top:2px}
.info-box.timer .value{font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.btn{
  display:inline-block;background:#fff;color:#2274a5;border:2px solid #b6d3ee;border-radius:11px;
  padding:11px 18px;font-weight:700;text-decoration:none;transition:all .14s;text-transform:lowercase;
  text-shadow:0 1px 3px #e4eefa,0 .5px .5px #b6d3ee33;
}
.btn:hover{background:#e7f1ff;color:#1b4f91;border-color:#7cb0e4}

/* Kolumna prawa (badge + nr aukcji) */
.right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:200px;padding-top:18px;margin-right:18px;padding-right:80px}
.right .badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0}
.lotid{color:#1b4f91;background:#eef4ff;border:1px solid #d8e6ff;padding:2px 8px;border-radius:10px;font-weight:600}

/* Chipy statusów (w tym zielony „NA ŻYWO” z kropką) */
.listings-status2{
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 12px;height:28px;border-radius:999px;font-weight:600;font-size:12.5px;
  border:1px solid #e3e7f2;background:#f3f6fb;color:#3b4a67;white-space:nowrap
}
.listings-status2.auction.live{background:#e5f8ea;border-color:#c4edd2;color:#169954;position:relative;padding-left:28px}
.listings-status2.auction.live::before{
  content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:#16a34a;
  box-shadow:0 0 0 0 rgba(22,163,74,.45);animation:pulseDot 1.6s ease-in-out infinite
}
.listings-status2.auction.lastcall{background:#fff1f1;border-color:#f1c5c5;color:#b11c2d}
.listings-status2.auction.scheduled{background:#fff6eb;border-color:#ffd9bf;color:#a64b24}
.listings-status2.auction.ended{background:#f1f3f8;border-color:#dcdfe7;color:#444b55}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* Header + zwijanie */
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px;padding:0 2px}
.toggle-btn{
  appearance:none;border:1.7px solid #b6d3ee;background:transparent;color:#2274a5;border-radius:10px;
  padding:8px 12px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background .14s,color .14s,border-color .14s,box-shadow .14s;
}
.toggle-btn:hover{background:#e7f1ff;color:#1b4f91;border-color:#7cb0e4}
.toggle-btn:focus{outline:none;box-shadow:0 0 0 2px #cfe0ff}
.mini-row{display:none;gap:10px;flex-wrap:wrap}
.wrap.collapsed #list{display:none !important}
.wrap.collapsed .mini-row{display:flex !important}

/* Mini-karta w wierszu zwiniętym */
.mini-card{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e3e7f2;border-radius:999px;
  background:#f7f9fd;color:#1b2a44;text-decoration:none;font-weight:600
}
.mini-card.live .dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.45);animation:pulseDot 1.6s ease-in-out infinite}
.mini-card .timer{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums}
/* ===== MINI KARTY – kolory jak statusy ===== */
.wrap.collapsed .mini-card{
  border-width: 1px;
  border-style: solid;
  text-decoration: none;
}

/* NA ŻYWO (zielony) */
.wrap.collapsed .mini-card.live{
  background: #e5f8ea;
  border-color: #c4edd2;
  color: #169954;
}
.wrap.collapsed .mini-card.live:hover{
  filter: brightness(0.98);
}

/* NADCHODZI (pomarańczowy) */
.wrap.collapsed .mini-card.scheduled{
  background: #fff6eb;
  border-color: #ffd9bf;
  color: #a64b24;
}
.wrap.collapsed .mini-card.scheduled:hover{
  filter: brightness(0.985);
}

/* ZAKOŃCZONA (szary) */
.wrap.collapsed .mini-card.ended{
  background: #f1f3f8;
  border-color: #dcdfe7;
  color: #444b55;
}
.wrap.collapsed .mini-card.ended:hover{
  filter: brightness(0.985);
}

/* delikatny kolor czasu (niezależnie od statusu) */
.wrap.collapsed .mini-card .timer{
  color: #273248;
  opacity: .85;
}


/* Responsywność */
@media (min-width:801px){ .info-row{flex-wrap:nowrap} .info-box{min-width:0;flex:1 1 50%} }
@media (max-width:900px){ .info-row{justify-content:center} }
@media (max-width:800px){
  .auction-card{flex-direction:column}
  .left{flex:1 1 100% !important;width:100% !important;max-width:100% !important}
  .photo{width:100%;height:66vw;min-height:220px;max-height:340px}
  .photo img{width:100%;height:100%;object-fit:cover}
  .ttl{max-width:100%}
  .mid{width:100%}
  .info-row{flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%}
  .info-box{width:100%;max-width:100%;text-align:center}
  .btn{display:block;width:100%;margin:18px 0 0;text-align:center}
  .right{align-items:flex-start;min-width:0;padding:8px 5vw 0;margin-right:0;padding-right:0}
}

/* ===== Tryb INLINE – dopasowany do kafli ogłoszeń ===== */
:host([inline]){display:block;margin:0 !important;padding:0 !important}
:host([inline]) .wrap{max-width:unset;margin:0;padding:0}
:host([inline]) .list{margin:0;padding:0;gap:0}
:host([inline]) .auction-card{
  width:100%;max-width:950px;margin:10px;border-radius:16px;border:1px solid #ecedf1;
  box-shadow:0 4px 20px rgba(60,80,120,.05);padding:10px;gap:20px
}
:host([inline]) .list > .auction-card:first-child{margin-top:0}
:host([inline]) .list > .auction-card:last-child{margin-bottom:0}
:host([inline]) .left{flex:0 0 300px;max-width:300px;margin-top:20px;margin-left:20px}
:host([inline]) .mid{flex:0 0 350px;max-width:350px;margin-top:35px}
:host([inline]) .photo{height:225px;background:transparent;border:none}
:host([inline]) .photo img{border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,.10)}
:host([inline]) .vin{margin:4px 0;font-family:"Courier New",monospace;font-size:1.2em;letter-spacing:.10em;text-align:center;color:#2d3240}
:host([inline]) .info-row{gap:10px;margin:10px 0}
:host([inline]) .info-box{background:#f7f9fb;border:1px solid #e4e7ef;border-radius:9px;padding:6px 16px}
:host([inline]) .btn{display:block;min-width:345px;max-width:345px;text-align:center;background:transparent;color:#2274a5;border:2px solid #b6d3ee;border-radius:11px;padding:13px 0;margin:18px 0 0}
:host([inline]) .auction-card .lotid{
  position:absolute;right:18px;top:12px;white-space:nowrap;background:#eef4ff;border:1px solid #d8e6ff;border-radius:10px;padding:2px 8px;font-weight:600;z-index:2
}
:host([inline]) .mid .head{display:block}
:host([inline]) .mid .head .ttl{display:block;max-width:100%;padding-right:0}

/* INLINE – mobile */
@media (max-width:800px){
  :host([inline]) .auction-card{flex-direction:column;width:100vw;max-width:100vw;margin:0 0 60px 0;padding:0 0 12px 0;border-radius:15px;box-shadow:0 3px 15px rgba(60,80,120,.09);border:1px solid #eef0f3;border-bottom:4px solid #e5e9f3;gap:0}
  :host([inline]) .left{flex:unset !important;width:100vw !important;max-width:100vw !important;margin:0 !important;padding:0 !important}
  :host([inline]) .photo{width:100vw;max-width:100vw;height:66vw;border:none;background:transparent}
  :host([inline]) .photo img{border-radius:0}
  :host([inline]) .vin{margin:0;padding:12px 0 10px;font-size:1.07em;background:#f7faff;border-bottom:1px solid #e4e7ef;letter-spacing:.08em;font-weight:500}
  :host([inline]) .mid{width:100vw;max-width:100vw;padding:24px 5vw 0}
  :host([inline]) .auction-card .lotid{position:absolute;top:10px;right:5vw;margin:0;font-size:1.05em;padding:7px 18px;background:#e7f1ff;color:#1b4f91;border-radius:10px;border:1px solid #b6d3ee;font-weight:600;z-index:2}
  :host([inline]) .info-row{flex-direction:column;gap:8px;margin-top:12px;width:100%;align-items:center}
  :host([inline]) .info-box{width:95vw;max-width:340px;padding:10px 12px;text-align:center;border-radius:9px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center}
  :host([inline]) .btn{min-width:0;width:85vw;max-width:99vw;margin:18px auto 0;display:block;text-align:center}
}

/* Focus ring */
.auction-card:focus-within{outline:0;box-shadow:0 0 0 2px #cfe0ff,0 8px 26px rgba(60,80,120,.12);border-color:#cfe0ff}

/* iOS full-width fix */
@supports (-webkit-touch-callout:none){
  .info-box,.btn{width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important}
}
/* Większy oddech między nr aukcji a chipami */
.right .lotid{ margin-bottom: 6px; }
.right .badges{ margin-top: 4px; }

/* Minimalnie niżej cała kolumna z prawej, żeby nic się nie zlewało */
.auction-card .right{ padding-top: 14px; }
/* --- KOREKTY POZYCJI W KARCIE AUKCJI (web-komponent) --- */

/* więcej miejsca na chipy pod numerem aukcji */
.auction-card > .right{
  padding-top: 28px;            /* było 18px – opuszcza rząd statusów niżej */
}

/* gdyby jakaś reguła nadpisywała, dociśnij margines rzędu badge’y */
.auction-card > .right .badges{
  margin-top: 6px !important;   /* bezpieczny bufor pod "Aukcja nr #..." */
}

/* (opcjonalnie) w trybie inline jeszcze odrobinkę niżej */
:host([inline]) .auction-card > .right{
  padding-top: 32px;
}
/* === PRZYCISK POKAŻ/ZWIŃ AUKCJE === */

/* Desktop – obok tytułu */
@media (min-width: 801px) {
  .auctions-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .auctions-header h2 {
    margin: 0;
    font-size: 20px;
  }

  .auctions-header .toggle-auctions-btn {
    position: static;
    margin-left: 0;
    font-size: 13px;
    padding: 6px 12px;
  }
}

/* === PRZYCISK "POKAŻ/ZWIŃ AUKCJE" – poprawne selektory w shadow DOM === */
/* Desktop: przycisk obok tytułu (po lewej) */
@media (min-width:801px){
  .header-row{
    justify-content: flex-start;  /* zamiast space-between */
    gap: 12px;
  }
  .header-row .title{ margin: 6px 0; }
  .header-row .toggle-btn{
    position: static;
    margin-left: 0;
    font-size: 13px;
    padding: 6px 12px;
    order: 2;                    /* tytuł, potem przycisk */
  }
}

/* Mobile: przycisk po prawej – jak dotychczas */
@media (max-width:800px){
  .header-row{
    justify-content: space-between; /* zostaje prawa strona */
  }
  .header-row .toggle-btn{
    order: 2;
  }
}

/* Zwinięta sekcja – ładny panel z mini-kartami */
.wrap.collapsed #mini{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  background: #f8faff;
  border: 1px solid #e3e7f2;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 6px;
}
.wrap.collapsed .mini-card{
  background:#fff;
  border-color:#dbe3f3;
}
/* --- Szerokość paska mini-row = szerokość kart --- */
/* --- Pasek mini-row wyrównany do lewej, jak kafle --- */
.wrap.collapsed #mini {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  background: #f8faff;
  border: 1px solid #e3e7f2;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 14px 0 0 0;        /* usunięte auto, żeby nie centrowało */
  width: 95%;                /* szerokość jak kafle */
  max-width: 950px;          /* dopasowana do szerokości kart */
  box-sizing: border-box;
}

/* Jeżeli kafle mają dodatkowy margines z lewej (np. 20px), to możesz dodać: */
.content-col .wrap.collapsed #mini {
  margin-left: 20px;         /* dopasuj tę wartość, żeby linia startu była idealna */
}