/* Extended Styles for SOR Rental Theme */

/* Force Native HTML5 Date Picker Calendar Icon to White */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.9;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Modern Micro-interactions & Buttons */
.btn-primary {
  background-color: var(--sor-primary);
  color: #000000;
  font-weight: 700;
  border-radius: var(--sor-radius-btn);
  padding: 0.75rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(250, 204, 21, 0.25);
}

.btn-primary:hover {
  background-color: var(--sor-primary-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(250, 204, 21, 0.4);
}

.btn-secondary {
  background-color: var(--sor-bg-card);
  border: 1px solid var(--sor-border);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--sor-radius-btn);
  padding: 0.75rem 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
}

.btn-secondary:hover {
  border-color: var(--sor-primary);
  background-color: var(--sor-bg-card-hover);
}

/* Skeleton Loading State */
.skeleton-box {
  background: linear-gradient(90deg, #15161a 25%, #26282d 50%, #15161a 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite ease-in-out;
  border-radius: 12px;
}

@keyframes skeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Range Slider Styling */
input[type=range] {
  -webkit-appearance: none;
  background: var(--sor-border);
  height: 6px;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--sor-primary);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

/* Infinite Smooth Auto-Scroll Reviews Marquee */
@keyframes marqueeSmooth {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.sor-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: marqueeSmooth 40s linear infinite;
  will-change: transform;
}

.sor-marquee-track:hover {
  animation-play-state: paused;
}

/* Guarantee 100% Opacity and Vibrancy for Speaker Product Cards & Sections */
.sor-card, #popular-speakers, #trending-speakers, #categories, #sor-home-speaker-grid, #sor-speaker-grid {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.sor-card img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ================================================================
   COMPACT CARD OVERRIDES — Search Modal & Wishlist Drawer
   Forces full-size cards to render as slim horizontal rows
   ================================================================ */

/* Container: single-column flex list */
#sor-global-search-results .sor-card,
#sor-wishlist-drawer-body .sor-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: 14px !important;
  min-height: unset !important;
}

/* Hide the full-bleed image block (aspect-square mt-8 mb-2) */
#sor-global-search-results .sor-card > a.block,
#sor-wishlist-drawer-body .sor-card > a.block {
  flex-shrink: 0 !important;
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Image fills the small thumb */
#sor-global-search-results .sor-card > a.block img,
#sor-wishlist-drawer-body .sor-card > a.block img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Details section: takes remaining width */
#sor-global-search-results .sor-card > div.mt-2,
#sor-wishlist-drawer-body .sor-card > div.mt-2 {
  flex: 1 !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}

/* Shrink title */
#sor-global-search-results .sor-card h3,
#sor-wishlist-drawer-body .sor-card h3 {
  font-size: 0.7rem !important;
  margin-bottom: 0.2rem !important;
  line-height: 1.2 !important;
}

/* Hide feature pills to save space */
#sor-global-search-results .sor-card .flex.flex-wrap.gap-1\.5.mb-4,
#sor-wishlist-drawer-body .sor-card .flex.flex-wrap.gap-1\.5.mb-4 {
  display: none !important;
}

/* Shrink power/battery line */
#sor-global-search-results .sor-card .flex.items-center.gap-2.text-xs,
#sor-wishlist-drawer-body .sor-card .flex.items-center.gap-2.text-xs {
  font-size: 0.6rem !important;
  margin-bottom: 0.15rem !important;
}

/* Shrink price & action footer */
#sor-global-search-results .sor-card .flex.items-center.justify-between.pt-3,
#sor-wishlist-drawer-body .sor-card .flex.items-center.justify-between.pt-3 {
  padding-top: 0.25rem !important;
  border-top: none !important;
}

#sor-global-search-results .sor-card .text-xl.font-black,
#sor-wishlist-drawer-body .sor-card .text-xl.font-black {
  font-size: 0.8rem !important;
}

/* Shrink badges layer  */
#sor-global-search-results .sor-card .absolute.top-4.left-4,
#sor-wishlist-drawer-body .sor-card .absolute.top-4.left-4 {
  display: none !important;
}

/* Move wishlist heart button inline */
#sor-global-search-results .sor-card .sor-wishlist-btn,
#sor-wishlist-drawer-body .sor-card .sor-wishlist-btn {
  position: static !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  font-size: 0.6rem !important;
}

/* Shrink Book button */
#sor-global-search-results .sor-card a[href].bg-amber-400,
#sor-wishlist-drawer-body .sor-card a[href].bg-amber-400 {
  padding: 0.3rem 0.6rem !important;
  font-size: 0.6rem !important;
  border-radius: 8px !important;
}

/* Quick view eye button */
#sor-global-search-results .sor-card button[onclick],
#sor-wishlist-drawer-body .sor-card button[onclick] {
  padding: 0.3rem !important;
  font-size: 0.65rem !important;
}