/* =========================================================
   Aquila Used Bikes — Design tokens
   ========================================================= */
:root{
  --bg: #10131A;
  --bg-elevated: #171B24;
  --bg-card: #1B202B;
  --border: rgba(255,255,255,0.08);
  --text: #EDEFF3;
  --text-dim: #98A0AC;
  --metal: #C9CDD3;
  --accent: #FF6B2C;
  --accent-dim: #C94F1B;
  --save: #2BD97C;
  --danger: #FF4D4D;
  --whatsapp: #25D366;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
[hidden]{ display: none !important; }
body{
  margin:0;
  background: radial-gradient(120% 80% at 50% -10%, #1B2130 0%, var(--bg) 55%);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room for sticky mobile CTA */
}
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   Top bar
   ========================================================= */
.topbar{
  position: sticky; top:0; z-index:40;
  background: rgba(16,19,26,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner{
  max-width: 1280px; margin:0 auto;
  display:flex; align-items:center; gap:16px;
  padding: 12px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand__mark{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#fff; font-family: var(--font-display); font-weight:800; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(255,107,44,0.35);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-family: var(--font-display); font-weight:700; font-size:19px; letter-spacing:0.2px; }
.brand__text small{ color: var(--text-dim); font-size:11px; }

.search{
  flex:1; max-width:480px; display:flex; align-items:center; gap:8px;
  background: var(--bg-elevated); border:1px solid var(--border);
  border-radius: 999px; padding: 9px 16px;
}
.search__icon{ width:17px; height:17px; color: var(--text-dim); flex-shrink:0; }
.search input{
  flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14px;
}
.search input::placeholder{ color: var(--text-dim); }

.topbar__call{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#fff; padding: 10px 16px; border-radius: 999px;
  font-weight:600; font-size:13px; white-space:nowrap;
  box-shadow: 0 8px 18px rgba(255,107,44,0.3);
  flex-shrink:0;
}
.topbar__call svg{ width:15px; height:15px; }

.topbar__ghost{
  flex-shrink:0; background: var(--bg-elevated); border:1px solid var(--border); color: var(--text);
  padding: 10px 16px; border-radius: 999px; font-weight:600; font-size:13px; white-space:nowrap;
}
.topbar__ghost:hover{ border-color: rgba(255,107,44,0.4); color: var(--accent); }
@media (max-width: 700px){ .topbar__ghost{ display:none; } }

.back-link{
  display:flex; align-items:center; gap:6px; color: var(--text-dim); font-size:14px; font-weight:600;
  flex-shrink:0;
}
.back-link svg{ width:18px; height:18px; flex-shrink:0; }
.back-link:hover{ color: var(--text); }

.filters{
  max-width:1280px; margin:0 auto;
  display:flex; gap:8px; overflow-x:auto; padding: 10px 20px 14px;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }
.filters__divider{ width:1px; background:var(--border); flex-shrink:0; margin: 4px 2px; }
.chip{
  flex-shrink:0; border:1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-dim); padding: 7px 14px; border-radius: 999px; font-size:13px; font-weight:500;
  transition: all .15s ease;
}
.chip:hover{ color: var(--text); border-color: rgba(255,255,255,0.2); }
.chip--active{
  background: var(--accent); border-color: var(--accent); color:#fff;
}

/* =========================================================
   Bike grid + 3D tilt cards
   ========================================================= */
.grid{
  max-width:1280px; margin: 22px auto; padding: 0 20px;
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.empty-state, .empty-filtered{
  text-align:center; color: var(--text-dim); padding: 60px 20px; grid-column: 1/-1;
}
.empty-filtered button{
  background:none; border:1px solid var(--border); color:var(--accent);
  padding:6px 14px; border-radius:999px; margin-left:8px;
}

.card{
  display:block;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; cursor:pointer; outline:none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover, .card:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,107,44,0.4);
}
.card__stage{
  position:relative; aspect-ratio: 4/3; background:
    radial-gradient(120% 100% at 50% 20%, #262C39 0%, #171B24 70%);
  perspective: 800px;
  overflow:hidden;
}
.card__tilt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform-style: preserve-3d;
  transition: transform .25s ease;
  padding: 10px;
}
.card__tilt img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 18px 20px rgba(0,0,0,0.5)); }
.card__noimg{ color: var(--text-dim); font-size:13px; }
.card__hint{
  position:absolute; bottom:8px; right:10px; font-size:10.5px; color: var(--text-dim);
  background: rgba(0,0,0,0.35); padding:3px 8px; border-radius:999px;
  opacity:0; transition: opacity .2s ease;
}
.card:hover .card__hint{ opacity:1; }

.badge{
  position:absolute; top:10px; z-index:2; font-size:11px; font-weight:700;
  padding: 4px 10px; border-radius: 999px; color:#fff; letter-spacing:0.2px;
}
.badge--featured{ left:10px; background: linear-gradient(135deg,#FFB020,#FF6B2C); }
.badge--save{ right:10px; background: var(--save); color:#0A2818; }
.badge--sold{ left:10px; background: linear-gradient(135deg,#5A616E,#363C46); }
.badge--hold{ left:10px; top:44px; background: linear-gradient(135deg,#FFB020,#C97F0E); }
.badge--lg{ position:static; font-size:12.5px; padding:6px 12px; }

/* Sold cards stay in the grid (as price proof) but read as "closed" */
.card--sold{ position:relative; }
.card--sold .card__tilt img{ filter: grayscale(55%) brightness(0.72); }
.card--sold .card__tilt{ transform:none !important; }
.card--sold .card__title, .card--sold .card__variant{ opacity:0.75; }
.card--sold .card__hint--sold{
  opacity:1; right:auto; left:10px; bottom:10px;
  background: rgba(0,0,0,0.55); color:#fff; font-weight:600;
}

.card__body{ padding: 14px 16px 16px; }
.card__title{ margin:0; font-family: var(--font-display); font-weight:700; font-size:21px; letter-spacing:0.2px; }
.card__variant{ margin:2px 0 10px; color: var(--text-dim); font-size:12.5px; }
.card__meta{
  list-style:none; margin:0 0 12px; padding:0; display:flex; gap:8px; flex-wrap:wrap;
}
.card__meta li{
  font-size:11.5px; color: var(--metal); background: var(--bg-elevated); border:1px solid var(--border);
  padding: 3px 9px; border-radius: 6px;
}
.card__price{ display:flex; align-items:baseline; gap:8px; }
.price--old{ color: var(--text-dim); text-decoration: line-through; font-size:13px; }
.price--new{ font-family: var(--font-display); font-weight:700; font-size:22px; color: var(--accent); }
.price--old-lg{ font-size:16px; display:block; }
.price--new-lg{ font-size:32px; }

/* =========================================================
   Standalone bike detail page (bike.php)
   ========================================================= */
.detail-page{
  max-width: 860px; margin: 0 auto; padding: 0 0 30px;
}
.detail-page .viewer--page{ border-radius:0; }
@media (max-width: 759px){
  .detail-page .cta-row{ display:none; }
}
@media(min-width: 640px){
  .detail-page{ padding: 20px 20px 40px; }
  .detail-page .viewer--page{ border-radius: var(--radius); }
  .detail-page .thumbstrip{ padding-left:0; padding-right:0; }
  .detail-page .details{ padding-left:0; padding-right:0; }
}

/* =========================================================
   Modal / showroom detail
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(6,8,12,0.75); backdrop-filter: blur(4px); }
.modal__panel{
  position:relative; background: var(--bg-elevated);
  width:100%; max-width:960px; max-height:94vh; overflow-y:auto;
  border-radius: 20px 20px 0 0;
  transform: translateY(24px); transition: transform .3s ease;
  padding-bottom: 24px;
}
.modal[aria-hidden="false"] .modal__panel{ transform: translateY(0); }
@media(min-width:760px){
  .modal{ align-items:center; }
  .modal__panel{ border-radius: 20px; max-height:88vh; }
}
.modal__close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:36px; height:36px; border-radius:50%; border:none;
  background: rgba(0,0,0,0.4); color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.modal__loader{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 90px 20px; color: var(--text-dim); gap:14px;
}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.15); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---- 360 turntable viewer (signature element) ---- */
.viewer{
  position:relative; aspect-ratio: 16/10; background:
    radial-gradient(120% 100% at 50% 15%, #262C39 0%, #12151C 75%);
  touch-action: pan-y; user-select:none; overflow:hidden;
}
.viewer__stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; }
.viewer__stage img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.55)); pointer-events:none; }
.viewer__hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-dim);
  background: rgba(0,0,0,0.4); padding:5px 12px; border-radius:999px;
  transition: opacity .3s ease;
}
.viewer__hint svg{ width:13px; height:13px; }
.viewer__dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px;
}
.viewer__dots span{ width:5px; height:5px; border-radius:50%; background: rgba(255,255,255,0.25); }
.viewer__dots span.active{ background: var(--accent); width:16px; border-radius:4px; }
.viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none;
  background: rgba(0,0,0,0.35); color:#fff; font-size:14px;
}
.viewer__nav--prev{ left:12px; } .viewer__nav--next{ right:12px; }

.thumbstrip{
  display:flex; gap:8px; padding: 12px 20px; overflow-x:auto;
}
.thumbstrip img{
  width:56px; height:44px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:0.6; flex-shrink:0; background:#fff;
}
.thumbstrip img.active{ border-color: var(--accent); opacity:1; }

.details{ padding: 6px 20px 0; }
.details__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.details__head h2{ font-family: var(--font-display); font-size:28px; margin:0; font-weight:700; }
.details__sub{ margin:2px 0 0; color: var(--text-dim); font-size:13px; }
.status-pill{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;
  background: rgba(43,217,124,0.15); color: var(--save); border:1px solid rgba(43,217,124,0.35);
}
.status-pill.sold{ background: rgba(255,77,77,0.15); color:var(--danger); border-color: rgba(255,77,77,0.35); }

.price-block{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 16px 0;
}

.spec-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap:10px; margin-bottom:16px;
}
.spec-grid .spec{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:10px 12px;
}
.spec .spec__label{ display:block; font-size:10.5px; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
.spec .spec__value{ font-weight:600; font-size:13.5px; }

.details__desc{ color: var(--metal); font-size:14px; line-height:1.6; margin-bottom:18px; white-space:pre-line; }
.sold-note{
  background: rgba(255,176,32,0.1); border:1px solid rgba(255,176,32,0.3); color:#FFB020;
  font-size:13px; line-height:1.5; padding:12px 14px; border-radius: var(--radius-sm); margin-bottom:16px;
}

.cta-row{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:6px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 20px; border-radius: 999px; font-weight:600; font-size:14px; border:none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn svg{ width:16px; height:16px; }
.btn:active{ transform: scale(0.97); }
.btn--primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color:#fff;
  box-shadow: 0 10px 22px rgba(255,107,44,0.32);
}
.btn--ghost{ background: var(--bg-card); color: var(--text); border:1px solid var(--border); }
.btn--whatsapp{ background: var(--whatsapp); color:#fff; }
.btn--block{ width:100%; }

/* =========================================================
   Callback drawer
   ========================================================= */
.drawer{ position:fixed; inset:0; z-index:110; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.drawer[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.drawer__backdrop{ position:absolute; inset:0; background: rgba(6,8,12,0.75); }
.drawer__panel{
  position:absolute; right:0; top:0; bottom:0; width:100%; max-width:400px;
  background: var(--bg-elevated); padding: 26px 22px; overflow-y:auto;
  transform: translateX(100%); transition: transform .3s ease;
  display:flex; flex-direction:column; gap:12px;
}
.drawer[aria-hidden="false"] .drawer__panel{ transform: translateX(0); }
.drawer__panel h3{ font-family: var(--font-display); font-size:24px; margin:18px 0 0; }
.drawer__sub{ color: var(--text-dim); font-size:13px; margin:0 0 6px; }
.drawer__panel label{ font-size:12.5px; color: var(--text-dim); display:flex; flex-direction:column; gap:6px; }
.drawer__panel input, .drawer__panel textarea{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 12px; color: var(--text); font-size:14px; font-family:inherit; outline:none;
}
.drawer__panel input:focus, .drawer__panel textarea:focus{ border-color: var(--accent); }
.drawer__status{ font-size:13px; min-height:18px; margin:0; }
.drawer__status.ok{ color: var(--save); }
.drawer__status.err{ color: var(--danger); }

/* =========================================================
   Mobile sticky CTA
   ========================================================= */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(16,19,26,0.92); backdrop-filter: blur(10px);
  border-top:1px solid var(--border);
}
.sticky-cta--row{ display:flex; gap:8px; }
.sticky-cta--row .btn{ flex:1; padding:11px 8px; font-size:12.5px; gap:5px; white-space:nowrap; }
.sticky-cta--row .btn svg{ width:14px; height:14px; }
@media(min-width:760px){ .sticky-cta{ display:none; } }

/* Focus visibility */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }