/* Imports
----------------------------------------*/

@import "base";
@import "form-elements";
@import "navigations";
@import "mega-menu";
@import "header";
@import "footer";
@import "cards";
@import "multiselect";
@import "newsletter";
@import "slider";
@import "info-popup";
@import "social";
@import "feature-items";
@import "filter-elements";
@import "events";
@import "reviews";
@import "badge";
@import "button";
@import "fancybox";
@import "flags";
@import "weatherinfo";
@import "tabs";
@import "dropdown";
@import "attraction-details";
@import "attraction-slider";
@import "accordion";
@import "search";
@import "news";
@import "cookies";
@import "sidebar-button";
@import "maps";
@import "hospitality";
@import "asterio-search";
@import "asterio-cart-edit";
@import "asterio-cart-details";
@import "asterio-cart";
@import "asterio-booking-comment";
@import "asterio-navigation";
@import "asterio-results";
@import "asterio-result-detail";
@import "asterio-payment";
@import "asterio-login";
@import "asterio-login-creation";
@import "asterio-general";
@import "read-more";
@import "faq-search";
@import "hotelbooking";
@import "cardbanner";
@import "news-carousel";
@import "offers";
@import "hero";
@import "advanced-hero-banner";
@import "hero-search";
@import "ticket-tile";
@import "stay-tile";
@import "menu-tabs";
@import "ridetile";
@import "promotion-bar";
@import "pricecard";
@import "promotion-carousel";
@import "stay";
@import "sticky-footer";
@import "incentives";
@import "incentive-carousel";
@import "stay-table";
@import "location-selection";
@import "customer-reviews";
@import "customer-review-card";

// @import "animate.css";

/*Body */
body {
  font-family: $font-family-primary;
  font-weight: $font-weight-bold;
}

hr {
  background-color: transparent;
  height: 70px !important;
  margin: 0;
}

.primary-bg {
  background-color: $primary-bg !important;
}

.secondary-bg {
  background-color: $secondary-bg !important;
}

.gradient-bg {
  background: $gradient-blue-black;
}

.rounded {
  border-radius: $border-radius-card;
}

.section-bg-image {
  .container {
    @include media-breakpoint-down(md) {
      --bs-gutter-x: 0px;
    }
  }

  .container {
    @include media-breakpoint-down(md) {
      --bs-gutter-x: 0px;
    }
  }

  .row:not(.parallax-window) {
    padding: 40px 80px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;

    @include media-breakpoint-down(md) {
      padding: 20px 18px;
    }
  }

  div>.gradient-overlay:before {
    background: $gradient-blue-black;
    content: "";
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }

  div>.gradient-overlay>div {
    z-index: 2;
  }
}

.button-center {
  text-align: center;
}

.border-round {
  border-radius: 8px;
}

.scroll-down-arrow {
  img {
    width: 45px;
    opacity: 0.5;
  }
}

/* Gallery */
.gallery {
  display: flex;
  flex-direction: row;
  gap: 25px;
  justify-content: center;

  .gallery-left {
    width: 66.666666666%;
  }

  .gallery-right {
    width: 33.333333333%;
    display: flex;
    gap: 25px;
    flex-direction: column;
  }

  .figure {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @include media-breakpoint-down(lg) {
    flex-direction: column;
    gap: 10px;

    .gallery-left,
    .gallery-right {
      width: 100%;
      gap: 10px;
    }
  }
}

/* Details Section */
.details {
  width: 80%;

  h3 {
    font-weight: $font-weight-bold;
    font-size: $font-size-32;
    text-transform: none;
    letter-spacing: 0;
  }

  p {
    color: $primary-color;
    font-size: $font-size-16;
    font-weight: $font-weight-normal;
  }

  @include media-breakpoint-down(md) {
    width: 100%;
  }
}

/* Heading - Txt */
.heading-txt {
  width: 100%;
  float: none;
  display: inline-block;
  vertical-align: top;
  font-weight: 500;
  font-size: $font-size-24;
  color: $primary-color;
  line-height: 30px;
  text-align: center;
  padding-bottom: 48px;

  &:last-child {
    padding-bottom: 0;
  }

  h1,
  h2 {
    padding-bottom: 10px;

    &:last-child {
      padding-bottom: 0;
    }
  }

  .aside {
    width: 100%;
    max-width: 950px;
    float: none;
    display: inline-block;
    vertical-align: top;
  }

  @include media-breakpoint-down(xxl) {
    font-size: 22px;
    line-height: 28px;
  }

  @include media-breakpoint-down(xl) {
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 40px;
  }

  @include media-breakpoint-down(md) {
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 30px;
  }
}

/* Content - Main */
.content-main {
  width: 100%;
  float: left;
  flex: 1 0 auto;
}

/* Gallery */

/*.fullsize-image .ce-center .ce-outer, .fullsize-image .ce-center .ce-inner, .ce-column {
    float: none;
    right: 0;
}

.fullsize-image .ce-gallery{
    figure{
        width: 100%;
        height: 100%;

        img{
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
}*/

/* Split - Content */
.split-cont {

  .frame-type-image,
  .ce-image,
  .ce-gallery,
  .ce-outer,
  .ce-inner,
  .ce-row,
  .ce-column,
  .image,
  img {
    max-width: 100%;
    height: 100%;
  }

  img {
    object-fit: cover;
  }

  .row {
    align-items: center;
  }

  .row>* {
    padding: 0;

    >* {
      padding-left: 10%;
      padding-right: 10%;

      @include media-breakpoint-down(md) {
        padding-left: 0;
        padding-right: 0;
      }

      &:first-child {
        padding-top: 10%;

        @include media-breakpoint-down(md) {
          padding-top: 0;
        }
      }

      &:last-child {
        padding-bottom: 10%;

        @include media-breakpoint-down(md) {
          padding-bottom: 0;
        }
      }
    }

    .frame-type-image,
    img {
      padding: 0;
    }
  }
}

/* Mobile: Reverse every second split cont on page*/
@include media-breakpoint-down(md) {
  .section:nth-child(odd) .split-cont .row {
    flex-direction: column-reverse;
  }

  .section:nth-child(odd) .split-cont .left-on-top .row {
    flex-direction: column;
  }

  /* Class to reverse row direction manually */
  .section .flex-reverse,
  .container .flex-reverse,
  .container-fluid .flex-reverse {
    flex-direction: column-reverse !important;
  }
}

/* Grid Mosaic */
.mosaic .row>* {
  display: grid;
  grid-gap: 20px;

  &>div {
    overflow: hidden;

    @include media-breakpoint-up(lg) {
      padding-bottom: 0;
    }

    @include media-breakpoint-down(lg) {
      height: auto !important;
    }
  }

  .frame-type-image {

    .ce-outer,
    .ce-inner {
      float: none;
      left: 0;
      right: 0;
    }

    .ce-column {
      width: 100%;
      height: 100%;

      figure {
        display: block;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.mosaic-2col .row>* {
  grid-template-columns: 1fr 1fr;
  /* 2 columns, same width */
  grid-auto-rows: 267px;

  /* Sets the height of a row */
  @include media-breakpoint-down(md) {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  &>div:nth-child(1) {
    grid-row: span 2;

    /* First Item is as high as two regular ones */
    @include media-breakpoint-down(lg) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }

  @include media-breakpoint-down(md) {
    &>div {
      grid-row: span 1;
      grid-column: span 1;
    }
  }
}

.mosaic-3col .row>* {
  grid-template-columns: 1fr 1fr 1fr 1fr;

  /* 4 columns, same width */
  @include media-breakpoint-down(md) {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  grid-auto-rows: 267px;
  /* Sets the height of a row */

  &>div:nth-child(1) {
    grid-column: span 2;
    /* First Item is as wide as two regular ones */
    grid-row: span 2;

    /* First Item is as high as two regular ones */
    @include media-breakpoint-down(md) {
      grid-column: span 1;
    }
  }
}

@include media-breakpoint-down(xl) {
  .mosaic.mosaic-2col {

    .row>*>div:nth-child(2),
    .row>*>div:nth-child(3) {
      max-height: 220px;
    }

    .row>* {
      grid-auto-rows: auto;
    }
  }
}

@include media-breakpoint-down(lg) {
  .mosaic.mosaic-2col {

    .row>*>div:nth-child(2),
    .row>*>div:nth-child(3) {
      max-height: initial;
    }

    .card {
      max-height: 200px;
    }
  }
}

/* Content - Inner */
.content-inner {
  width: 100%;
  background: $primary-color;
  overflow: hidden;
  padding: 110px 0;

  @include media-breakpoint-down(xl) {
    padding: 80px 0;
  }

  @include media-breakpoint-down(md) {
    padding: 60px 0;
  }
}

/* WOWJS - Animations */
.wow {
  opacity: 0;
}

#news .container {
  margin-bottom: -75px;

  @include media-breakpoint-up(xl) {
    padding: 40px 225px 0px 225px;
  }
}

.image-wall {
  padding: 0 24px;
}

/* Language Switcher */

#languageLightbox {
  .row {
    justify-content: center;
    padding: 0 35%;

    .col-4 {
      margin: 0 auto;
      padding-bottom: 20px;
    }

    .ff-round.ff-md {
      margin: 0 auto;
      font-weight: $font-weight-normal;
    }
  }

  @include media-breakpoint-down(lg) {
    flex-direction: column;
    padding: 0;
  }
}

/* Tables */
/* Responsive Tables */
@include media-breakpoint-down(md) {
  .frame-type-table {
    overflow-x: auto;

    .ce-table thead th {
      word-break: keep-all;
      hyphens: none;
      min-width: 200px;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.25rem;
      vertical-align: middle;
    }
  }
}

.ce-table thead th {
  border: none;
  background: #003378;
  color: #ffdb38;
  padding: 1em 0.5em;
}

.ce-table td {
  border: none;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border: none;
}

tr:nth-child(odd) {
  background: $secondary-bg;
}

tr:nth-child(even) {
  background: #dff1ff70;
}

.search-icon img {
  height: 100%;
}

/* Image Row */
.image-wall .figure {
  padding-bottom: 20px;
}

/* early wrap of 33/33/33 column */
.frame-type-news_newsdetail .news .news-body p {
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.625rem;
}

.frame-type-news_newsdetail .news .news-body .news-meta {
  font-size: 1.125rem;
}

.mobile-view {
  display: none;

  @include media-breakpoint-down(md) {
    display: block;
  }
}

.desktop-view {
  display: block;

  @include media-breakpoint-down(md) {
    display: none;
  }
}

@include media-breakpoint-down(xl) {
  .col3-grid {
    .col-sm-12 {
      &.break-early {
        width: 49.5%;
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .col3-grid {
    .col-sm-12 {
      &.break-early {
        width: 100%;
      }
    }
  }
}

//Feedback from park GAT: correct display of very long headlines on small devices (e.g: #grandaquariumdetouraine)
@media (max-width: 767px) {
  .frame-layout-3 h2 {
    font-size: 20px;
  }

  .mobile-slider-five-col,
  .mobile-slider-four-col,
  .mobile-slider-three-col,
  .mobile-slider-multi-row {
    .owl-carousel .owl-stage .card.content-on-image-bottom .figure {
      border-radius: 12px;
    }

    .owl-carousel .owl-stage .card.content-on-image-bottom .figure img {
      border-radius: 12px;
    }

    .card.content-on-image-bottom,
    .card.content-on-image {
      height: auto;
    }
  }
}

@media (max-width: 400px) {
  .frame-layout-3 h2 {
    font-size: 16px;
  }
}

@include media-breakpoint-down(md) {
  .hero-main .owl-carousel .slide-item {
    height: 70vh;
    min-height: 420px;
  }

  .container.twocol-50-50 .row.col2-grid.frame-space-before- .col-sm-12.col-md-6.col-lg-6:first-child {
    margin-bottom: 20px;
  }

  .footer-main .pre-footer {
    padding-top: 60px !important;
  }

  .frame-type-news_newsdetail .news .news-body p {
    font-size: 1rem;
    line-height: 1.125rem;
  }
}

h1:blank,
h2:blank,
h3:blank,
h4:blank,
h5:blank,
h6:blank,
span:blank,
p:blank {
  display: none;
}

img.title.-img {
  position: absolute;
  left: 17px;
  top: 11px;
  box-shadow: none;
  height: 68%;
}

@media (max-width: 1199.98px) {
  #header-type-2 .navbar .btn-booking .btn p.txt {
    display: block !important;
  }
}

// EAA-menu accessibility fix

@media (min-width: 1200px) {

  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu,
  .dropdown>a:focus+.dropdown-menu,
  .dropdown-menu:focus-within {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transition-delay: 0s;
    pointer-events: auto;
  }

  .dropdown:hover .dropdown-menu.mega-menu-custom,
  .dropdown:focus-within .dropdown-menu.mega-menu-custom,
  .dropdown>a:focus+.dropdown-menu.mega-menu-custom,
  .dropdown-menu.mega-menu-custom:focus-within {
    transform: translateY(0) scaleY(1) translateX(-50%);
  }

  #cookie-consent:focus-within :is(button, a, label):focus-visible,
  #cookie-consent :is(button, a, label):focus {
    visibility: visible;
    opacity: 1;
    outline: 1px solid $black;
  }

  .options label:has(input[type="checkbox"]:focus-visible) {
    outline: 1px solid $black;
  }
}

// commented for issue reported by Client #311216,#311209
// .owl-carousel .owl-item{
//   padding: 3px;
// }

.owl-carousel .owl-nav button.owl-prev:before,
.owl-carousel .owl-nav button.owl-next:before {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* wmsp , bagatelle banner text position */

// @media (max-width: 768px) {

// .hero-section.header-type-before-1 .hero-content,
// .hero-section.header-type-before-6 .hero-content {
//   margin-top: 150px;
// }
// }

// Sale/offer prices use <ins> for screen-reader semantics (paired with <del> old price).
// Strip the default <ins> underline so the visual price display is unchanged.
ins.offer-price,
ins.badge-price {
  text-decoration: none;
}

.image-round img {
  border-radius: 12px;
}

// Tab scroll hint — right-arrow indicator on mobile (all sites)
@media (max-width: 767.98px) {
    .tab-scroll-hint-wrap {
        position: relative;
        display: block;

        &.scroll-right::after {
            content: '\203A';
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.55);
            color: #ffffff;
            font-size: 1.4rem;
            line-height: 28px;
            text-align: center;
            pointer-events: none;
            z-index: 2;
        }
    }
}