/****************************************
  MEDIA QUERIES
****************************************/
/********************************** 
  * Boat Detail - General *
**********************************/
.boat-product {
  padding: 2rem 4rem; }
  @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
    .boat-product {
      padding: 1.5rem 1rem; } }
  @media (min-width: 990px) and (max-width: 1199px), (min-width: 1200px) {
    .boat-product .boat-detail {
      padding: 0 4rem; } }
  .boat-product .row {
    margin: 0; }
  .boat-product .boat-section {
    width: 100%;
    margin-bottom: 2rem; }
    .boat-product .boat-section.half {
      width: 50%; }
    .boat-product .boat-section .boat-section-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.2rem; }
      .boat-product .boat-section .boat-section-header .boat-section-icon {
        background-color: #FDC03E;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 3px; }
      .boat-product .boat-section .boat-section-header .boat-section-title {
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 800;
        color: #1F4BA3;
        margin: 0; }
    .boat-product .boat-section #map-boat {
      border-radius: 20px; }

/**********************************
  * Carousel *
**********************************/
.boat-section-carousel {
  --f-arrow-pos: 10px;
  --f-arrow-bg: rgba(255, 255, 255, 0.75);
  --f-arrow-hover-bg: rgba(255, 255, 255, 1);
  --f-arrow-color: #333;
  --f-arrow-width: 40px;
  --f-arrow-height: 40px;
  --f-arrow-svg-width: 20px;
  --f-arrow-svg-height: 20px;
  --f-arrow-svg-stroke-width: 2px;
  --f-arrow-border-radius: 50%;
  height: 60dvh; }
  @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
    .boat-section-carousel {
      height: 50dvh; } }
  @media (min-width: 770px) and (max-width: 989px) {
    .boat-section-carousel {
      height: 33dvh; } }
  .boat-section-carousel .f-carousel__slide {
    display: flex;
    align-items: center;
    justify-content: center; }
    .boat-section-carousel .f-carousel__slide::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
      pointer-events: none; }
  .boat-section-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .boat-section-carousel .f-carousel__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: center; }
    .boat-section-carousel .f-carousel__thumbs img {
      width: 96px;
      height: 54px;
      object-fit: cover;
      border-radius: 4px; }
  .boat-section-carousel .boat-title-section {
    position: absolute;
    bottom: 1rem;
    left: 4.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 .5rem; }
    @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
      .boat-section-carousel .boat-title-section {
        justify-content: center;
        left: unset;
        text-align: center;
        padding: 0 1rem; } }
    .boat-section-carousel .boat-title-section h1 {
      font-weight: 700; }
      @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
        .boat-section-carousel .boat-title-section h1 {
          font-size: 1.2rem; } }
      @media (min-width: 770px) and (max-width: 989px) {
        .boat-section-carousel .boat-title-section h1 {
          font-size: 1.5rem; } }
    .boat-section-carousel .boat-title-section .boat-type {
      text-transform: uppercase;
      font-size: .75rem;
      color: white;
      background-color: #5e8ce6;
      padding: 0 .3rem;
      border-radius: 4px; }
    .boat-section-carousel .boat-title-section h1, .boat-section-carousel .boat-title-section span {
      color: white;
      margin: 0; }
    .boat-section-carousel .boat-title-section .boat-location-section {
      flex-basis: 100%;
      width: 100%;
      order: 2;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: .3rem; }
      @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
        .boat-section-carousel .boat-title-section .boat-location-section {
          justify-content: center; } }
      .boat-section-carousel .boat-title-section .boat-location-section [data-flag-container] img {
        width: 1rem;
        height: 1rem;
        border-radius: 40px;
        object-fit: cover; }
      .boat-section-carousel .boat-title-section .boat-location-section .boat-location {
        font-size: .8rem; }

/**********************************
  * Boat location *
**********************************/
.boat-location-zone {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .3rem;
  justify-content: end;
  font-size: .8rem;
  padding-bottom: 1rem;
  margin-top: -1.5rem; }
  @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
    .boat-location-zone {
      justify-content: start;
      margin-top: -.5rem; } }
  .boat-location-zone a {
    color: #1F4BA3;
    text-decoration: underline; }
    .boat-location-zone a:hover {
      text-decoration: none; }
  .boat-location-zone [data-flag-container] img {
    width: 1rem;
    height: 1rem;
    border-radius: 40px;
    object-fit: cover; }

/********************************** 
  * Technical data *
**********************************/
.technical-data-section .technical-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2rem;
  padding: 1rem; }
  @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
    .technical-data-section .technical-data-grid {
      grid-template-columns: 1fr; } }
.technical-data-section .technical-data-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #C5D5F4;
  padding-bottom: .4rem;
  margin-bottom: .4rem;
  font-size: .8rem; }
  @media (min-width: 770px) and (max-width: 989px), (min-width: 990px) and (max-width: 1199px), (min-width: 1200px) {
    .technical-data-section .technical-data-item.left {
      grid-column: 1; }
    .technical-data-section .technical-data-item.right {
      grid-column: 2; } }
  .technical-data-section .technical-data-item .label {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    align-items: center; }
  .technical-data-section .technical-data-item .value {
    font-weight: 800; }

/********************************** 
  * Equipment / Cabins *
**********************************/
.equipment-section .equipment-wrap {
  position: relative; }
  .equipment-section .equipment-wrap .equipment-toggle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  .equipment-section .equipment-wrap .equipment-description {
    max-height: 200px;
    overflow: hidden;
    position: relative;
    transition: max-height .35s ease;
    background: white;
    padding-right: .5rem; }
    .equipment-section .equipment-wrap .equipment-description::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 60px;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%); }
  .equipment-section .equipment-wrap .equipment-toggle:checked ~ .equipment-description {
    max-height: 2500px; }
  .equipment-section .equipment-wrap .equipment-toggle:checked ~ .equipment-description::after {
    display: none; }
  .equipment-section .equipment-wrap .equipment-seeall {
    display: inline-block;
    margin-top: .5rem;
    background: transparent;
    border: none;
    color: #1F4BA3;
    font-size: .6rem;
    font-weight: 700;
    cursor: pointer;
    padding: .25rem .5rem;
    text-decoration: underline;
    user-select: none;
    text-transform: uppercase; }
  .equipment-section .equipment-wrap .equipment-seeall .less {
    display: none; }
  .equipment-section .equipment-wrap .equipment-toggle:checked ~ .equipment-seeall .less {
    display: inline; }
  .equipment-section .equipment-wrap .equipment-toggle:checked ~ .equipment-seeall .all {
    display: none; }

/********************************** 
  * Rates *
**********************************/
.rates-section .nav-pills-boat {
  gap: .5rem; }
  .rates-section .nav-pills-boat .nav-link.active {
    background-color: #1F4BA3;
    color: white;
    border-radius: .5rem;
    font-weight: bold; }
  .rates-section .nav-pills-boat .nav-link:not(.active) {
    background-color: #1F4BA320;
    color: #1F4BA3;
    border-radius: .5rem; }
    .rates-section .nav-pills-boat .nav-link:not(.active):hover {
      background-color: #1F4BA3;
      color: white;
      font-weight: bold; }

@media (min-width: 770px) and (max-width: 989px), (min-width: 990px) and (max-width: 1199px), (min-width: 1200px) {
  .rates-section .tab-rate-year .nav-pills-boat {
    margin-top: -45px; } }

@media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
  .rates-section .tab-rate-year .nav-pills-boat {
    margin-top: .5rem; } }

.rates-section .tab-rate-year .tab-content {
  background-color: #1F4BA320;
  border-radius: 1rem;
  margin-top: 1rem;
  padding: 1.5rem; }

.rates-section .tab-rate-year .tab-pane {
  display: flex;
  flex-flow: column;
  gap: .5rem; }
  @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
    .rates-section .tab-rate-year .tab-pane {
      gap: 1rem; } }
  .rates-section .tab-rate-year .tab-pane .row-rate .season-name {
    font-size: 1rem;
    font-weight: bold;
    color: #1F4BA3; }
  .rates-section .tab-rate-year .tab-pane .row-rate .season-dates, .rates-section .tab-rate-year .tab-pane .row-rate .more-season-dates {
    font-size: .8rem; }
  .rates-section .tab-rate-year .tab-pane .row-rate .available-port {
    font-size: .7rem;
    font-weight: bold;
    color: #5A8EF6; }
  .rates-section .tab-rate-year .tab-pane .row-rate .rate-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #1F4BA3;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .rates-section .tab-rate-year .tab-pane .row-rate .rate-price .vat-incl {
      font-size: .6rem;
      color: #555;
      margin-top: 0 !important; }
      @media (min-width: 481px) and (max-width: 769px), (max-width: 480px) {
        .rates-section .tab-rate-year .tab-pane .row-rate .rate-price .vat-incl {
          text-align: center !important; } }
/********************************** 
  * Extras *
**********************************/
.extras-section h3 {
  font-weight: 800;
  color: #5e8ce6; }

.extras-section .extras-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .extras-section .extras-list .extra-item {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .4rem;
    font-size: .9rem; }
    .extras-section .extras-list .extra-item::before {
      content: '\f00c';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 5px;
      color: #1F4BA3;
      font-size: .8rem;
      line-height: 1; }

/**********************************
  * Mobile booking process *
**********************************/
@media (max-width: 480px), (min-width: 481px) and (max-width: 769px), (min-width: 770px) and (max-width: 989px) {
  #container-integrated-booking {
    position: fixed;
    bottom: 0;
    z-index: 10;
    display: flex;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    max-height: 10svh; }
    #container-integrated-booking #nav-elems-booking-integrated {
      width: 100%; }
    #container-integrated-booking button {
      border-radius: 0;
      font-size: .8rem; } }