/* Fix for dashboard layout issues */

/* Ensure mobile offcanvas menu is hidden on desktop */
@media (min-width: 1200px) {
  .mobile-offcanvas {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Ensure proper header layout */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Fix logo duplication */
.logo-default {
  display: flex;
  align-items: center;
}

.logo-default .logo {
  max-height: 50px;
  width: auto;
}

/* Ensure horizontal nav is properly displayed on desktop */
@media (min-width: 1200px) {
  .horizontal-nav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    background: transparent !important;
  }
  
  .horizontal-nav .navbar-nav {
    flex-direction: row !important;
  }
}

/* Fix section spacing */
.section-wraper {
  margin-bottom: 2rem;
}

.section-spacing-bottom {
  margin-bottom: 2rem;
}

/* Ensure proper container padding */
.container-fluid.padding-right-0 {
  padding-right: 0 !important;
}

/* Fix overflow issues */
.overflow-hidden {
  overflow-x: hidden;
}

/* Ensure proper card styling */
.card-style-slider {
  margin-bottom: 1.5rem;
}

/* Fix shimmer container */
.shimmer-container {
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* Ensure section visibility */
.section-hidden {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.section-visible {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Fix main banner spacing */
#banner-section {
  margin-bottom: 2rem;
}

/* Ensure proper header positioning */
header {
  position: relative;
  z-index: 1000;
}

header.header-absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Fix navigation menu spacing */
.iq-nav-menu {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.iq-nav-menu .nav-item {
  list-style: none;
}

/* Ensure proper dropdown positioning */
.dropdown-menu {
  z-index: 1050;
}

/* Fix user dropdown */
.dropdown-user-wrapper {
  position: relative;
}

.dropdown-user-menu {
  min-width: 280px;
  padding: 1rem;
  margin-top: 0.5rem;
}

/* Responsive fixes */
@media (max-width: 1199.98px) {
  .mobile-offcanvas {
    display: block !important;
  }
  
  .horizontal-nav {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: var(--bs-gray-900) !important;
    transition: left 0.3s ease-in-out;
    z-index: 1055;
  }
  
  .horizontal-nav.show {
    left: 0;
  }
}

/* ---- home rows: card gap 24px -> 8px ----
   slickGeneral() writes data-spacing into an inline --spacing and
   _slickslider.scss does padding: 0 var(--spacing) per slide, so only an
   important author declaration beats the inline value. 4px each side = 8px. */
.slick-general { --spacing: 4px !important; }
/* step-1 end */

/* ---- row artwork corners 6px -> 12px ----
   .image-box::before is the hover scrim; it inherits --bs-border-radius (6px)
   and would leave a corner seam against a 12px image. Do not raise that
   variable globally - it drives every button and input too. */
.slick-general .image-box img,
.slick-general .image-box::before,
.slick-general .top-ten-img { border-radius: 0.75rem; }
.continue-watch-card .continue-watch-image { border-radius: 0.75rem 0.75rem 0 0; }
.continue-watch-card .continue-watch-card-content { border-radius: 0 0 0.75rem 0.75rem; }
/* step-5 end */

/* ---- page gutter 100px -> 60px ----
   The source is .container-fluid { padding: 0 6.25em } in _custom-class.scss,
   which would need a rebuild; overriding here keeps this build-free.
   .padding-right-0 is left alone - the right-edge bleed is deliberate. */
/* ---- uz-gutter-breakpoint ---------------------------------------------
   This 60px gutter is a desktop measure. Unwrapped it also covered
   768-1199.98px, where style.css intends padding: 0 2rem, so a tablet got a
   gutter sized for a 1920px screen. Below 1200px the theme's own rules now
   apply again, and the phone block further down handles <=767.98px. */
@media (min-width: 1200px) {
    .container-fluid { padding-left: 3.75em; padding-right: 3.75em; }
}
/* step-6 end */

/* ---- a real sans fallback ----
   --bs-heading-font-family points at --bs-font-monospace, whose stack ends in
   Liberation Mono / Courier New. Roboto is not self-hosted; it comes from
   fonts.googleapis.com render-blocking. Self-hosting it is the durable fix. */
body { font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
/* step-7 end */

/* ---- row titles 21.3px -> 24px, matching Netflix's 24/500 ---- */
.main-title { font-size: 1.5rem; font-weight: 500; }
/* step-8 end */


/* ---- uz-skeleton-visible -------------------------------------------------
   Every home row ships six placeholder cards and is swapped for real content
   when its IntersectionObserver fires. .section-hidden faded the entire row to
   opacity 0 until then, so a visitor scrolling ahead of the fetch met a 433px
   black void per row - eighteen of them - rather than the placeholders that
   were already sitting in the markup. The skeleton exists to fill exactly that
   moment, so let it be seen.

   Scoped to .scroll-section: the custom ad banner reuses .section-hidden to
   stay hidden until an ad is found and carries no .scroll-section class, so it
   keeps its old behaviour. The two-class selector also outranks the inline
   <style> that component injects, which would otherwise win on source order. */
.scroll-section.section-hidden,
.scroll-section.section-visible {
    opacity: 1;
    transform: none;
}

/* Bootstrap paints .placeholder with currentColor at 50%, which on this theme
   is almost black against almost black - the cards were present but invisible. */
.scroll-section .placeholder,
.scroll-section .shimmer {
    background-color: rgba(255, 255, 255, 0.07);
    opacity: 1;
    border-radius: 0.75rem;
}

/* a slow sweep so the row reads as loading rather than as broken */
.scroll-section .movie-shimmer .placeholder {
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 70%);
    background-size: 200% 100%;
    animation: uz-skeleton-sweep 1.6s ease-in-out infinite;
}

@keyframes uz-skeleton-sweep {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-section .movie-shimmer .placeholder { animation: none; }
}

/* ---- uz-phone-layout -----------------------------------------------------
   The gutter above is 3.75em, which is right for the desktop grid and wrong for
   a phone: on a 390px screen it spends 120px - 31% of the display - on empty
   margin, so every row begins a third of the way across and is clipped on the
   right. Netflix gives a phone about 4% and lets the last card bleed off the
   edge as the signal that the row scrolls.

   Everything below is inside a max-width query so the desktop layout is
   untouched. */
@media (max-width: 767.98px) {

    /* 1rem a side on a phone. The row wrapper - and only that - keeps a zero
       right padding so a carousel can bleed off the edge, which is how a phone
       is told there is more to swipe to. The billboard nests its own
       .container-fluid and must keep both sides. */
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .container-fluid.padding-right-0 {
        padding-right: 0;
    }

    /* the row heading: 1.5rem is a desktop size held at arm's length */
    .main-title,
    .section-header .title,
    .section-header h4 {
        font-size: 1.0625rem;
        line-height: 1.3;
    }

    .section-header,
    .section-title {
        padding-right: 1rem;       /* keep "see all" off the edge */
    }

    /* Rows are carousels, so cards keep their own width; only the space between
       them needs to come down on a narrow screen. */
    .slick-general { --spacing: 3px !important; }

    /* The billboard. The metadata line is a single flex row that cannot wrap, so
       the last item is sliced mid-word. */
    .iq-main-slider .movie-detail,
    .iq-main-slider .slider-content,
    .banner-content {
        padding-right: 1rem;
    }

    .iq-main-slider .movie-time,
    .banner-content .movie-time,
    .movie-detail .movie-time {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    .iq-main-slider h1,
    .iq-main-slider .big-title,
    .banner-content .big-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    /* two lines of synopsis is all a phone billboard should carry */
    .iq-main-slider p,
    .banner-content p {
        font-size: 0.875rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* the arrows are a mouse affordance; a finger swipes */
    .slick-arrow-prev,
    .slick-arrow-next {
        display: none !important;
    }

    /* the vertical rhythm was set for a tall desktop viewport */
    .section-spacing-bottom { padding-bottom: 1.5rem; }
    .scroll-section { margin-bottom: 0.5rem; }
}

/* Below 576 the same rules apply, with the type down one more step. */
@media (max-width: 575.98px) {
    .main-title,
    .section-header .title,
    .section-header h4 { font-size: 1rem; }

    .iq-main-slider h1,
    .iq-main-slider .big-title,
    .banner-content .big-title { font-size: 1.25rem; }
}

/* ---- uz-phone-billboard --------------------------------------------------
   The first pass aimed at .iq-main-slider, .banner-content and .big-title, none
   of which this template uses. The billboard is
   .main-banner .movie-content .movie-info, with an h4 title, a p.line-count-3
   synopsis and a wrapping ul of metadata. */
@media (max-width: 767.98px) {

    .main-banner .movie-info h4 {
        font-size: 1.375rem;
        line-height: 1.25;
    }

    /* line-count-3 already clamps; on a phone two lines is the right amount and
       the text must be allowed to wrap inside the column rather than run out of
       it */
    .main-banner .movie-info p {
        font-size: 0.875rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
        -webkit-line-clamp: 2;
    }

    /* 3rem of air above the play button is a desktop measure */
    .main-banner .movie-info .mt-5 {
        margin-top: 1.25rem !important;
    }

    .main-banner .movie-info .mt-4 {
        margin-top: 1rem !important;
    }

    /* the genre tags: one line, not three */
    .main-banner .movie-tag-list {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    /* the billboard carries 3.75rem of padding under it, set for a tall desktop
       viewport; on a phone that is a screenful of nothing between the artwork
       and the first row */
    #banner-section.section-spacing-bottom {
        padding-bottom: 1rem;
    }
}

/* ---- uz-neutral-palette --------------------------------------------------
   The page ground was #010A0F - a near-black at 88% saturation in cyan, and 2.6
   times darker than Netflix's #141414. Panels were #0D1619, also blue. That is
   what made the site read as "a dark blue site" rather than neutral charcoal,
   and nothing about spacing or type could change the impression.

   Ships as one piece. The gradients below are tuned to fade into the exact page
   colour, so a new ground with old gradients leaves a seam wider than the one
   this fixes. */
:root[data-bs-theme="dark"] {
    --bs-body-bg:  #141414;
    --bs-body-bg-rgb: 20, 20, 20;
    --bs-gray-900: #181818;
    --bs-gray-900-rgb: 24, 24, 24;
    --bs-gray-800: #232323;
    --bs-gray-800-rgb: 35, 35, 35;
}

/* The hero and live-tv stacks carry a flat rgba(0,0,0,.2) layer above these, so
   a bottom stop of #141414 would composite to #101010 and draw a visible line
   across the page. #191919 under 20% black lands on #141414 exactly. */
.main-banner .slick-item::after,
.live-tv-banner .livetv-item::after {
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
        linear-gradient(360deg, #191919 0%, rgba(25, 25, 25, 0) 50%),
        linear-gradient(133.05deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 36.66%),
        linear-gradient(226.85deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 43.12%);
}

.comingsoon-card::after {
    background:
        linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
        linear-gradient(360deg, #191919 4.65%, rgba(25, 25, 25, .8) 20%, rgba(25, 25, 25, 0) 50%);
}

/* no overlay above these two, so the stop is the page colour itself */
.viewmore-button-wrapper::after {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0) -9.67%, #141414 75.47%);
}

.continue-watch-card .image-link::after {
    background-image: linear-gradient(360deg, #141414 4.1%, rgba(20, 20, 20, 0) 65%);
}

/* This one stays near-black on purpose: it is the scrim that gives a card title
   its contrast, not a panel edge. Lightening it to match the ground would make
   the title harder to read, which is the opposite of what it is for. */
.iq-card .block-images .image-box::before {
    background: linear-gradient(0deg, #0a0a0a 8.71%, rgba(10, 10, 10, 0) 72.11%);
}

/* ---- uz-type-and-elevation -----------------------------------------------
   Row headings were pure white and force-capitalised, which turns "Онцлох кино"
   into "Онцлох Кино" - title case is an English convention and reads as a
   mistake in Cyrillic. Netflix sets its shelf headings a step below white and
   leaves the language's own casing alone. */
.scroll-section .main-title,
.section-header .title,
.section-header h4,
h5.main-title {
    color: #e5e5e5;
    text-transform: none !important;
}

/* The card title was 21.3px against a 24px heading - barely a hierarchy. */
.iq-card .block-images .card-description .iq-title,
.iq-card .block-images .card-description h5 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* the metadata line under a card title: quieter, and closer together */
.iq-card .block-images .card-description .genres-list {
    gap: 1.25rem;
    font-weight: 400;
    color: #a3a3a3;
}

.iq-card .block-images .card-description .genres-list li::after {
    right: -0.72rem;
}

[dir="rtl"] .iq-card .block-images .card-description .genres-list li::after {
    left: -0.72rem;
    right: auto;
}

/* Shadows were tinted #22292E at .3 - over a near-black page that composites
   LIGHTER than the page behind it, so it read as a blue-grey halo rather than a
   shadow. Bootstrap 5.3 wires card and dropdown hairlines to the translucent
   token, not --bs-border-color, so both have to move together. */
:root[data-bs-theme="dark"] {
    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .45);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .3);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .55);
    --bs-border-color: rgba(255, 255, 255, .12);
    --bs-border-color-translucent: rgba(255, 255, 255, .08);
}

/* the skeleton tiles should not draw a box around themselves */
.continue-watch-card.shimmer.border {
    border-color: transparent !important;
}

/* The expanded card sat flat against its neighbours: the frame that draws it
   had no shadow. Put the lift on the frame, not the artwork - a shadow on the
   artwork would trace its rectangle and be buried under the frame's border. */
.slick-general .iq-card .block-images::after {
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .75);
}