/* okno ogłoszenia: cale zdjecie + przewijany opis */
.detail-dialog { max-height: calc(100dvh - 32px); }
.detail-shell  { max-height: calc(100dvh - 32px); }

.detail-photo { background: #0b121a; min-height: 0; }
.detail-photo #detailImage {
  object-fit: contain;      /* bylo cover, ktore ucina zdjecie */
  width: 100%;
  height: 100%;
  background: #0b121a;
}

.detail-content {
  overflow-y: auto;         /* przewijanie opisu */
  min-height: 0;
  max-height: calc(100dvh - 32px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 800px) {
  .detail-dialog { max-height: 100dvh; }
  .detail-shell  { overflow-y: auto; max-height: 100dvh; }
  .detail-photo  { height: min(70vw, 380px); }
  .detail-content { overflow: visible; max-height: none; }
}

/* czcionki w stylu Otomoto: jedna prosta, pogrubiona bezszeryfowa */
h1, h2, h3, h4,
.brand, .brand span,
.detail-price, .price, .card-title,
.trust-strip strong {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
h1 { letter-spacing: -0.02em !important; }
/* dane auta: równe kafelki, każdy osobno */
.detail-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-specs span { display: block; min-width: 0; overflow-wrap: anywhere; }

/* przyciski (numer telefonu) zawsze widoczne na dole okna */
.detail-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0 6px;
  background: #fff;
  box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, .15);
}
/* kategorie: tyle kolumn, ile widocznych przyciskow */
.category-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.category-card[hidden] { display: none; }
.result-count { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.load-more-row { display: flex; justify-content: center; margin-top: 28px; }
.load-more-row .secondary-button { width: auto; min-width: 240px; }
.listing-grid[aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* znaczek "Zalogowano" ukryty, gdy nikt nie jest zalogowany */
.user-chip[hidden] { display: none !important; }

/* naglowek: "Zaloguj sie" + "Dodaj ogloszenie" */
.login-link { color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.login-link:hover { color: var(--accent-dark); text-decoration: underline; }
.add-button { white-space: nowrap; }
@media (max-width: 540px) {
  .add-long { display: none; }
  .login-link { font-size: 13px; max-width: 96px; }
}
.register-link { padding-left: 14px; border-left: 1px solid var(--line); }
.register-link[hidden] { display: none; }
@media (max-width: 540px) {
  .nav-actions { gap: 8px; }
  .register-link { padding-left: 8px; }
  .icon-button { font-size: 21px; }
  .brand { font-size: 21px; }
  .brand-mark { width: 25px; height: 25px; font-size: 15px; }
}
@media (max-width: 380px) {
  .login-link { font-size: 12px; }
}
.auth-links { display: flex; align-items: center; gap: 14px; }
@media (max-width: 540px) {
  /* na telefonie: "Zaloguj sie" i "Zaloz konto" jeden pod drugim */
  .auth-links { flex-direction: column; align-items: flex-end; gap: 2px; }
  .auth-links .login-link { font-size: 12px; line-height: 1.2; }
  .register-link { padding-left: 0; border-left: 0; }
  .nav { gap: 8px; }
}

/* Wyszukiwarka w stylu duzych portali */
.finder { max-width: 980px; background: #fff; color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 18px 14px; }
.finder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.finder label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.finder select, .finder input { width: 100%; height: 44px; border: 1px solid #d6dde4; border-radius: 8px; padding: 0 10px; background: #fff; color: var(--ink); font: 500 15px "DM Sans", Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.finder select:disabled { background: var(--soft); color: #9aa5b1; }
.finder select:focus, .finder input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.finder-wide { grid-column: span 2; }
.finder-more { margin-top: 12px; }
.finder-more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent-dark); padding: 4px 0; }
.finder-more[open] summary { margin-bottom: 10px; }
.finder-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 14px; }
.finder-submit { min-width: 230px; height: 48px; font-size: 16px; }
.sort-box { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.sort-box select { height: 38px; border: 1px solid #d6dde4; border-radius: 8px; padding: 0 8px; font: 500 14px "DM Sans", Arial, sans-serif; background: #fff; }
.listings-heading { gap: 16px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .finder { padding: 14px 12px 12px; }
  .finder-grid { gap: 10px; }
  .finder-wide { grid-column: span 2; }
  .finder-actions { justify-content: space-between; }
  .finder-submit { min-width: 0; flex: 1; }
  .hero { padding-top: 34px; }
  .hero h1 { font-size: 34px; }
}

/* Zdjecie w naglowku z wlasnego serwera (WebP 59 KB zamiast 300 KB z Unsplash) */
.hero-photo { background: linear-gradient(90deg, rgba(13,24,35,.95) 0%, rgba(13,24,35,.78) 43%, rgba(13,24,35,.2) 78%, rgba(13,24,35,.5)), url('/assets/img/hero-1800.webp') center/cover; }
@media (max-width: 540px) {
  .hero-photo { background: linear-gradient(90deg, rgba(13,24,35,.94), rgba(13,24,35,.66)), url('/assets/img/hero-1000.webp') center/cover; }
}

/* Wyszukiwarka: 4 kolumny, przycisk w siatce */
.finder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.finder-go { display: flex; align-items: flex-end; }
.finder-go .finder-submit { width: 100%; min-width: 0; height: 44px; font-size: 15px; }
.finder-reset { float: right; margin-top: -26px; font-size: 13px; }
@media (max-width: 820px) {
  .finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .finder-reset { float: none; margin: 10px 0 0; display: block; }
}

/* Sekcja "Jak to dziala" (dla sprzedajacych) */
.how { padding: 64px 0; }
.how-steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-steps li { background: var(--soft); border-radius: 12px; padding: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.how-steps span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; margin-bottom: 12px; }
.how-steps strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.how-cta { display: inline-block; }
@media (max-width: 760px) {
  .how { padding: 44px 0; }
  .how-steps { grid-template-columns: 1fr; }
  .how-cta { display: block; text-align: center; }
}
@media (max-width: 820px) {
  /* telefon: lokalizacja i przycisk na cala szerokosc, zeby napis "Pokaz 16 ogloszen" sie nie lamal */
  .finder-main > label:nth-child(7), .finder-go { grid-column: span 2; }
  .finder-go .finder-submit { height: 48px; font-size: 16px; }
}

/* Powiadomienia o nowych ogloszeniach */
.alert-bar { margin: -12px 0 20px; }
.alert-bar .text-button { font-size: 14px; }
.alert-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.alert-form[hidden] { display: none; }
.alert-form input[type=email] { height: 40px; min-width: 240px; flex: 1; max-width: 340px; border: 1px solid #d6dde4; border-radius: 8px; padding: 0 10px; font: 500 15px "DM Sans", Arial, sans-serif; }
.alert-form small { width: 100%; color: var(--muted); }
.alert-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* Ikony kontaktu: 📞 wysuwa numer, ✉️ wysuwa formularz, ↗ pelne ogloszenie */
.act-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 16px; }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; height: 48px; padding: 0 13px; border: 0; border-radius: 99px; background: #edf1f5; color: var(--ink); font: 700 15px "DM Sans", Arial, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.act:hover { background: #dfe6ec; transform: translateY(-1px); }
.act.on { background: #ffe1d7; }
.act:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.act-ico { font-size: 20px; line-height: 1; }
.act-phone { background: var(--accent); color: #fff; }
.act-phone:hover { background: var(--accent-dark); }
.act-phone .act-text { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease; }
.act-phone.open .act-text { max-width: 220px; }
.act-panel { display: grid; gap: 8px; margin: -6px 0 16px; padding: 12px; border-radius: 12px; background: var(--soft); }
.act-panel[hidden] { display: none; }
.act-panel:target { display: grid; }
.act-panel input:not(.hp), .act-panel textarea { width: 100%; border: 1px solid #d6dde4; border-radius: 8px; padding: 9px 10px; font: 400 14px "DM Sans", Arial, sans-serif; background: #fff; }
.act-panel .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.act-status { margin: 0; font-size: 13px; }
.act-status.ok { color: #1f6f43; } .act-status.err { color: #b42318; }
/* podglad: dane auta jako male znaczniki, opis ma wiecej miejsca */
.detail-sub { margin: -4px 0 8px; color: var(--muted); font-size: 15px; }
.detail-price { margin-bottom: 12px; }
.detail-specs { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin-bottom: 14px; }
.detail-specs span { display: inline-block !important; padding: 5px 10px; border-radius: 99px; background: var(--soft); font-size: 13px; font-weight: 600; }
.detail-location { padding: 10px 0; }
.detail-description { margin: 14px 0 6px; white-space: pre-line; }
.detail-content { padding-top: 40px; }
/* telefon: wiekszy obszar klikniecia dla "Zaloguj sie / Zaloz konto" */
@media (max-width: 540px) {
  .auth-links .login-link { padding: 5px 0; }
}

/* numer ogloszenia w podgladzie */
.detail-id{margin:10px 0 0;padding-top:10px;border-top:1px solid #e5e9ef;color:#667085;font-size:.85rem}
.detail-id b{color:#344054;font-weight:600}
.detail-id button{border:0;background:none;cursor:pointer;color:#344054;font-size:1rem;padding:2px 6px;border-radius:6px}
.detail-id button:hover{background:#eef2f6}

/* Ikony SVG (assets/img/icons.svg) zamiast emotek */
.ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;fill:none;stroke:currentColor}
.icon-button .ic{width:24px;height:24px;vertical-align:middle}
.favorite-card{display:grid;place-items:center;color:var(--ink)}
.favorite-card .ic{width:19px;height:19px}
.favorite-card.saved .ic,#favoritesButton.has .ic{fill:currentColor}
.placeholder{color:#8a99a8}.placeholder .ic{width:64px;height:64px;stroke-width:1.5}
.act-ico .ic{width:21px;height:21px;vertical-align:middle}
.empty-state>span .ic{width:40px;height:40px}
.gal-nav .ic{width:22px;height:22px;vertical-align:middle}
.detail-location:before{content:'';width:18px;height:18px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f05a28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.login-link .ic{margin-right:4px}
.text-button .ic{color:var(--accent)}

/* Wizytowka sprzedajacego (?sprzedajacy=...) zamiast duzego zdjecia */
.seller-bar{background:#101923;color:#fff;padding:34px 0 30px}
.seller-inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.seller-avatar{width:72px;height:72px;border-radius:18px;background:#dff46e;color:#101923;display:grid;place-items:center;font-size:2rem;font-weight:700;flex:none}
.seller-info{flex:1 1 280px;min-width:0}
.seller-info .eyebrow{margin:0 0 4px}
.seller-info h1{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15;overflow-wrap:anywhere}
.seller-meta{margin:8px 0 0;color:#c4cdd6;font-size:.95rem}
.seller-meta .ic{color:#ff7a45}
.seller-all{white-space:nowrap;text-decoration:none}
@media(max-width:640px){.seller-bar{padding:24px 0}.seller-avatar{width:56px;height:56px;font-size:1.5rem}.seller-all{width:100%;text-align:center}}