/* ==========================================================================
   AAN TV — EXACT DESIGN LAYER
   --------------------------------------------------------------------------
   Every value below is taken verbatim from aan.tv's own production SCSS
   (recovered from its source maps: Header.scss, Footer.scss, ScheduleHome.scss,
   ProgramSlider.scss, ProgramSingleSlide.scss and main.4b2405f9.css).

   Loaded AFTER main.css, so this file wins. Edit here to tune the design —
   main.css stays untouched.
   ========================================================================== */

:root {
  /* aan.tv real brand palette */
  --aan-crimson:      #b61234;  /* active nav link                       */
  --aan-red:          #c3102e;  /* menu overlay top / strip gradient     */
  --aan-deepred:      #a80e2d;  /* gradient stop                         */
  --aan-scarlet:      #d12117;  /* gradient stop                         */
  --aan-orange:       #ec5a11;  /* gradient start / end                  */
  --aan-amber:        #fca703;  /* accent                                */
  --aan-gold:         #feac02;  /* footer link hover bar                 */
  --aan-grey:         #7e7e7e;  /* inactive nav link                     */
  --aan-header-top:   #d6dbe4;  /* header gradient top                   */
  --aan-header-bot:   #f8f8f8;  /* header gradient bottom                */
  --aan-black:        #000;

  /* aan.tv layout constants */
  --aan-header-h:     74px;
  --aan-gutter:       115px;    /* header / footer horizontal padding     */
  --aan-section-pad:  150px;    /* .slider-section-top-drama              */
  --aan-strip-label:  160px;    /* .double-box width                      */
}

/* ==========================================================================
   1. HEADER   (source: components/Layout/Header/Header.scss)
   ========================================================================== */

/* aan.tv wraps the bar in .headerSection-Top { position: fixed; width:100%; z-index:50 }
   so the header is OUT of flow and .padding-menu offsets the body by 74px.

   The selectors below are deliberately `body.ds-theme ...` (0,2,1) because
   main.css carries `.admin-bar .ds-header { position: sticky !important }`
   (0,2,0). A plain `.ds-header` rule loses to it, so when you are logged in
   the header dropped back into the flow AND still got the 74px body offset —
   that is the crimson band that appeared between the header and the hero. */
body.ds-theme .ds-header,
body.ds-theme header.HeaderSection {
  background: linear-gradient(0deg, #f8f8f8 0%, #d6dbe4 100%) !important;
  height: var(--aan-header-h) !important;
  min-height: var(--aan-header-h) !important;
  max-height: var(--aan-header-h) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 999999 !important;
}

/* logged in: sit directly under the WP admin bar (32px, 46px on small screens) */
body.ds-theme.admin-bar .ds-header,
body.ds-theme.admin-bar header.HeaderSection { top: 32px !important; }

@media screen and (max-width: 782px) {
  body.ds-theme.admin-bar .ds-header,
  body.ds-theme.admin-bar header.HeaderSection { top: 46px !important; }
}

.ds-header .ds-header__inner {
  max-width: none !important;
  width: 100% !important;
  height: var(--aan-header-h) !important;
  padding: 0 var(--aan-gutter) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

/* logo — 66px tall inside a 74px bar, nudged down 6px (exactly as aan.tv) */
.ds-header .ds-header__logo {
  display: flex !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
}
.ds-header .ds-header__logo img,
.ds-header .custom-logo {
  height: 66px !important;
  width: auto !important;
  max-width: none !important;
  /* main.css caps the logo at 48px (and 38px under 768px), which beats a plain
     `height` — the mark has to be uncapped for the 66px to take */
  max-height: none !important;
  min-height: 0 !important;
  margin-top: 6px !important;
  margin-right: 15px !important;
  display: block !important;
}

/* nav */
.ds-header .ds-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-start !important;
}
.ds-header .ds-nav__list {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
.ds-header .ds-nav__list > li {
  padding: 10px !important;
  margin: 0 !important;
  /* six items instead of five: without this the flex row squeezes the last two
     until "ABOUT US" breaks across two lines and the bar grows to 68px */
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.ds-header .ds-nav__list > li > a {
  color: var(--aan-grey) !important;
  text-transform: uppercase !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: none !important;
  border: 0 !important;
  line-height: 1.2 !important;
}
.ds-header .ds-nav__list > li > a:hover,
.ds-header .ds-nav__list > li.current-menu-item > a,
.ds-header .ds-nav__list > li.current_page_item > a,
.ds-header .ds-nav__list > li.is-active > a {
  color: var(--aan-crimson) !important;
}

/* Search — aan.tv's .search-box is a compact 200x30 pill, NOT a full-height
   input. Measured live: 200px wide, 30px tall, #dee0e3 fill, 2px #c8c8c8
   border, 30px radius, 0 5px padding, icon pushed to the right. */
body.ds-theme .ds-header .ds-search {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 200px !important;
  width: 200px !important;
  max-width: 200px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 5px !important;
  margin: 0 !important;
  background-color: #dee0e3 !important;
  border: 2px solid #c8c8c8 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
  cursor: pointer;
  align-self: center !important;
}
/* the "Search" word is a div, not an input placeholder (measured: 135px wide,
   #7e7e7e, 2px margin, 16px Montserrat) */
body.ds-theme .ds-header .ds-search .ds-search__label {
  width: 135px !important;
  margin: 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--aan-grey) !important;
  font-size: 16px !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 24px !important;
  text-align: left !important;
  user-select: none;
}
body.ds-theme .ds-header .ds-search .ds-search__icon {
  display: flex !important;
  align-items: center !important;
  color: var(--aan-grey) !important;
  font-size: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.ds-theme .ds-header .ds-search .ds-search__icon .ds-fa-search {
  width: 16px;
  height: 16px;
  display: block;
}
body.ds-theme .ds-header .ds-search:focus-visible {
  outline: 2px solid var(--aan-crimson) !important;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Search overlay (aan.tv: ReactModal .Overlay > .Modal > .search-modal).
   Every number measured off the live modal at 1875px:
     bar 74px tall, rgba(0,0,0,.6) on a rgba(56,56,56,.902) sheet
     Bootstrap .container -> max-width 1320px, 12px padding, row margin -12px
     logo col 1/12 (110px), field col 11/12 (1210px)
     input 44px tall, 10px/40px padding, hsla(0,0%,80%,.949), 4px radius
     result bar 42px tall, 28px/500 uppercase white on the AAN gradient
   -------------------------------------------------------------------------- */
body.ds-theme .ds-searchmodal[hidden] { display: none !important; }
body.ds-theme .ds-searchmodal {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000000 !important;
  opacity: 0;
  transition: opacity .18s ease-out;
}
body.ds-theme .ds-searchmodal.is-open { opacity: 1; }
body.ds-theme.admin-bar .ds-searchmodal { top: 32px; }
@media screen and (max-width: 782px) {
  body.ds-theme.admin-bar .ds-searchmodal { top: 46px; }
}
body.ds-search-open { overflow: hidden; }

body.ds-theme .ds-searchmodal__sheet {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(56, 56, 56, 0.902);
}

body.ds-theme .ds-searchmodal__bar {
  background-color: rgba(0, 0, 0, 0.6);
  height: 74px;
  display: flex;
  align-items: center;
}

body.ds-theme .ds-searchmodal__container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}
body.ds-theme .ds-searchmodal__row {
  display: flex;
  margin: 0 -12px;
}
body.ds-theme .ds-searchmodal__bar .ds-searchmodal__row { align-items: center; }

body.ds-theme .ds-searchmodal__logo,
body.ds-theme .ds-searchmodal__spacer {
  flex: 0 0 8.3333333%;
  max-width: 8.3333333%;
  padding: 0 12px;
  box-sizing: border-box;
}
body.ds-theme .ds-searchmodal__logo img {
  width: 60px;
  height: auto;
  margin-left: 2px;
  display: block;
}

body.ds-theme .ds-searchmodal__field,
body.ds-theme .ds-searchmodal__list {
  flex: 0 0 91.6666667%;
  max-width: 91.6666667%;
  padding: 0 12px;
  box-sizing: border-box;
}
body.ds-theme .ds-searchmodal__field form { margin: 0; }

body.ds-theme .ds-searchmodal__inputwrap {
  position: relative;
  margin-left: 10px;
}
body.ds-theme .ds-searchmodal__input {
  width: 100%;
  height: 44px;
  padding: 10px 40px;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background-color: hsla(0, 0%, 80%, 0.949);
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  outline: 0;
  box-shadow: none;
}
body.ds-theme .ds-searchmodal__input::placeholder { color: rgba(255, 255, 255, 0.85); opacity: 1; }

body.ds-theme .ds-searchmodal__icon {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 9;
  height: 33px;
  line-height: 33px;
  font-size: 22px;
  color: #212529;
  pointer-events: none;
}
body.ds-theme .ds-searchmodal__icon .ds-fa-search {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
}

body.ds-theme .ds-searchmodal__close {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 34px;
  line-height: 34px;
  color: #4d4d4d;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 1px 6px;
}

body.ds-theme .ds-searchmodal__results {
  max-height: calc(100vh - 74px);
  overflow-y: auto;
}
body.ds-theme .ds-searchmodal__list.is-busy { opacity: .6; }

body.ds-theme .ds-searchmodal .result-single {
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%);
  height: 42px;
  border: 1px solid #000;
  margin-top: 0;
  padding: 5px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
body.ds-theme .ds-searchmodal .result-single a {
  text-decoration: none;
  display: block;
  width: 100%;
  color: inherit;
}
body.ds-theme .ds-searchmodal .result-single h3 {
  margin: 0;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

@media only screen and (max-width: 787px) {
  body.ds-theme .ds-searchmodal__logo,
  body.ds-theme .ds-searchmodal__spacer { flex: 0 0 16.6666667%; max-width: 16.6666667%; }
  body.ds-theme .ds-searchmodal__field,
  body.ds-theme .ds-searchmodal__list { flex: 0 0 83.3333333%; max-width: 83.3333333%; }
  body.ds-theme .ds-searchmodal .result-single h3 { font-size: 18px; }
}

/* live nav links: 16px / weight 400 / line-height 24px / no letter-spacing.
   main.css was adding letter-spacing, which made each label ~30px wider. */
body.ds-theme .ds-header .ds-nav__list > li > a {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-shadow: none !important;
  /* aan.tv puts the 10px padding on the <li>, never on the <a>. main.css had
     `padding: 10px 16px` here, which made every label 32px too wide. */
  padding: 0 !important;
}

/* body offset — aan.tv's .padding-menu { margin-top: 74px }.
   The header is fixed (out of flow), so this 74px is the ONLY offset; the
   admin bar is handled by WP's own `html { margin-top: 32px }`. */
body.ds-theme .ds-main {
  margin-top: var(--aan-header-h) !important;
  padding-top: 0 !important;
}

/* the page's own customiser CSS pulls the hero up 4px — cancel it so the
   banner butts straight onto the header exactly like aan.tv */
body.ds-theme .ds-hero,
body.ds-theme .ds-sd-hero { margin-top: 0 !important; }

/* hamburger hidden on desktop, exactly like aan.tv — and so is the X, which
   belongs to the mobile sheet only. Without this it sat in the desktop bar as
   a plain flex item between the logo and LIVE. */
.ds-header .ds-nav-toggle,
.ds-header .ds-nav-close { display: none !important; }

/* aan.tv only ever had five links here, so its own steps left no slack for a
   sixth. Each tier below trims the per-item chrome instead of the type size,
   which is what keeps the row on one 44px line down to the burger breakpoint. */
@media only screen and (max-width: 1200px) {
  .ds-header .ds-nav__list > li { padding: 10px 4px !important; }
  .ds-header .ds-nav__list > li > a {
    font-size: 14px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
}

@media only screen and (max-width: 992px) {
  .ds-header .ds-header__inner { padding: 0 40px !important; }
  .ds-header .ds-nav__list > li { padding: 10px 2px !important; }
  .ds-header .ds-nav__list > li > a {
    font-size: 13px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
}

@media only screen and (max-width: 787px) {
  .ds-header .ds-header__inner { padding: 0 20px !important; }
  /* with the nav collapsed behind the burger, aan.tv centres the search pill in
     whatever space is left between the logo and the hamburger */
  body.ds-theme .ds-header .ds-search { margin: 0 auto !important; }
  .ds-header .ds-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    align-items: center;
    /* .mobile-menu is a 50px box on aan.tv; main.css's `margin-left: auto`
       would swallow the free space the search pill needs to centre in */
    width: 50px !important;
    height: 100% !important;
    padding: 15px 0 15px 15px !important;
    margin-left: 0 !important;
    cursor: pointer;
    background: none;
    border: 0;
    order: 3;
    box-sizing: border-box;
  }
  .ds-header .ds-nav-toggle img {
    display: block;
    width: 35px !important;
    height: 35px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
  }
  .ds-header .ds-nav { display: none !important; }
  /* aan.tv opens the menu as a ReactModal that fills the viewport and centres
     the five full-bleed rows — not a panel hanging off the header. */
  .ds-header .ds-nav.is-open {
    display: flex !important;
    /* aan.tv centres the rows in the viewport, which on a short screen leaves a
       band of hero art between the header and the first item. The site owner
       wants them tucked straight under the header instead. */
    align-items: flex-start !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    /* The veil is painted by .ModalMenu, not the ReactModal overlay (which is
       transparent) — which is why probing the overlay first found nothing. Same
       two colours as the loader, at 0.8 instead of 0.9, so the page still shows
       faintly through the red. */
    background: linear-gradient(180deg, rgba(195, 16, 46, .8) 50%, rgba(253, 160, 32, .8) 100%) !important;
    /* main.css puts 24px on the panel; live's rows run edge to edge */
    padding: var(--aan-header-h) 0 0 !important;
  }
  body.admin-bar .ds-header .ds-nav.is-open { padding-top: calc(var(--aan-header-h) + 46px) !important; }
  .ds-header .ds-nav.is-open .ds-nav__list {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ds-header .ds-nav.is-open .ds-nav__list > li { padding: 0 !important; margin: 0 !important; }
  /* Every declaration needs !important: section 1 above already sets
     `background: none !important` on these links for the desktop bar, and
     without it the rows rendered as bare text floating over the hero. */
  .ds-header .ds-nav.is-open .ds-nav__list > li > a {
    display: block !important;
    margin: 0 !important;
    padding: 10px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #7e7e7e !important;
    background: linear-gradient(180deg, #f8f8f8 0%, #d6dbe4 100%) !important;
  }
  .ds-header .ds-nav.is-open .ds-nav__list > li.current-menu-item > a {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(195, 16, 46, .8) 50%, rgba(253, 160, 32, .8) 100%) !important;
  }
  /* the X that replaces the burger while the sheet is open (h1.closeMenuModal).
     Scoped to .is-open so it can never surface anywhere else. */
  .ds-header .ds-nav.is-open .ds-nav-close {
    display: block !important;
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #fff !important;
    /* it is an <h1> on aan.tv, so it rides Bootstrap's responsive heading size:
       27.85px at 390px wide, 30.5px at 567 — matched by the same formula */
    font-size: calc(1.375rem + 1.5vw) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif !important;
  }
}

/* --------------------------------------------------------------------------
   Page loader   (source: Layout/Loader/Loader.scss)
   Fixed rather than in-flow: aan.tv renders it INSTEAD of the page body, we
   render it OVER an already-complete page and fade it out on `load`.
   -------------------------------------------------------------------------- */
body.ds-theme .loader-section {
  position: fixed !important;
  top: var(--aan-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  height: calc(100vh - var(--aan-header-h)) !important;
  width: 100% !important;
  /* The gradient is only 90% opaque. On aan.tv that lands on a bare white body
     because React has not drawn the page yet; here the finished page sits right
     behind it, so the hero and the programme grid showed straight through. The
     white layer underneath restores exactly what aan.tv composites against. */
  background: linear-gradient(180deg, rgba(195, 16, 46, .9) 50%, rgba(253, 160, 32, .9) 100%), #fff !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 900 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity .35s ease;
}
body.ds-theme .loader-section img {
  width: 200px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
}
body.ds-theme .loader-section.is-done { opacity: 0 !important; pointer-events: none !important; }
body.ds-theme.admin-bar .loader-section { top: calc(var(--aan-header-h) + 32px) !important; }
@media only screen and (max-width: 787px) {
  body.ds-theme .loader-section img { width: 100px !important; }
}

/* ==========================================================================
   2. FIXED SOCIAL RAIL   (source: Header.scss .social-fixed)
   ========================================================================== */

.social-fixed,
.ds-social-bar {
  position: fixed !important;
  top: calc(50% - 103px) !important;
  left: 40px !important;
  bottom: auto !important;
  right: auto !important;
  /* above the loader (900) so the rail stays visible while the page comes up,
     exactly as on aan.tv, but under the nav sheet (1000) which covers it */
  z-index: 950 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: none !important;
  padding: 0 !important;
}
/* the anchor must shrink to the icon: main.css gives it a fixed 40x40 box, so
   the rail stayed 40px wide (and 225px tall) at every breakpoint while aan.tv's
   is exactly as wide as the icon — 36/28/20 with a 5px gap. */
/* The anchor must be exactly the icon: main.css sizes it independently of the
   image, so the rail stayed 40px wide (225px tall) at every breakpoint while
   aan.tv's is 36/28/20 with a 5px gap — 205/165/125px tall. */
.social-fixed a,
.ds-social-bar a {
  margin-bottom: 5px !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: none !important;
  border: 0 !important;
}
.social-fixed img,
.ds-social-bar img { width: 36px !important; height: 36px !important; }

@media only screen and (max-width: 787px) {
  .social-fixed, .ds-social-bar { top: calc(50% - 83px) !important; left: 5px !important; }
  .social-fixed a, .ds-social-bar a { width: 28px !important; height: 28px !important; }
  .social-fixed img, .ds-social-bar img { width: 28px !important; height: 28px !important; }
}
@media only screen and (max-width: 486px) {
  .social-fixed, .ds-social-bar { top: calc(50% - 73px) !important; }
  .social-fixed a, .ds-social-bar a { width: 20px !important; height: 20px !important; }
  .social-fixed img, .ds-social-bar img { width: 20px !important; height: 20px !important; }
}

/* ==========================================================================
   3. HERO SLIDER
   aan.tv slider artwork is 1350x530. Locking the aspect ratio keeps the hero
   the exact same height no matter which banner is showing — and kills the
   black band that appeared when a 600x337 poster was used as a fallback.
   ========================================================================== */

.ds-hero {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  aspect-ratio: 1350 / 530;
}
.ds-hero__track {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}
.ds-hero__slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1 !important;
  transition: opacity .7s ease !important;
}
.ds-hero__slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 3 !important;
}
/* the slide being replaced — stays solid underneath for the length of the
   fade so the hero never goes see-through between banners */
.ds-hero__slide.is-prev {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  transition: none !important;
}
.ds-hero__link { display: block !important; width: 100% !important; height: 100% !important; }
.ds-hero__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* aan.tv shows no arrows/dots on the home hero */
.ds-hero__dots { display: none !important; }

/* mobile artwork is 480x600 (portrait) on aan.tv */
@media only screen and (max-width: 576px) {
  .ds-hero { aspect-ratio: 480 / 600; }
}

/* ==========================================================================
   4. WEEKLY SCHEDULE STRIP   (source: ScheduleHome.scss)
   Label block is a fixed 160px; the 7 items share calc(100% - 160px) equally,
   so nothing is ever clipped at the edges.
   ========================================================================== */

.ds-strip {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
  border: 0 !important;
}

/* "WEEKLY SCHEDULE" block — .double-box */
.ds-strip .ds-strip__label {
  height: 86px !important;
  min-width: var(--aan-strip-label) !important;
  max-width: var(--aan-strip-label) !important;
  width: var(--aan-strip-label) !important;
  flex: 0 0 var(--aan-strip-label) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(-90deg, #b40f33 10.23%, #da2220 54.55%, #ed5d0f 86.58%, #fcb008 100%) !important;
  border: 0 !important;
  padding: 0 !important;
}
.ds-strip .ds-strip__label h5 {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* the 7 programme cells */
.ds-strip .ds-strip__items {
  width: calc(100% - var(--aan-strip-label)) !important;
  max-width: calc(100% - var(--aan-strip-label)) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  overflow: hidden !important;
  scroll-behavior: smooth;
  margin: 0 !important;
  padding: 0 !important;
}
.ds-strip .ds-strip__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  display: block !important;
  text-decoration: none !important;
  border-top: 2px solid #000 !important;
  border-bottom: 1px solid #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.ds-strip .ds-strip__top {
  background: linear-gradient(-90deg, #b40f33 10.23%, #da2220 54.55%, #ed5d0f 86.58%, #fcb008 100%) !important;
  height: 42px !important;
  border-left: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-transform: uppercase !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  /* aan.tv lets long names ("NAWAL | BETI AIK REHMAT") run onto a second line
     inside the 42px cell instead of truncating them */
  white-space: normal !important;
  line-height: 1.05 !important;
  word-break: break-word !important;
}
.ds-strip .ds-strip__bottom {
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%) !important;
  height: 42px !important;
  border-left: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  color: #fff !important;
  /* "Mon - Tue -Thur - Fri | 09:00 PM" wraps rather than being clipped */
  white-space: normal !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
}
/* keep "09:00 PM" together so it never splits across the wrap */
.ds-strip .ds-strip__bottom strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* arrows — aan.tv only shows them below 1200px */
.ds-strip .ds-strip__btn {
  display: none !important;
  width: 34px !important;
  flex: 0 0 34px !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(0deg, #fff 0%, #cbcfd7 100%) !important;
  border-top: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

@media only screen and (max-width: 1200px) {
  .ds-strip .ds-strip__btn { display: flex !important; }
  .ds-strip .ds-strip__items {
    width: calc(100% - var(--aan-strip-label) - 68px) !important;
    max-width: calc(100% - var(--aan-strip-label) - 68px) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .ds-strip .ds-strip__items::-webkit-scrollbar { display: none; }
  .ds-strip .ds-strip__item { flex: 0 0 200px !important; }
}

@media only screen and (max-width: 576px) {
  .ds-strip .ds-strip__label {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    flex: 0 0 110px !important;
  }
  .ds-strip .ds-strip__label h5 { font-size: 14px !important; }
  .ds-strip .ds-strip__items {
    width: calc(100% - 110px - 68px) !important;
    max-width: calc(100% - 110px - 68px) !important;
  }
  .ds-strip .ds-strip__top { font-size: 16px !important; }
  .ds-strip .ds-strip__bottom { font-size: 12px !important; }
  .ds-strip .ds-strip__bottom strong { font-size: 13px !important; }
}

/* ==========================================================================
   5. PROGRAMS SECTION   (source: ProgramSlider.scss, ProgramSingleSlide.scss,
                          main.4b2405f9.css .slider-section-top-drama/.flower)
   ========================================================================== */

.ds-section {
  padding: 0 !important;
  margin: 0 !important;
}
.ds-section > .ds-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--aan-section-pad) 100px !important;
}

/* Section heading with the flower motif.
   flower-final.png is 360x136 and mostly transparent — the petals sit on the
   left and the title overlaps them at margin-left:70px, exactly as on aan.tv.
   No padding-left: that is what was pushing the title ~92px too far right. */
.ds-section .flower {
  display: flex !important;
  align-items: center !important;
  height: 136px !important;
  min-height: 136px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-image: url('../images/flower-final.2326083202391de923f7.png') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 360px 136px !important;
}
.ds-section .flower h2 {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  margin: 0 0 0 70px !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
}
/* the little gradient bar after the title (divider-icon.png is 3x24) */
.ds-section .flower img,
.ds-section .flower .ds-title-divider {
  margin: 0 10px !important;
  width: 3px !important;
  height: 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #fcb008 0%, #ed5d0f 55%, #b40f33 100%) !important;
}

/* 2-up landscape banner grid (aan.tv is always 2; 3/4 exist for the widget) */
.ds-grid--programs.ds-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.ds-grid--programs.ds-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.ds-grid--programs {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* one grid cell per program; the extras past the first four are only hidden,
   never removed, so "More" can reveal them without another page load */
.ds-grid--programs > .ds-program-cell {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.ds-grid--programs > .ds-program-cell.is-hidden { display: none !important; }
.ds-grid--programs > .ds-program,
.ds-grid--programs .ds-program-cell > .ds-program {
  padding: 0 10px 20px !important;
  margin: 0 !important;
  display: block !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ds-grid--programs .ds-program__banner {
  width: 100% !important;
  overflow: hidden !important;
  border: 2px solid #fff !important;
  border-radius: 10px !important;
  aspect-ratio: 1350 / 530;
  background: none !important;
  box-shadow: none !important;
}
/* a drama whose artwork has not been uploaded yet */
.ds-grid--programs .ds-program__banner--empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%) !important;
}
.ds-grid--programs .ds-program__banner--empty span {
  color: #fff !important;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1.2;
}
.ds-grid--programs .ds-program__banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* "More" link — .more-btn (live: margin 10px 0 16px; the 10px lives on the
   <a> here, so only the 16px bottom is needed on the wrapper) */
.ds-more-wrap { margin: 0 0 16px !important; }
.ds-more-link,
.ds-more-wrap a {
  display: block !important;
  cursor: pointer !important;
  font-size: 20px !important;
  margin-top: 10px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-align: center !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Breakpoints measured off aan.tv's own .slider-section-top-drama, which keeps
   the 150px gutter all the way down to 787px — there is no 1200px step — and
   whose columns are Bootstrap col-sm-6, i.e. 2-up from 576px and 1-up below. */
@media only screen and (max-width: 787px) {
  .ds-section > .ds-container { padding: 0 45px 60px !important; }
}
@media only screen and (max-width: 576px) {
  .ds-section > .ds-container { padding: 0 30px 60px !important; }
  .ds-section .flower { height: 90px !important; min-height: 90px !important; background-size: contain !important; }
  .ds-section .flower h2 { font-size: 16px !important; margin-left: 50px !important; }
}
/* The columns are col-sm-6, and Bootstrap's sm tier starts AT 576px — so the
   single-column fallback has to stop just short of it, not at it.
   .ds-cols-2 in main.css is (0,2,0); the body prefix outranks it. */
@media only screen and (max-width: 575.98px) {
  body.ds-theme .ds-grid--programs,
  body.ds-theme .ds-grid--programs.ds-cols-2,
  body.ds-theme .ds-grid--programs.ds-cols-3,
  body.ds-theme .ds-grid--programs.ds-cols-4 { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   6. FOOTER   (source: components/Layout/Footer/Footer.scss)
   ========================================================================== */

/* aan.tv's Footer.js renders:
     background-image: url(footer-bg.jpg); background-repeat: round; background-size: cover;
   and swaps to bg-footer-mobile.jpg when window.innerWidth <= 480. */
body.ds-theme .ds-footer {
  padding: 0 !important;
  background-image: url('../images/footer-bg.7ccbc6f03cfbb5594774.jpg') !important;
  background-repeat: round !important;
  background-size: cover !important;
  /* aan.tv leaves background-position at its 0% 0% default. Forcing `center`
     here made Chrome pick a different `round` tile size, which zoomed the art
     and left a visible seam where the second tile began. */
  background-position: 0% 0% !important;
  background-color: transparent !important;
  border-top: none !important;
}
@media only screen and (max-width: 480px) {
  body.ds-theme .ds-footer {
    background-image: url('../images/bg-footer-mobile.63b62e9dc24d0040b1d0.jpg') !important;
  }
}
/* every number below was measured off the live aan.tv footer at 1891px wide.
   Classes are `aan-footer__*` on purpose — main.css already owns
   .footer-top-section / .footer-section-1 / .footer-menu-1 / .footer-divider
   with different values, and those were collapsing the row. */

/* neutralise main.css's fixed 462px / overflow:hidden / red top border */
body.ds-theme .ds-footer.aan-footer {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border-top: none !important;
  background-position: 0% 0% !important;
  color: #000 !important;
}

body.ds-theme .aan-footer__inner {
  padding: 0 var(--aan-gutter) !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.ds-theme .aan-footer__top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  padding: 60px 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* SB Media logo block — fixed 400px, logo pushed to its right edge */
body.ds-theme .aan-footer__brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 400px !important;
  flex: 0 0 400px !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.ds-theme .aan-footer__logo {
  width: 150px !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

/* THE key rule: the divider and both link columns share the remaining width
   evenly. Without space-evenly they bunch up next to the divider. */
body.ds-theme .aan-footer__cols {
  display: flex !important;
  flex: 1 1 0% !important;
  flex-direction: row !important;
  justify-content: space-evenly !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  gap: 0 !important;
}
body.ds-theme .aan-footer__group {
  display: flex !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3px gradient bar, 150px tall (aan.tv uses footer-divier.png at that height) */
body.ds-theme .aan-footer__rule {
  display: block !important;
  width: 3px !important;
  min-width: 3px !important;
  height: 150px !important;
  flex: 0 0 3px !important;
  margin: 0 40px !important;
  align-self: center !important;
  background: linear-gradient(180deg, #fcb008 0%, #ed5d0f 50%, #b40f33 100%) !important;
}

body.ds-theme .aan-footer__menu {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 190px !important;
  flex: 0 0 190px !important;
  margin-left: 20px !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.ds-theme .aan-footer__menu a {
  text-decoration: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #000 !important;
}
body.ds-theme .aan-footer__menu p {
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  border-left: 3px solid transparent;
  -webkit-transition: padding .5s ease-in-out;
  transition: padding .5s ease-in-out;
}
body.ds-theme .aan-footer__menu a:hover p {
  padding-left: 5px !important;
  border-left: 3px solid var(--aan-gold) !important;
}

/* copyright sits 135px below the columns, centred inside a 2/3-width block */
body.ds-theme .aan-footer__end {
  position: static !important;
  /* flow-root stops the <p>'s 15px top margin collapsing out of the block,
     which is what put the copyright 15px higher than aan.tv's */
  display: flow-root !important;
  margin: 135px 0 0 0 !important;
  padding: 0 !important;
  /* live is a Bootstrap .row > .col-md-8, so the text box is 66.6667% of the
     row (row = inner + 24px negative margin) minus the 24px column gutter */
  width: calc(66.6667% - 8px) !important;
  max-width: calc(66.6667% - 8px) !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
}
body.ds-theme .aan-footer__end p {
  font-size: 14px !important;
  line-height: 15px !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 15px 0 16px !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* mobile-only gradient copyright strip (hidden on desktop, as on aan.tv) */
body.ds-theme .aan-footer__mobile-bar {
  display: none;
  height: 30px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(251, 148, 33, 1) 0%, rgba(245, 47, 9, 1) 48%, rgba(188, 17, 50, 1) 100%);
}
body.ds-theme .aan-footer__mobile-bar h6 { margin: 0; font-size: 12px; color: #fff; }

@media only screen and (max-width: 992px) {
  body.ds-theme .aan-footer__top { padding: 55px 0 !important; }
  body.ds-theme .aan-footer__end { margin-top: 60px !important; }
}
@media only screen and (max-width: 787px) {
  body.ds-theme .aan-footer__inner { padding: 0 25px !important; }
  body.ds-theme .aan-footer__top { padding: 20px 0 !important; }
  body.ds-theme .aan-footer__brand { width: 245px !important; flex: 0 0 245px !important; }
  body.ds-theme .aan-footer__logo { width: 90px !important; }
  body.ds-theme .aan-footer__rule { margin: 0 20px !important; height: 110px !important; }
  body.ds-theme .aan-footer__menu { margin-left: 10px !important; }
  body.ds-theme .aan-footer__menu p { font-size: 14px !important; }
  body.ds-theme .aan-footer__end { margin: 30px 0 0 70px !important; }
}
@media only screen and (max-width: 576px) {
  body.ds-theme .aan-footer__inner { padding: 0 10px 0 25px !important; }
  body.ds-theme .aan-footer__top {
    display: block !important;
    padding: 10px 20px 70px 45px !important;
  }
  body.ds-theme .aan-footer__brand {
    justify-content: center !important;
    margin-left: 0 !important;
    width: 100% !important;
    flex: none !important;
    margin-bottom: 15px !important;
  }
  body.ds-theme .aan-footer__cols { justify-content: space-between !important; }
  body.ds-theme .aan-footer__rule { margin: 0 20px 0 0 !important; }
  body.ds-theme .aan-footer__menu { width: 125px !important; flex: 0 0 125px !important; }
  body.ds-theme .aan-footer__menu p {
    margin: 0 3px !important;
    font-size: 12px !important;
    text-align: left !important;
  }
  body.ds-theme .aan-footer__logo { width: 80px !important; }
  body.ds-theme .aan-footer__end { display: none !important; }
  body.ds-theme .aan-footer__mobile-bar { display: flex; }
}

/* ==========================================================================
   7. GLOBAL   (source: index.css / App.css)
   ========================================================================== */

body.ds-theme {
  background-color: #000 !important;
  font-family: 'Montserrat', sans-serif !important;
}
body.ds-theme p,
body.ds-theme h1, body.ds-theme h2, body.ds-theme h3,
body.ds-theme h4, body.ds-theme h5, body.ds-theme h6 {
  font-family: 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   7. SINGLE DRAMA / SINGLE EPISODE
   Sources: components/Content/{ContentBanner,ContentScreen,SynopsisSection,
            ShowCast,ContentTopVideo,VideoList,VideoList/SingleVideo}.scss
   Verified against https://aan.tv/drama/mera-susraal at 1875px.
   Everything is prefixed body.ds-theme so it outranks main.css's older
   .banner-section / .content-top-division / .synopsis-section blocks.
   ========================================================================== */

/* aan.tv sets the Urdu synopsis in Nafees Web Naskh (SynopsisSection.scss
   loads it from /font/NafeesWeb.woff). Same file, same rendering. */
@font-face {
  font-family: 'NafeesWeb';
  src: local('NafeesWeb'), url('../fonts/NafeesWeb.02967832900bea477ea8.woff') format('woff');
  font-display: swap;
}

/* --- minimal Bootstrap grid, scoped to these two templates only ----------- */
body.ds-theme .ds-single-drama .row,
body.ds-theme .ds-single-episode .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
  padding: 0 !important;
  list-style: none;
}
body.ds-theme .ds-single-drama [class*="col-"],
body.ds-theme .ds-single-episode [class*="col-"] {
  padding: 0 12px !important;
  box-sizing: border-box !important;
  flex: 0 0 100%;
  max-width: 100%;
}
body.ds-theme .ds-single-drama .col-6,
body.ds-theme .ds-single-episode .col-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 576px) {
  body.ds-theme .ds-single-drama .col-sm-4,
  body.ds-theme .ds-single-episode .col-sm-4 { flex: 0 0 33.3333333%; max-width: 33.3333333%; }
  body.ds-theme .ds-single-drama .col-sm-6,
  body.ds-theme .ds-single-episode .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  body.ds-theme .ds-single-drama .col-md-3,
  body.ds-theme .ds-single-episode .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  body.ds-theme .ds-single-drama .col-md-6,
  body.ds-theme .ds-single-episode .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
body.ds-theme .ds-single-drama .showMobile { display: none; }
body.ds-theme .ds-single-drama .hideMobile { display: block; }

/* --- ContentBanner -------------------------------------------------------- */
body.ds-theme .ds-single-drama .banner-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.ds-theme .ds-single-drama .banner-section > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  /* every aan.tv banner is 1350x530; locking the ratio keeps the height right
     even if an editor uploads a slightly different crop */
  aspect-ratio: 1350 / 530;
  object-fit: cover !important;
}
body.ds-theme .ds-single-drama .ost-box {
  position: absolute !important;
  right: 140px;
  top: 20px;
  width: 137px;
  height: 32px;
  background: linear-gradient(259.43deg, #b40f33 1.22%, #da2220 55.14%, #ed5d0f 77.09%, #fcb008 97.13%);
  border-radius: 8px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .49);
  cursor: pointer;
}
body.ds-theme .ds-single-drama .ost-box p {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap;
}

/* --- WATCH bar (content-top-division) ------------------------------------- */
body.ds-theme .ds-single-drama .ds-watchbar-anchor { min-height: 58px; }
body.ds-theme .ds-single-drama .content-top-division {
  height: 58px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(180deg, #b3c1dc 0%, #d8dce7 32.63%, #e5e5ed 57.75%, #b3c1dc 100%) !important;
}
body.ds-theme .ds-single-drama .content-top-division h5 {
  margin: 0 20px !important;
  padding: 0 !important;
  color: #000 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
body.ds-theme .ds-single-drama .content-top-division .content-top-btns {
  margin: 0 5px !important;
  padding: 0 !important;
  width: 120px !important;
  height: 34px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  cursor: pointer;
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%) !important;
}
/* aan.tv re-pins the bar under the header once you scroll past it */
body.ds-theme .ds-single-drama .content-top-division.is-fixed {
  position: fixed !important;
  top: var(--aan-header-h) !important;
  left: 0;
  width: 100%;
  z-index: 10;
}
body.ds-theme.admin-bar .ds-single-drama .content-top-division.is-fixed { top: calc(var(--aan-header-h) + 32px) !important; }
@media screen and (max-width: 782px) {
  body.ds-theme.admin-bar .ds-single-drama .content-top-division.is-fixed { top: calc(var(--aan-header-h) + 46px) !important; }
}

/* --- SynopsisSection ------------------------------------------------------ */
body.ds-theme .ds-single-drama .synopsis-section {
  background-color: #b50b31 !important;
  color: #fff !important;
  padding: 30px 100px !important;
  box-sizing: border-box !important;
}
body.ds-theme .ds-single-drama .english-half { padding-right: 30px !important; }
body.ds-theme .ds-single-drama .english-half p {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: #fff !important;
  font-weight: 400 !important;
}
body.ds-theme .ds-single-drama .english-half .english-heading { color: #f8df6d !important; }
body.ds-theme .ds-single-drama .english-half .synopsis-text {
  margin-bottom: 5px !important;
  overflow: hidden;
  transition: all .5s;
}
/* collapsed to two lines; JS swaps in the measured height when DETAIL opens */
body.ds-theme .ds-single-drama .english-detail-section {
  overflow: hidden;
  max-height: 46px;
  transition: max-height .5s;
}
body.ds-theme .ds-single-drama .urdu-half {
  direction: rtl !important;
  padding-left: 30px !important;
}
body.ds-theme .ds-single-drama .urdu-half h4 {
  color: #f8df6d !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'NafeesWeb', 'Noto Nastaliq Urdu', serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 28.8px !important;
  text-transform: none !important;
}
body.ds-theme .ds-single-drama .urdu-half p {
  color: #fff !important;
  font-family: 'NafeesWeb', 'Noto Nastaliq Urdu', serif !important;
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
body.ds-theme .ds-single-drama .urdu-half .synopsis-text {
  margin-bottom: 5px !important;
  overflow: hidden;
  max-height: 60px;
  transition: max-height .5s;
}
/* ShowCast rows: fixed 85px label column, then " : ", then the names */
body.ds-theme .ds-single-drama .cast-section { display: flex !important; }
body.ds-theme .ds-single-drama .cast-section-name { min-width: 85px !important; }
body.ds-theme .ds-single-drama .cast-name-divider { margin: 0 10px !important; }

body.ds-theme .ds-single-drama .detail-btn-section {
  display: flex !important;
  justify-content: center !important;
  /* main.css hands this a 24px top margin; aan.tv puts the whole gap on the
     button itself (margin-top: 15px), so zero it out here */
  margin: 0 !important;
  padding: 0 !important;
}
body.ds-theme .ds-single-drama .detail-btn-text {
  margin: 15px 5px 0 !important;
  padding: 0 !important;
  width: 120px !important;
  height: 34px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  cursor: pointer;
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%) !important;
}

/* --- ContentTopVideo ------------------------------------------------------ */
body.ds-theme .ds-sd-topvideo-bg,
body.ds-theme .ds-sd-pane {
  background-repeat: round;
  background-size: cover;
  background-position: 0% 0%;
}
body.ds-theme .slider-section-top-drama { padding: 0 150px 100px !important; }
body.ds-theme .video-player-section-full {
  width: 85% !important;
  margin: 0 auto !important;
}
body.ds-theme .video-player-section {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  padding-top: 56.25% !important;
  border: 3px solid var(--aan-amber) !important;
  border-radius: 30px !important;
  background: #000 !important;
}
/* dramastream_video_embed() wraps the iframe in .ds-video, and main.css gives
   that wrapper its own `3px solid #fff` + 12px radius. Inside the amber frame
   that painted a second, white ring between the border and the video — the
   "extra space" down the left edge. The frame belongs to .video-player-section
   alone, so the wrapper is stripped bare here. */
body.ds-theme .video-player-section .ds-video {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.ds-theme .video-player-section iframe,
body.ds-theme .video-player-section video {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 26px !important;
}
/* the top-video heading sits on the light bg-3 art, so it is black with a
   white outline instead of the plain white used over the red bg-2 art */
body.ds-theme .slider-heading .flower h2 {
  color: #000 !important;
  text-shadow:
    #fff 3px 0 0, #fff 2.83487px .981584px 0, #fff 2.35766px 1.85511px 0,
    #fff 1.62091px 2.52441px 0, #fff .705713px 2.91581px 0, #fff -.287171px 2.98622px 0,
    #fff -1.24844px 2.72789px 0, #fff -2.07227px 2.16926px 0, #fff -2.66798px 1.37182px 0,
    #fff -2.96998px .42336px 0, #fff -2.94502px -.571704px 0, #fff -2.59586px -1.50383px 0,
    #fff -1.96093px -2.27041px 0, #fff -1.11013px -2.78704px 0, #fff -.137119px -2.99686px 0,
    #fff .850987px -2.87677px 0, #fff 1.74541px -2.43999px 0, #fff 2.44769px -1.73459px 0,
    #fff 2.88051px -.838247px 0 !important;
}
body.ds-theme .slider-heading-middle { padding-top: 30px !important; }

/* the flower heading is shared with the home page; extend its scope */
body.ds-theme .slider-heading .flower,
body.ds-theme .slider-heading-middle .flower {
  display: flex !important;
  align-items: center !important;
  height: 136px !important;
  min-height: 136px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-image: url('../images/flower-final.2326083202391de923f7.png') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 360px 136px !important;
}
body.ds-theme .slider-heading .flower h2,
body.ds-theme .slider-heading-middle .flower h2 {
  font-size: 26px !important;
  font-weight: 600 !important;
  margin: 0 0 0 70px !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
body.ds-theme .slider-heading-middle .flower h2 { color: #fff !important; text-shadow: none !important; }
body.ds-theme .slider-heading .flower img,
body.ds-theme .slider-heading-middle .flower img {
  margin: 0 10px !important;
  width: 3px !important;
  height: 24px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #fcb008 0%, #ed5d0f 55%, #b40f33 100%) !important;
}

/* --- VideoList / SingleVideo ---------------------------------------------- */
body.ds-theme .ds-sd-pane:not(.is-active) { display: none; }
body.ds-theme .video-section-content { padding: 20px 115px 80px 115px !important; }
/* these two must out-rank the generic .row / [class*="col-"] rules above,
   hence the extra template class in the selector */
body.ds-theme .ds-single-drama .video-section-row,
body.ds-theme .ds-single-episode .video-section-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -22px !important;
  min-height: 289px;
}
body.ds-theme .ds-single-drama .video-section-column,
body.ds-theme .ds-single-episode .video-section-column { padding: 50px 44px 0 !important; }
body.ds-theme .video-section-column a { text-decoration: none !important; display: block; }
body.ds-theme .video-image-single { width: 100%; }
body.ds-theme .video-image-wraper {
  position: relative;
  width: 100%;
  overflow: hidden;
  transform: scale(.96);
  border: 2px solid #fff;
  border-radius: 10px;
  transition: transform .5s ease-in-out;
}
body.ds-theme .video-image-wraper > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
body.ds-theme .video-image-title {
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%);
}
body.ds-theme .video-image-title h6 {
  margin: 0 5px !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #fff !important;
}
body.ds-theme .video-overlay-image {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
}
body.ds-theme .video-overlay-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: none !important;   /* draws the play button at 1:1, centred */
  opacity: 0;
  transition: opacity .6s ease-in-out;
}
body.ds-theme .video-image-single:hover .video-image-wraper {
  transform: scale(1);
  border: 6px solid var(--aan-amber);
}
body.ds-theme .video-image-single:hover .video-overlay-image img { opacity: 1; }

@media only screen and (max-width: 992px) {
  body.ds-theme .video-image-title h6 { font-size: 12px !important; }
  body.ds-theme .video-section-content { padding: 20px 65px 80px 65px !important; }
  body.ds-theme .ds-single-drama .video-section-column,
  body.ds-theme .ds-single-episode .video-section-column { padding: 50px 25px 0 !important; }
}
@media only screen and (max-width: 787px) {
  body.ds-theme .video-section-content { padding: 20px 45px 80px 45px !important; }
  body.ds-theme .ds-single-drama .video-section-column,
  body.ds-theme .ds-single-episode .video-section-column { padding: 50px 15px 0 !important; }
  body.ds-theme .slider-section-top-drama { padding: 0 45px 60px 45px !important; }
  body.ds-theme .video-player-section-full { width: 100% !important; }
  body.ds-theme .ds-single-drama .ost-box { right: 40px; }
}
@media only screen and (max-width: 576px) {
  body.ds-theme .slider-section-top-drama { padding: 0 30px 60px 30px !important; }
  body.ds-theme .ds-single-drama .synopsis-section { padding: 30px 45px !important; }
  body.ds-theme .ds-single-drama .urdu-half { margin-bottom: 30px; }
  body.ds-theme .ds-single-drama .urdu-half p { font-size: 18px !important; line-height: 28px !important; }
  body.ds-theme .ds-single-drama .urdu-half .synopsis-text { max-height: 52px; }
  body.ds-theme .ds-single-drama .english-half p { font-size: 14px !important; line-height: 18px !important; }
  body.ds-theme .ds-single-drama .english-detail-section { max-height: 38px; }
  body.ds-theme .ds-single-drama .showMobile { display: block; }
  body.ds-theme .ds-single-drama .hideMobile { display: none; }
  body.ds-theme .ds-single-drama .ost-box { height: 26px; width: 75px; }
  body.ds-theme .ds-single-drama .ost-box p { font-size: 12px !important; line-height: 26px !important; }
  body.ds-theme .slider-heading .flower,
  body.ds-theme .slider-heading-middle .flower { background-size: contain !important; height: 90px !important; min-height: 90px !important; }
  body.ds-theme .slider-heading .flower h2,
  body.ds-theme .slider-heading-middle .flower h2 { font-size: 16px !important; margin-left: 50px !important; }
}

/* ==========================================================================
   8. TEXT PAGES / COMING SOON / LIVE / CAREER
   Sources: AboutUsPage.scss, TermsAndConditions.js, PrivacyPolicy.js,
            ComingSoon.scss, Career.scss + main.4b2405f9.css
   Measured on https://aan.tv/terms-and-conditions at 1875px:
     .text-page-section  padding 50px 115px 60px
     h2 32px/500/38.4   h5 20px/500/24   p 16px/400/24 justify   all #fff
   ========================================================================== */
body.ds-theme .ds-textpage-bg,
body.ds-theme .ds-comingsoon-bg,
body.ds-theme .ds-career-bg {
  background-repeat: round;
  background-size: cover;
  background-position: 0% 0%;
}

body.ds-theme .text-page-section {
  padding: 50px 115px 60px !important;
  margin: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}
body.ds-theme .text-page-section h2 {
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 38.4px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}
body.ds-theme .text-page-section h4 {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 28.8px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-transform: none !important;
}
body.ds-theme .text-page-section h5 {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-transform: none !important;
}
body.ds-theme .text-page-section p,
body.ds-theme .text-page-section li {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: #fff !important;
  text-align: justify !important;
  margin: 0 0 16px !important;
}
body.ds-theme .text-page-section a { color: #0d6efd !important; }

@media only screen and (max-width: 787px) {
  body.ds-theme .text-page-section { padding: 50px 45px 60px !important; }
}

/* --- ComingSoon: bg-1 backdrop, 500px tall centred block ------------------ */
body.ds-theme .slider-section-top-soon,
body.ds-theme .ds-comingsoon-bg .not-found {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 500px !important;
}
body.ds-theme .coming-soon-section {
  display: flex !important;
  flex-direction: column !important;
}
body.ds-theme .coming-soon-section h4,
body.ds-theme .ds-comingsoon-bg .not-found h4 {
  color: #000 !important;
  text-align: center !important;
  margin: 0 !important;
  text-transform: none !important;
}
body.ds-theme .coming-soon-section p {
  color: #000 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --- Career form (Career.scss) ------------------------------------------- */
body.ds-theme .ds-career-bg .contact-us-page { padding: 0 115px 60px !important; }
body.ds-theme .ds-career-bg .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
}
body.ds-theme .ds-career-bg .col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 12px !important;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.ds-theme .ds-career-bg .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
body.ds-theme .contact-form-section h6 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 16px 0 6px !important;
}
body.ds-theme .contact-form-section input[type="text"],
body.ds-theme .contact-form-section input[type="email"],
body.ds-theme .contact-form-section select.career-select {
  width: 100% !important;
  height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #212529 !important;
  font-size: 16px !important;
  box-sizing: border-box;
}
body.ds-theme .contact-form-section input[type="file"] { color: #fff !important; }
body.ds-theme .contact-form-section p { color: #fff !important; margin: 6px 0 0 !important; font-size: 14px !important; }
body.ds-theme .contact-form-section .error-text { color: #ffd7d7 !important; }
body.ds-theme .contact-form-btn { margin-top: 20px; }
body.ds-theme .contact-form-btn button {
  width: 120px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%);
}
body.ds-theme .career-form-submitted h5,
body.ds-theme .contect-form-submitted-error h5 { color: #fff !important; margin: 20px 0 !important; }

/* --- hero dots — react-responsive-carousel .control-dots ------------------
   Measured live: wrapper 24px tall sitting 34px off the hero's bottom edge,
   8x8 white circles at 0.3 opacity, the current one at 1. */
body.ds-theme .ds-hero__dots {
  display: block !important;
  position: absolute !important;
  /* main.css pins these with !important, so match it declaration for
     declaration or the flex/10px layout below never applies */
  bottom: 10px !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100%;
  height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  z-index: 3;
  background: none !important;
}
body.ds-theme .ds-hero__dots button {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 8px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  opacity: .3;
  box-shadow: none !important;
  cursor: pointer;
  transition: opacity .25s ease-in-out;
}
body.ds-theme .ds-hero__dots button.is-active {
  opacity: 1;
  /* main.css scales the active dot to 13px; live keeps every dot at 8px */
  transform: none !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* --- PLAY OST badge on a hero slide (same box as the drama banner) -------- */
body.ds-theme .ds-hero .ost-box {
  position: absolute !important;
  right: 140px;
  top: 20px;
  z-index: 4;
  width: 137px;
  height: 32px;
  background: linear-gradient(259.43deg, #b40f33 1.22%, #da2220 55.14%, #ed5d0f 77.09%, #fcb008 97.13%);
  border-radius: 8px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .49);
  cursor: pointer;
}
body.ds-theme .ds-hero .ost-box p {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap;
}
@media only screen and (max-width: 787px) {
  body.ds-theme .ds-hero .ost-box { right: 40px; }
}
@media only screen and (max-width: 576px) {
  body.ds-theme .ds-hero .ost-box { height: 26px; width: 75px; }
  body.ds-theme .ds-hero .ost-box p { font-size: 12px !important; line-height: 26px !important; }
}

/* ==========================================================================
   9. CONTACT US + BLOGS
   Sources: ContactUs.scss, BlogList.js, BlogGridSingle.scss
   ========================================================================== */
body.ds-theme .ds-contact-bg,
body.ds-theme .ds-blogs-bg {
  background-repeat: round;
  background-size: cover;
  background-position: 0% 0%;
}

/* --- Contact Us ---------------------------------------------------------- */
body.ds-theme .contact-us-page {
  padding: 0 115px 60px !important;
  min-height: 544px;
  box-sizing: border-box;
}
body.ds-theme .ds-contact-bg .row,
body.ds-theme .ds-career-bg .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
}
body.ds-theme .ds-contact-bg .col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 12px !important;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.ds-theme .ds-contact-bg .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

body.ds-theme .contact-form-section { margin-top: 60px !important; }
body.ds-theme .contact-form-section h6 {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  /* live: 20px 0 8px — the 8px bottom is what kept the five labels apart */
  margin: 20px 0 8px !important;
  padding: 0 !important;
  color: #fff !important;
  text-transform: none !important;
}
body.ds-theme .contact-form-section input,
body.ds-theme .contact-form-section textarea {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid #fff !important;
  padding: 8px !important;
  border-radius: 7px !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  /* 10 rows x 24px is what makes the live textarea 258px tall */
  line-height: 24px !important;
}
/* Chrome sizes a single-line input off its own internal text box, so the 24px
   line-height lands 2px short of live's 42px — pin it. */
body.ds-theme .contact-form-section input:not([type="file"]) { height: 42px !important; }
/* the <form> wrapper is ours, not aan.tv's — it must not add a box of its own,
   otherwise the button block's 20px margin stops collapsing the way live's does */
body.ds-theme .contact-form-section form { margin: 0 !important; }
body.ds-theme .contact-form-section form > .contact-form-btn { margin-top: 0 !important; }
body.ds-theme .contact-form-btn { text-align: center !important; }
@media only screen and (max-width: 576px) {
  /* live drops the form labels to 18px on phones */
  body.ds-theme .contact-form-section h6 { font-size: 18px !important; }
}
body.ds-theme .ds-contact-bg .contact-form-section button {
  text-align: center !important;
  background: #dee0e3 !important;
  border: 1px solid #c8c8c8 !important;
  color: #000 !important;
  font-weight: 700 !important;
  padding: 5px 30px !important;
  border-radius: 10px !important;
  margin-top: 20px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  /* buttons default to 13.3px; live inherits the 16px body size */
  font-size: 16px !important;
  line-height: 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  cursor: pointer;
}
body.ds-theme .address-section { margin-top: 70px !important; }
body.ds-theme .single-address-section { display: flex !important; }
body.ds-theme .address-icon {
  margin-right: 15px !important;
  font-size: 20px !important;
  color: #fff !important;
  min-width: 20px !important;
}
body.ds-theme .address-text h6 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  text-transform: none !important;
}
body.ds-theme .address-text p {
  font-size: 18px !important;
  margin: 0 0 25px !important;
  color: #fff !important;
}
body.ds-theme .map-embed { margin-bottom: 20px !important; }
body.ds-theme .map-embed iframe { border: 0; max-width: 100%; }
body.ds-theme p.error-text { color: var(--aan-amber) !important; }
body.ds-theme .contect-form-submitted { min-height: 500px; padding-top: 30px; }
body.ds-theme .contect-form-submitted h5,
body.ds-theme .contect-form-submitted-error h5 { color: var(--aan-amber) !important; }

/* --- Blogs grid ---------------------------------------------------------- */
body.ds-theme .blog-section-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
}
body.ds-theme .blog-single-grid {
  padding: 0 12px !important;
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 576px) {
  body.ds-theme .blog-single-grid.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  body.ds-theme .blog-single-grid.col-sm-4 { flex: 0 0 33.3333333%; max-width: 33.3333333%; }
}
@media (min-width: 768px) {
  body.ds-theme .blog-single-grid.col-md-6 { flex: 0 0 50%; max-width: 50%; }
  body.ds-theme .blog-single-grid.col-md-4 { flex: 0 0 33.3333333%; max-width: 33.3333333%; }
}
body.ds-theme .blog-single-grid a {
  text-decoration: none !important;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 0;
  color: #fff !important;
}
body.ds-theme .blog-single-image {
  position: relative;
  padding-top: 100%;   /* square */
  overflow: hidden;
}
body.ds-theme .blog-single-grid .blog-single-image img {
  transform: scale(.9);
  transition: transform .5s ease-in-out;
  border: 2px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
body.ds-theme .blog-single-grid .blog-single-image p {
  margin: 0 !important;
  position: absolute;
  left: 0;
  right: 0;
  font-size: 20px !important;
  color: #fff !important;
  z-index: 2;
}
body.ds-theme .blog-single-grid.col-md-6 .blog-single-image p { bottom: 35px; padding: 0 35px; transition: bottom .5s ease-in-out; }
body.ds-theme .blog-single-grid.col-md-4 .blog-single-image p { bottom: 25px; padding: 0 20px; transition: bottom .5s ease-in-out; }
body.ds-theme .blog-single-grid h5 {
  margin: 0 0 30px !important;
  display: block;
  /* Bootstrap headings ride on `line-height: 1.2`, not the 1.5 body value */
  line-height: 1.2 !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
body.ds-theme .blog-single-grid .read-more { display: none; font-size: 13px !important; }
body.ds-theme .blog-single-grid .overlayBlogImg {
  background-color: #d28d40;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: scale(.9);
  opacity: 0;
  transition: all .5s ease-in-out;
}
@media only screen and (min-width: 787px) {
  body.ds-theme .blog-single-grid:hover .read-more { display: block; }
  body.ds-theme .blog-single-grid:hover h5 { display: none; }
  body.ds-theme .blog-single-grid:hover img { transform: scale(1); border: 4px solid var(--aan-amber); }
  body.ds-theme .blog-single-grid:hover .overlayBlogImg { transform: scale(1); opacity: .4; }
  body.ds-theme .blog-single-grid.col-md-6:hover .blog-single-image p,
  body.ds-theme .blog-single-grid.col-md-4:hover .blog-single-image p { bottom: calc(50% - 25px); }
}
@media only screen and (min-width: 1500px) {
  body.ds-theme .blog-single-grid.col-md-6 .blog-single-image p { bottom: 60px; }
  body.ds-theme .blog-single-grid.col-md-4 .blog-single-image p { bottom: 40px; }
}
@media only screen and (max-width: 787px) {
  body.ds-theme .blog-single-grid .blog-single-image p { font-size: 14px !important; bottom: 25px; }
  body.ds-theme .contact-us-page { padding: 0 45px 60px !important; }
}

/* ==========================================================================
   10. SCHEDULE PAGE
   Sources: Schedule.scss, ScheduleSliderSingle.scss + main.4b2405f9.css
   ========================================================================== */
body.ds-theme .ds-schedule-bg {
  background-repeat: round;
  background-size: cover;
  background-position: 0% 0%;
}

body.ds-theme .schedule-page-section .nav-tabs {
  border: 0 !important;
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.ds-theme .schedule-page-section .nav-tabs .nav-item { flex: 1 !important; margin: 0 !important; }
body.ds-theme .schedule-page-section .nav-tabs .nav-link {
  width: 100% !important;
  border: 0 !important;
  border-right: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-radius: 0 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  background: linear-gradient(180deg, #ec5a11 0%, #d12117 32.63%, #a80e2d 57.75%, #ec5a11 100%) !important;
  color: #fff !important;
  padding: 0.5rem !important;
  margin: 0 !important;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: none !important;
}
body.ds-theme .schedule-page-section .nav-tabs .nav-link.active {
  color: #000 !important;
  background: linear-gradient(180deg, #b3c1dc 0%, #d8dce7 32.63%, #e5e5ed 57.75%, #b3c1dc 100%) !important;
}

body.ds-theme .schedule-tab-day {
  margin-top: 50px !important;
  padding: 0 150px 30px !important;
  min-height: 544px;
  box-sizing: border-box;
}
body.ds-theme .schedule-tab-day:not(.is-active) { display: none !important; }
body.ds-theme .schedule-tab-day .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -12px !important;
}
body.ds-theme .schedule-slide-top {
  padding: 0 12px !important;
  box-sizing: border-box;
  flex: 0 0 50%;
  max-width: 50%;
}
@media (min-width: 576px) {
  body.ds-theme .schedule-slide-top { flex: 0 0 33.3333333%; max-width: 33.3333333%; }
}
@media (min-width: 768px) {
  body.ds-theme .schedule-slide-top { flex: 0 0 25%; max-width: 25%; }
}
body.ds-theme .schedule-slide-top a {
  text-decoration: none !important;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 0;
}
body.ds-theme .schdule-single-imge {
  width: 100%;
  transform: scale(.9);
  position: relative;
  padding-top: 159.6%;   /* the vertical poster ratio */
  overflow: hidden;
}
body.ds-theme .schdule-single-imge img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid #fff;
  border-radius: 10px;
  transition: transform .5s ease-in-out;
}
body.ds-theme .vertical-slide-top p {
  margin: 10px 10px 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  text-align: center !important;
  font-weight: 500 !important;
}
body.ds-theme .vertical-slide-top span { font-weight: 700 !important; }
body.ds-theme .vertical-slide-top h5 {
  margin: 0 10px !important;
  text-align: center !important;
  color: #fff !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}
body.ds-theme .vertical-slide-top:hover h5 { color: var(--aan-amber) !important; }
body.ds-theme .vertical-slide-top:hover .schdule-single-imge img {
  border: 4px solid var(--aan-amber);
}

@media only screen and (max-width: 992px) {
  body.ds-theme .schedule-page-section .nav-tabs .nav-link { font-size: 14px !important; }
  body.ds-theme .schedule-tab-day { padding-left: 30px !important; padding-right: 30px !important; min-height: 435px; }
  body.ds-theme .vertical-slide-top p { font-size: 16px !important; }
  body.ds-theme .vertical-slide-top h5 { font-size: 22px !important; }
}
@media only screen and (max-width: 787px) {
  body.ds-theme .schedule-page-section .nav-tabs .nav-link { font-size: 12px !important; }
  body.ds-theme .schedule-slide-top a { padding: 0 5px; }
  body.ds-theme .vertical-slide-top p { font-size: 14px !important; }
  body.ds-theme .vertical-slide-top h5 { font-size: 18px !important; }
}
@media only screen and (max-width: 576px) {
  body.ds-theme .schedule-tab-day { min-height: 330px; margin-top: 30px !important; }
}

/* ==========================================================================
   11. SINGLE BLOG POST   (source: BlogSinglePage.scss)
   ========================================================================== */
/* post_class() puts .ds-single-blog on the article, and main.css gives that
   class `padding: 40px 0 80px 0` + a min-height. On aan.tv the banner butts
   straight up against the header (y=74) and the footer straight against the
   body, so all of that has to go. */
body.ds-theme article.ds-single-blog {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
body.ds-theme .ds-blog-bg {
  background-repeat: round;
  background-size: cover;
  background-position: 0% 0%;
}
body.ds-theme .blog-main-banner img {
  width: 100% !important;
  height: auto !important;
  display: block;
  aspect-ratio: 1350 / 530;
  object-fit: cover;
}
body.ds-theme h1.blog-title {
  background: linear-gradient(180deg, rgba(239,242,245,1) 0%, rgba(174,190,223,1) 33%, rgba(174,190,223,1) 57%, rgba(239,242,245,1) 100%) !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 10px !important;
  box-sizing: border-box;
  text-shadow: none !important;
}
body.ds-theme .ds-blog-bg .contact-us-page { padding: 0 115px 60px !important; min-height: 0; }
body.ds-theme .blog-top-section {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 20px 0 !important;
  min-height: 40px;
}
body.ds-theme .blog-top-section h5 {
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #fff !important;
  /* Bootstrap's h5: 1.25rem on a 1.2 line-height = the 24px box live uses */
  font-size: 20px !important;
  line-height: 1.2 !important;
}
body.ds-theme .blog-content {
  color: #fff !important;
  padding-bottom: 40px !important;
}
body.ds-theme .blog-content p,
body.ds-theme .blog-content li,
body.ds-theme .blog-content h1,
body.ds-theme .blog-content h2,
body.ds-theme .blog-content h3,
body.ds-theme .blog-content h4,
body.ds-theme .blog-content h5,
body.ds-theme .blog-content h6 { color: #fff !important; }
/* The copy centres its pictures with `text-align: center` on the wrapping
   paragraph, which only works on inline boxes — main.css makes every img
   `display: block`, so they all sat flush left. Auto margins centre the block
   without reintroducing the inline baseline gap. */
body.ds-theme .blog-content img {
  max-width: 100%;
  height: auto;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* aan.tv ships Bootstrap's reboot, where a paragraph carries its whole gap on
   the bottom (`margin: 0 0 1rem`). Ours had the browser default 16px on top as
   well, which escaped the first paragraph and pushed the body down 16px. */
body.ds-theme .blog-content > p:first-child { margin-top: 0 !important; }
@media only screen and (max-width: 787px) {
  body.ds-theme .ds-blog-bg .contact-us-page { padding: 0 45px 60px !important; }
}