/* ========= BASE ========= */
:root{
  --bg:#1b1b1b;
  --panel:#202020;
  --card:#242424;
  --border:#333;
  --text:#eaeaea;
  --muted:#bdbdbd;
  --blue:#3498db;
  --blue2:#2d8cff;
  --green:#25D366;
  --danger:#ff4d4d;
}

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family: Arial, sans-serif;
  html, body, button, input, textarea, select {
  font-family: "Segoe UI", Arial, sans-serif;
  font-family: "Segoe UI", Arial, sans-serif;
}
}

a{ color:var(--blue); text-decoration:none; }
a:hover{ color:#6bb3ff; }

/* ========= HEADER ========= */
header{
  background:var(--panel);
  border-bottom:1px solid #2f2f2f;
}

header nav{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Неон “Жарнама қосу” */
.btn-glow, .add-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:18px;
  background:var(--blue);
  color:white !important;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 0 14px rgba(52,152,219,.55);
  transition:.25s;
}
.btn-glow:hover, .add-btn:hover{
  background:#2980b9;
  box-shadow:0 0 22px rgba(52,152,219,.9), 0 0 45px rgba(52,152,219,.45);
  transform:translateY(-1px);
}

/* Тіл және кіру/тіркелу фиолетовый болмасын */
.lang-btn{
  color:var(--muted);
  font-weight:700;
}
.lang-btn.active{
  color:white;
  text-shadow:0 0 10px rgba(52,152,219,.45);
}







/* ========= CATEGORIES ========= */
.categories{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:18px 16px 6px 16px;
  background:transparent;
}

/* Капсула неон */
.cat-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#1a1a1a;
  color:#cfcfcf;
  padding:10px 18px;
  border-radius:25px;
  border:1px solid var(--border);
  transition:.25s;
}
.cat-btn:hover, .cat-btn.active{
  color:white;
  border-color:var(--blue);
  background:rgba(52,152,219,.10);
  box-shadow:0 0 16px rgba(52,152,219,.35);
}

/* ========= GRID ========= */
.cars-grid{
  display: grid;
  gap: 32px;                 /* 16px → 32px */
  padding: 20px;
  max-width: 1200px;
  margin: 30px auto 60px auto;  /* жоғары/төмен ара қашықтық өседі */
}


/* Ноут: 4 */
@media (min-width:1025px){
  .cars-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
/* Планшет: 2 */
@media (max-width:1024px){
  .cars-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Телефон: 1 */
@media (max-width:600px){
  .cars-grid{ grid-template-columns:1fr; }
}


/* ========= CARD ========= */
.car-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.25s;
}
.car-card:hover{
  transform:translateY(-4px);
  border-color:rgba(52,152,219,.65);
}

/* сурет */
.car-card img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}

/* ішкі мәтін */
.car-info, .car-card-body, .car-details{
  padding:12px 14px;
  

}
.car-info h3, .car-card h3{
  margin:0 0 6px 0;
  font-size:16px;
  color:white;
}
.price, .car-price{
  color:#4cff7a;
  font-weight:900;
}

/* ========= ACTION ICONS (қалам/ватсап/корзина) ========= */
/* Сенің HTML-де екі түрлі класс болуы мүмкін, екеуін де ұстаймыз */
.action-icons-row, .car-actions, .btn-group{
  display:flex;
  gap:12px;
  padding:12px 14px 14px 14px;
  margin-top:auto;
  border-top:1px solid #2f2f2f;
  justify-content:flex-start;
}

/* Иконканы “дөңгелек” қыламыз */
.action-icons-row a, .car-actions a, .btn-group a{
  width:38px;
  height:38px;
  border-radius:12px;
  background:#1a1a1a;
  border:1px solid #2f2f2f;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}
.action-icons-row a:hover, .car-actions a:hover, .btn-group a:hover{
  border-color:rgba(52,152,219,.7);
  box-shadow:0 0 14px rgba(52,152,219,.25);
  transform:translateY(-1px);
}

/* Егер fontawesome болса */
.fa-whatsapp{ color:var(--green) !important; font-size:18px; }
.fa-trash, .fa-trash-alt{ color:var(--danger) !important; font-size:18px; }
.fa-pen, .fa-edit{ color:var(--blue) !important; font-size:18px; }

/* Егер emoji/svg болса да түсіп кетпесін */
.action-icons-row a svg, .car-actions a svg, .btn-group a svg{
  width:18px; height:18px;
}

/* ========= ADD PAGE (add.html) ========= */
.add-form-wrapper, .form-wrapper{
  display:flex;
  justify-content:center;
  padding:34px 16px;
}
.add-form-card{
  .add-form-card{
  padding-top: 70px;
}
  position: relative;
  width:520px;          /* кішірейттік */
  max-width:95%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;   /* аздап ықшам */
  padding:18px;         /* ішкі отступ азайды */
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.add-form-card .back-arrow{
  position: absolute;
  top: 4px !important;   /* 10px → -6px */
  left: 16px !important;
  z-index: 50;
}


.add-form-card input, .add-form-card select, .add-form-card textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  margin:10px 0;
  background:#2a2a2a;
  border:1px solid #3a3a3a;
  border-radius:14px;
  color:white;
  outline:none;
}
.add-form-card input:focus, .add-form-card select:focus, .add-form-card textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 16px rgba(52,152,219,.22);
}

/* Жіберу батырмасы неон */
.add-form-card button, .btn-primary{
  width:auto;
  padding:12px 18px;
  border-radius:16px;
  border:none;
  background:var(--blue);
  color:white;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 14px rgba(52,152,219,.55);
  transition:.25s;
}
.add-form-card button:hover, .btn-primary:hover{
  background:#2980b9;
  box-shadow:0 0 22px rgba(52,152,219,.9), 0 0 45px rgba(52,152,219,.45);
  transform:translateY(-1px);
}
/* ===== ADD PAGE (Жарнама қосу) — КІШІРЕЙТУ ===== */
.add-form-wrapper, .form-wrapper{
  padding: 25px 0 !important;
}

.add-form-card, .form-card, .details-container{
  max-width: 520px !important;   /* негізгі кішірейту */
  padding: 22px !important;      /* ішкі арақашықтық азаяды */
  border-radius: 22px !important;
}

/* input-тарды жинақы қылу */
.add-form-card input,
.add-form-card select,
.add-form-card textarea,
.form-card input,
.form-card select,
.form-card textarea{
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
}

/* батырманы да кішірейту */
.add-form-card button,
.form-card button{
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
}

.back-link,
.back-link:visited{
  color:#eaeaea !important;
  text-decoration:none;
}

.back-link:hover{
  color:#3aa0ff !important;
  text-decoration:underline;
}



.back-arrow{
  position:absolute;
  top:18px;
  left:18px;
  font-size:26px;
  font-weight:700;
  color:#eaeaea;
  text-decoration:none;
}
.back-arrow:hover{
  color:#3aa0ff;
}
.auth-container{ position:relative; }
/* Register button fix */
.btn-reg{
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #1ea7ff !important;
    background: #0b1220 !important;
    color: #fff !important;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
}



.btn-reg:active{
    transform: translateX(-5px);
    box-shadow: 0 0 10px #1ea7ff,
                0 0 25px #1ea7ff;
}
.auth-container input{
    width: 100%;
    box-sizing: border-box;
}
@keyframes vipGlow {
    0% {
        box-shadow: 0 0 10px rgba(243,156,18,0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(243,156,18,0.8);
    }
    100% {
        box-shadow: 0 0 10px rgba(243,156,18,0.3);
    }
}
.vip-card {
    animation: vipGlow 2.5s infinite ease-in-out;
}
/* VIP section */
.vip-title {
    color: #f39c12;
    font-weight: 600;
    margin: 25px 0 15px;
    letter-spacing: 1px;
}

/* VIP card */
.vip-card {
    border: 1px solid rgba(243,156,18,0.4);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #1a1a1a;
}

/* Жұмсақ алтын glow */
.vip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 18px rgba(243,156,18,0.35);
}

/* Жай ғана тыныс алатын effect */
@keyframes vipGlow {
    0% { box-shadow: 0 0 10px rgba(243,156,18,0.15); }
    50% { box-shadow: 0 0 18px rgba(243,156,18,0.25); }
    100% { box-shadow: 0 0 10px rgba(243,156,18,0.15); }
}

.vip-card {
    animation: vipGlow 4s ease-in-out infinite;
}
.vip-card {
    position: relative;
}

.vip-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f39c12;
    color: black;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}
.vip-card { position: relative; }

.vip-badge{
  position:absolute;
  top:10px; left:10px;
  background:#f39c12;
  color:#000;
  padding:5px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
}
.vip-badge{
  animation: vipPulse 1.8s ease-in-out infinite;
}

@keyframes vipPulse{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
.vip-grid{
  margin-top: 16px;
}

/* ===== EDIT PAGE VIP STYLE ===== */

.vip-edit-box{
  border-radius: 22px;
  border: 1px solid rgba(255, 191, 0, 0.25);
  box-shadow:
    0 0 25px rgba(255, 191, 0, 0.08),
    0 0 60px rgba(255, 191, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.vip-edit-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 20% 10%, rgba(255,191,0,0.22), transparent 45%),
              radial-gradient(circle at 80% 90%, rgba(52,152,219,0.15), transparent 55%);
  pointer-events:none;
  filter: blur(10px);
}

/* стрелка (артқа) */
.back-arrow{
  position: absolute;
  left: 20px;
  top: 20px;
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,191,0,0.25);
  color: #ffbf00;

  box-shadow: 0 0 18px rgba(255,191,0,0.12);
  transition: 0.2s ease;
}

/* hover эффект */
.back-arrow:hover{
  transform: translateX(-4px) scale(1.03);
  box-shadow: 0 0 28px rgba(255,191,0,0.22);
}

/* анимация: “билеп тұру” */
.back-arrow i{
  animation: arrowDance 1.4s ease-in-out infinite;
}

@keyframes arrowDance{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

/* Сақтау батырмасы — басты беттегі glow сияқты */
.vip-edit-box button,
.vip-edit-box .btn-save{
  border-radius: 14px;
  border: none;
  background: linear-gradient(90deg, #2d8cff, #4aa3ff);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(52,152,219,0.25);
  transition: 0.2s ease;
}

.vip-edit-box button:hover,
.vip-edit-box .btn-save:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(52,152,219,0.35);
}
/* ===== VIP CARD ===== */
.vip-card {
  border: 1px solid #ffbf00;
  box-shadow: 0 0 25px rgba(255,191,0,0.18);
}

.vip-card:hover {
  box-shadow: 0 0 40px rgba(255,191,0,0.35);
  transform: translateY(-4px);
}
/* VIP style tokens */
:root{
  --vip-gold: #d7a21b;
  --bg: #0b0f12;
  --panel: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.10);
}

/* Бірдей панель (барлық форма/пікір/өзгерту бетіне) */
.panel-vip{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}

/* VIP алтын контур (VIP карточка сияқты) */
.vip-outline{
  border: 1px solid rgba(215,162,27,.65);
  box-shadow: 0 0 0 1px rgba(215,162,27,.20), 0 0 30px rgba(215,162,27,.10);
}

/* Header ішіндегі back батырма style */
.back-btn{
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(215,162,27,.35);
  background: rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}

/* Input/textarea бір стиль */
.input-vip, .textarea-vip, .select-vip{
  width:100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
}

.textarea-vip{
  min-height: 120px;   /* ең бастысы: алып қара қылып қоймаймыз */
  resize: vertical;
}

.input-vip:focus, .textarea-vip:focus, .select-vip:focus{
  border-color: rgba(215,162,27,.55);
  box-shadow: 0 0 0 3px rgba(215,162,27,.12);
}

/* Пікір блогы компакт болсын */
.comment-box{
  margin-top: 14px;
  padding: 14px;
}
.comment-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top: 12px;
}
/* ===== VIP GOLD GLOW (сырты толық алтын) ===== */
.vip-outline{
  border: 1px solid rgba(215,162,27,.85);
  box-shadow:
    0 0 0 1px rgba(215,162,27,.35),
    0 0 28px rgba(215,162,27,.18),
    0 0 70px rgba(215,162,27,.12);
  animation: vipGlow 2.6s ease-in-out infinite;
}

@keyframes vipGlow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(215,162,27,.30),
      0 0 22px rgba(215,162,27,.14),
      0 0 60px rgba(215,162,27,.10);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(215,162,27,.45),
      0 0 34px rgba(215,162,27,.22),
      0 0 85px rgba(215,162,27,.16);
  }
}

/* ===== Back button (стрелка) — сары + animation ===== */
.back-btn{
  width:46px;height:46px;
  border-radius:14px;
  border: 1px solid rgba(215,162,27,.65);
  background: rgba(0,0,0,.30);
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 0 20px rgba(215,162,27,.18);
  animation: backPulse 1.6s ease-in-out infinite;
}
.back-btn i, .back-btn svg{
  color: #d7a21b;
  filter: drop-shadow(0 0 10px rgba(215,162,27,.35));
}
@keyframes backPulse{
  0%,100%{ transform: translateX(0) scale(1); }
  50%{ transform: translateX(-2px) scale(1.05); }
}

/* ===== WhatsApp / Phone — анимация (pulse) ===== */
.contact-bar a{
  position: relative;
  border-radius: 16px;
  overflow: visible;
}

.pulse{
  animation: iconPulse 1.35s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(215,162,27,.0);
}
@keyframes iconPulse{
  0%{
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(215,162,27,.0);
  }
  50%{
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 0 10px rgba(215,162,27,.10);
  }
  100%{
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(215,162,27,.0);
  }
}

/* Батырма hover-ы */
.contact-bar a:hover{
  transform: translateY(-2px);
  transition: .18s ease;
  box-shadow: 0 0 22px rgba(215,162,27,.20);
}
.pulse {
   animation: iconPulse 1.4s ease-in-out infinite;
}

@keyframes iconPulse {
   0%,100% { transform: scale(1); }
   50% { transform: scale(1.08); }
}
/* WhatsApp icon force */
.wa-bg i{
  color:#fff !important;
  font-size:24px !important;
  line-height:1 !important;
}
.call-bg i{
  color:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
}
/* ===== LUXURY CARD ===== */
.luxury-card{
  border: 2px solid rgba(215,162,27,0.95);
  border-radius: 18px;
  position: relative;
  overflow: visible;

  box-shadow:
    0 0 0 1px rgba(215,162,27,.6),
    0 0 45px rgba(215,162,27,.35),
    0 0 90px rgba(215,162,27,.20);

  transition: 0.3s ease;
}

.luxury-card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(215,162,27,.8),
    0 0 60px rgba(215,162,27,.45),
    0 0 120px rgba(215,162,27,.30);
}

/* Diamond белгі */
.luxury-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:#d7a21b;
  color:black;
  padding:6px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:6px;
  animation: luxuryPulse 1.8s ease-in-out infinite;
}

@keyframes luxuryPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* Luxury баға алтын болсын */
.luxury-card .price{
  color:#d7a21b !important;
  font-weight:900;
}
.luxury-card {
  border: 1px solid #ffbf00;
  box-shadow: 0 0 30px rgba(255,191,0,0.25);
  position: relative;
}

.luxury-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ffbf00;
  color: #000;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
}
/* ===== VIP ===== */
.vip-card{
  border: 1px solid rgba(255,191,0,.55);
  box-shadow: 0 0 22px rgba(255,191,0,.10);
}
.vip-card:hover{
  box-shadow: 0 0 36px rgba(255,191,0,.18);
}

/* ===== LUXURY (VIP-тен мықтырақ) ===== */
.luxury-card{
  border: 1px solid rgba(215,162,27,.9);
  box-shadow:
    0 0 0 1px rgba(215,162,27,.35),
    0 0 28px rgba(215,162,27,.18),
    0 0 70px rgba(215,162,27,.12);
}
.luxury-card:hover{
  box-shadow:
    0 0 0 1px rgba(215,162,27,.45),
    0 0 38px rgba(215,162,27,.25),
    0 0 90px rgba(215,162,27,.16);
}

/* badge */
.luxury-badge{
  position:absolute;
  top:10px; left:10px;
  background:#d7a21b;
  color:#000;
  padding:6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:6px;
}
.car-card{ position: relative; }
/* ===== VIP ===== */
.vip-card{
  border: 1px solid rgba(255,191,0,.55);
  box-shadow: 0 0 22px rgba(255,191,0,.10);
}
.vip-card:hover{
  box-shadow: 0 0 36px rgba(255,191,0,.18);
}

/* ===== LUXURY (VIP-тен мықтырақ) ===== */
.luxury-card{
  border: 1px solid rgba(215,162,27,.9);
  box-shadow:
    0 0 0 1px rgba(215,162,27,.35),
    0 0 28px rgba(215,162,27,.18),
    0 0 70px rgba(215,162,27,.12);
}
.luxury-card:hover{
  box-shadow:
    0 0 0 1px rgba(215,162,27,.45),
    0 0 38px rgba(215,162,27,.25),
    0 0 90px rgba(215,162,27,.16);
}

/* badge */
.luxury-badge{
  position:absolute;
  top:10px; left:10px;
  background:#d7a21b;
  color:#000;
  padding:6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:6px;
}
.car-card{ position: relative; }
.luxury-row{
  color:#ffbf00;
  font-weight:700;
}
.luxury-row i{
  color:#ffbf00;
  margin-right:8px;
}
.checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
}

.checkbox-row input{
  width:18px;
  height:18px;
  accent-color:#d7a21b;
}

.luxury-row label{
  color:#d7a21b;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
}
/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:30px 20px;}
.car-img{width:100%;height:180px;object-fit:cover;display:block;}
.section-title{margin:15px 0 10px;color:#fff;font-weight:800;letter-spacing:1px;}
.vip-title{opacity:.9}
.luxury-title{opacity:.95}

/* ===== Header ===== */


.logo{cursor:pointer;font-size:22px;font-weight:800;color:#fff;user-select:none;}
.header-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;}
.btn-glow{padding:10px 16px;border-radius:999px;background:#1e7bd8;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 0 18px rgba(58,167,255,.35);}
.btn-glow:hover{filter:brightness(1.05)}
.lang-switch{display:flex;flex-direction:column;line-height:1.1;border-left:1px solid #333;padding-left:12px}
.lang-switch a{font-size:10px;font-weight:800;text-decoration:none;color:#777}
.lang-switch a.active{color:#fff}

/* ҚОЛ ТИГІЗБЕУ: header/login style үшін керек */
.auth-links{display:flex;gap:12px}
.auth-links a{color:#cfcfcf;text-decoration:none;font-weight:600}
.auth-links a:hover{color:#fff}

/* ===== Search ===== */
.search-wrap{display:flex;justify-content:center;margin:20px 0 35px;}
.search-form{display:flex;align-items:center;width:100%;max-width:700px;background:#141414;border:2px solid #222;border-radius:999px;padding:6px 18px;box-shadow:0 0 18px rgba(58,167,255,.12);}
.search-input{flex:1;background:transparent;border:none;outline:none;color:#fff;padding:14px 10px;font-size:16px;}
.search-btn{background:transparent;border:none;color:#3aa7ff;font-weight:800;font-size:16px;cursor:pointer;padding:0 10px}

/* ===== Categories ===== */
.cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px;}
.cat-btn{padding:10px 14px;border-radius:999px;background:#1a1a1a;border:1px solid #2b2b2b;color:#ddd;text-decoration:none;font-weight:700}
.cat-btn.active{border-color:#3aa7ff;box-shadow:0 0 14px rgba(58,167,255,.25);color:#fff}

/* ===== Grids ===== */

.car-card{background:#171717;border:1px solid #242424;border-radius:18px;overflow:hidden;cursor:pointer;transition:.2s;position:relative;}
.car-card:hover{transform:translateY(-2px);border-color:#2d2d2d;}
.car-card-body{padding:12px 14px;}
.car-card-body h3{margin:0 0 8px;color:#fff;font-size:16px;}
.price{margin:0;color:#20d56b;font-weight:900;font-size:16px}

/* ===== VIP ===== */
.vip-card{border:1px solid rgba(255,193,7,.35);box-shadow:0 0 26px rgba(255,193,7,.22);}
.vip-badge{position:absolute;top:10px;left:10px;background:#f2b400;color:#111;font-weight:900;font-size:12px;padding:5px 10px;border-radius:999px}

/* ===== LUXURY (күштірек алтын glow) ===== */
.luxury-card{
  border:1px solid rgba(255,215,0,.55);
  box-shadow:0 0 38px rgba(255,215,0,.28);
}
.luxury-badge{
  position:absolute;top:10px;left:10px;
  background:linear-gradient(90deg,#ffd54a,#ffb300);
  color:#111;font-weight:900;font-size:12px;
  padding:6px 12px;border-radius:999px;
  animation:luxPulse 1.2s infinite;
}
@keyframes luxPulse{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
  50%{transform:scale(1.06);box-shadow:0 0 18px rgba(255,215,0,.35)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
}

/* ===== Action icons ===== */
.action-icons-row{display:flex;gap:14px;margin-top:10px;}
.action-icons-row a{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#101010;border:1px solid #232323;
  color:#ddd;text-decoration:none;
}
.action-icons-row a:hover{border-color:#3aa7ff;color:#fff;box-shadow:0 0 14px rgba(58,167,255,.22);}
.action-icons-row .fa-whatsapp{color:#28d366}
.action-icons-row .fa-trash{color:#ff4d4d}

/* ===== Ad slots ===== */
.ad-slot{
  margin:18px 0;
  border:1px dashed #2d2d2d;
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.03);
}
.ad-title{color:#fff;font-weight:900;font-size:16px;margin-bottom:6px}
.ad-sub{color:#aaa;font-size:13px}
.ad-self{box-shadow:0 0 18px rgba(58,167,255,.10)}
.ad-partner{box-shadow:0 0 18px rgba(255,215,0,.10)}
.cars-grid.vip-grid,
.cars-grid.luxury-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}

.cars-grid.vip-grid .car-card,
.cars-grid.luxury-grid .car-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* ===== Header ===== */
.topbar {
  position: sticky;
  top: 0px;
  z-index: 9999;
  background: rgba(15, 15, 18, 0.95);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 10px 0;
}

.topbar.shrink {
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.topbar .topbar-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.topbar .brand {
  transition: transform 0.3s ease;
}

.topbar.shrink .brand {
  transform: scale(0.94);
}
.auth{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:12px;
}
.brand{font-size:22px;font-weight:800;color:#fff;cursor:pointer;user-select:none;}
.brand-blue{color:#3498db;}
.topbar-right{display:flex;align-items:center;gap:18px;}
.lang{display:flex;flex-direction:column;font-size:10px;border-left:1px solid #444;padding-left:14px;line-height:1.2;}
.lang a{color:#777;text-decoration:none;font-weight:800}
.lang a.on{color:#fff}
.auth{display:flex;gap:14px;white-space:nowrap}
.auth a{color:#ddd;text-decoration:none;font-size:14px}



.cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px;}
.cat-btn{
  padding:10px 16px;border-radius:999px;
  background:#141414;border:1px solid #2a2a2a;color:#ddd;text-decoration:none;
}
.cat-btn.active{border-color:#3498db;box-shadow:0 0 14px rgba(52,152,219,.25)}

/* ===== Grid ===== */
.cars-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  margin-bottom:24px;
}
@media (max-width:1100px){ .cars-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:780px){ .cars-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cars-grid{grid-template-columns:repeat(1,1fr);} }

.car-card{
  background:#1b1b1b;
  border:1px solid #2b2b2b;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:.2s;
  min-height:320px;
}
.car-card:hover{transform:translateY(-2px);}

.car-card img{width:100%;height:180px;object-fit:cover;display:block;}
.car-card-body{padding:14px 14px 12px;}
.car-card-body h3{margin:0 0 8px 0;color:#fff;font-size:16px;}
.price{margin:0;color:#00d26a;font-weight:900;letter-spacing:.2px}

/* ===== Icons row ===== */
.action-icons-row{
  display:flex;gap:12px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.action-icons-row a{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  background:#121212;border:1px solid #2a2a2a;color:#ddd;
}
.action-icons-row a:hover{filter:brightness(1.1);}
.action-icons-row .fa-whatsapp{color:#20c764;}
.action-icons-row .fa-trash{color:#ff4d4d;}

/* ===== Titles ===== */
.section-title{
  font-weight:900;color:#fff;
  margin:10px 0 12px 0;
  letter-spacing:.5px;
}
.luxury-title{color:#ffd24a;}

/* ===== VIP ===== */
.vip-card{
  border:1px solid rgba(255,215,0,.55);
  box-shadow:0 0 26px rgba(255,215,0,.18);
}
.vip-badge{
  position:absolute;
  margin:10px;
  padding:6px 10px;
  border-radius:999px;
  background:#f4b400;
  color:#111;
  font-weight:900;
  font-size:12px;
}
.car-card{position:relative;}

/* ===== LUXURY (stronger than VIP) ===== */
.luxury-card{
  border:1px solid rgba(255,215,0,.95);
  box-shadow:0 0 45px rgba(255,215,0,.35);
}
.luxury-badge{
  position:absolute;
  margin:10px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,215,0,.14);
  border:1px solid rgba(255,215,0,.85);
  color:#ffd24a;
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  animation:luxPulse 1.2s infinite;
}
@keyframes luxPulse{
  0%{transform:scale(1); box-shadow:0 0 0 rgba(255,215,0,.0);}
  50%{transform:scale(1.05); box-shadow:0 0 22px rgba(255,215,0,.35);}
  100%{transform:scale(1); box-shadow:0 0 0 rgba(255,215,0,.0);}
}

/* ===== Ads ===== */
.ad-slot{
  margin:18px 0;
  border:1px dashed #2d2d2d;
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.03);
}
.ad-title{color:#fff;font-weight:900;font-size:16px;margin-bottom:6px}
.ad-sub{color:#aaa;font-size:13px}
.ad-self{box-shadow:0 0 18px rgba(58,167,255,.10)}
.ad-partner{box-shadow:0 0 18px rgba(255,215,0,.10)}
/* ====== GRID FIX (бәрі 4 колонка болып тұру үшін) ====== */


.vip-grid, .luxury-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}



/* Карточка өлшемі “кішірейіп кетпесін” */
.car-card{
    width: 100%;
    max-width: none;
}

/* ====== VIP (алтын glow – жұмсақ) ====== */
.vip-card{
  border: 1px solid rgba(255, 215, 0, .35);
  box-shadow: 0 0 18px rgba(255, 215, 0, .18);
}

/* ====== LUXURY (алтын glow – қаттырақ + pulse badge) ====== */
.luxury-card{
  border: 1px solid rgba(255, 215, 0, .65);
  box-shadow:
    0 0 22px rgba(255, 215, 0, .35),
    0 0 60px rgba(255, 215, 0, .18);
}

/* LUXURY badge (анимация) */
.luxury-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(90deg, #ffcc00, #ffd966, #ffcc00);
  color: #1a1a1a;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 1px;
  box-shadow: 0 0 18px rgba(255, 215, 0, .55);
  animation: luxuryPulse 1.25s infinite ease-in-out;
  text-transform: uppercase;
}

@keyframes luxuryPulse{
  0%   { transform: scale(1);   filter: brightness(1); }
  50%  { transform: scale(1.08); filter: brightness(1.25); }
  100% { transform: scale(1);   filter: brightness(1); }
}

/* VIP badge аздап тыныш */
.vip-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ffcc00;
  color: #1a1a1a;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
}

/* ====== Section title (VIP / LUXURY жазулары) ====== */
.section-title{
  margin: 16px 0 8px;
  color: #ddd;
  font-weight: 800;
  letter-spacing: 1px;
}
/* ===== TOP ROW: VIP + LUXURY + ADS in one line ===== */
.top-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap:22px;
  align-items:start;
  margin-bottom: 30px;
}

@media (max-width: 1100px){
  .top-row{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 650px){
  .top-row{ grid-template-columns: 1fr; }
}

/* VIP/LUXURY grids should NOT create their own big grid */
.vip-grid, .luxury-grid{
  display: contents; /* басты трюк: ішіндегі карточкалар top-row grid-ке бағынады */
}

/* Luxury айырмасы */
.luxury-card{
  border:1px solid rgba(255,215,0,.45);
  box-shadow: 0 0 25px rgba(255,215,0,.18);
}
.luxury-badge{
  position:absolute;
  top:12px; left:12px;
  background:#ffdd00;
  color:#111;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  display:flex;
  gap:6px;
  align-items:center;
}
.vip-card {
    border: 1px solid #ffd700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
}

.vip-card:hover {
    border: 1px solid #3aa0ff;
    box-shadow: 0 0 30px rgba(58, 160, 255, 0.6);
    transform: translateY(-5px);
}
/* ===== FIX PRIORITY ===== */

.vip-card {
    border: 1px solid #e6b800;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.luxury-card {
    border: 1px solid #ffd700;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.7),
        0 0 60px rgba(255, 215, 0, 0.4);
}

.luxury-card:hover {
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.9),
        0 0 80px rgba(255, 215, 0, 0.6);
    transform: translateY(-6px) scale(1.02);
}


.luxury-card svg {
    fill: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}
/* ===== LUXURY CROWN GOLD ===== */

.luxury-card .fa-crown {
    color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}


.ad-stack{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.ad-box{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 18px;
  min-height: 120px;
}

.ad-title{
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.ad-sub{
  margin-top: 6px;
  opacity: .75;
  font-size: 14px;
}

/* адаптив */
@media (max-width: 980px){
  .top-grid{ grid-template-columns: 1fr; }
}
.vip-stars i{
  color: gold;
  margin-right: 2px;
  font-size: 14px;
}
.vip-star{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.25);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.vip-star i{
  color: gold;
  font-size: 14px;
  transition: transform .18s ease, filter .18s ease;
}

.vip-star:hover{
  transform: translateY(-2px) scale(1.06);
  background: rgba(255, 215, 0, 0.14);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
}

.vip-star:hover i{
  transform: rotate(-10deg) scale(1.15);
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}
/* VIP star */
.vip-star i{
  color:#ffd54a;
  filter: drop-shadow(0 0 8px rgba(255,213,74,.75));
}

/* LUX crown */
.lux-crown i{
  color:#ffcc33;
  filter: drop-shadow(0 0 12px rgba(255,204,51,.9));
}

/* VIP card glow (қайта) */
.vip-card{
  border:1px solid rgba(255, 215, 0, .55);
  box-shadow: 0 0 25px rgba(255, 215, 0, .35);
}
.luxury-card{
  border:1px solid rgba(255, 204, 51, .55);
  box-shadow: 0 0 28px rgba(255, 204, 51, .35);
}
.vip-star{
  color:#ffd54a;
  filter: drop-shadow(0 0 8px rgba(255,213,74,.75));
}

.lux-crown{
  color:#ffcc33;
  filter: drop-shadow(0 0 12px rgba(255,204,51,.9));
}
/* VIP glow */
.vip-card{
  border:1px solid #ffd54a;
  box-shadow:0 0 20px rgba(255,213,74,0.6);
}

/* LUXURY glow (күштірек) */
.luxury-card{
  border:1px solid #ffcc33;
  box-shadow:0 0 35px rgba(255,204,51,0.9);
}
/* VIP/LUX card glow */
.vip-card { box-shadow: 0 0 22px rgba(255, 215, 0, .35); border: 1px solid rgba(255,215,0,.55); }
.luxury-card { box-shadow: 0 0 26px rgba(255, 215, 0, .45); border: 1px solid rgba(255,215,0,.65); }

/* STAR / CROWN look */
.vip-star i, .lux-crown i { color: #FFD700; }
.vip-star, .lux-crown { display:inline-flex; align-items:center; justify-content:center; }

.vip-star i { filter: drop-shadow(0 0 8px rgba(255,215,0,.65)); }
.lux-crown i { filter: drop-shadow(0 0 10px rgba(255,215,0,.75)); }
.top-grid{
  margin-bottom: 35px;   /* VIP блоктан кейін тыныс */
}

.ad-stack{
  margin-bottom: 40px;   /* Жарнамадан кейін тыныс */
}
.vip-ad{
  border: 1px solid #ffd54a;
  box-shadow: 0 0 30px rgba(255,213,74,0.6);
  background: linear-gradient(145deg,#1a1a1a,#111);
}

.vip-ad .ad-title{
  color:#ffd54a;
  font-weight:600;
}
/* 1) Екі жарнаманың арасы ашылсын */
.ad-stack{
  display: flex;
  flex-direction: column;
  gap: 22px;           /* <-- МІНЕ ОСЫ жабысып қалмауы үшін */
}

/* Егер gap әсер етпесе, қосымша қауіпсіздік */
.vip-ad{
  margin-bottom: 0;    /* өзі gap береді */
}

/* 2) VIP жарнама "жай қозғалып тұрсын" (float/pulse) */
.vip-ad{
  position: relative;
  animation: vipFloat 4.5s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Жұмсақ көтеріліп-түсу */
@keyframes vipFloat{
  0%, 100%{
    transform: translateY(0);
    box-shadow: 0 0 30px rgba(255,213,74,0.45);
  }
  50%{
    transform: translateY(-6px);
    box-shadow: 0 0 45px rgba(255,213,74,0.75);
  }
}

/* Қаласаң үстінен "жарық жүгіріп" өтетін эффект */
.vip-ad::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,213,74,0.15) 45%,
    rgba(255,213,74,0.35) 50%,
    rgba(255,213,74,0.15) 55%,
    transparent 100%);
  transform: translateX(-60%);
  animation: vipShine 5.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes vipShine{
  0%{ transform: translateX(-60%); opacity: .2; }
  45%{ opacity: .35; }
  100%{ transform: translateX(60%); opacity: .15; }
}
/* ПРОСТОЙ ЖАРНАМА (көк стиль) */
.simple-ad{
  border: 1px solid rgba(0,123,255,0.6);
  box-shadow: 0 0 25px rgba(0,123,255,0.35);
  transition: all .3s ease;
}

/* Жай дем алып тұрған эффект */
.simple-ad{
  animation: bluePulse 5s ease-in-out infinite;
}

@keyframes bluePulse{
  0%,100%{
    box-shadow: 0 0 20px rgba(0,123,255,0.3);
  }
  50%{
    box-shadow: 0 0 35px rgba(0,123,255,0.6);
  }
}
.vip-ad{
  margin-bottom: 35px;
  padding-bottom: 10px;
}
/* ===== DESKTOP GRID ===== */
/* ===== TOP GRID (VIP + LUXURY) ===== */
.top-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 28px;                 /* VIP/LUXURY арасы ашылады */
  max-width: 1200px;
  margin: 18px auto 40px auto;
  padding: 0 12px;
}



/* ===========================
   MOBILE RESPONSIVE PACK
   (телефонда бәрі өзі сыйады)
   =========================== */
@media (max-width: 480px){

  /* Header: AvtoKZ + Жарнама қосу + тіл/кіру */
  .topbar-inner{
    flex-wrap: wrap;
    gap: 10px;
  }

  .brand{
    flex: 1 1 auto;
    min-width: 120px;
  }

  .topbar-right{
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }

  .btn-glow{
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 14px;
    white-space: nowrap;
  }

  .lang a, .auth a{
    font-size: 12px;
    padding: 6px 8px;
    white-space: nowrap;
  }

  
  /* Категориялар: екі қатарға әдемі түссін */
  .cats{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0 12px;
  }

  .cat-btn{
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 18px;
    white-space: nowrap;
  }

  /* Карточкалар: 1 колонка (телефонда ең дұрыс) */
  @media (max-width: 480px){
  .top-grid, .cars-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 12px;
  }
}

  /* Жарнама блоктары бір-бірінен ажырап тұрсын */
  .ad-box{
    margin-top: 12px;
  }
}
/* =========================
   MOBILE FIX (<= 480px)
   ========================= */
@media (max-width: 480px) {

  /* HEADER: бәрі жабыспасын */
  .topbar .topbar-inner{
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }

  /* Лого кішірейеді */
  .brand{
    font-size: 22px;
    line-height: 1;
  }

  /* Оң жақ блок (Жарнама қосу, тіл, кіру, тіркелу) */
  .topbar-right{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
  }

  /* Жарнама қосу батырмасы — жеке қатарға түсіп, ортасына тұрады */
  .topbar-right .btn-glow{
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 999px;
  }

  /* Тіл/кіру/тіркелу — кішірейеді */
  .topbar-right a:not(.btn-glow){
    font-size: 13px;
    padding: 6px 8px;
  }

  /* Егер сенде тіл pill-дары болса (KAZ/RUS) */
  .topbar-right .pill{
    font-size: 12px;
    padding: 6px 8px;
  }

  /* SEARCH: Іздеу + Табу сыйсын */
  .search-bar, .search-wrap, .search-box{
    width: 100%;
  }

  
  /* Категория pills — автоматты оралып тұрсын */
 @media (max-width: 768px){
    .categories{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 10px 8px 10px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .categories::-webkit-scrollbar{
        display: none;
    }

    .categories .cat-btn{
        flex: 0 0 auto;
    }
}

  .categories a, .cats a, .category-row a{
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Жарнама блоктары бір-біріне жабыспасын */
  .ad-box{
    margin: 14px 0;
  }
}
/* ===== Mobile language text fix ===== */
@media (max-width: 480px){

  .topbar-right{
    font-weight: 500;   /* бұрын 700 сияқты жуан болып тұр */
  }

  .topbar-right a{
    letter-spacing: 0.5px;
    font-size: 13px;
  }

}
@media (max-width: 480px){

  .search-bar input{
    border: 1px solid rgba(255,255,255,0.15);
  }

}
.topbar-right a{
  font-weight: 400;
}

  .btn-glow{
    width: 85%;
    margin: 0 auto;
    display: block;
  }


.btn-glow{
  max-width: max-content;
}
@media (max-width: 480px) {

  .page {
    padding: 0 12px;
  }

  .topbar-inner {
    padding: 0 10px;
  }

  .cars-grid {
    grid-template-columns: 1fr;
  }

}


/* ===== LUXURY жұмсақ pulse ===== */

@keyframes luxuryPulse {
  0% {
    box-shadow:
      0 0 10px rgba(255,215,0,0.25),
      0 0 28px rgba(255,215,0,0.15);
  }
  50% {
    box-shadow:
      0 0 18px rgba(255,215,0,0.45),
      0 0 55px rgba(255,215,0,0.25);
  }
  100% {
    box-shadow:
      0 0 10px rgba(255,215,0,0.25),
      0 0 28px rgba(255,215,0,0.15);
  }
}

.luxury-card{
  animation: luxuryPulse 3.5s ease-in-out infinite;
}
/* Hover/басқанда pulse тоқтасын — сонда қатты жанады */
.luxury-card:hover{
  animation: none !important;
  border-color: rgba(255, 215, 0, 0.85) !important;
  box-shadow:
    0 0 18px rgba(255,215,0,0.42),
    0 0 55px rgba(255,215,0,0.26) !important;
}
/* Click басқанда тіпті күшті болсын */
.luxury-card:active{
  animation: none !important;
  transform: translateY(-1px) scale(0.995);
  box-shadow:
    0 0 24px rgba(255,215,0,0.55),
    0 0 80px rgba(255,215,0,0.32) !important;
}
/* ===== LUXURY hover супер болсын ===== */

/* Luxury: тұрғанда аздап, hover-де қатты */
.luxury-card{
  border: 1px solid rgba(255,215,0,0.55) !important;
  box-shadow:
    0 0 12px rgba(255,215,0,0.28),
    0 0 36px rgba(255,215,0,0.18) !important;
}

.luxury-card:hover{
  animation: none !important;  /* pulse болса тоқтасын */
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,215,0,0.95) !important;
  box-shadow:
    0 0 28px rgba(255,215,0,0.70),
    0 0 95px rgba(255,215,0,0.40) !important;
}

/* Click басқанда тіпті күштірек */
.luxury-card:active{
  animation: none !important;
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 0 36px rgba(255,215,0,0.85),
    0 0 120px rgba(255,215,0,0.45) !important;
}

/* ===== VIP hover сәл ғана әлсіз болсын (айырма үшін) ===== */
.vip-card:hover{
  box-shadow:
    0 0 14px rgba(255,215,0,0.35),
    0 0 55px rgba(255,215,0,0.20) !important;
}
/* ===== LUXURY: әрдайым pulse + hover-де күшейту (pulse өшпейді) ===== */

@keyframes luxuryPulse {
  0%   { box-shadow: 0 0 12px rgba(255,215,0,.28), 0 0 36px rgba(255,215,0,.18); }
  50%  { box-shadow: 0 0 18px rgba(255,215,0,.42), 0 0 60px rgba(255,215,0,.26); }
  100% { box-shadow: 0 0 12px rgba(255,215,0,.28), 0 0 36px rgba(255,215,0,.18); }
}

@keyframes luxuryBadgePulse {
  0%   { box-shadow: 0 0 6px rgba(255,215,0,.35); }
  50%  { box-shadow: 0 0 12px rgba(255,215,0,.70); }
  100% { box-shadow: 0 0 6px rgba(255,215,0,.35); }
}

.luxury-card{
  border: 1px solid rgba(255,215,0,0.55) !important;
  animation: luxuryPulse 3.5s ease-in-out infinite !important;
  transition: transform .18s ease, border-color .22s ease, filter .22s ease;
}

/* Hover/басқанда: animation тоқтамайды, тек қосымша эффект береміз */
.luxury-card:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,215,0,0.95) !important;
  filter: brightness(1.03);
}

/* Click басқанда тағы сәл күшті */
.luxury-card:active{
  transform: translateY(-2px) scale(1.005);
  filter: brightness(1.06);
}

/* LUXURY badge өзі де “дышит” */
.luxury-card .luxury-badge,
.luxury-badge{
  animation: luxuryBadgePulse 2.8s ease-in-out infinite !important;
  font-weight: 800;
}
/* ===== LUXURY: box-shadow-мен ұрыспайтын, 100% pulse (сыртқы aura қабаты) ===== */

/* Әр түрлі мүмкін селекторлар — сенде қайсысы болса да ұстап алады */
.luxury-card,
.car-card.luxury-card,
.car-card.luxury,
.luxury {
  position: relative;
  border: 1px solid rgba(255,215,0,0.55) !important;
}

/* “Дышать” ететін алтын aura */
.luxury-card::before,
.car-card.luxury-card::before,
.car-card.luxury::before,
.luxury::before{
  content: "";
  position: absolute;
  inset: -8px;              /* сыртқа шығып тұрады */
  border-radius: 22px;      /* карточка радиусына жақын қыл */
  pointer-events: none;
  opacity: .55;

  /* алтын glow қабаты */
  box-shadow:
    0 0 18px rgba(255,215,0,0.35),
    0 0 70px rgba(255,215,0,0.18);

  animation: luxuryAura 3.6s ease-in-out infinite;
}

/* Pulse анимация */
@keyframes luxuryAura{
  0%   { opacity: .40; filter: blur(0px); }
  50%  { opacity: .85; filter: blur(0.2px); }
  100% { opacity: .40; filter: blur(0px); }
}

/* Hover-де одан да күштірек болсын (pulse тоқтамайды!) */
.luxury-card:hover::before,
.car-card.luxury-card:hover::before,
.car-card.luxury:hover::before,
.luxury:hover::before{
  opacity: 1;
  box-shadow:
    0 0 30px rgba(255,215,0,0.65),
    0 0 120px rgba(255,215,0,0.35);
}

/* LUXURY badge-тің өзі де тыныстасын */
.luxury-badge{
  animation: luxuryBadge 2.8s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,215,0,0.45) !important;
  font-weight: 800;
}
@keyframes luxuryBadge{
  0%   { transform: translateY(0);   filter: brightness(1); }
  50%  { transform: translateY(-1px);filter: brightness(1.08); }
  100% { transform: translateY(0);   filter: brightness(1); }
}
/* ===== LUXURY нақты pulse (box-shadow-мен ұрыспайды) ===== */

.luxury-card{
  position: relative;
  z-index: 1;
}

/* Алтын аура қабаты */
.luxury-card::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  pointer-events: none;
  z-index: -1;

  background: radial-gradient(
    ellipse at center,
    rgba(255,215,0,0.45) 0%,
    rgba(255,215,0,0.25) 40%,
    rgba(255,215,0,0.05) 70%,
    transparent 100%
  );

  animation: luxuryGlow 3.5s ease-in-out infinite;
}

@keyframes luxuryGlow{
  0%   { opacity: .35; transform: scale(0.98); }
  50%  { opacity: .85; transform: scale(1.02); }
  100% { opacity: .35; transform: scale(0.98); }
}

/* Hover кезде одан да күштірек */
.luxury-card:hover::after{
  opacity: 1;
  transform: scale(1.04);
}
/* ===== LUXURY: CARD PULSE (карточканың өзіне) ===== */
@keyframes luxCardPulse {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-2px) scale(1.006); }
  100% { transform: translateY(0) scale(1); }
}

.luxury-card{
  animation: luxCardPulse 3.2s ease-in-out infinite !important;
  will-change: transform;
}

/* Hover кезде pulse тоқтамай, күшейсін */
.luxury-card:hover{
  transform: translateY(-3px) scale(1.012) !important;
}

/* ===== LUXURY BADGE PULSE (LUXURY жазуына) ===== */
@keyframes luxBadgePulse2 {
  0%   { filter: brightness(1);   transform: translateY(0); }
  50%  { filter: brightness(1.12);transform: translateY(-1px); }
  100% { filter: brightness(1);   transform: translateY(0); }
}

.luxury-badge{
  animation: luxBadgePulse2 2.2s ease-in-out infinite !important;
  will-change: transform, filter;
}
/* ===== Жай Жарнама (көксіз, сұр-қара) ===== */
.simple-ad,
.ad-slot {               /* сенде қайсысы болса да ұстайды */
  background: #111 !important;
  border: 2px solid #2a2a2a !important;
  border-radius: 20px;
  padding: 40px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}

.simple-ad:hover,
.ad-slot:hover {
  border-color: #3a3a3a !important;
  box-shadow: 0 0 28px rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

/* ===== ЖАЙ ЖАРНАМА: көкті өшіріп, размерді кішірейту ===== */
/* (Қай класс болса да ұстап алады) */
.simple-ad,
.ad-slot,
.ad-box,
.simple-ad-box,
#simple-ad {
  background: #111 !important;
  border: 2px solid #2a2a2a !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;   /* КӨКТІ ӨШІРЕДІ */
  border-radius: 22px !important;

  padding: 18px 22px !important;               /* РАЗМЕРДІ КІШІРЕЙТЕДІ */
  min-height: 160px !important;                /* тым биік болып кетпесін */
}

/* Hover-та да көк жанбасын */
.simple-ad:hover,
.ad-slot:hover,
.ad-box:hover,
.simple-ad-box:hover,
#simple-ad:hover {
  border-color: #3a3a3a !important;
  box-shadow: 0 0 22px rgba(255,255,255,0.05) !important;  /* жеңіл сұр glow */
}
.simple-ad,
.ad-slot,
.ad-box,
.simple-ad-box {
  outline: none !important;
  filter: none !important;
}
/* ===== ЖАЙ ЖАРНАМА (көк неонды өшіреміз) ===== */
.ad-box.simple-ad{
  border: 1px solid #2b2b2b !important;   /* көк емес, сұр */
  box-shadow: 0 0 0 rgba(0,0,0,0) !important; /* көк неонды нөл қыламыз */
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.15)) !important;

  /* размері үлкейіп кетпесін */
  min-height: 140px;        /* керек болса 120-160 арасында ойна */
  padding: 26px 30px;
  margin-top: 26px;
  border-radius: 22px;
}

/* Hover болса — өте жеңіл “металл” эффект (көк емес) */
.ad-box.simple-ad:hover{
  border-color: #3a3a3a !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Тақырып/сабтайтл түсі VIP сияқты айқайламасын */
.ad-box.simple-ad .ad-title{
  color: #e8e8e8;
}
.ad-box.simple-ad .ad-sub{
  color: rgba(255,255,255,0.55);
}
/* ===== SIMPLE AD – Premium Dark ===== */
.ad-box.simple-ad{
  background: linear-gradient(145deg, #0f1115, #14181f);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 
      0 10px 40px rgba(0,0,0,0.6),
      inset 0 0 20px rgba(255,255,255,0.02);
  border-radius: 22px;
  padding: 28px 34px;
  min-height: 150px;
  transition: 0.3s ease;
}

/* Hover – өте жеңіл тірілу */
.ad-box.simple-ad:hover{
  border-color: rgba(255,255,255,0.12);
  box-shadow: 
      0 20px 60px rgba(0,0,0,0.8),
      inset 0 0 25px rgba(255,255,255,0.03);
}

/* текст */
.ad-box.simple-ad .ad-title{
  color: #f1f1f1;
  font-size: 20px;
}

.ad-box.simple-ad .ad-sub{
  color: rgba(255,255,255,0.55);
}
/* ЖАЙ ЖАРНАМА — қысқа, жинақы */
.ad-box.simple-ad{
  padding: 18px 26px;      /* бұрынғыдан аз */
  min-height: 110px;       /* биіктігін қысқарт */
  height: auto;            /* міндетті түрде */
}
.vip-star-btn {
  font-size: 22px;
  color: gold;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
  display: inline-block;
}

.vip-star-btn:hover {
  transform: rotate(-20deg) scale(1.2);
  text-shadow: 0 0 10px gold, 0 0 20px gold;
}

.vip-star-btn:active {
  transform: rotate(15deg) scale(0.95);
}
.vip-star-wrapper {
    position: absolute;
    bottom: 20px;
    left: 20px; /* оң жақ керек болса right:20px; */
    
    width: 45px;
    height: 45px;
    
    background: #111;
    border-radius: 12px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    transition: 0.2s ease;
}

.vip-star-wrapper i {
    color: gold;
    font-size: 18px;
}

.vip-star-wrapper:hover {
    transform: rotate(-15deg) scale(1.1);
    box-shadow: 0 0 20px gold;
}
.simple-pen-wrapper {
    position: absolute;
    bottom: 20px;
    left: 20px;

    width: 45px;
    height: 45px;

    background: #111;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
    transition: 0.2s ease;
}

.simple-pen-wrapper i {
    color: #00b4ff;
    font-size: 18px;
}

.simple-pen-wrapper:hover {
    transform: rotate(-15deg) scale(1.1);
    box-shadow: 0 0 20px #00b4ff;
}
.ad-box {
    position: relative;
}
.ad-btn.vip-btn,
.ad-btn.simple-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
}

.ad-box .ad-btn.vip-btn,
.ad-box .ad-btn.simple-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
}
.ad-box.vip-ad a.ad-btn,
.ad-box.simple-ad a.ad-btn{
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
  padding: 0 !important;
  min-width: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
}
/* Жарнама батырмалары (VIP жұлдыз + жай перо) */
.vip-star-wrapper,
.simple-pen-wrapper{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);

  font-size: 16px;     /* иконка өлшемі */
  text-decoration: none;
}

/* VIP (алтын glow) */
.vip-star-wrapper{
  box-shadow: 0 0 14px rgba(255, 200, 0, 0.35);
}

/* Simple (көк ұнамай тұр дедің — сұр/қара қыламыз) */
.simple-pen-wrapper{
  box-shadow: 0 0 14px rgba(180, 180, 180, 0.18);
}
.ad-btn.vip-btn,
.ad-btn.simple-btn{
  width: 42px;
  height: 42px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
/* ====== VIP star + Simple pen buttons (ad blocks) ====== */
.vip-star-wrapper,
.simple-pen-wrapper{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,215,0,0.35);

  text-decoration: none;     /* көк сызық кетеді */
  color: #f7c600;            /* әдепкі көк емес, алтын */
  box-shadow: 0 0 10px rgba(255,215,0,0.25);
}

/* Иконканың түсі ата-анадан алсын */
.vip-star-wrapper i,
.simple-pen-wrapper i{
  font-size: 18px;
  color: inherit;
}

/* hover эффект */
.vip-star-wrapper:hover,
.simple-pen-wrapper:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(255,215,0,0.35);
}

/* Simple (қарапайым) жарнамада көк емес – сұр/алтын аралас қылайық */
.simple-pen-wrapper{
  border: 1px solid rgba(180,180,180,0.25);
  color: #cfcfcf;
  box-shadow: 0 0 10px rgba(255,255,255,0.08);
}
.simple-pen-wrapper:hover{
  box-shadow: 0 0 14px rgba(255,255,255,0.12);
}
.ad-box{ position: relative; }

.vip-star-wrapper,
.simple-pen-wrapper{
  position: absolute;
  left: 18px;
  bottom: 16px;
}
.vip-star-wrapper, .simple-pen-wrapper{
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(255,215,0,0.35) !important;

  text-decoration: none !important;
  color: #f7c600 !important;
  box-shadow: 0 0 10px rgba(255,215,0,0.25) !important;
}

.vip-star-wrapper i, .simple-pen-wrapper i{
  font-size: 18px !important;
  color: inherit !important;
}
.ad-box .ad-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vip-star-wrapper,
.simple-pen-wrapper{
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  background: #121212 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.vip-star-wrapper i,
.simple-pen-wrapper i{
  font-size: 16px !important;
}
/* ===== VIP / SIMPLE AD SLOTS ===== */
.ad-slot{
  position: relative;              /* маңызды! */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-radius: 18px;
}

.ad-slot-text{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ad-slot-title{
  font-weight: 800;
  font-size: 22px;
}

.ad-slot-sub{
  opacity: 0.7;
  font-size: 14px;
}

.ad-slot-icon{
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.vip-slot .ad-slot-icon i{ font-size: 18px; }
.simple-slot .ad-slot-icon i{ font-size: 18px; }
/* ===== AD BOX FIX ===== */
.ad-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
}

.ad-box .ad-title,
.ad-box .ad-sub{
  margin: 0;
}

.ad-box a.ad-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 12px;
}
/* ===== Shared VIP Icon Button (same everywhere) ===== */
.vip-icon-btn{
  width: 45px;
  height: 45px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.08),
    0 0 22px rgba(255, 215, 0, 0.35);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.vip-icon-btn i{
  color: #f7c400;
  font-size: 18px;
  filter: drop-shadow(0 0 10px rgba(247,196,0,.45));
}

/* hover/click -> оңға жылжысын */
.vip-icon-btn:hover{
  transform: translateX(6px);
}

.vip-icon-btn:active{
  transform: translateX(10px) scale(0.98);
}

/* Mobile: hover болмайды, тек басқанда қозғалады */
@media (max-width: 768px){
  .vip-icon-btn:hover{ transform: none; }
  .vip-icon-btn:active{ transform: translateX(10px) scale(0.98); }
}
/* ===== SIMPLE AD ICON (VIP style copy) ===== */
.simple-ad .ad-btn{
  width: 45px;
  height: 45px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(58,160,255,0.25);
  box-shadow:
    0 0 0 1px rgba(58,160,255,0.08),
    0 0 22px rgba(58,160,255,0.35);

  transition: transform .18s ease, box-shadow .18s ease;
}

.simple-ad .ad-btn i{
  color: #3aa0ff;
  font-size: 18px;
  filter: drop-shadow(0 0 10px rgba(58,160,255,.45));
}

/* Қимыл */
.simple-ad .ad-btn:hover{
  transform: translateX(6px);
}

.simple-ad .ad-btn:active{
  transform: translateX(10px) scale(0.98);
}

.ad-box{ position: relative; padding: 26px 26px 70px; }
.ad-box .ad-btn{ position: absolute; right: 18px; bottom: 16px; }
/* ===== AD BOX SIZE FIX (VIP үлкен болып кетпесін) ===== */
.ad-box.vip-ad,
.ad-box.simple-ad{
  padding: 26px 26px;        /* бұрынғы норм размер */
  min-height: 140px;         /* біркелкі, бірақ алып кетпейді */
}

/* Иконкаға орын керек болғандықтан – тек оң жақта “ауа” */
.ad-box.vip-ad,
.ad-box.simple-ad{
  padding-right: 90px;       /* иконкаға орын */
}
.ad-box{
  position: relative;
}

.ad-box .ad-btn{
  position: absolute;
  right: 22px;
  bottom: 18px;
}
/* ===== VIP BUTTON (like VIP card star) ===== */
.vip-ad .ad-btn{
  width: 45px;
  height: 45px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,215,0,0.25);
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.08),
    0 0 22px rgba(255,215,0,0.35);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.vip-ad .ad-btn i{
  color: #f7c400;
  font-size: 18px;
  filter: drop-shadow(0 0 10px rgba(247,196,0,.45));
  transition: transform .18s ease;
}

/* Басқанда контейнер көк жанады */
.vip-ad .ad-btn:active{
  background: rgba(0,140,255,0.25);
  box-shadow:
    0 0 0 1px rgba(0,140,255,0.20),
    0 0 26px rgba(0,140,255,0.50);
  transform: translateX(8px) scale(0.97);
}

/* Жұлдыз солға қисайсын */
.vip-ad .ad-btn:active i{
  transform: rotate(-12deg) translateX(-2px);
}
.simple-ad .ad-btn{
  width: 45px;
  height: 45px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(58,160,255,0.25);
  box-shadow:
    0 0 0 1px rgba(58,160,255,0.08),
    0 0 22px rgba(58,160,255,0.35);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.simple-ad .ad-btn i{
  color: #3aa0ff;
  font-size: 18px;
  filter: drop-shadow(0 0 10px rgba(58,160,255,.45));
}

.simple-ad .ad-btn:active{
  background: rgba(0,140,255,0.18);
  transform: translateX(8px) scale(0.97);
}
/* VIP Жарнама жұлдызы */
.vip-ad .vip-icon-btn {
    background: #111;
    border-radius: 14px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255,215,0,0.5);
    transition: 0.3s;
}

.vip-ad .vip-icon-btn i {
    color: gold;
    font-size: 20px;
}

.vip-ad .vip-icon-btn:hover {
    box-shadow: 
        0 0 10px rgba(255,215,0,0.6),
        0 0 25px rgba(255,215,0,0.8),
        0 0 45px rgba(255,215,0,1);
}
/* ===== ЖАРНАМА БЛОКТАРЫ МЕН КАРТОЧКАЛАР АРАСЫН АШУ ===== */
.ad-box{
  margin: 26px auto !important;
}

.ad-box.simple-ad{
  margin-bottom: 34px !important;
}
.vip-icon-btn i,
.ad-btn.vip-icon-btn i,
.vip-btn.vip-icon-btn i{
  font-size: 14px !important;
  line-height: 1 !important;
}
/* ===== Animated Back Arrow ===== */
.auth-back-anim{
  position: relative;
  width: 42px;
  height: 42px;
  display:inline-block;
  cursor:pointer;
}

.arrow-line{
  position:absolute;
  top:50%;
  left:12px;
  width:18px;
  height:2px;
  background:#00aaff;
  transform:translateY(-50%);
  animation: arrowMove 1.6s ease-in-out infinite;
}

.arrow-head{
  position:absolute;
  top:50%;
  left:10px;
  width:8px;
  height:8px;
  border-left:2px solid #00aaff;
  border-bottom:2px solid #00aaff;
  transform: translateY(-50%) rotate(45deg);
  animation: arrowMove 1.6s ease-in-out infinite;
}

@keyframes arrowMove{
  0%,100%{ transform: translateY(-50%) translateX(0); opacity:0.8; }
  50%{ transform: translateY(-50%) translateX(-4px); opacity:1; }
}

.auth-back-anim:hover .arrow-line,
.auth-back-anim:hover .arrow-head{
  background:#ffd700;
  border-color:#ffd700;
}
/* ===== Animated Border Line (Login/Register) ===== */
.auth-card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

/* айналып жүретін сызық */
.auth-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #00aaff 60deg,
    transparent 120deg,
    transparent 360deg
  );
  animation: spinBorder 8s linear infinite;
  z-index:0;
}

/* ішкі фон */
.auth-card::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:18px;
  background: rgba(18,18,18,0.95);
  z-index:1;
}

/* ішіндегі контент үстінде тұрсын */
.auth-card > *{
  position: relative;
  z-index: 2;
}

@keyframes spinBorder{
  to{ transform: rotate(360deg); }
}
/* ===== Auth shared (login/register) ===== */
.auth-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 14px;
}

.auth-border{
  position: relative;
  width: min(520px, 92vw);
  border-radius: 26px;
  border: 2px solid rgba(255,215,0,.55);   /* сары қоршау */
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

/* көк бегущий сызық (жоғарыда жүретін) */
.auth-border-anim::before{
  content:"";
  position:absolute;
  top:-2px;
  left:-140px;
  height:4px;
  width:140px;
  border-radius: 6px;
  background: #00aaff;
  box-shadow: 0 0 18px rgba(0,170,255,.55);
  animation: authRunner 10s linear infinite;  /* жылдамдық осы */
}
@keyframes authRunner{
  0%   { left:-140px; opacity:.75; }
  10%  { opacity:1; }
  100% { left:calc(100% + 140px); opacity:.75; }
}

.auth-card{
  background: rgba(0,0,0,.35);
  border-radius: 24px;
}
.auth-card-pad{ padding: 44px 44px 46px; }
.auth-card{
  position: relative;
  padding-top: 80px; /* стрелкаға орын */
}

.auth-title{
  text-align:center;
  font-size: 34px;
  margin: 0 0 18px;
  color:#fff;
}

/* input/label */
.auth-field{ margin: 14px 0; }
.auth-label{
  display:block;
  margin: 0 0 8px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}
.auth-input{
  width:92%;
  height: 46px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.92);
  padding: 0 18px;
  font-size: 18px;
  outline: none;
}
.auth-input:focus{
  border-color: rgba(0,170,255,.45);
  box-shadow: 0 0 0 3px rgba(0,170,255,.18);
}

/* button */
.auth-btn{
  width:100%;
  height: 64px;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,170,255,.35);
  background: rgba(10,40,70,.55);
  color:#fff;
  font-size: 22px;
  font-weight: 800;
  cursor:pointer;
  transition:.18s ease;
}
.auth-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,170,255,.55);
}

/* note + link */
.auth-note{
  margin-top: 14px;
  color: rgba(255,255,255,.65);
  font-size: 16px;
}
.auth-note-center{ text-align:center; }
.auth-link{
  color:#ffd700;
  text-decoration:none;
  font-weight:800;
}
.auth-link:hover{ text-decoration:underline; }

/* ===== Back button like edit.html + animated arrow ===== */
.back-btn{
  position: absolute;
  top: 18px;
  left: 18px;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  border: 1px solid rgba(255,215,0,0.35);
  background: rgba(0,0,0,0.32);
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}
.back-btn{
  z-index: 9999;
  pointer-events: auto;
}
.auth-card{
  position: relative;
}

.back-icon{
  color:#ffd700;
  font-size: 30px;     /* стреланы жуандататын “көзі” */
  font-weight: 900;
  display:inline-block;
  animation: backWiggle 1.6s ease-in-out infinite; /* анимация */
}
@keyframes backWiggle{
  0%,100% { transform: translateX(0); opacity:.85; }
  50%     { transform: translateX(-4px); opacity:1; }
}

/* Егер бір жерде rotate қалып кетсе – толық өшіреміз */
.auth-border, .auth-card, .auth-wrap{ transform:none !important; }



.contact-bar{
  display:flex;
  gap:14px;
  margin-top:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
  align-items:center;
}

.icon-btn{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:white;
  font-size:24px;
  border:2px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  padding:0;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}

.wa-bg{ background:#25D366; }
.call-bg{ background:#3498db; }

.fav-btn{
  border-color:#ff3b5c;
}

@keyframes heartBeat{
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.10); }
  40%      { transform: scale(0.98); }
  60%      { transform: scale(1.06); }
}
.action-buttons{
display:flex;
gap:14px;
margin-top:15px;
}

/* Барлық иконканың контейнері */
.icon-btn{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
border:2px solid #FFD700;
background:transparent;
color:white;
font-size:20px;
transition:0.3s;
}

/* Whatsapp */
.icon-btn.whatsapp{
background:#25D366;
border:none;
}

/* Телефон */
.icon-btn.phone{
background:#4FA3FF;
border:none;
}

/* жүрек */
.fav-btn{
border:2px solid rgba(255,0,0,0.6);
}

.fav-btn i{
color:#ff2d55;
animation:heartBeat 2.2s infinite;
}

/* жүрек соғу */
@keyframes heartBeat{
0%{transform:scale(1);}
25%{transform:scale(1.15);}
40%{transform:scale(0.95);}
60%{transform:scale(1.1);}
100%{transform:scale(1);}
}
.fav-btn:active{
transform:scale(1.3);
}
.fav-btn.is-fav i{
  color:#ff2d55;
  animation: heartBeat 2.7s infinite; /* сен 2.7 қылғаның дұрыс */
}
.fav-btn:not(.is-fav) i{
  color:#ff2d55; /* crack та қызыл болып тұрсын десең */
  opacity: .9;
}
/* Жүрек контейнері (сендегі размермен бірдей болып тұрсын) */
.icon-btn.fav-btn{
  border: 2px solid rgba(255,0,0,0.6);
}

/* Бүтін жүрек қызыл + соғу */
.icon-btn.fav-btn.is-fav i{
  color:#ff2d55;
  animation: heartBeat 2.7s infinite;
}

/* Жарылған жүрек (таңдалмаған) */
.icon-btn.fav-btn i{
  color:#ff2d55;
}

/* Жүрек соғуы */
@keyframes heartBeat{
  0%{transform:scale(1);}
  25%{transform:scale(1.12);}
  40%{transform:scale(0.96);}
  60%{transform:scale(1.08);}
  100%{transform:scale(1);}
}
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;

  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: 1px solid rgba(255,215,0,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: .25s ease;
  font-weight: 700;
}

.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast{
 position:fixed;
 bottom:25px;
 left:50%;
 transform:translateX(-50%);
 background:#111;
 color:white;
 padding:10px 16px;
 border-radius:10px;
 opacity:0;
 transition:0.3s;
 z-index:9999;
}

.toast.show{
 opacity:1;
}
.toast{
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,215,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  z-index: 9999;
  font-weight: 600;
}
.toast.show{
  opacity: 1;
  bottom: 40px;
}





.banner-btn{
margin-left:5px;
background:#ff9800;
color:white;
padding:4px 8px;
border-radius:6px;
font-size:12px;
text-decoration:none;
}
.banner-delete{
position:relative;
top:10px;
right:10px;
background:#ff3b3b;
color:white;
padding:8px;
border-radius:8px;
font-size:16px;
}


/* ===== VIP / LUXURY overlap fix ===== */
.cars-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 24px;
  align-items: start;
}

 .car-card{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.vip-card,
.luxury-card{
  position: relative !important;
  z-index: 1 !important;
}

.vip-badge,
.luxury-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.cars-grid .car-card{
  width: 100% !important;
  max-width: none !important;
}
.fav-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.fav-btn i{
  color:#ff4d6d;
  font-size:18px;
  transition:transform .2s;
}

.fav-btn:active i{
  transform:scale(1.15);
}

.floating-heart{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:14px;
  color:#ff4d6d;
  pointer-events:none;
  animation:heartFloat 900ms ease-out forwards;
}

@keyframes heartFloat{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) scale(0.7);
  }
  100%{
    opacity:0;
    transform:translate(var(--x), var(--y)) scale(1.3);
  }
}
.fav-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.heart-btn{
  color:#ff4d6d;
  cursor:pointer;
  transition:transform .2s ease;
  font-size:18px;
}

.heart-btn:hover{
  transform:scale(1.15);
}

.floating-heart{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:#ff4d6d;
  font-size:14px;
  pointer-events:none;
  animation:heartFloat .9s ease-out forwards;
}

@keyframes heartFloat{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.7);
  }
  100%{
    opacity:0;
    transform:translate(var(--x), var(--y)) scale(1.3);
  }
}
.password-box{
  position: relative;
  display: flex;
  align-items: center;
}

.password-box input{
  width: 100%;
  padding-right: 48px;
}

.toggle-password{
  position: absolute;
  right: 14px;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  margin-top:10px;
}

.auth-label{
  color:#eaeaea;
  font-size:16px;
  font-weight:600;
  margin-bottom:4px;
}

.auth-input{
  width:100%;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid #2a2a2a;
  background:#0f0f10;
  color:#fff;
  font-size:16px;
  outline:none;
  box-sizing:border-box;
}

.auth-input:focus{
  border-color:#00aaff;
  box-shadow:0 0 12px rgba(0,170,255,.18);
}

.password-box{
  position:relative;
  width:100%;
}

.password-box .auth-input{
  padding-right:52px;
}

.toggle-password{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:18px;
  user-select:none;
  opacity:.9;
}

.auth-btn{
  width:100%;
  margin-top:10px;
  padding:16px;
  border:none;
  border-radius:20px;
  background:#0d3147;
  color:#fff;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}

.auth-btn:hover{
  box-shadow:0 0 18px rgba(0,170,255,.25);
  transform:translateY(-1px);
}


/* ===== POPUP THANK YOU ===== */
.fav-btn.active i{
color:#ff4d73;
transform:scale(1.15);
}
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.favorites-grid .car-card {
  width: 100%;
  max-width: none;
}

.favorites-grid .card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 0 0;
}

.favorites-grid .card-btn,
.favorites-grid .fav-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.favorites-grid .card-btn i,
.favorites-grid .fav-btn i {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .favorites-grid {
    grid-template-columns: 1fr;
  }
}
.favorites-grid .call-btn,
.favorites-grid .whatsapp-btn {
  border: 1.5px solid rgba(255,255,255,0.12);
  background: #111;
  box-shadow: 0 0 12px rgba(0,0,0,0.18);
  transition: all 0.25s ease;
}

.favorites-grid .call-btn i,
.favorites-grid .whatsapp-btn i {
  transition: all 0.25s ease;
}

/* Телефон */
.favorites-grid .call-btn {
  border-color: rgba(80,170,255,0.45);
}

.favorites-grid .call-btn:hover {
  box-shadow: 0 0 16px rgba(80,170,255,0.35);
  transform: translateY(-1px);
}

.favorites-grid .call-btn i {
  color: #53a8ff;
}

/* WhatsApp */
.favorites-grid .whatsapp-btn {
  border-color: rgba(37,211,102,0.45);
}

.favorites-grid .whatsapp-btn:hover {
  box-shadow: 0 0 16px rgba(37,211,102,0.35);
  transform: translateY(-1px);
}

.favorites-grid .whatsapp-btn i {
  color: #25d366;
}
.heart-pop {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  animation: heartFly 0.9s ease-out forwards;
}

@keyframes heartFly {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-35px) scale(1.3);
  }
}
.fav-btn {
  position: relative;
  overflow: visible;
}
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.favorites-grid .car-card {
  width: 100%;
  max-width: 420px;
}


.img-container{
    width:100%;
    position:relative;
}





.close-modal{
  position:absolute;
  top:20px;
  right:30px;
  color:white;
  font-size:40px;
  cursor:pointer;
}

.modal-arrows{
  position:absolute;
  width:100%;
  top:50%;
  display:flex;
  justify-content:space-between;
  padding:0 40px;
}

.arrow{
  color:white;
  font-size:50px;
  cursor:pointer;
}

.active-thumb{
  border-color: #d4a017;
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.45);
}

/* FULLSCREEN MODAL */
.image-modal{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.96);
  z-index: 99999;
  display: none;
  justify-content: center;
  align-items: center;
}

.image-modal.show{
  display: flex;
}

.modal-content{
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.close-modal{
  position: absolute;
  top: 18px;
  right: 28px;
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  cursor: pointer;
  z-index: 100000;
  line-height: 1;
}

.modal-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 52px;
  cursor: pointer;
  user-select: none;
  z-index: 100000;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  transition: 0.2s ease;
}

.modal-arrow:hover{
  background: rgba(255,255,255,0.18);
}

.modal-arrow-left{
  left: 24px;
}

.modal-arrow-right{
  right: 24px;
}

@media (max-width: 768px){
  .details-main-image{
    max-height: 320px;
  }

  .details-thumb{
    width: 64px;
    height: 64px;
  }
}

  .close-modal{
    top: 12px;
    right: 18px;
    font-size: 34px;
  }

  .modal-arrow{
    font-size: 34px;
    padding: 8px 12px;
  }

  .modal-arrow-left{
    left: 10px;
  }

  .modal-arrow-right{
    right: 10px;
  }

  .modal-content{
    max-width: 96vw;
    max-height: 82vh;
  }

/* ===== FULLSCREEN LIGHTBOX FINAL FIX ===== */
/* ===== AVTOKZ LIGHTBOX FINAL ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.97);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  overflow: hidden;
  padding: 60px 80px;
  box-sizing: border-box;
}

.lightbox.show{
  display: flex;
}

.lightbox-image{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 160px) !important;
  max-height: calc(100vh - 120px) !important;
  object-fit: contain !important;
  margin: auto !important;
  border-radius: 14px;
}

.lightbox-close{
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 1000000;
}

.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.14);
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-nav.prev{
  left: 14px;
}

.lightbox-nav.next{
  right: 14px;
}

.lightbox-counter{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,0.45);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 16px;
  z-index: 1000000;
}

@media (max-width: 768px){
  .lightbox{
    padding: 52px 50px 62px;
  }

  .lightbox-image{
    max-width: calc(100vw - 100px) !important;
    max-height: calc(100vh - 120px) !important;
  }

  .lightbox-nav{
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
}

  .lightbox-nav.prev{
    left: 6px;
  }

  .lightbox-nav.next{
    right: 6px;
  }

  .lightbox-close{
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
  .lightbox-close,
.lightbox-nav{
  pointer-events: auto;
}
.details-gallery{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.details-main-image{
  width:100%;
  max-width:520px;
  height:340px;
  object-fit:cover;
  border-radius:20px;
  background:#000;
}

.details-thumbs{
  width:100%;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 0 8px 0;
  box-sizing:border-box;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.details-thumbs::-webkit-scrollbar{
  height:8px;
}

.details-thumbs::-webkit-scrollbar-thumb{
  background:#6e6e6e;
  border-radius:10px;
}

.details-thumbs::-webkit-scrollbar-track{
  background:transparent;
}

.details-thumb{
  width:78px;
  height:78px;
  object-fit:cover;
  border-radius:12px;
  flex:0 0 auto;
  cursor:pointer;
  border:2px solid transparent;
}
.main-card{
  width: 95%;
  max-width: 760px;
  margin: 30px auto;
  background: #151515;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.img-container{
  width: 100%;
  padding: 18px 18px 0 18px;
  box-sizing: border-box;
}

.content{
  padding: 22px 18px 26px 18px;
  box-sizing: border-box;
}

.details-gallery{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.details-main-image{
  width: 100%;
  max-width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  background: #0f0f0f;
}

.details-thumbs{
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0 6px 0;
  box-sizing: border-box;
}

.details-thumb{
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 2px solid transparent;
}

.details-thumb.active-thumb{
  border-color: #d7a21b;
  box-shadow: 0 0 12px rgba(215,162,27,0.30);
}

.price{
  margin-top: 8px;
  margin-bottom: 12px;
}

.contact-bar{
  margin-top: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.calc-box{
  margin-top: 18px;
  margin-bottom: 20px;
}

.panel-vip{
  margin-top: 22px;
}

@media (max-width: 768px){
  .main-card{
    width: 96%;
    border-radius: 22px;
  }

  .img-container{
    padding: 14px 14px 0 14px;
  }

  .content{
    padding: 18px 14px 22px 14px;
  }

  .details-main-image{
    height: 300px;
  }

  .details-thumb{
    width: 68px;
    height: 68px;
  }
}
/* ===== AVTOKZ FULLSCREEN VIEWER ===== */
.avtokz-viewer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  padding: 60px 70px;
  box-sizing: border-box;
}

.avtokz-viewer.show{
  display: flex;
}

.avtokz-viewer-image{
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}

.avtokz-viewer-close{
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 1000000;
}

.avtokz-viewer-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.14);
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avtokz-viewer-nav.prev{
  left: 14px;
}

.avtokz-viewer-nav.next{
  right: 14px;
}

.avtokz-viewer-counter{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,0.45);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 16px;
  z-index: 1000000;
}

@media (max-width: 768px){
  .avtokz-viewer{
    padding: 50px 45px 60px;
  }

  .avtokz-viewer-image{
    max-width: calc(100vw - 90px);
    max-height: calc(100vh - 110px);
  }

  .avtokz-viewer-nav{
    width: 42px;
    height: 42px;
    font-size: 24px;
  }

  .avtokz-viewer-nav.prev{
    left: 6px;
  }

  .avtokz-viewer-nav.next{
    right: 6px;
  }

  .avtokz-viewer-close{
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}
/* Бұл блок бүкіл экранды жабады */
.full-screen-preview {
    display: none; 
    position: fixed; /* Бұл өте маңызды! */
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.95);
    z-index: 10000; /* Барлық элементтен жоғары тұрады */
    justify-content: center;
    align-items: center;
}

.full-screen-preview img {
    max-width: 95%;
    max-height: 90%;
    object-fit: contain;
}

.close-preview {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 40px; color: white;
    cursor: pointer;
}
/* Кішкентай суреттер блогын реттеу */
.details-thumbs {
    display: flex !important; /* Міндетті түрде Flexbox қосу */
    flex-wrap: nowrap !important; /* Суреттердің астына түсіп кетпеуін қадағалау */
    overflow-x: auto !important; /* Егер суреттер сыймаса, көлденең scroll пайда болады */
    overflow-y: hidden !important; /* Тік бағытта scroll болмауы керек */
    height: 90px !important; /* Блоктың биіктігін қатырып қою (бұрынғы өлшемді пайдаланыңыз) */
    gap: 10px !important; /* Суреттер арасындағы қашықтық */
    margin-top: 15px !important; /* Блоктың үстінен қашықтық */
    padding-bottom: 5px !important; /*Scrollbar үшін орын қалдыру */
}

/* Ішіндегі әрбір суретті реттеу */
.details-thumbs img {
    height: 100% !important; /* Блоктың биіктігіне сәйкестендіру */
    width: auto !important; /* Суреттің енін пропорционалды ұстау */
    min-width: 70px !important; /* Ең кіші енін көрсету (егер қажет болса) */
    object-fit: cover !important; /* Сурет бұзылмауы үшін */
    border-radius: 10px !important; /* Сурет шеттерін жұмырлау */
    cursor: pointer !important; /* Үстіне барғанда тышқанның түрін өзгерту */
    border: 2px solid transparent !important; /* Таңдалған суретті белгілеу үшін */
}

/* Scrollbar-ды жасыру (қажет болса) */
.details-thumbs::-webkit-scrollbar {
    height: 3px;
}

.details-thumbs::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}
/* Контейнерді бір қатарға жинау */
.details-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important; /* Суреттер астына түспейді */
    overflow-x: auto !important; /* Сыймаса, оңға қарай жылжиды */
    gap: 10px !important;
    width: 100% !important;
    max-width: 520px !important; /* Негізгі суреттің енімен бірдей болуы керек */
    padding-bottom: 10px !important;
    margin: 12px auto 0 auto !important; /* Ортаға қою */
}

/* Ішіндегі суреттердің өлшемін күштеп өзгерту */
.details-thumbs img {
    width: 70px !important; /* Өлшемін осы жерден реттеңіз */
    height: 70px !important;
    min-width: 70px !important; /* Қысылып қалмауы үшін */
    object-fit: cover !important;
    flex-shrink: 0 !important; /* Суреттердің ені тарылып кетпеуі үшін */
    border-radius: 10px !important;
}
/* Бұл код тек суреттер сыймай қалғанда ғана көмектеседі */
.details-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important; /* Астына түсуге тыйым салу */
    overflow-x: auto !important; /* Оңға жылжытуды қосу */
    -webkit-overflow-scrolling: touch; /* Телефонда ыңғайлы жылжыту */
    gap: 10px;
}

.details-thumb {
    flex-shrink: 0 !important; /* Суреттердің қысылып, жіңішке болып кетпеуі үшін */
}
/* Жылжыту жолағының (Scrollbar) көрінуі мен дизайны */
.details-thumbs {
    scrollbar-width: thin; /* Firefox үшін */
    scrollbar-color: #ff4d4d #1a1a1a; /* Firefox үшін (жолақ түсі және фон түсі) */
}

/* Chrome, Safari және жаңа Edge үшін */
.details-thumbs::-webkit-scrollbar {
    height: 6px; /* Жолақтың биіктігі */
    display: block !important; /* Міндетті түрде көрсету */
}

.details-thumbs::-webkit-scrollbar-track {
    background: #1a1a1a; /* Жолақ жүретін жолдың түсі */
    border-radius: 10px;
}

.details-thumbs::-webkit-scrollbar-thumb {
      background: #0088dd !important; /* Жылжитын жолақтың түсі (көлігіңіздің түсіне сәйкес қызыл) */
    border-radius: 10px;
}

.details-thumbs::-webkit-scrollbar-thumb:hover {
    background: #cc0000; /* Үстіне барғанда түсі өзгереді */
}
/* 1. Контейнердің өзіне жылжыту қасиетін міндетті түрде беру */
.details-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; /* Көлденең жылжытуды қосу */
    overflow-y: hidden !important;
    padding-bottom: 8px !important; /* Жолақ суретке тиіп тұрмауы үшін */
    -webkit-overflow-scrolling: touch; /* Мобильді құрылғылар үшін */
    
    /* Firefox үшін стандартты баптау */
    scrollbar-width: thin; 
    scrollbar-color: #00aaff #1a1a1a;
}

/* 2. Chrome, Edge, Safari (Ноутбук пен Android) үшін толық баптау */
.details-thumbs::-webkit-scrollbar {
    height: 8px !important; /* Жолақтың қалыңдығы */
    display: block !important; /* Міндетті түрде көрсету */
}

/* Жолақ жүретін жол (фон) */
.details-thumbs::-webkit-scrollbar-track {
    background: #1a1a1a !important;
    border-radius: 10px;
}

/* Жылжитын "жүгірткі" (ползунок) */
.details-thumbs::-webkit-scrollbar-thumb {
    background: #00aaff !important; /* Сіздің қызыл түсіңіз */
    border-radius: 10px;
    border: 2px solid #1a1a1a; /* Жолақ пен жолдың арасында кішкене шекара */
}

/* Үстіне тышқанмен барғанда (тек ноутбукте жұмыс істейді) */
.details-thumbs::-webkit-scrollbar-thumb:hover {
    background: #ff1a1a !important;
    cursor: pointer;
}
.details-thumbs{
  width:100%;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:12px 0 6px 0;
  box-sizing:border-box;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}

.details-thumbs::-webkit-scrollbar{
  height:8px;
}

.details-thumbs::-webkit-scrollbar-thumb{
  background:#6d6d6d;
  border-radius:10px;
}

.details-thumb{
  width:78px;
  height:78px;
  object-fit:cover;
  border-radius:12px;
  flex:0 0 auto;
  cursor:pointer;
  border:2px solid transparent;
}
.contact-bar{
  display:flex;
  gap:12px;
  margin-top:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.icon-btn{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:white;
  font-size:23px;
  border:2px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  position:relative;
  overflow:visible;
  cursor:pointer;
}

.fav-btn{
  border-color:#ff3b5c;
}

.wa-bg{ background:#25D366; }
.call-bg{ background:#3498db; }
.mini-heart{
  position:absolute;
  transform:translate(-50%, -50%);
  color:#ff2d55;
  animation:heartBurst 0.8s ease forwards;
  pointer-events:none;
  line-height:1;
}

@keyframes heartBurst{
  0%{
    opacity:1;
    transform:translate(-50%, -50%) scale(0.5);
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.15);
  }
}
.mini-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  background:rgba(20,20,20,0.92);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-size:14px;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:0.25s ease;
}

.mini-toast.show{
  opacity:1;
}
.title-price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

.car-name{
  color:#fff;
  font-size:22px;
  font-weight:700;
  margin:0;
}

.price{
  color:#ff4d4d;
  font-size:26px;
  font-weight:700;
  margin:0;
}

.views-line{
  color:#8d8d8d;
  font-size:14px;
  margin:8px 0 14px 0;
}
.gallery-count{
  width:100%;
  color:#bcbcbc;
  font-size:14px;
  margin-top:10px;
  margin-bottom:4px;
}
.name-price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
  margin-bottom:6px;
}

.name-price-row .car-name{
  margin:0;
  font-size:22px;
  color:#fff;
}

.price-inline{
  color:#ff4d4d;
  font-size:20px;
  font-weight:700;
  white-space:nowrap;
}

.views-line{
  color:#8d8d8d;
  font-size:14px;
  margin:6px 0 14px 0;
}

.contact-bar{
  display:flex;
  gap:14px;
  margin-top:18px;
  margin-bottom:18px;
  padding-left:6px;
  flex-wrap:wrap;
}

@media (max-width: 768px){
  .name-price-row .car-name{
    font-size:20px;
  }

  .price-inline{
    font-size:18px;
  }
}
.card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  margin-bottom:6px;
}

.card-title-row h3{
  margin:0;
  font-size:18px;
  color:#fff;
  font-weight:700;
}

.card-price-inline{
  color:#00ff88;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
}
.car-card img{
  transition: transform 0.35s ease;
}

.car-card:hover img{
  transform: scale(1.05);
}
.details-main-image{
  transition: transform 0.35s ease;
}

.details-main-image:hover{
  transform: scale(1.04);
}
.details-thumb{
  transition: transform 0.25s ease;
}

.details-thumb:hover{
  transform: scale(1.08);
}
.details-thumb.active-thumb{
  border:2px solid #f5c518;
}
.favorites-grid .price{
  font-size:18px;
  font-weight:700;
}
.favorites-grid .icon-row{
  margin-top:10px;
  gap:10px;
}
.favorites-grid .icon-btn{
  width:34px;
  height:34px;
  font-size:15px;
}
.favorites-grid .car-card{
  padding-bottom:12px;
}
.favorites-grid .icon-row{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.fav-icons{
display:flex;
justify-content:flex-end;
gap:12px;
margin-top:10px;
padding-right:10px;
}
.favorite-btn{
  position: relative;
  overflow: visible;
}

.favorite-btn.heart-bounce{
  animation: heartPulse 0.35s ease;
}

@keyframes heartPulse{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.favorites-grid .favorite-btn{
  position: relative;
  overflow: visible;
}

.favorites-grid .favorite-btn i{
  display: inline-block;
}

.favorites-grid .favorite-btn i.heart-bounce{
  animation: favHeartPulse 0.32s ease;
}

@keyframes favHeartPulse{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.favorites-grid .fly-heart{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ff4d7a;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  opacity: 1;
  animation: favFlyHeart 0.8s ease forwards;
  z-index: 20;
}

@keyframes favFlyHeart{
  0%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
  }
  100%{
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.15);
  }
}
.favorite-btn i{
  transition: transform 0.25s;
}

.favorite-btn i.heart-bounce{
  animation: heartBeat 0.35s ease;
}

@keyframes heartBeat{
  0% {transform: scale(1);}
  30% {transform: scale(1.3);}
  60% {transform: scale(0.9);}
  100% {transform: scale(1);}
}
.fav-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.fav-car-name{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#fff;
}

.fav-price-inline{
  font-size:15px;
  font-weight:700;
  color:#ff4d4d;
  white-space:nowrap;
}

.fav-views{
  margin:0 0 12px 0;
  font-size:14px;
  color:#8f8f8f;
}

.favorites-grid .card-actions{
  padding-left:12px;
  padding-right:12px;
  box-sizing:border-box;
}

.favorites-grid .fav-icons{
  display:flex;
  justify-content:flex-start;
  gap:12px;
}

.favorites-grid .favorite-btn{
  margin-left:0;
}
/* VIP карточка тыныс алу эффекті */
.vip-card{
  animation: vipBreath 3.2s ease-in-out infinite;
}

@keyframes vipBreath{
  0%{
    box-shadow: 0 0 12px rgba(255,215,0,0.45);
  }
  50%{
    box-shadow: 0 0 13px rgba(255,215,0,0.95);
  }
  100%{
    box-shadow: 0 0 12px rgba(255,215,0,0.45);
  }
}
/* сурет контейнері */
.car-image-wrapper{
  position:relative;
}





/* pulse анимация */
@keyframes videoPulse{
  0%{
    box-shadow:0 0 0 rgba(0,0,0,0.0);
    transform:scale(1);
  }
  50%{
    box-shadow:0 0 10px rgba(255,255,255,0.35);
    transform:scale(1.06);
  }
  100%{
    box-shadow:0 0 0 rgba(0,0,0,0.0);
    transform:scale(1);
  }
}
.video-badge{
  position:absolute;
  top:10px;
  right:10px;
  font-size:22px;
  background:none;
}
.car-card .video-badge{
  color:#4aa3ff;
  filter:drop-shadow(0 0 6px rgba(74,163,255,0.7));
}
.vip-card .video-badge{
  color:#ffd700;
  filter:drop-shadow(0 0 6px rgba(255,215,0,0.7));
}
.luxury-card .video-badge{
  color:#ffd700;
  filter:drop-shadow(0 0 8px rgba(255,215,0,0.9));
}
.play-badge{
  position:absolute;
  top:10px;
  right:10px;

  width:36px;
  height:36px;

  background:white;
  color:black;

  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  font-weight:bold;

  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.play-badge:active{
  transform:scale(0.85);
}
.video-badge a{
  text-decoration: none;
}

.play-badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.video-badge a:hover .play-badge{
  background: #3aa0ff;
  color: white;
  box-shadow: 0 0 18px rgba(58,160,255,0.45);
  transform: scale(1.06);
}

.option-card{
  display: flex;
  align-items: center;
  gap: 6px;

  min-height: 40px;
  padding: 7px 10px;

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);

  color: #f2f2f2;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;

  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.22s ease;
}

.option-card:hover{
  border-color: rgba(58,160,255,0.65);
  box-shadow:
    0 0 0 1px rgba(58,160,255,0.18),
    0 0 14px rgba(58,160,255,0.14);
  background: linear-gradient(
    135deg,
    rgba(58,160,255,0.08),
    rgba(255,255,255,0.02)
  );
}

.option-card:has(input:checked){
  border-color: rgba(58,160,255,0.75);
  box-shadow:
    0 0 0 1px rgba(58,160,255,0.22),
    0 0 16px rgba(58,160,255,0.18);
  background: linear-gradient(
    135deg,
    rgba(58,160,255,0.10),
    rgba(255,255,255,0.025)
  );
}

.option-card input[type="checkbox"]{
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #ffd000;
}

.option-card span{
  line-height: 1.1;
}

@media (max-width: 768px){
  .options-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .option-card{
    min-height: 36px !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
    gap: 5px !important;
    border-radius: 10px !important;
  }

  .option-card input[type="checkbox"]{
    width: 13px !important;
    height: 13px !important;
  }
}
.video-input{
width:100%;
padding:10px;
border-radius:8px;
border:1px solid #444;
background:#1a1a1a;
color:white;
margin-top:8px;
}
.video-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.video-modal.show{
  display: flex;
}

.video-modal-content{
  position: relative;
  width: min(900px, 95vw);
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 0 30px rgba(0,0,0,0.45);
}

.video-frame-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.video-frame-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: white;
  font-size: 26px;
  cursor: pointer;
}

.img-container{
  position: relative;
}

.details-gallery{
  position: relative;
}

.back-icon{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 30;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35,35,35,0.88);
  border: 1px solid rgba(255,208,0,0.45);
  color: #ffd000 !important;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(255,208,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.back-icon i{
  font-size: 28px;
  line-height: 1;
  color: #ffd000 !important;
  display: block;
  transition: transform 0.2s ease;
}

.back-icon:hover{
  box-shadow: 0 0 18px rgba(255,208,0,0.28);
  transform: translateX(-2px);
}

.back-icon:hover i{
  transform: translateX(-3px);
}

.details-video-badge{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.details-video-badge:hover{
  background: #ffd000;
  color: #111;
  box-shadow: 0 0 18px rgba(255,208,0,0.45);
  transform: scale(1.06);
}
.admin-btn{
    color:#ffd700;
    font-size:18px;
    margin-left:10px;
    text-decoration:none;
}

.admin-btn:hover{
    color:white;
}
.topbar-right{
    display:flex;
    align-items:center;
    margin-left:auto;
    gap:18px;
}

.auth{
    display:flex;
    align-items:center;
    gap:14px;
}

.admin-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    color:#ffd700 !important;
    font-size:20px;
    text-decoration:none;
    border:1px solid rgba(255,215,0,0.35);
    border-radius:50%;
    box-shadow:0 0 10px rgba(255,215,0,0.18);
}
.scroll-btn {
  position: fixed;
  right: 14px;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  font-weight: 200;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.25s ease;
}

.scroll-btn:hover {
  color: #ffffff;
  transform: scale(1.2);
}

#scrollUpBtn {
  top: 45%;
}

#scrollDownBtn {
  top: 55%;
}
#welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeOutOverlay 1s ease forwards;
  animation-delay: 5s;
}

#welcome-text {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 18px 28px;
  border-radius: 16px;
  background: rgba(20, 20, 28, 0.72);
  box-shadow: 0 0 20px rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeOutText 1s ease forwards;
  animation-delay: 5s;
}

@keyframes fadeOutOverlay {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeOutText {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
/* FILTER */







.filter-btn{
padding:10px 20px;
border:none;
border-radius:8px;
background:#00aaff;
color:white;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.filter-btn:hover{
background:#0088cc;
}
@media (max-width: 768px) {
  .filter-btn {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ===== AVTOKZ SEARCHBAR FINAL ===== */

.search-wrap{
  display:flex;
  justify-content:center;
  margin:18px 0 14px;
}

form.searchbar{
  width:100%;
  max-width:720px;
  display:flex;
  align-items:center;
  gap:8px;

  padding:6px 8px;

  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;

  background:#0f1116;
}

form.searchbar input{
  flex:1;
  min-width:0;

  height:38px;
  padding:0 12px;

  border:none;
  outline:none;

  background:transparent;
  color:#eaf6ff;

  font-size:14px;
}

form.searchbar input::placeholder{
  color:#7c8792;
}

form.searchbar button{
  height:38px;
  padding:0 14px;

  border:none;
  border-radius:8px;

  background:#1e90ff;
  color:#fff;

  font-size:14px;
  cursor:pointer;
}

form.searchbar button:hover{
  background:#187bdb;
}

form.searchbar:hover{
  border-color:#1e90ff;
}
/* ===== AVTOKZ UNIFIED BUTTON STYLE ===== */

.btn-glow,
.my-ads-btn,
.searchbar button,
.filter-btn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  transition: 0.25s ease;
}

.btn-glow:hover,
.my-ads-btn:hover,
.searchbar button:hover,
.filter-btn:hover,
.btn-glow:active,
.my-ads-btn:active,
.searchbar button:active,
.filter-btn:active {
  border-color: #1e90ff !important;
  color: #1e90ff !important;
  box-shadow: 0 0 8px rgba(30,144,255,0.18) !important;
}



.searchbar button,
.filter-btn {
  border-radius: 10px !important;
  font-weight: 600;
}
@media (max-width: 768px) {
  .btn-glow,
  .my-ads-btn,
  .searchbar button,
  .filter-btn {
    font-size: 14px !important;
  }

  

  .searchbar button,
  .filter-btn {
    min-height: 38px;
    padding: 0 12px !important;
  }
}
/* ===== AVTOKZ TOP BANNERS (Жарнама / Жарнамаларым) ===== */

.banner-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#111;
  color:#fff;

  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;

  padding:10px 16px;
  font-weight:600;

  box-shadow:none;
  transition:0.25s ease;
}

.banner-btn:hover{
  border-color:#1e90ff;
  color:#1e90ff;
  box-shadow:0 0 8px rgba(30,144,255,0.18);
}

/* телефон */
@media (max-width:768px){
  .banner-btn{
    padding:9px 12px;
    font-size:14px;
    white-space:nowrap;
  }
}
.banner-btn:hover{
  transform: translateY(-1px);
}
/* ===== HEADER FONT UNIFY ===== */

.topbar-right a{
  font-size:15px;
  font-weight:500;
}
/* ===== ADD BUTTON (TIKTOK STYLE) ===== */

.add-btn{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  font-weight:600;

  color:white;
  background:#111;

  border:1px solid rgba(255,255,255,0.1);
  border-radius:50%;

  transition:0.25s;
}

.add-btn:hover{
  border-color:#1e90ff;
  color:#1e90ff;
  box-shadow:0 0 8px rgba(30,144,255,0.18);
}
/* ===== HEADER FINAL FIX ===== */

/* бәрі бірдей шрифт */
.topbar-right a,
.topbar-right .lang a,
.banner-btn,
.my-ads-btn,
.btn-glow,
.add-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Тілге курсор апарғанда түсі өзгеруі үшін */
.topbar-right .lang a:hover {
    color: #1e90ff !important; /* Плюс батырмасының көк түсімен бірдей */
    cursor: pointer;
}


/* + батырмасы */
.add-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;

  font-size: 24px !important;
  font-weight: 600 !important;
}


/* hover */
.add-btn:hover,
.banner-btn:hover,
.btn-glow:hover,
.my-ads-btn:hover {
  border-color: #1e90ff !important;
  color: #1e90ff !important;
  box-shadow: 0 0 8px rgba(30,144,255,0.18) !important;
}


/* mobile */
@media (max-width: 768px){
  .topbar-right a,
  .topbar-right .lang a,
  .banner-btn,
  .my-ads-btn,
  .btn-glow,
  .add-btn {
    font-size: 14px !important;
  }

  .add-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 22px !important;
  }
  .nav-btn{
  font-size:14px;
  color:#ccc;
  text-decoration:none;
}
}

.add-btn{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:24px;
  color:white;
  background:#111;
  border:1px solid #333;
}
/* ===== HARD FIX FOR HEADER ===== */

.topbar-right a{
  font-size: 14px !important;
  font-weight: 500 !important;
}

.lang a{
  font-size: 12px !important;
  font-weight: 500 !important;
}

.add-btn{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  box-shadow: none !important;

  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.add-btn:hover{
  border-color: #1e90ff !important;
  color: #1e90ff !important;
  box-shadow: 0 0 8px rgba(30,144,255,0.18) !important;
}



@media (max-width: 768px){
  .topbar-right a{
    font-size: 13px !important;
  }

  .lang a{
    font-size: 9px !important;
  }

  .add-btn{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 24px !important;
  }
}
/* ===== HEADER UNIFIED STYLE ===== */






.add-btn{
  min-width:38px;
  width:38px;
  padding:0 !important;
  font-size:24px !important;
  font-weight:600 !important;
}




  /* Екі баннерге де (VIP және жай жарнама) ортақ стиль */
.ad-box {
    max-width: 1160px; /* Бұл санды карточкаларыңның жалпы еніне қарай өзгерт (мысалы 1200px немесе 1140px) */
    margin: 20px auto; /* Жоғары-төмен қашықтық және ортаға келтіру */
    padding: 0 15px;   /* Шеттеріне сәл бос орын */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); /* 5% ғана жарық */
    background: #151515; /* Сәл ғана сұрғылт қара */
   
}


/* Баннер ішіндегі суреттерді баптау */
.ad-box img {
    width: 100%;
    height: 200px; /* Биіктігі скриншоттағыдай қала береді */
    object-fit: cover;
    border-radius: 10px;
}

/* Мобильді құрылғыларға арналған стильдер */
@media screen and (max-width: 480px) {
    #welcome-overlay {
        width: 90%;          /* Экранның 90% енін ғана алсын */
        left: 5%;           /* Екі жағынан тең қашықтықта тұру үшін */
        padding: 10px;       /* Ішкі бос орынды азайту */
        min-height: auto;    /* Биіктігі мәтінге қарай икемделсін */
    }

    #welcome-text {
        font-size: 13px;     /* Мәтін өлшемін кішірейту (мысалы 16px немесе 18px) */
        text-align: center;  /* Мәтінді ортаға келтіру */
        line-height: 1.4;    /* Жол арасын сәл кеңейту */
    }
}


/* 2. Логотип пен оң жақ блок */
.brand {
    font-size: 24px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.brand-blue { color: #007bff; }




/* Төбесіндегі логотип пен Х орналасуы */
.overlay-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 25px !important;
    border-bottom: 1px solid #222 !important;
}


.mini-logo:hover {
    opacity: 0.8; /* Басқанда сәл түсі өзгереді */
    transition: 0.3s;
}
/* Крестикке курсор апарғандағы эффект */
.close-btn {
    transition: all 0.3s ease; /* Өзгеру жылдамдығы */
    display: inline-block;
    padding: 5px 10px; /* Басуға ыңғайлы болу үшін айналасына орын */
    line-height: 1;
}

.close-btn:hover {
    color: #ff4d4d !important; /* Курсор апарғанда ақ түстен ашық қызылға өзгереді */
    transform: rotate(90deg); /* Әдемілік үшін 90 градусқа айналады */
    opacity: 0.8;
}

.close-btn:active {
    transform: scale(0.9); /* Басқан сәтте сәл кішірейеді (кнопка сияқты) */
}
/* Мәзірдің төменгі бөлігі */
.menu-footer {
    margin-top: auto; /* Тілді ең астына итереді */
    padding: 30px 20px;
    border-top: 1px solid #222;
}


.user-profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Жұқа сызық */
}

.user-profile-header i {
    font-size: 40px !important; /* Иконканы тым үлкейтпеу */
    color: #007bff;
}

.user-profile-header p {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}



/* Жасырын мәзір */
.lang-dropdown-content {
    display: none; /* Әдепкі бойынша жасырын */
    position: absolute;
    right: 0;
    background-color: #1a1a1a;
    min-width: 120px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    z-index: 1000;
    border-radius: 5px;
    margin-top: 5px;
}

/* Тілдер тізіміндегі сілтемелер */
.lang-dropdown-content a {
    color: #ccc;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 13px;
}

/* Тілдің үстіне барғанда */
.lang-dropdown-content a:hover {
    background-color: #333;
    color: white;
}

/* Батырманың үстіне барғанда мәзірді ашу */
.lang-dropdown.open .lang-dropdown-content {
    display: block;
}

.lang-dropdown-content a.active {
    color: #007bff;
    font-weight: bold;
}

/* =========================
   FILTER MODAL - NEW CLEAN CSS
   ========================= */

/* Қараңғы фон */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    align-items: flex-start !important;
    justify-content: center;
    padding-top: 58px !important;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
}

/* Ашылған кезде */
.modal.show {
    display: flex;
}

/* Негізгі терезе */
.modal-content {
    position: relative;
    width: min(92vw, 560px);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
    border: 1px solid rgba(241, 196, 15, 0.45);
    border-radius: 24px;
    padding: 18px 14px 16px;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.18);
    box-sizing: border-box;

    margin: 0 auto;   /* ОСЫНЫ ҚОС */
}

/* Скролл әдемірек */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(241, 196, 15, 0.35);
    border-radius: 20px;
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.header-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

/* Артқа батырма */
.back-arrow {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 1px solid rgba(241, 196, 15, 0.45);
    border-radius: 14px;
    background: #202020;
    color: #f1c40f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    transition: 0.2s ease;
    box-sizing: border-box;
}

.back-arrow:hover {
    background: #262626;
    transform: translateY(-1px);
}

/* Форма */
.filter-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* Әр блок */
.filter-group {
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Label */
.filter-group label {
    display: block;
    margin-bottom: 7px;
    color: #b8b8b8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.filter-group label i {
    margin-right: 8px;
    color: #9d9d9d;
}

/* Select + input */
.filter-group select,
.dual-inputs input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    background: #252525;
    border: 1px solid #343434;
    border-radius: 14px;
    color: #ffffff;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-group select,
.dual-inputs input {
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: #242424 !important;
}

.filter-group label {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    color: #b5b5b5 !important;
}

.filter-group {
    margin-bottom: 14px !important;
}


.filter-group select:focus,
.dual-inputs input:focus {
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* placeholder */
.dual-inputs input::placeholder {
    color: #8f8f8f;
}

/* 2 input қатар */
.dual-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Табу батырмасы */
.apply-filter-btn {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: 6px;
    background: linear-gradient(90deg, #0d6efd, #198cff);
    color: #ffffff;
    border: none;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    transition: 0.2s ease;
}

.apply-filter-btn:hover {
    transform: translateY(-1px);
}

.apply-filter-btn:active {
    transform: translateY(0);
}


/* Телефонға */
@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 22px;
        padding: 18px 14px 16px;
    }

    .modal-header {
        gap: 10px;
        margin-bottom: 16px;
    }

    .back-arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 12px;
        font-size: 20px;
    }

    .header-title {
        font-size: 20px;
    }

    .filter-group {
        margin-bottom: 14px;
    }

    .filter-group label {
        font-size: 13px;
        margin-bottom: 7px;
    }

    .filter-group select,
.dual-inputs input {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    background: #252525;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .dual-inputs {
        gap: 8px;
    }

    .apply-filter-btn {
        height: 52px;
        font-size: 18px;
        border-radius: 14px;
        margin-top: 4px;
    }
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}




.city-dropdown {
    position: relative;
    display: inline-block;
}

.city-btn {
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: transparent;
    color: #f5d7a1;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.city-btn i:first-child {
    color: #f5d7a1;
}

.city-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 190px;
    max-height: 300px;
    overflow-y: auto;
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    z-index: 1000;
}

.city-dropdown-content a {
    display: block;
    padding: 10px 14px;
    color: #ddd;
    text-decoration: none;
    font-size: 14px;
}

.city-dropdown-content a:hover {
    background: #1c1c1c;
    color: #fff;
}

.city-dropdown-content a.active {
    color: #007bff;
    font-weight: 700;
}

.city-dropdown.open .city-dropdown-content {
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.main-header {
    width: 100%;
    background: #000;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
}

.logo span {
    color: #007bff;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex-wrap: nowrap;
}





.action-btn,
.icon-link.action-btn,
.profile-btn.action-btn,
.filter-icon-btn.action-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}

.action-btn i,
.icon-link.action-btn i,
.profile-btn.action-btn i,
.filter-icon-btn.action-btn i {
    font-size: 18px;
    line-height: 1;
}

.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-dropbtn {
    height: 42px;
    min-width: 68px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .header-container {
        padding: 14px 16px;
        align-items: flex-start;
    }

    .logo {
        font-size: 24px;
    }

    .header-right {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 58%;
    }

   

    .action-btn,
    .icon-link.action-btn,
    .profile-btn.action-btn,
    .filter-icon-btn.action-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .lang-dropbtn {
        height: 40px;
        min-width: 62px;
        font-size: 14px;
    }
}
.icon-link,
.profile-btn,
.filter-icon-btn,
.lang-dropbtn {
    color: rgba(255,255,255,0.82);
    border-color: rgba(255,255,255,0.10);
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.icon-link:hover,
.profile-btn:hover,
.filter-icon-btn:hover,
.lang-dropbtn:hover {
    color: #66b3ff;
    transform: translateY(-1px);
    border-color: rgba(102, 179, 255, 0.28);
    background: rgba(102, 179, 255, 0.03);
    box-shadow: 0 0 6px rgba(102, 179, 255, 0.05);
}



@media (max-width: 768px){
    .cats{
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        gap: 10px !important;
        padding: 0 10px 8px 10px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cats::-webkit-scrollbar{
        display: none;
    }

    .cats .cat-btn,
    .cats a{
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}
.forgot-password-box {
    margin-top: 14px;
    text-align: center;
}

.forgot-password-link {
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.forgot-password-link:hover {
    color: #66b3ff;
}
  
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9999;
    display: none;
}

.mobile-overlay.show {
    display: block;
}

.mobile-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 92vw;
    height: 100%;
    background: #050505;
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -10px 0 30px rgba(0,0,0,0.35);
    padding: 22px 18px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.mobile-overlay.show .mobile-drawer {
    transform: translateX(0);
}

.overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.mini-logo {
    font-size: 20px;
    font-weight: 800;
}

.close-btn {
    font-size: 28px;
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    line-height: 1;
}

.overlay-user {
    display: flex;
    align-items: center;
    gap: 14px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.overlay-user i {
    font-size: 42px;
    color: #007bff;
}

.menu-divider {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 18px 0;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.overlay-content a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    text-decoration: none;
    color: white;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    box-sizing: border-box;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.overlay-content a i {
    color: #007bff;
    width: 20px;
    text-align: center;
    font-size: 18px;
}

.overlay-content a:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(102, 179, 255, 0.20);
    color: #ffffff;
    transform: translateX(-2px);
}

@media (max-width: 768px) {
    .mobile-drawer {
        width: 320px;
        max-width: 90vw;
        padding: 20px 16px 20px;
    }

    .overlay-user {
        font-size: 15px;
    }

    .overlay-content a {
        min-height: 48px;
        font-size: 15px;
    }
}
.car-description-box {
    margin-top: 18px;
    margin-bottom: 18px;
    background: #1f1f1f;
    border: 1px solid #333;
    border-radius: 14px;
    padding: 16px;
}

.car-description-box h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #fff;
}

.car-description-box p {
    margin: 0;
    color: #cfcfcf;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-line;
}
 
/* ===== КРЕДИТ ЧЕКБОКСЫН ҚАЛЫПТЫ ҚАТАРҒА ТҮСІРУ ===== */
/* ===== УНИВЕРСАЛ ОПЦИЯ ҚАТАРЫ ===== */
.option-row{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    margin-top: 12px;
    border-radius: 18px;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.2s ease;
}

.option-row:hover{
    border-color: rgba(62,166,255,0.55);
    box-shadow: 0 0 12px rgba(62,166,255,0.12);
}

.option-row input[type="checkbox"]{
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 14px;
    accent-color: #3ea6ff;
    cursor: pointer;
}

.option-row span{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.credit-option{
    margin-bottom: 4px;
}

@media (max-width: 768px){
    .option-row{
        min-height: 56px;
        padding: 0 14px;
        gap: 10px;
    }

    .option-row input[type="checkbox"]{
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
    }

    .option-row span{
        font-size: 16px;
        gap: 8px;
    }
}
/* ===== ТОЛЫҒЫРАҚ PANEL OVERLAY ===== */
.details-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99990;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
}

/* ===== PANEL КӨРІНГЕН КЕЗ ===== */
.details-overlay.show{
    opacity: 1;
    pointer-events: auto;
}

/* ===== ОҢ ЖАҚТАН ШЫҒАТЫН PANEL ===== */
/* ===== ТОЛЫҒЫРАҚ ПАНЕЛІНІҢ ЕНІ ===== */
.details-side-panel{
    width: 40vw !important;      /* ноутта 40% */
    min-width: 430px !important; /* тым тар болып кетпесін */
    max-width: 760px !important; /* тым кең ашылып кетпесін */
    height: 100vh !important;    /* экран бойымен */
    overflow: hidden !important; /* сыртқа шығып кетпесін */
}

/* ===== SHOW БОЛҒАНДА PANEL ІШКЕ КІРЕДІ ===== */
.details-overlay.show .details-side-panel{
    transform: translateX(0);
}

/* ===== IFRAME ===== */
.details-frame{
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

/* ===== ЖАБУ БАТЫРМАСЫ ===== */
.details-panel-close{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: rgba(20,20,20,0.88);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    transition: 0.2s ease;
}

.details-panel-close:hover{
    background: rgba(40,40,40,0.95);
}

/* ===== PANEL АШЫҚ КЕЗДЕ BODY СКРОЛЛ БОЛМАСЫН ===== */
body.panel-open{
    overflow: hidden;
}

/* ===== ПЛАНШЕТ / КІШІ НОУТ ===== */
@media (max-width: 1100px){
    .details-side-panel{
        width: 48vw;
        min-width: 360px;
    }
}

/* ===== ТЕЛЕФОНДА PANEL ЖОҚ, ӘДЕТТЕГІ БЕТ ===== */
@media (max-width: 768px){
    .details-side-panel{
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
    }
}
.card-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-form{
  display: inline-block;
  margin: 0;
}

.delete-form .delete-btn{
  border: none;
  outline: none;
  cursor: pointer;
}

.delete-form .delete-btn i{
  pointer-events: none;
}
.card-actions .action-btn,
.card-actions .delete-form .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.card-actions .action-btn:hover,
.card-actions .delete-form .action-btn:hover {
  transform: translateY(-3px) scale(1.05);
}

.card-actions .action-btn:active,
.card-actions .delete-form .action-btn:active {
  transform: scale(0.96);
}

.delete-form .delete-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.card-actions .action-btn,
.card-actions .delete-form .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.card-actions .action-btn:hover,
.card-actions .delete-form .action-btn:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: #32a8ff !important;
  box-shadow: 0 0 12px rgba(50, 168, 255, 0.75), 0 0 22px rgba(50, 168, 255, 0.35) !important;
}

.card-actions .action-btn i,
.card-actions .delete-form .action-btn i {
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.card-actions .action-btn:hover i,
.card-actions .delete-form .action-btn:hover i {
  color: #4db8ff !important;
  text-shadow: 0 0 8px rgba(77, 184, 255, 0.8);
}

.delete-form .delete-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.car-title-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.car-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 16px;
}

.car-price{
  flex-shrink: 0;
  white-space: nowrap;
}
/* ===== Жарнамаларым тақырыбы ===== */
.myads-title{
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 26px 0;
  color: #fff;
}

@media (max-width: 768px){
  .myads-title{
    font-size: 34px;
    margin-bottom: 18px;
  }
}

@media (max-width: 480px){
  .myads-title{
    font-size: 28px;
    margin-bottom: 14px;
  }
}


/* ===== Артқа батырма ===== */
.back-btn{
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(15, 15, 18, 0.95);
  border: 1px solid rgba(255, 196, 0, 0.28);
  box-shadow: 0 0 12px rgba(255, 196, 0, 0.15);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.back-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 196, 0, 0.55);
  box-shadow: 0 0 16px rgba(255, 196, 0, 0.24);
}

.back-btn i{
  font-size: 20px;
  color: #f4b400;
}

@media (max-width: 768px){
  .back-btn{
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .back-btn i{
    font-size: 18px;
  }
}
.page-header .page-title{
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
  font-weight: 800;
}

@media (max-width: 768px){
  .page-header .page-title{
    font-size: 20px;
  }
}

@media (max-width: 480px){
  .page-header .page-title{
    font-size: 14px;
  }
}
.page-header{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.page-header .back-btn{
  position: static !important;
  flex: 0 0 auto;
}

.page-header .page-title{
  margin: 0;
  line-height: 1.1;
}

/* ===== INDEX: VIP / LUXURY ТӨМЕНГІ ИКОНКАЛАРДЫ БІРДЕЙ ҚЫЛУ ===== */
.action-icons-row .vip-star,
.action-icons-row .luxury-crown{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(12,12,12,0.95) !important;
  box-sizing: border-box !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* ===== INDEX: VIP ЖҰЛДЫЗ ===== */
.action-icons-row .vip-star i{
  color: #f7c400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(247,196,0,0.55) !important;
}

/* ===== INDEX: LUXURY КОРОНА ===== */
.action-icons-row .luxury-crown i{
  color: #f7c400 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(247,196,0,0.55) !important;
}

/* ===== INDEX: HOVER -> ТЕК ШЕТІ КӨК БОЛСЫН ===== */
.action-icons-row .vip-star:hover,
.action-icons-row .luxury-crown:hover{
  transform: translateY(-3px) scale(1.05) !important;
  border-color: #2fa8ff !important;
  box-shadow:
    0 0 0 1px rgba(37,168,255,0.9),
    0 0 10px rgba(37,168,255,0.28) !important;
}

/* ===== INDEX: ACTIVE ===== */
.action-icons-row .vip-star:active,
.action-icons-row .luxury-crown:active{
  transform: scale(0.96) !important;
}
/* ===== INDEX: СУРЕТ САНЫ ===== */
.car-image-wrap{
  position: relative;
}

.image-count-badge{
  position: absolute;
  right: 8px;
  bottom: 8px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
}
/* ===== INDEX: СУРЕТ САНЫ ЦИФРЫ ===== */
.image-count-badge{
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.luxury-card .image-count-badge{
  color: #fff !important;
}
/* ===== FAVORITES / INDEX: DETAILS SIDE PANEL ===== */
.details-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 9998;
}

.details-overlay.show{
  opacity: 1;
  visibility: visible;
}

.details-side-panel{
  position: fixed;
  top: 0;
  right: 0;
  width: min(680px, 100%);
  height: 100vh;
  background: #111;
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 9999;
  box-shadow: -10px 0 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

.details-side-panel.show{
  transform: translateX(0);
}

.details-side-panel iframe{
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #111;
}

body.panel-open{
  overflow: hidden;
}
/* ===== FAVORITES: HEADER-ДІ СӘЛ ТӨМЕН ТҮСІРУ ===== */
.favorites-topbar{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* ===== FAVORITES: AVTOKZ ЛОГО РАЗМЕРІ ===== */
.favorites-brand{
  font-size: 20px !important;
}

/*=== Жарнама қосу плюс ===*/
.side-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 420px;
  max-width: 100%;
  height: 100vh;
  background: #0f0f0f;
  z-index: 9999;
  transition: right 0.3s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}

.side-panel.open {
  right: 0;
}

.side-panel iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #0f0f0f;
}
.back-btn {
  background: none;
  border: none;
  color: #d4af37;
  cursor: pointer;
  padding: 0;
}
.back-btn{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255, 215, 0, 0.22);
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.10),
    0 0 18px rgba(255, 215, 0, 0.08),
    inset 0 0 8px rgba(255, 215, 0, 0.04);
  transition: all 0.25s ease;
  text-decoration: none;
}

.back-btn i{
  color: #f7c948;
  font-size: 22px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.28);
}

.back-btn:hover{
  border-color: rgba(255, 215, 0, 0.38);
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.16),
    0 0 26px rgba(255, 215, 0, 0.12),
    inset 0 0 10px rgba(255, 215, 0, 0.06);
  transform: translateY(-1px);
}


.header-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.3px;
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(15,15,15,0.92);
  border: 1px solid rgba(255, 215, 0, 0.16);
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.08),
    0 0 18px rgba(255, 215, 0, 0.06);
  transition: all 0.25s ease;
}

.header-brand:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 215, 0, 0.26);
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.12),
    0 0 24px rgba(255, 215, 0, 0.08);
}

.brand-blue{
  color: #2ea8ff;
  text-shadow: 0 0 8px rgba(46,168,255,0.22);
}

.brand-white{
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.08);
}
.page-header{
  display: flex;
  align-items: center;
  gap: 28px;
}
.page-header .header-brand{
  margin-right: 22px !important;
}

 /* Кіру мен тіркелу */
.auth-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #050b12;
}

.auth-card-simple{
  position: relative;
  width: 100%;
  max-width: 450px;
  background: linear-gradient(180deg, rgba(24,24,24,0.96), rgba(10,10,10,0.98));
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 28px;
  padding: 24px 24px 22px;
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.45);
}

.auth-back-btn{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(28, 28, 28, 0.96);
  border: 1px solid rgba(255, 215, 0, 0.22);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.08);
  margin-bottom: 16px;
  transition: all 0.22s ease;
}

.back-arrow-symbol{
  display: inline-block;
  color: #f5c400;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.16);
  transition: transform 0.22s ease, text-shadow 0.22s ease;
}

.auth-back-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.14),
    0 0 24px rgba(255, 215, 0, 0.08);
}

.auth-back-btn:hover .back-arrow-symbol{
   transform: translateX(-3px);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.28);
}

.auth-title{
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  margin: 6px 0 14px;
  line-height: 1.1;
  text-align: left;
}

.auth-form{
  display: flex;
  flex-direction: column;
  gap: 12x;
}

.auth-label{
  color: #d9d9d9;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: -1px;
}

.auth-input{
  width: 100%;
  height: 58px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #232323;
  color: #ffffff;
  font-size: 16px;
  padding: 0 16px;
  outline: none;
  box-sizing: border-box;
  transition: 0.25s ease;
}

.auth-input::placeholder{
  color: rgba(255,255,255,0.38);
}

.auth-input:focus{
  border-color: rgba(255, 215, 0, 0.32);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.05);
}

.auth-input,
.auth-input:focus,
.auth-input:active{
  background: #232323 !important;
  color: #ffffff !important;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active{
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #232323 inset !important;
  box-shadow: 0 0 0 1000px #232323 inset !important;
  transition: background-color 9999s ease-in-out 0s;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.password-box{
  position: relative;
}

.password-box .auth-input{
  padding-right: 52px;
}

.toggle-password{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  user-select: none;
  transition: 0.2s ease;
}

.toggle-password:hover{
  color: #f5c400;
}

.auth-submit{
  width: 100%;
  height: 58px;
  margin-top: 6px;
  border: none;
  border-radius: 17px;
  background: #0c3c57;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
}

.auth-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(12, 60, 87, 0.28);
}

@media (max-width: 640px){
  .auth-wrap{
    padding: 18px;
  }

  .auth-card-simple{
    max-width: 100%;
    padding: 22px 18px 20px;
    border-radius: 24px;
  }

  .auth-back-btn{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .back-arrow-symbol{
    font-size: 20px;
  }

  .auth-title{
    font-size: 20px;
    margin: 4px 0 16px;
  }

  .auth-label{
    font-size: 14px;
  }

  .auth-input{
    height: 54px;
    font-size: 16px;
    border-radius: 16px;
  }

  .auth-submit{
    height: 58px;
    font-size: 18px;
    border-radius: 16px;
  }
}
/* ===== ИИ көмекші: ашу батырмасы ===== */
.ai-open-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.20);
  background: rgba(15,15,15,0.96);
  color: #f5c400;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,215,0,0.06);
  transition: 0.22s ease;
}

.ai-open-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(255,215,0,0.12);
}

/* ===== ИИ көмекші: popup сыртқы қорабы ===== */
.ai-box {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  z-index: 9999;
}

.ai-box.show {
  display: block;
}

/* ===== ИИ көмекші: ішкі қорап ===== */



.ai-box-inner {
  width: 360px;
  background: linear-gradient(180deg, #111 0%, #0b0b0b 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.18);
  position: relative;
}

.ai-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.ai-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  background: #1f1f1f;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.ai-textarea {
  width: 100%;
  min-height: 125px;
  resize: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: #232323;
  color: #fff;
  padding: 18px;
  font-size: 18px;
  line-height: 1.5;
  box-sizing: border-box;
}

.ai-textarea::placeholder {
  color: #8f8f8f;
}

.ai-limit {
  margin-top: 10px;
  text-align: right;
  color: #aaa;
  font-size: 14px;
}

.ai-actions {
  margin-top: 18px;
}

.ai-send-btn {
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 16px 20px;
  background: #0d4b72;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.ai-result {
  margin-top: 18px;
  min-height: 110px;
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 16px;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 768px) {
  .ai-box {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  .ai-box-inner {
    width: 100%;
    padding: 18px;
    border-radius: 22px;
  }
}
body {
  font-family: "Segoe UI", Arial, sans-serif;
}

.custom-file-btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 12px;
  width: auto;
  display: inline-block;
}
.upload-label {
  font-size: 12px !important;
}

#fileChosenText {
  font-size: 12px !important;
}

.upload-note {
  font-size: 12px !important;
}
  /*кредит калькулятор*/

  .credit-accordion {
  margin-top: 14px;
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.credit-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

#creditArrow {
  font-size: 20px;
  transition: transform 0.25s ease;
}

.credit-content {
  display: none;
  padding: 0 18px 18px;
}

.credit-content.show {
  display: block;
}

.credit-control {
  margin-bottom: 16px;
}

.credit-control-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.credit-control-top label,
.credit-field label {
  color: #d8d8d8;
  font-size: 14px;
  font-weight: 600;
}

#downPercentValue {
  color: #ffd54a;
  font-size: 14px;
  font-weight: 800;
}

#downPercent {
  width: 100%;
  accent-color: #f3c400;
}

.credit-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.credit-field select,
.credit-field input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
}

.credit-field select option {
  background: #1b1b1b;
  color: #fff;
}

.credit-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.credit-result-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.credit-result-label {
  display: block;
  color: #aaaaaa;
  font-size: 13px;
  margin-bottom: 8px;
}

.credit-result-card strong {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 700px) {
  .credit-two-cols,
  .credit-results {
    grid-template-columns: 1fr;
  }

  .credit-toggle {
    font-size: 16px;
    padding: 14px 16px;
  }

  .credit-content {
    padding: 0 16px 16px;
  }

  .credit-result-card strong {
    font-size: 17px;
  }
}
/* ===== Кредит калькуляторды жинақы қылу ===== */
.credit-accordion {
  margin-top: 10px;
  border-radius: 18px;
}

.credit-toggle {
  padding: 12px 16px;
  font-size: 16px;
}

.credit-content {
  padding: 0 14px 14px;
}

.credit-control {
  margin-bottom: 12px;
}

.credit-control-top {
  margin-bottom: 6px;
}

.credit-control-top label,
.credit-field label {
  font-size: 13px;
}

#downPercentValue {
  font-size: 13px;
}

.credit-two-cols {
  gap: 10px;
  margin-bottom: 12px;
}

.credit-field select,
.credit-field input {
  height: 40px;
  margin-top: 6px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
}

.credit-results {
  gap: 10px;
}

.credit-result-card {
  border-radius: 13px;
  padding: 11px 12px;
}

.credit-result-label {
  font-size: 12px;
  margin-bottom: 5px;
}

.credit-result-card strong {
  font-size: 16px;
}

@media (max-width: 700px) {
  .credit-toggle {
    padding: 11px 14px;
    font-size: 15px;
  }

  .credit-content {
    padding: 0 12px 12px;
  }

  .credit-field select,
  .credit-field input {
    height: 38px;
    font-size: 13px;
  }

  .credit-result-card {
    padding: 10px 11px;
  }

  .credit-result-card strong {
    font-size: 15px;
  }
}
#downPercent,
#annualRate {
  width: 100%;
}
#downPercent,
#annualRate {
  width: 100%;
  accent-color: #f3c400;
}

#downPercent::-webkit-slider-thumb,
#annualRate::-webkit-slider-thumb {
  cursor: pointer;
}

#downPercent::-moz-range-thumb,
#annualRate::-moz-range-thumb {
  cursor: pointer;
}
#downPercentValue,
#annualRateValue {
  color: #f3c400;
  font-weight: 800;
}
/* Details бет: атау мен баға бір қатарда, баға оң жақта */
.details-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 6px;
}

.details-page-name {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.details-page-price {
  color: #ff4d4d;
  font-size: 16px;
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* ===== Пікірлер блогы ===== */
.comments-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 14px;
}

.comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.comment-top strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.comment-top span {
  color: #aaa;
  font-size: 12px;
}

.comment-text {
  color: #eaeaea;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.no-comments {
  color: #aaa;
  font-size: 14px;
  padding: 10px 0 4px;
}

/* ===== Пікірдің үстіңгі бөлігі ===== */
.comment-user-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== Пікірді өшіру батырмасы ===== */
.comment-delete-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 80, 80, 0.35);
  border-radius: 12px;
  background: rgba(255, 80, 80, 0.08);
  color: #ff6b6b;
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s ease;
}

.comment-delete-btn:hover {
  background: rgba(255, 80, 80, 0.16);
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.18);
}
/* ===== Admin батырмалары ===== */
.comment-admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-approve-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(70, 220, 120, 0.35);
  border-radius: 12px;
  background: rgba(70, 220, 120, 0.08);
  color: #63e68a;
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s ease;
}

.comment-approve-btn:hover {
  background: rgba(70, 220, 120, 0.16);
  box-shadow: 0 0 12px rgba(70, 220, 120, 0.18);
}

/* ===== Жасырылған пікір блогы ===== */
.hidden-comments-list {
  margin-top: 8px;
}

.hidden-comment-card {
  border-color: rgba(255, 120, 120, 0.14);
  background: rgba(255, 90, 90, 0.04);
}

.comment-hidden-reason {
  color: #ffb3b3;
  font-size: 12px;
  margin-bottom: 10px;
}  

/* Тіл аудару */



.translate-btn {
    margin-top: 10px;
    padding: 8px 14px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s ease;
}

.translate-btn:hover {
    background: #3a3a3a;
    border-color: #00bfff;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.35);
}

.translation-box {
    margin-top: 10px;
    padding: 10px 12px;
    background: #1c1c1c;
    border: 1px solid #333;
    border-radius: 10px;
    color: #ddd;
    line-height: 1.5;
}

.translation-content {
    font-size: 14px;
}

/* ===== Толығырақ беттегі артқа стрелка ===== */
.back-icon,
.details-back-btn,
.gallery-back-btn {
    width: 52px !important;
    height: 52px !important;
    font-size: 28px !important;
    border-radius: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-icon i,
.details-back-btn i,
.gallery-back-btn i {
    font-size: 28px !important;
}

@media (max-width: 768px) {
    .back-icon,
    .details-back-btn,
    .gallery-back-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
        border-radius: 12px !important;
        top: 10px !important;
        left: 10px !important;
    }

    .back-icon i,
    .details-back-btn i,
    .gallery-back-btn i {
        font-size: 22px !important;
    }
}


/*QR -төлем */
.vip-pay-link{
    display:inline-block;
    margin-top:14px;
    padding:12px 18px;
    border-radius:12px;
    background:linear-gradient(180deg,#ffd54d,#d69f00);
    color:#111;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 0 10px rgba(255,215,0,0.22);
}

/* телеграмда баға шығару*/
.payment-badge{
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}

.payment-badge.pending{
  background: rgba(255, 193, 7, 0.15);
  color: #ffd54f;
  border: 1px solid rgba(255, 193, 7, 0.35);
}

.payment-badge.success{
  background: rgba(46, 204, 113, 0.15);
  color: #7dffb3;
  border: 1px solid rgba(46, 204, 113, 0.35);
}

.payment-badge.rejected{
  background: rgba(231, 76, 60, 0.15);
  color: #ff8b8b;
  border: 1px solid rgba(231, 76, 60, 0.35);
}

/* ===== КАРТОЧКА КАТЕГОРИЯ BADGE ===== */
/* Қазақша комментарий: атаудың астында шығатын кішкентай белгі */
.category-badge-row{
    margin-top: 6px;
    margin-bottom: 4px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.category-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* СТО */
.sto-badge{
    background: rgba(82, 168, 219, 0.12);
    color: #52a8db;
    border: 1px solid rgba(82, 168, 219, 0.35);
}

/* Жалға беру */
.rent-badge{
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.35);
}

/* Бөлшек */
.parts-badge{
    background: rgba(255, 215, 0, 0.10);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.30);
}

/* ===== Badge төменгі оң жақта ===== */
.card-category-right{
    margin-left: auto;
    display: flex;
    align-items: center;
}

.category-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
    white-space: nowrap;
}





/* 17.06.2026 22:50
   Іздеу/фильтр кезінде VIP/LUX үстіңгі карточка созылып кетпесін */
.top-grid.top-grid-filter {
    grid-template-columns: repeat(auto-fit, minmax(280px, 380px)) !important;
    justify-content: flex-start !important;
    justify-items: stretch !important;
}

.top-grid.top-grid-filter .car-card,
.top-grid.top-grid-filter .vip-card,
.top-grid.top-grid-filter .luxury-card {
    width: 100% !important;
    max-width: 380px !important;
    grid-column: auto !important;
}
/* 25.06.2026 — TOP VIP/LUX карточка созылып кетпесін */
.top-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px)) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  gap: 24px !important;
}

.top-grid .car-card,
.top-grid .vip-card,
.top-grid .luxury-card {
  width: 100% !important;
  max-width: 380px !important;
}

/* ===== Жарнамаға шағымдану батырмасы ===== */

.complaint-open-btn {
    color: #f0bd28;
    border-color: rgba(240, 189, 40, 0.65);
}

.complaint-open-btn:hover {
    color: #ffd65a;
    border-color: #f0bd28;
    box-shadow: 0 0 14px rgba(240, 189, 40, 0.35);
}


/* ===== Шағым жіберу терезесі ===== */

.complaint-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.complaint-modal.is-open {
    display: flex;
}

/* Терезенің артындағы қара фон */
.complaint-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
}

/* Шағым терезесінің негізгі бөлігі */
.complaint-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px 22px 22px;
    background: #202020;
    border: 1px solid rgba(240, 189, 40, 0.75);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
}

.complaint-modal-box h3 {
    margin: 0 38px 22px 0;
    color: #f1f1f1;
    font-size: 21px;
}

/* Терезені жабу батырмасы */
.complaint-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #dddddd;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    line-height: 36px;
    cursor: pointer;
}

.complaint-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Шағым формасы */
.complaint-modal-box form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.complaint-modal-box label {
    margin-top: 4px;
    color: #dddddd;
    font-size: 14px;
    font-weight: 600;
}

.complaint-modal-box select,
.complaint-modal-box textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    color: #eeeeee;
    background: #151515;
    border: 1px solid #444444;
    border-radius: 11px;
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.complaint-modal-box select:focus,
.complaint-modal-box textarea:focus {
    border-color: #f0bd28;
    box-shadow: 0 0 0 3px rgba(240, 189, 40, 0.12);
}

.complaint-modal-box textarea {
    min-height: 105px;
    resize: vertical;
}

/* Шағымды жіберу батырмасы */
.complaint-submit-btn {
    width: 100%;
    margin-top: 10px;
    padding: 13px 16px;
    color: #111111;
    background: #f0bd28;
    border: none;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.complaint-submit-btn:hover {
    background: #ffd65a;
}

/* Модаль ашық кезде негізгі бетті жылжытпаймыз */
body.complaint-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .complaint-modal {
        padding: 12px;
    }

    .complaint-modal-box {
        padding: 23px 17px 18px;
        border-radius: 15px;
    }

    .complaint-modal-box h3 {
        font-size: 19px;
    }
}

/* Төлем тексерілу статусы */
.payment-badge.pending {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.payment-badge.pending small {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    opacity: 1;
}

/* ===== ТЕЛЕФОН: ОҢ ЖАҚТАН АШЫЛАТЫН ПАНЕЛЬДЕРДІ ЭКРАНҒА СЫЙҒЫЗУ ===== */
@media (max-width: 768px) {

    .side-panel,
    .details-side-panel {
        width: 100vw !important;       /* Панель телефон экранының толық енін алады */
        min-width: 0 !important;        /* 430px шектеуін телефонда өшіреді */
        max-width: 100vw !important;    /* Экраннан кеңейіп кетуіне жол бермейді */
        box-sizing: border-box;         /* Padding панель енін үлкейтпейді */
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;             /* Телефондағы көлденең сырғуды жабады */
    }
}

/* ===== AvtoKZ төменгі авторлық жазуы ===== */
.site-footer {
    width: 100%;
    padding: 24px 15px;
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    color: #8f98a8;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}