/* ==========================================================================
   SIM MASTER — SIM MARKET LISTINGS
   /sim-market/nova-oprema/, /sim-market/polovna-oprema/, /sim-market/oglas/
   (and /en/…), plus the ad form and "My listings" on the account pages.
   Builds on tokens.css, base.css (buttons), forms.css (.field) and
   account.css (.notice, .auth).
   ========================================================================== */

/* ------------------------------------------------------------------ hero */

.market-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-2xl) var(--space-xl);
  background:
    radial-gradient(ellipse 70% 80% at 85% 0%, rgba(232, 19, 14, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 90% at 10% 0%, rgba(0, 35, 41, 0.9), transparent 65%),
    var(--surface-base);
  border-bottom: 1px solid var(--line-faint);
}

  /*
    Line-art mark behind the hero, same treatment as .page-hero::after in
    pages.css: a direct-drive wheelbase on Nova oprema, an H-shifter on
    Polovna oprema. z-index -1 sits above the section's own background
    because the section is `isolation: isolate`. Dimmed and pushed right
    below 64rem so it never competes with the heading.
  */
  .market-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: 78% 38%;
    background-size: min(34rem, 128%) auto;
    opacity: 0.24;
    -webkit-mask-image: linear-gradient(to left, #000 35%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
            mask-image: linear-gradient(to left, #000 35%, rgba(0, 0, 0, 0.55) 80%, transparent 100%);
  }

  .market-hero--new::after {
    background-image: url("../img/simulator-voznje-beograd-sema-baza.svg");
  }

  .market-hero--used::after {
    background-image: url("../img/simulator-voznje-beograd-sema-menjac.svg");
  }

  @media (min-width: 64rem) {
    .market-hero::after {
      opacity: 0.55;
      background-position: 102% 50%;
      background-size: auto 112%;
      -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 92%);
              mask-image: linear-gradient(to left, #000 45%, transparent 92%);
    }
  }

  .market-hero__title {
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--text-warm);
  }

  .market-hero__lede {
    max-width: 44rem;
    margin: var(--space-sm) 0 0;
    font-size: var(--fs-body-lg);
    color: var(--text-secondary);
  }

  .market-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

.market-flashes {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-md) 0;
}

/* --------------------------------------------- Sim Machine / Nova / Polovna */

.market-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

  .market-subnav__pill {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-secondary);
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }

  .market-subnav__pill:hover {
    color: var(--text-primary);
    border-color: var(--line-strong);
  }

  .market-subnav__pill[aria-current="page"] {
    color: var(--text-primary);
    border-color: var(--action);
    background: rgba(232, 19, 14, 0.12);
  }

/* ------------------------------------------------------------------ list */

.market {
  padding-block: var(--space-xl) var(--space-section);
  background: var(--surface-void);
}

  .market-filters {
    display: grid;
    gap: var(--space-sm);
    align-items: end;
    padding: var(--space-md);
    background: var(--surface-panel);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-md);
  }

  @media (min-width: 48rem) {
    .market-filters {
      grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 2fr) minmax(11rem, 1fr) auto;
    }
  }

  .market-filters .field {
    margin: 0;
  }

  .market-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
  }

  .market-filters__reset {
    font-size: var(--fs-body-sm);
    color: var(--action-text);
  }

  .market__count {
    margin: var(--space-lg) 0 var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lcard__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(175deg, var(--surface-panel), var(--surface-void) 85%);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }

  .lcard__link:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
  }

  .lcard__link:focus-visible {
    outline: 2px solid var(--action-text);
    outline-offset: 3px;
  }

  .lcard__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--surface-inset);
  }

  .lcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .lcard__nophoto {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
  }

  .lcard__cond {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-xs);
    background: rgba(4, 9, 11, 0.8);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .lcard__cond--new {
    background: rgba(0, 120, 150, 0.9);
  }

  .lcard__body {
    display: grid;
    gap: var(--space-3xs);
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .lcard__title {
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lcard__price {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--text-warm);
  }

  .lcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-xs);
    font-size: var(--fs-caption);
    color: var(--text-muted);
  }

  .lcard__meta > span + span::before {
    content: "·";
    margin-right: var(--space-xs);
  }

  .market-empty {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    border: 1px dashed var(--line-soft);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
  }

  .market-empty p {
    margin: 0;
  }

  .pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
  }

  .pager__link {
    color: var(--action-text);
    font-weight: 600;
  }

  .pager__state {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .market-aside {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
  }

  @media (min-width: 48rem) {
    .market-aside {
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
  }

  .market-aside__card {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--surface-panel);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
  }

  .market-aside__card p {
    margin: 0;
  }

  .market-aside__card img {
    height: 2.75rem;
    width: auto;
  }

  .market-aside__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-warm);
  }

  .market-aside__steps {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding-left: 1.25rem;
  }

  .market-aside__steps li::marker {
    font-family: var(--font-mono);
    color: var(--action-text);
  }

/* ------------------------------------------------------------- one ad */

.listing {
  padding-block: var(--space-xl) var(--space-section);
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(0, 35, 41, 0.85), transparent 62%),
    var(--surface-base);
}

  .listing .notice {
    margin-bottom: var(--space-md);
  }

  .listing__back {
    margin: 0 0 var(--space-md);
    font-size: var(--fs-body-sm);
  }

  .listing__back a {
    color: var(--action-text);
  }

  .listing__grid {
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 60rem) {
    .listing__grid {
      grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr);
      align-items: start;
    }
  }

  .listing__main {
    margin: 0;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-inset);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-md);
  }

  .listing__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .listing__main--empty {
    color: var(--text-muted);
  }

  .listing__thumbs {
    display: flex;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 0;
    padding: 0 0 var(--space-3xs);
    list-style: none;
    overflow-x: auto;
  }

  .listing__thumb {
    display: block;
    width: 5.5rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }

  .listing__thumb:hover,
  .listing__thumb[aria-current="true"] {
    opacity: 1;
  }

  .listing__thumb[aria-current="true"] {
    border-color: var(--action);
  }

  .listing__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .listing__info {
    display: grid;
    gap: var(--space-md);
  }

  .listing__info .eyebrow {
    margin: 0;
  }

  .listing__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--text-warm);
    overflow-wrap: anywhere;
  }

  .listing__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-primary);
  }

  .listing__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
    padding: var(--space-md);
    background: var(--surface-panel);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-md);
  }

  .listing__facts dt {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .listing__facts dd {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  .listing__seller,
  .listing__tools {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-md);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
  }

  .listing__seller p,
  .listing__tools p {
    margin: 0;
  }

  .listing__seller-label,
  .listing__tools-label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-label);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .listing__seller-name {
    font-weight: 600;
    font-size: var(--fs-body-lg);
    color: var(--text-primary);
  }

  .listing__seller-since {
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
  }

  .listing__contact,
  .listing__tools-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }

  .listing__tools-row:empty {
    display: none;
  }

  .listing__tools {
    border-style: dashed;
  }

  .listing__reject {
    display: grid;
    gap: var(--space-2xs);
    margin-top: var(--space-sm);
  }

  .listing__reject-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .listing__reject-row .field__control {
    flex: 1 1 12rem;
  }

  .btn.listing__danger {
    --btn-border: rgba(232, 19, 14, 0.5);
    --btn-fg: #ff8a85;
  }

  .listing__safety {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--text-muted);
  }

  .listing__desc {
    max-width: var(--shell-text, 46rem);
    margin-top: var(--space-2xl);
  }

  .listing__desc-title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
  }

  .listing__desc-body {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }

  .listing__desc-body p {
    margin: 0 0 var(--space-sm);
  }

/* ----------------------------------------------------------- status badge */

.lstatus {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  vertical-align: middle;
}

.lstatus--pending  { color: #ffcb45; }
.lstatus--active   { color: #5fdc8f; }
.lstatus--rejected { color: #ff8a85; }
.lstatus--sold     { color: var(--color-cyan-light); }

/* ------------------------------------------------------------- ad form */

.btn.btn--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-body-sm);
}

.listing-form__set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

  .listing-form__set > legend {
    padding: 0;
    margin-bottom: var(--space-2xs);
  }

  .seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .seg__opt {
    position: relative;
    cursor: pointer;
  }

  .seg__opt input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
  }

  .seg__opt span {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-btn);
    color: var(--text-secondary);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  .seg__opt input:checked + span {
    border-color: var(--action);
    background: rgba(232, 19, 14, 0.12);
    color: var(--text-primary);
  }

  .seg__opt input:focus-visible + span {
    outline: 2px solid var(--focus-ring, var(--action-text));
    outline-offset: 2px;
  }

  .listing-form__price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem;
    gap: var(--space-xs);
  }

  .photo-edit,
  .photo-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-sm);
    margin: 0 0 var(--space-sm);
    padding: 0;
    list-style: none;
  }

  .photo-previews[hidden] {
    display: none;
  }

  .photo-edit__item,
  .photo-previews li {
    display: grid;
    gap: var(--space-3xs);
    font-size: var(--fs-caption);
    color: var(--text-secondary);
  }

  .photo-edit__item img,
  .photo-previews img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-sm);
    background: var(--surface-inset);
  }

  .photo-edit__item:has([data-photo-remove]:checked) img {
    opacity: 0.3;
  }

  .photo-edit__opt {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
  }

  .photo-edit__opt--remove {
    color: #ff8a85;
  }

  .photo-drop {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .photo-drop:hover {
    border-color: var(--action-text);
  }

  .photo-drop__label {
    font-weight: 600;
    color: var(--text-primary);
  }

  .photo-drop__input {
    max-width: 100%;
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
  }

  .listing-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
  }

  .auth .listing-form__actions .rform__submit {
    margin-top: 0;
  }

/* ------------------------------------------- "My listings" / review list */

.account-actions--top {
  margin: 0 0 var(--space-lg);
}

.staff-banner--review {
  border-color: rgba(255, 203, 69, 0.45);
  background: rgba(255, 203, 69, 0.08);
}

.auth a.staff-banner--review {
  color: #ffcb45;
}

.my-listings {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

  .my-listing {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-sm);
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
  }

  @media (max-width: 30rem) {
    .my-listing {
      grid-template-columns: 1fr;
    }
  }

  .my-listing__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-panel);
  }

  .my-listing__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .my-listing__body {
    display: grid;
    align-content: start;
    gap: var(--space-2xs);
    min-width: 0;
  }

  .auth a.my-listing__title {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  .my-listing__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    margin: 0;
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
  }

  .my-listing__reason {
    margin: 0;
    font-size: var(--fs-body-sm);
    color: #ff8a85;
  }

  .my-listing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-2xs);
  }

/* Admin: "Na čekanju" / "Svi oglasi" and the status filter on the review page. */
.review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 var(--space-md);
}

.auth a.review-tab {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-neutral);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth a.review-tab--sub {
  min-height: 2.25rem;
  font-weight: 500;
  font-size: 0.9em;
}

.auth a.review-tab:hover,
.auth a.review-tab[aria-current="page"] {
  border-color: var(--action);
  background: var(--state-error-bg);
}