/*!
 * Rental Genset Pekanbaru — vanilla overrides
 * Adds visual support for vanilla replacements + image fit rules
 */

/* ---------------- Auto-fit images (no manual crop needed) ---------------- */
/* All images inside thumbnail-style containers use object-fit: cover.
   This means the image will auto-fill the container, maintain aspect ratio,
   and crop itself (CSS-level, no file edit needed). Safe for any image size. */
.cs_hero_thumbnail img,
.cs_about_thumbnail img,
.cs_benefit_thumbnail img,
.cs_video_block_style_1,
.cs_video_block_style_1 img,
.cs_card_thumbnail img,
.cs_post_thumbnail img,
.cs_cta_thumbnail_1 img,
.cs_cta_thumbnail_2 img,
.cs_cta_thumbnail img,
.cs_service_details_banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Avatars & small icons: cover too, but they keep their round shape */
.cs_avatar_icon img,
.cs_avatar_style_1 .cs_avatar_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Step thumbnails: let them be normal flow (only first visible) */
.cs_step_thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}
.cs_step_thumbnail:not(:first-child) { display: none; }

/* ---------------- Slider track & pager dots ---------------- */
.cs-track {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs-track .cs-slide {
  flex: 0 0 auto;
  list-style: none;
  box-sizing: border-box;
}
.cs_slider.cs_style_1 .cs_slider_wrapper {
  overflow: hidden;
  position: relative;
}
.cs_pagination.cs_style_1 {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.cs-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  transition: background-color .25s ease, transform .25s ease;
}
.cs-pager-dot.active {
  background: var(--cs-primary, #2c5cff);
  transform: scale(1.15);
}
.cs_slider_arrows.cs_style_1 {
  display: flex;
  gap: 12px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.cs_slider_arrows.cs_style_1 .cs_left_arrow,
.cs_slider_arrows.cs_style_1 .cs_right_arrow {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cs_slider_arrows.cs_style_1 .cs_left_arrow { position: absolute; left: 8px; }
.cs_slider_arrows.cs_style_1 .cs_right_arrow { position: absolute; right: 8px; }

/* Fade slide */
.cs_slider[data-fade="1"] .cs-track { display: block; }
.cs_slider[data-fade="1"] .cs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.cs_slider[data-fade="1"] .cs-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* ---------------- TomSelect vanilla wrapper ---------------- */
.ts-wrap {
  position: relative;
  width: 100%;
}
.ts-single {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ts-single::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  transform: rotate(45deg);
  margin-right: 6px;
  transition: transform .2s ease;
}
.ts-wrap.active .ts-single::after { transform: rotate(-135deg); }
.ts-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
  padding: 6px 0;
}
.ts-wrap.active .ts-dropdown { display: block; }
.ts-option {
  padding: 10px 18px;
  cursor: pointer;
  font-size: 15px;
  color: #1f2937;
}
.ts-option:hover { background: rgba(44, 92, 255, 0.06); }
.ts-option.selected { background: rgba(44, 92, 255, 0.1); color: var(--cs-primary, #2c5cff); font-weight: 600; }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cs-track { transition: none !important; }
  .cs-pager-dot { transition: none !important; }
}

/* ---------------- Steps animation transition ---------------- */
.cs_step_thumbnail {
  transition: opacity .8s ease;
}

/* ---------------- FAQ bulleted answers ---------------- */
.cs_accordian_body p.cs_faq_desc {
  margin: 0 0 12px;
  line-height: 1.6;
  color: var(--gray-color);
}
.cs_accordian_body ul.cs_faq_bullets {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
}
.cs_accordian_body ul.cs_faq_bullets li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.cs_accordian_body ul.cs_faq_bullets li:last-child {
  margin-bottom: 0;
}

/* ---------------- Gallery grid (12 images, 4 col PC / 2 col mobile) ---------------- */
.cs_gallery_grid .cs_gallery_item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}
.cs_gallery_grid .cs_gallery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.cs_gallery_grid .cs_gallery_item:hover img {
  transform: scale(1.06);
}
.cs_gallery_grid .cs_gallery_item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(31, 119, 214, 0.25) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.cs_gallery_grid .cs_gallery_item:hover::after {
  opacity: 1;
}

/* ---------------- About section image (responsive aspect ratio) ---------------- */
.cs_about_image {
  width: 100%;
  overflow: hidden;
}
.cs_about_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  aspect-ratio: 16 / 9;
}
@media (max-width: 767px) {
  .cs_about_image img {
    aspect-ratio: 1 / 1;
    object-position: center;
  }
}
.cs_lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 47, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  cursor: zoom-out;
  animation: cs_lb_fade .25s ease;
}
.cs_lightbox.is-active {
  display: flex;
}
.cs_lightbox img {
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: cs_lb_zoom .3s ease;
  cursor: default;
}
.cs_lightbox .cs_lightbox_close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.cs_lightbox .cs_lightbox_close:hover {
  background: rgba(255, 255, 255, 0.3);
}
@keyframes cs_lb_fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cs_lb_zoom {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Mobile gallery heading — keep centered */
@media (max-width: 767px) {
  .cs_gallery_section .cs_section_heading_style_1 {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------- Hero thumbnail — ensure image not clipped on PC ---------------- */
@media (min-width: 1200px) {
  .cs_hero_style_1 .cs_hero_thumbnail {
    top: 110px;
    max-height: calc(100vh - 220px);
  }
  .cs_hero_style_1 .cs_hero_thumbnail img {
    height: auto;
    max-height: calc(100vh - 240px);
    object-fit: contain;
  }
}
.cs_recent_posts { list-style: none; padding: 0; margin: 0; }
.cs_recent_post_item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #e5e7eb;
}
.cs_recent_post_item:last-child { border-bottom: none; }
.cs_recent_post_item:hover h5 { color: var(--accent-color, #1F77D6); }
.cs_recent_post_item img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.cs_recent_post_item h5 {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  transition: color .2s ease;
}
.cs_recent_post_item > div { flex: 1; }