/* ==== Vehicle Form ==== */
.vfp-form {
  max-width: 720px;
  margin: 20px auto;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
}
.vfp-row { margin-bottom: 12px }
.vfp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vfp-form input[type=text],
.vfp-form input[type=number],
.vfp-form input[type=date],
.vfp-form select,
.vfp-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.vfp-form textarea { min-height: 110px }
.vfp-file-label { display: block; margin-bottom: 6px; font-weight: 600 }
.vfp-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.vfp-preview {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.vfp-btn {
  background: #6D3078;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
}
.vfp-success { color: #2e7d32; text-align: center; font-weight: 600 }
.vfp-error { color: #c62828; text-align: center; font-weight: 600 }

/* ==== Filters ==== */
.vfp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
}
.vfp-filters input[type=text],
.vfp-filters input[type=number],
.vfp-filters select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* ==== Archive Grid ==== */
.vfp-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.vfp-card {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.vfp-thumb {
  width: 100%;
  height: 200px;             /* fixed height */
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vfp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vfp-noimg {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  color: #999;
}
.vfp-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.vfp-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4em;
  max-height: 2.8em;        /* 2 lines max */
  overflow: hidden;
}
.vfp-meta-line {
  display: flex;
  gap: 05px;
  font-size: 12px;
  color: #666;
}
.vfp-price {
  font-size: 18px;
  font-weight: 700;
}
.vfp-link {
  display: inline-block;
  margin-top: 10px;         /* compact button gap */
}

/* ==== Single Vehicle Page ==== */
.vfp-single {
  max-width: 1000px;
  margin: 20px auto;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
}
.vfp-single h1 { margin: 10px 0 16px }

/* Main slider/gallery */
.vfp-swiper {/* Set a fixed height for consistency */
.vfp-swiper {
    position: relative;
    width: 100%;
    height: auto;  /* adjust as you like */
    border-radius: 8px;
    overflow: hidden;
}

.vfp-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* keeps aspect ratio, crops extra */
    border-radius: 8px;
}

/* Put pagination inside the image area */
.vfp-swiper .swiper-pagination {
    bottom: 05px !important;
}

/* Align arrows nicely */
.vfp-swiper .swiper-button-next,
.vfp-swiper .swiper-button-prev {
    top: 10%;
    transform: translateY(-50%);
}

/* Thumbnails below gallery */
.vfp-single .vfp-thumb {
  width: 120px;
  height: 80px;
  margin: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.vfp-single .vfp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vfp-meta p { margin: 6px 0 }
.vfp-actions {
  display: flex;
  gap: 05px;
  margin: 05px 0;
}
.vfp-actions a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}
.vfp-call { background: #1976d2; color: #fff }
.vfp-wa { background: #25D366; color: #fff }
.vfp-back { background: #f1f1f1; color: #333 }

/* ==== Responsive ==== */
@media (max-width: 900px) {
  .vfp-grid { grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 600px) {
  .vfp-grid { grid-template-columns: 1fr }
  .vfp-grid-2 { grid-template-columns: 1fr }
}
/* === Archive Cards Fix === */
.vfp-card {
  display: block;        /* remove flex forcing */
}
.vfp-card-body {
  padding: 12px;
}
.vfp-link {
  margin-top: 12px;      /* small gap, no auto push */
}

/* === Single Vehicle Page Fix === */
.vfp-swiper {
  width: 100%;
  max-height: 400px;     /* fix height */
  overflow: hidden;
  margin-bottom: 05px;   /* reduce gap */
}
.vfp-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop neatly */
  display: block;
}
/* General Button Styles */
.vfp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Primary (Message) Button */
.vfp-btn-primary {
  background: #0073e6;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.vfp-btn-primary:hover {
  background: #005bb5;
}

/* WhatsApp Button */
.vfp-btn-whatsapp {
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.vfp-btn-whatsapp:hover {
  background: #1da851;
}

/* FontAwesome WhatsApp Icon */
.vfp-btn-whatsapp i {
  font-size: 18px;
}
/* Popup Overlay */
#messageFormModal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Popup Box */
#messageFormModal .vfp-modal-content {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-in-out;
}

/* Close Button */
#messageFormModal .close {
  float: right;
  font-size: 22px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
}

/* Form Inputs */
#messageFormModal input,
#messageFormModal textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* Submit Button */
#messageFormModal button[type="submit"] {
  background: #0073e6;
  color: white;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
#messageFormModal button[type="submit"]:hover {
  background: #005bb5;
}

/* Fade Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}