/* Import token layer — must be first (CSS @import rule) */
@import '../public/static/css/tokens.css';

@import './vendors.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Override Lucide icon font to use font-display: swap (prevents render-blocking) */
@font-face {
  font-family: 'lucide';
  font-display: swap;
}

/* Base layer overrides */
@layer base {
  html {
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 18px;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-surface-primary text-text-primary text-sm;
    font-weight: 400;
    letter-spacing: normal;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", "Arial", sans-serif;
    font-weight: 500;
    line-height: 1.2;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
  h4 { font-size: 1rem; }

  /* Base button styling — prevents unstyled buttons after preflight reset */
  button[type="submit"],
  .btn {
    @apply px-4 py-2 bg-btn-primary-bg text-btn-primary-text rounded-full font-medium text-sm hover:bg-btn-primary-hover transition-colors cursor-pointer;
  }

  /* Base input/select/textarea styling */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
  textarea,
  select {
    @apply w-full px-3 py-2 bg-input-bg border border-input-border rounded-lg text-text-primary placeholder:text-text-tertiary focus:border-brand-primary focus:outline-none focus-visible:outline-none transition-colors;
    outline: none !important;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  /* Theme Transition — smooth dark ↔ light switch for all elements */
  /* *, *::before, *::after {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
  } */
}

/* Opt out of theme transitions for elements that need instant response
   or where transitions cause visual artifacts (e.g., animations, progress bars) */
.no-theme-transition,
.no-theme-transition *,
.slick-track,
.slick-slide,
[class*="animate-"],
.shimmer-circle,
.shimmer-line,
.shimmer-block,
.shimmer-tab,
[class*="shimmer-thumb"] {
  transition: none !important;
}

.user-logged-in.mobile-layout-cnt{
  padding-bottom: 65px;
}
.content-wrap{
  margin-bottom: 100px;
}
/* Story action buttons - hide internal component backgrounds and counts */
.story-action-btn > div,
.story-action-btn > li {
  background: transparent !important;
  min-height: unset !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
}
.story-action-btn > div > span > span.text-sm,
.story-action-btn > li > div > .text-xs,
.story-action-btn > div span.text-sm {
  display: none !important;
}
.story-action-btn > div > span,
.story-action-btn > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Theater mode: player breaks out to full viewport width via CSS */
@media (min-width: 1024px) {
  .video-theater-mode {
    overflow-x: clip;
  }
  .video-theater-mode .videoPlayerHeight {
    width: 100vw !important;
    /* margin-left: calc(-50vw + 50%) !important; */
    position: relative;
    background: #000;
    z-index: 2;
  }
  .video-theater-mode .mobile-height {
    padding-left: 1rem;
    padding-right: 0;
    margin-top: 1rem;
  }
}

/* Product page: main image and thumbnails */
.details-product-wrap .aspect-\[4\/3\] span {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
}
.details-product-wrap .aspect-\[4\/3\] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.product-thumb span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Audio related tracks: fix LazyLoadImage sizing */
.w-\[56px\].h-\[56px\] > a > span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.w-\[56px\].h-\[56px\] > a > span > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* GDPR cookie consent slide-up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reels player — force video to fill container */
.reels-player-container {
  position: relative;
}
.reels-player-container > .reels-video-inner,
.reels-player-container > .reels-video-inner > div,
.reels-player-container .video-js {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.reels-player-container video,
.reels-player-container .vjs-tech {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.reels-player-container .vjs-control-bar,
.reels-player-container .vjs-big-play-button,
.reels-player-container .vjs-loading-spinner {
  display: none !important;
}

.fullwithNoHeadFooter{
  height: 100dvh;
}
.mejs__overlay-play{
  height: 100%;
  width: 100%;
}
.videojs-ads-info {
  position: absolute;
  top: 60px;
  right: 10px;
}
.videojs-ads-info a{
  margin-left: 5px;
}

/* Carousel equal-height slides for card-based carousels */
.user-carousel .swiper-wrapper,
.channel-carousel .swiper-wrapper,
.video-carousel .swiper-wrapper {
  align-items: stretch;
}
.user-carousel .swiper-slide,
.channel-carousel .swiper-slide,
.video-carousel .swiper-slide {
  height: auto;
}

/* Allow dropdown menus to escape Swiper's default overflow:hidden */
.channel-carousel.swiper,
.user-carousel.swiper,
.movie-carousel.swiper,
.audio-carousel.swiper,
.product-carousel.swiper {
  overflow: visible;
}
.channel-carousel .swiper-slide,
.user-carousel .swiper-slide,
.movie-carousel .swiper-slide,
.audio-carousel .swiper-slide,
.product-carousel .swiper-slide {
  overflow: visible;
}