/* Garage — motorcycle showcase. The forum uses a dark full-bleed hero background,
   so page-level text (titles, meta, empty states) is LIGHT; content lives on white
   cards/panels which set their own dark text. */
.garage { color: #eaeaea; }
.garage-title { font-weight: 700; color: #fff; }
.garage-header { margin-bottom: 1.25rem; gap: .5rem; }
.garage-header .text-muted { color: #d5d5d5 !important; }

.garage-meta { color: #d0d0d0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.garage-meta a { color: #d0d0d0 !important; }
.garage-meta a:hover { color: #fff !important; }
.garage-meta i { color: #ff5162; margin-right: .2rem; }

.garage-back { color: #cfcfcf; }
.garage-back:hover { color: #fff; text-decoration: none; }

/* Featured */
.garage-featured {
  display: flex; border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem;
  background: #1c1c1c; color: #fff; text-decoration: none; min-height: 190px;
}
.garage-featured:hover { text-decoration: none; color: #fff; }
.garage-featured-img { flex: 0 0 46%; background-size: cover; background-position: center; min-height: 190px; background-color:#2b2b2b; display:flex; align-items:center; justify-content:center; }
.garage-featured-img::after { content: "\f21c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 3rem; color: #4a4a4a; }
.garage-featured-img[style*="url"]::after { content: none; }
.garage-featured-body { padding: 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.garage-featured-body h3 { margin: .4rem 0; color: #fff !important; }
.garage-featured .garage-meta { color: #ccc; }
.garage-featured .garage-meta i { color: #ff5162; }

/* Filters */
.garage-filters { background:#f6f6f6; border:1px solid #eee; border-radius:8px; padding:.8rem; margin-bottom:1.25rem; }
.garage-filters label { font-size:.72rem; text-transform:uppercase; color:#999; margin-bottom:.15rem; letter-spacing:.03em; }

/* Grid + cards */
.garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.garage-card { display:flex; flex-direction:column; background:#fff; border:1px solid #eaeaea; border-radius:10px; overflow:hidden; text-decoration:none; color:#222; transition: box-shadow .15s, transform .15s; }
.garage-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-2px); text-decoration:none; color:#222; }
.garage-card-img { position:relative; aspect-ratio: 4/3; background:#f0f0f0; }
.garage-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.garage-card-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#c9c9c9; font-size:2.6rem; min-height:150px; }
.garage-noimg-lg { min-height:320px; height:320px; border-radius:10px; background:#23272e; color:#5b626c; flex-direction:column; gap:.6rem; }
.garage-noimg-lg span { font-size:.9rem; color:#8a919b; }
.garage-card-flag { position:absolute; top:8px; left:8px; background:#666; color:#fff; font-size:.7rem; padding:2px 7px; border-radius:4px; }
.garage-card-body { padding:.6rem .7rem; }
.garage-card-title { font-weight:600; line-height:1.2; margin-bottom:.25rem; }
.garage-card-meta { display:flex; gap:.7rem; font-size:.8rem; color:#888; }
.garage-card-meta i { color:#cd192d; }

/* Detail */
.garage-panel { background:#fff; border:1px solid #eaeaea; border-radius:10px; padding:1.1rem; margin-top:1.1rem; color:#2a2a2a; }
.garage-panel h4 { font-size:1.05rem; font-weight:700; margin-bottom:.8rem; color:#1c1c1c; }
.garage-desc { white-space:normal; }
.garage-gallery-main img { width:100%; border-radius:10px; max-height:460px; object-fit:cover; background:#f0f0f0; }
.garage-gallery-thumbs { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.garage-gallery-thumbs .ggt { width:74px; height:56px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.garage-gallery-thumbs .ggt.active, .garage-gallery-thumbs .ggt:hover { border-color:#cd192d; }

.garage-specs table th { color:#888; font-weight:600; width:45%; }
.garage-mod-cat h6 { text-transform:uppercase; letter-spacing:.03em; color:#cd192d; font-size:.8rem; margin-top:.6rem; }
.garage-mod-list { list-style:none; padding-left:0; margin-bottom:.5rem; }
.garage-mod-list li { padding:.35rem 0; border-bottom:1px dashed #eee; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; }
.garage-mod-title { font-weight:500; }
.garage-mod-price { color:#2a7; font-weight:600; }
.garage-mod-comment { flex-basis:100%; color:#777; font-size:.86rem; }

.garage-gb-entry { padding:.6rem 0; border-bottom:1px solid #f0f0f0; }
.garage-gb-entry small { margin-left:.5rem; }

/* Rating stars */
.garage-stars-row { display:flex; flex-wrap:wrap; gap:1px; }
.garage-star-btn { background:none; border:0; padding:2px; color:#f0ad4e; font-size:1.05rem; cursor:pointer; }
.garage-star-btn i.far { color:#ccc; }

/* Uploader */
.garage-dropzone { border:2px dashed #ccc; border-radius:10px; padding:1.5rem; text-align:center; color:#999; cursor:pointer; transition:border-color .15s, background .15s; }
.garage-dropzone.dragover { border-color:#cd192d; background:#fff5f6; color:#cd192d; }
.garage-thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:.5rem; margin-top:.8rem; }
.garage-thumb { position:relative; border-radius:8px; overflow:hidden; border:2px solid transparent; }
.garage-thumb.is-cover { border-color:#f0ad4e; }
.garage-thumb img { width:100%; height:80px; object-fit:cover; display:block; }
.garage-thumb-actions { position:absolute; inset:auto 0 0 0; display:flex; justify-content:center; gap:.4rem; padding:3px; background:rgba(0,0,0,.45); opacity:0; transition:opacity .15s; }
.garage-thumb:hover .garage-thumb-actions { opacity:1; }
.garage-thumb-actions button { background:none; border:0; color:#fff; cursor:pointer; font-size:.8rem; }
.garage-thumb-actions .ggt-cover:hover { color:#f0ad4e; }
.garage-thumb-actions .ggt-del:hover { color:#ff5162; }

/* Profile block */
.garage-profile-strip { display:flex; gap:.6rem; flex-wrap:wrap; }
.garage-profile-strip .garage-card { width:150px; }

@media (max-width: 575px) {
  .garage-featured { flex-direction:column; }
  .garage-featured-img { flex-basis:170px; width:100%; }
}