/*
 * Mobile/Tablet Slick Center Mode for FWDU3DCar
 * - Hides the 3D carousel under tablet/mobile breakpoints
 * - Shows a Slick carousel using the same card markup/data
 * - Styles are aligned with desktop theme colors
 */

:root {
  --fwdu-primary: #2f8fda; /* desktop blue */
  --fwdu-accent: #F7C833;  /* accent yellow used in plugin */
  --fwdu-dark:   #2C2C2C;
  --fwdu-card-bg: #ffffff; /* will be overridden per-card by JS to match image bg */
}

/* Default: keep hidden until breakpoint */
.fwdu3dcar-slick-mobile { 
  display: none; 
  margin: 0 auto;
  max-width: 1200px;
  position: relative; /* anchor arrows */
  padding: 60px 0;
}
.fwdu3dcar-slick-mobile .slick-dots {
    display: none !important;
}
/* Provide a predictable slide/card layout */
.fwdu3dcar-slick-mobile .fwdu3dcar-slide { padding: 8px; outline: none; }
.fwdu3dcar-slick-mobile .slick-list { margin: 0 -8px; padding: 0 !important; }
.fwdu3dcar-slick-mobile .slide-card {
  background: transparent;
  border-radius: 14px;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  display: grid; grid-template-rows: auto min-content; gap: 12px;
  width: 100%; /* let Slick control width to avoid whitespace */
}

/* Media frame (rounded rectangle) + meta area to match screenshot */
.fwdu3dcar-slick-mobile .slide-media {
  padding: 6px; /* small inset like screenshot */
}


/* Image area maintains portrait ratio and scales safely */
.fwdu3dcar-slick-mobile .slide-img-wrap { 
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  /* skeleton shimmer while loading */
  animation: fwdu3dcar-shimmer 1.2s infinite linear;
}
.fwdu3dcar-slick-mobile .slide-img-wrap {
    border-radius: 50px;
}
@keyframes fwdu3dcar-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
.fwdu3dcar-slick-mobile .slide-img-wrap .slide-link { display:block; width:100%; height:100%; text-decoration:none; }
.fwdu3dcar-slick-mobile .slide-img-wrap img { width: 100%; height: 100%; display: block; object-fit: contain; }
.fwdu3dcar-slick-mobile .slide-img-wrap.img-loaded { animation: none; }

/* Meta section (white) */
.fwdu3dcar-slick-mobile .slide-meta { background: #fff; border-radius: 10px; padding: 10px 8px 14px; }

/* Caption inherits card content styles from plugin */
.fwdu3dcar-slick-mobile .slide-caption { padding: 0; display:flex; flex-direction:column; gap:8px; }

.fwdu3dcar-slick-mobile .gallery-card-title { margin: 0; font-weight: 600; line-height: 1.25; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }
.fwdu3dcar-slick-mobile .gallery-card-description { color:#555; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; min-height: 2.4em; }
/* Button styling intentionally inherits site/theme styles via classes
   "gallery-card-button btn btn-primary". No extra CSS here to avoid conflicts. */

/* Equal height slides; align to top to avoid big bottom gaps when visual sizes differ */
.fwdu3dcar-slick-mobile .slick-slide { height: auto; }
.fwdu3dcar-slick-mobile .slick-slide > div { height: 100%; }
/* Use flex track only on wider screens to equalize heights; keep default on phones for proper centerMode behavior */
@media (max-width: 768px) {
    .fwdu3dcar-slick-mobile .slide-img-wrap img {
      border-radius: 38px;
    }
    .fwdu3dcar-slick-mobile .box-inner-content { padding: 0; }
}
@media (min-width: 768px) {
  .fwdu3dcar-slick-mobile .slick-track { display: flex; align-items: flex-start; }
}

/* Center mode emphasis without changing actual scale (prevents white gaps) */
.fwdu3dcar-slick-mobile .slick-list { overflow: visible; }
@media (max-width: 575.98px) {
  /* Keep minimal side padding; centerMode uses centerPadding for peeks */
  .fwdu3dcar-slick-mobile .slick-list { padding-left: 8px; padding-right: 8px; }
}
.fwdu3dcar-slick-mobile .slick-slide .slide-card { transform: none; }
.fwdu3dcar-slick-mobile .slick-center .slide-card { transform: none; }
.fwdu3dcar-slick-mobile .slick-center { opacity: 1; }

/* Accessible focus */
/* .fwdu3dcar-slick-mobile:focus-within .slick-current .slide-card { box-shadow: 0 0 0 3px var(--fwdu-primary), 0 10px 24px rgba(0,0,0,0.16); } */

/* Navigation: circular black buttons with white chevrons (matches screenshot) */
.fwdu3dcar-slick-mobile .slick-prev,
.fwdu3dcar-slick-mobile .slick-next {
  position: absolute;
  width: 42px; height: 42px;
  z-index: 1000; /* ensure above cards */
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.8);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  pointer-events: auto;
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
/* Keep arrows inside the viewport on all screens */
.fwdu3dcar-slick-mobile .slick-prev { left: 8px; }
.fwdu3dcar-slick-mobile .slick-next { right: 8px; left: auto; }

/* Build the chevron with borders so no fonts/images are needed */

.fwdu3dcar-slick-mobile .slick-next:before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  transform-origin: center;
}
.fwdu3dcar-slick-mobile .slick-prev:before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  transform-origin: center;
}
.fwdu3dcar-slick-mobile .slick-prev:before { transform: translate(-50%, -50%) rotate(135deg); }
.fwdu3dcar-slick-mobile .slick-next:before { transform: translate(-50%, -50%) rotate(-45deg); }

.fwdu3dcar-slick-mobile .slick-prev:hover,
.fwdu3dcar-slick-mobile .slick-next:hover { background: rgba(0,0,0,0.9); }

/* Also style our externally-provided nav buttons (used as prevArrow/nextArrow) */
@media (max-width: 992px) {
  .fwdu3dcar-mobile-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 30; pointer-events: none; /* container ignores clicks */
  }
  .fwdu3dcar-mobile-nav.left { left: 8px; }
  .fwdu3dcar-mobile-nav.right { right: 8px; }
  .fwdu3dcar-mobile-nav .fwdu3dcar-mobile-arrow {
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,0.8);
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
    display: inline-flex; align-items: center; justify-content: center;
    pointer-events: auto; /* the button remains clickable */
    cursor: pointer;
  }
  .fwdu3dcar-mobile-nav .fwdu3dcar-mobile-arrow:focus { outline: 2px solid #fff3; outline-offset: 2px; }
  .fwdu3dcar-mobile-nav .fwdu3dcar-mobile-arrow:hover { background: rgba(0,0,0,0.9); }
  .fwdu3dcar-mobile-nav.left .fwdu3dcar-mobile-arrow:before,
  .fwdu3dcar-mobile-nav.right .fwdu3dcar-mobile-arrow:before {
    content: "";
    width: 10px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    display: inline-block;
  }
  .fwdu3dcar-mobile-nav.left .fwdu3dcar-mobile-arrow:before { transform: rotate(135deg); }
  .fwdu3dcar-mobile-nav.right .fwdu3dcar-mobile-arrow:before { transform: rotate(-45deg); }
}

/* Dots styled to match theme */
.fwdu3dcar-slick-mobile .slick-dots li button:before {
  font-size: 10px; color: rgba(0,0,0,0.25);
}
.fwdu3dcar-slick-mobile .slick-dots li.slick-active button:before {
  color: var(--fwdu-primary);
}

.fwdu3dcar-slick-mobile.slick-dotted {
  margin-bottom: 0 !important;
}

/* Remove excessive white space at bottom of slider */
.fwdu3dcar-slick-mobile {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  /* Override any theme or global styles */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure proper footer alignment */
.fwdu3dcar-slick-mobile .slick-track {
  margin-bottom: 0 !important;
}

/* Remove any unwanted spacing from slider container */
.fwdu3dcar-slick-mobile .slick-list {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure slides don't add bottom spacing */
.fwdu3dcar-slick-mobile .fwdu3dcar-slide:last-child {
  margin-bottom: 0 !important;
}

/* Remove any potential overflow spacing */
.fwdu3dcar-slick-mobile {
  overflow: hidden;
}

/* Ensure proper container alignment with footer */
.fwdu3dcar-slick-mobile::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Override WordPress content wrapper spacing */
.entry-content .fwdu3dcar-slick-mobile,
.post-content .fwdu3dcar-slick-mobile,
.content .fwdu3dcar-slick-mobile {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Handle shortcode wrapper spacing */
.fwdu3dcar-shortcode-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
/* Small screens: keep arrows visible and slightly smaller */
@media (max-width: 576px) {
  .fwdu3dcar-slick-mobile .slick-prev,
  .fwdu3dcar-slick-mobile .slick-next { width: 36px; height: 36px; }
  .fwdu3dcar-slick-mobile .slick-prev { left: 6px; }
  .fwdu3dcar-slick-mobile .slick-next { right: 6px; }
  .fwdu3dcar-mobile-nav .fwdu3dcar-mobile-arrow { width: 36px; height: 36px; }
}

/* Tablets in portrait (e.g., 768–820px): nudge inwards if container is tight */
@media (max-width: 820px) and (min-width: 768px) {
  .fwdu3dcar-slick-mobile .slick-prev { left: 6px; }
  .fwdu3dcar-slick-mobile .slick-next { right: 6px; }
}

/* Breakpoints: switch from 3D -> Slick */
@media (max-width: 992px) {
  .fwdu3dcar-main-holder { display: none !important; }
  /* Keep hiding the WebGL/3D container by ID */
  [id^="fwdu3dcarDiv"] { display: none !important; }
  /* Show Slick mobile container */
  .fwdu3dcar-slick-mobile { display: block; }
  /* Show Slick mobile container */
  .fwdu3dcar-slick-mobile { display: block; overflow-y: hidden;}
  .custom-banner-slider-php { z-index: 9999; }
}

/* Tablet */
@media (max-width: 1024px) {
  .fwdu3dcar-slick-mobile .fwdu3dcar-slide { padding: 10px; }
  .fwdu3dcar-slick-mobile .slick-list { margin: 0 -10px; }
}

/* Phone */
@media (max-width: 768px) {
  .fwdu3dcar-slick-mobile .fwdu3dcar-slide { 
    padding: 4px;
    border-radius: 15px;
    margin: 0 4px;
   }
  .fwdu3dcar-slick-mobile .slick-list { margin: 0 -4px; }
  .fwdu3dcar-slick-mobile .gallery-card-description { font-size: .9rem; }
  .box-inner-content.text-left.white-box:before {
    content: none;
  }
}