/* ═══ components.css ═══ */

/* PHONE REVEAL */
.phone-reveal { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.phone-reveal .ph-hidden {
  font-size:14px; font-weight:600; color:#111;
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12);
  padding:4px 12px; border-radius:4px; letter-spacing:.5px;
  transition:all .2s; user-select:none;
}
.phone-reveal .ph-hidden:hover { background:rgba(242,145,0,.12); border-color:rgba(242,145,0,.4); color:#111; }
.phone-reveal .ph-shown { font-size:14px; font-weight:600; color:#111; text-decoration:none; }
.phone-reveal .ph-shown:hover { color:#BE1823; }

/* FLEET ACCORDION */
.acc-group { border-bottom: 1px solid rgba(255,255,255,.08); }
.acc-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 24px; cursor:pointer;
  background:#111; transition:background .2s;
  user-select:none;
}
.acc-header:hover { background:#1a1a1a; }
.acc-title {
  font-family:"Bebas Neue",sans-serif; font-size:22px;
  letter-spacing:2px; color:#fff; display:none;
}
.acc-meta { font-size:13px; color:rgba(255,255,255,.4); letter-spacing:0.5px; }
.acc-arrow {
  font-size:16px; color:var(--gold);
  transition:transform .3s; display:inline-block;
}
.acc-group.open .acc-arrow { transform:rotate(180deg); }
.acc-body {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(255,255,255,.08);
  max-height:0; overflow:hidden;
  transition:max-height .5s ease;
}

/* Десктоп: 3 карточки в ряд — ~300px каждая, max 4 строки характеристик */
.acc-group.open .acc-body { max-height:600px; }

/* Мобильный: 1 карточка в ряд — высота считается иначе */
@media(max-width:768px){
  .acc-body { grid-template-columns:1fr; }
  /* 6 карточек × ~200px каждая = 1200px + запас */
  .acc-group.open .acc-body { max-height:2000px; transition:max-height .6s ease; }
}

@media(max-width:480px){
  /* На очень маленьких экранах карточки чуть выше */
  .acc-group.open .acc-body { max-height:2500px; }
}

/* SOCIAL BUTTONS */
#wa-btn:hover{border-color:rgba(37,211,102,.8)!important;background:rgba(37,211,102,.12)!important;transform:translateX(-4px)}
#tg-btn:hover{border-color:rgba(40,168,234,.8)!important;background:rgba(40,168,234,.12)!important;transform:translateX(-4px)}
#max-btn:hover{border-color:rgba(0,102,255,.8)!important;background:rgba(0,102,255,.12)!important;transform:translateX(-4px)}