/* rootwww/aukcje/details.css */

/* header nav */
.header-nav{display:flex;align-items:center;gap:8px;margin-left:auto;}
.header-nav-link{
  font-size:13px;font-weight:800;color:#1e3a5f;text-decoration:none;
  padding:7px 14px;border-radius:10px;
  border:1px solid rgba(30,58,95,.18);background:rgba(240,244,250,.9);
  transition:background .15s,border-color .15s;
}
.header-nav-link:hover{background:rgba(230,238,250,1);border-color:rgba(30,58,95,.32);}

/* layout */
.details-wrap{max-width:1400px;margin:0 auto;padding:18px 14px 40px;}
.details-top{display:flex;align-items:center;gap:10px;margin: 10px 0 14px;}
.back-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:14px;color:var(--text,#0b1220);
  padding:9px 16px 9px 12px;border-radius:12px;
  border:1px solid var(--line,rgba(2,6,23,.10));
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 3px rgba(2,6,23,.06);
  transition:background .15s,box-shadow .15s;
}
.back-btn:hover{background:#fff;box-shadow:0 2px 8px rgba(2,6,23,.10);color:var(--brand,#2563eb);}
.back-btn svg{flex-shrink:0;}

.details-grid{display:grid;grid-template-columns: minmax(320px, 560px) 1fr; gap:16px;}
@media (max-width:980px){ .details-grid{grid-template-columns:1fr;} }

/* panels */
.panel{background:rgba(255,255,255,.92);border:1px solid rgba(2,6,23,.08);border-radius:18px;box-shadow: var(--shadow2);overflow:hidden;}
.panel-h{padding:14px 14px 12px;border-bottom:1px solid rgba(2,6,23,.05);}
.panel-b{padding:14px;}
.panel-title{font-weight:1200;color:#0b1220;}
.panel-sub{color:var(--muted);font-size:12px;margin-top:4px;font-weight:900;}
.details-empty{color:var(--muted);font-weight:1100;}

/* title */
.title{font-size:20px;font-weight:1300;color:#0b1220;line-height:1.15;margin:12px 0 0;}
.subtitle{color:var(--muted);font-size:13px;margin-top:6px;font-weight:900;}

/* hero */
.hero-photo{position:relative;background:#f1f5f9;border-radius:16px;overflow:hidden;}
.hero-img{width:100%;height:360px;object-fit:cover;display:block;cursor:pointer;}
@media (max-width:520px){ .hero-img{height:260px;} }

/* watermark — wyłącz przez: --watermark-opacity: 0 */
:root { --watermark-opacity: 0.55; }
.hero-photo::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 140px;
  height: 28px;
  background: url('/photos/logo-watermark.svg') no-repeat center/contain;
  opacity: var(--watermark-opacity);
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(0 0 1px rgba(255,255,255,.4));
  z-index: 3;
}

.lot-pill{
  position:absolute;left:14px;bottom:14px;
  background:rgba(15,23,42,.92);
  color:#e5e7eb;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:1200;
  box-shadow:0 10px 20px rgba(0,0,0,.20);
}

/* hero ribbon */
#ribbon-tooltip{
  position:fixed;background:rgba(15,15,15,.92);color:#fff;
  font-size:11px;font-weight:400;line-height:1.4;
  padding:6px 10px;border-radius:6px;white-space:normal;
  width:200px;pointer-events:none;z-index:9999;
  box-shadow:0 2px 8px rgba(0,0,0,.3);display:none;
}
.hero-ribbon{
  position:absolute;right:0;top:16px;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px 8px 14px;
  font-size:13px;font-weight:700;
  border-radius:8px 0 0 8px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  letter-spacing:.01em;
  pointer-events:auto;
  z-index:2;
}
.ribbon-ico{font-size:15px;line-height:1;}
.ribbon-green{
  background:linear-gradient(90deg,#065f46,#047857);color:#fff;
}
.ribbon-yellow{
  background:linear-gradient(135deg,#eab308,#ca8a04);color:#422006;
}
.ribbon-red{
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
}
@media(max-width:520px){
  .hero-ribbon{font-size:11px;padding:6px 12px 6px 10px;top:10px;}
  .ribbon-ico{font-size:13px;}
}

/* thumbs under hero */
.thumb-strip{margin-top:10px;display:flex;gap:8px;overflow:auto;padding-bottom:6px;}
.thumb-strip::-webkit-scrollbar{height:10px;}
.thumb-strip::-webkit-scrollbar-thumb{background:rgba(2,6,23,.14);border-radius:999px;border:2px solid rgba(255,255,255,.9);}

.thumb{
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  border-radius:14px;
  padding:0;
  cursor:pointer;
  flex:0 0 auto;
  width:92px;
  height:70px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(2,6,23,.06);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb.active{outline: 4px solid rgba(37,99,235,.20); border-color: rgba(37,99,235,.35);}

.thumb-skel{
  width:92px;height:70px;border-radius:14px;
  background: linear-gradient(90deg, rgba(2,6,23,.06) 25%, rgba(2,6,23,.12) 37%, rgba(2,6,23,.06) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border:1px solid rgba(2,6,23,.10);
  flex:0 0 auto;
}
.thumb-empty{color:var(--muted);font-size:12px;font-weight:1000;padding:6px 0;}
.thumb-error{color:#9a3412;font-size:12px;font-weight:1200;padding:6px 0;}

/* actions */
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.hint{color:var(--muted);font-size:12px;margin-top:10px;font-weight:900;}

.detail-idline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;}
.id-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;
  font-size:11px;font-weight:900;letter-spacing:.04em;
  height:28px;padding:0 12px;
  border:1px solid rgba(2,6,23,.11);border-radius:999px;
  background:rgba(248,250,252,.95);
  color:#334155;
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
  user-select:all;
}
.id-pill:hover{background:#fff;border-color:rgba(37,99,235,.35);box-shadow:0 2px 8px rgba(37,99,235,.10);}
.id-pill--lot{
  background:rgba(236,253,245,.9);
  border-color:rgba(22,163,74,.28);
  color:#166534;
}
.id-pill--lot:hover{background:rgba(220,252,231,.95);border-color:rgba(22,163,74,.50);}
.id-pill--vin{
  background:rgba(30,41,59,.06);
  border-color:rgba(30,41,59,.16);
  color:#1e293b;
  font-weight:900;
  letter-spacing:.06em;
}
.id-pill--vin:hover{background:rgba(30,41,59,.11);border-color:rgba(30,41,59,.30);}
.id-pill.is-copied{background:#ecfdf5;border-color:#86efac;color:#065f46;}

/* key-values */
.kv{display:grid;grid-template-columns: 160px 1fr;gap:10px;row-gap:10px;font-size:13px;}
.kv .k{color:var(--muted);font-weight:1000;}
.kv .v{color:#0b1220;font-weight:1100;word-break:break-word;}
@media(max-width:420px){.kv{grid-template-columns:120px 1fr;font-size:12px;}}

/* separators */
.sep{border:0;border-top:1px solid rgba(2,6,23,.06);margin:14px 0;}

/* contact */
.contact-title{font-weight:1200;color:#0b1220;margin-bottom:10px;}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
@media (max-width:700px){ .contact-form .form-row{grid-template-columns:1fr;} }
.form-block{margin-top:10px;}
.inp,.ta{
  width:100%;
  border:1px solid rgba(2,6,23,.10);
  border-radius:14px;
  padding:11px 12px;
  background: rgba(248,250,252,.9);
  font-size:14px;
  outline:none;
}
.ta{min-height:120px;resize:vertical;}
.notice{display:none;margin-top:10px;padding:10px 12px;border-radius:14px;font-weight:1100;font-size:13px;}
.notice.ok{background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46;}
.notice.err{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;}

/* gallery internals */
body.modal-open{overflow:hidden;}

#gallery-modal{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 92vw);
  height: min(640px, 85vh);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0d1117;
  color: #f1f5f9;
  padding: 14px 14px 10px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  flex-direction: column;
}

.gallery-topbar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  margin-top: 0;
  flex-shrink: 0;
}

.gallery-title{
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9;
  margin-right: auto;
}

.gallery-counter{
  min-width: 58px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.gallery-video-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(99,179,237,.4);
  background: rgba(99,179,237,.12);
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.gallery-video-btn:hover{
  background: rgba(99,179,237,.22);
}

.gallery-close-btn{
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.gallery-close-btn:hover{
  background: rgba(255,255,255,.14);
  color: #f1f5f9;
}

.gallery-watermark {
  position: absolute;
  display: none;
  width: 130px;
  height: 26px;
  background: url('/photos/logo-watermark.svg') no-repeat center/contain;
  opacity: var(--watermark-opacity);
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(0 0 1px rgba(255,255,255,.4));
  z-index: 4;
}

.gallery-viewer{
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gallery-img-wrap{
  flex: 1;
  min-height: 0;
  position: relative;
  background: #060a0f;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-big{
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  cursor: pointer;
  display: block;
}

.gallery-nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #f1f5f9;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s;
  line-height: 1;
  padding-bottom: 2px;
}

.gallery-nav-btn:hover{
  background: rgba(0,0,0,.8);
}

.gallery-nav-btn--prev{ left: 8px; }
.gallery-nav-btn--next{ right: 8px; }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}

.gallery-thumb{
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  border-radius:12px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(2,6,23,.11);
}

.gallery-thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}

.gallery-thumbs{
  display:flex;
  justify-content:center;
  gap:6px;
  overflow-x:auto;
  padding:4px 0 2px;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
  flex-shrink: 0;
}
.gallery-thumbs::-webkit-scrollbar{ height:4px; }
.gallery-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:99px; }
.gallery-thumbs .gallery-thumb{
  flex:0 0 auto;
  width:72px;
  border:2px solid rgba(255,255,255,.12);
  border-radius:8px;
  background: rgba(255,255,255,.06);
  transition:border-color .15s;
  overflow: hidden;
}
.gallery-thumbs .gallery-thumb.active{
  border-color: rgba(99,179,237,.7);
}
.gallery-thumbs .gallery-thumb img{
  width:72px;
  height:50px;
  object-fit:cover;
  display:block;
}

.gallery-empty{
  padding:12px;
  color:#94a3b8;
  font-weight:700;
}

@media (max-width:760px){
  #gallery-modal{
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    border-radius:16px;
    padding:9px;
  }
  #video-modal{
    width: calc(100vw - 12px);
    height: auto;
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }
  #video-player{
    border-radius: 0 0 16px 16px;
  }
  .gallery-title{font-size:14px;}
  .gallery-nav-btn{width:36px;height:36px;font-size:22px;}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
  .gallery-thumb img{height:118px;}
  .gallery-thumbs .gallery-thumb{width:58px;}
  .gallery-thumbs .gallery-thumb img{width:58px;height:40px;}
}


/* quick assess */
.assess{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.08);
  background:rgba(248,250,252,.7);
}
.assess-title{font-weight:700;font-size:13px;color:var(--text,#0b1220);margin-bottom:6px;}
.assess-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.assess-item{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;line-height:1.6;}
.assess-ico{width:16px;text-align:center;font-weight:800;font-size:13px;}
.assess-ok{color:#065f46;}
.assess-ok .assess-ico{color:#16a34a;}
.assess-bad{color:#991b1b;}
.assess-bad .assess-ico{color:#dc2626;}
.assess-neutral{color:#64748b;}
.assess-neutral .assess-ico{color:#94a3b8;}

/* Theme refresh */
.back-btn,
.panel-title,
.contact-title,
.title,
.kv .v,
.assess-title {
  color: var(--text);
}

.subtitle,
.details-empty,
.panel-sub,
.hint,
.kv .k {
  color: var(--muted);
}

.back-btn:hover {
  color: var(--brand);
}

.panel {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.panel-h {
  border-bottom-color: var(--line-soft);
}

.hero-photo {
  background: var(--surface-muted);
}

.lot-pill {
  background: rgba(23, 38, 47, 0.88);
  color: #f4f8f8;
}

.thumb {
  border-color: var(--line-soft);
  background: #ffffff;
}

.thumb.active {
  outline-color: rgba(15, 118, 110, 0.2);
  border-color: rgba(15, 118, 110, 0.38);
}

.thumb-strip::-webkit-scrollbar-thumb {
  background: rgba(72, 93, 101, 0.35);
  border-color: rgba(255, 255, 255, 0.92);
}

.thumb-skel {
  border-color: var(--line-soft);
  background: linear-gradient(
    90deg,
    rgba(23, 38, 47, 0.06) 25%,
    rgba(23, 38, 47, 0.12) 37%,
    rgba(23, 38, 47, 0.06) 63%
  );
}

.thumb-error {
  color: var(--warning);
}

.sep {
  border-top-color: var(--line-soft);
}

.inp,
.ta {
  border-color: var(--line);
  background: var(--surface-subtle);
  color: var(--text);
}

.notice.ok {
  background: rgba(11, 138, 102, 0.11);
  border-color: rgba(11, 138, 102, 0.3);
  color: #0b6f53;
}

.notice.err {
  background: rgba(181, 94, 0, 0.11);
  border-color: rgba(181, 94, 0, 0.3);
  color: #9a5000;
}


.assess {
  border-color: var(--line-soft);
}

/* Theme v3 alignment */
.thumb.active {
  outline-color: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.38);
}

/* VIN history */
.vin-history-wrap{margin-top:18px;padding:14px;border:1px solid rgba(2,6,23,.08);border-radius:14px;background:rgba(248,250,252,.6);overflow-x:auto;}
.vin-history-wrap .panel-title{margin-bottom:4px;}
.vin-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px;}
.vin-table th{text-align:left;padding:6px 8px;border-bottom:2px solid #e2e8f0;color:#64748b;font-weight:600;font-size:12px;}
.vin-table td{padding:6px 8px;border-bottom:1px solid #f1f5f9;}
.vin-table a{color:#2563eb;text-decoration:none;}
.vin-table a:hover{text-decoration:underline;}
.vin-current{background:#f0fdf4;font-weight:500;}
.vin-label{display:inline-block;font-size:11px;padding:2px 7px;border-radius:999px;font-weight:600;white-space:nowrap;}
.vin-label-current{font-size:11px;color:#065f46;background:#dcfce7;padding:2px 7px;border-radius:999px;font-weight:600;white-space:nowrap;}
.vin-label-live{color:#065f46;background:#dcfce7;}
.vin-label-pending{color:#92400e;background:#fef3c7;}
.vin-label-relisted{color:#1d4ed8;background:#dbeafe;}
.vin-label-bid{color:#374151;background:#e5e7eb;}
.vin-label-empty{color:#6b7280;background:#f3f4f6;}
@media(max-width:640px){.vin-table{font-size:11px;}.vin-table th,.vin-table td{padding:4px 5px;}.vin-label,.vin-label-current{font-size:10px;padding:1px 5px;}}