.text-bold {
  font-weight: 700;
}

header p {
  font-weight: 300;
}

header {
  width: 100%;
  height: 32em;

  background-image: url(../../images/ponton-c.jpg);
  background-repeat: no-repeat;
  background-position-y: 30%;
  background-size: cover;
}

h2 {
  font-size: 1.3rem;
}

header {
  min-height: 32em;
    /* aspect-ratio: 4 / 5; */

  position: relative;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  
  object-fit: cover;
  object-position: center;
}

.box-shadow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  min-height: 32rem;

  text-align: center;
  color: white;

  background: #1b1b1b52;

  position: relative;
  z-index: 2;
}

/* TABLE CSS */

.middle-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  padding: 0 5em 5em 5em;
}

.table-switch-container {
  display: flex;
  gap: 1.5em;

  width: 70%;
  height: 10em;
  margin: 4em 0 1em 0;

  border-radius: 20px;
}

.sg-switch {
  background-image: url(../../images/singapore-menu.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.my-switch {
  background-image: url(../../images/malaysia-menu.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.switch-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 20px;

  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  letter-spacing: 1px;

  background-color: #333; 
  background-blend-mode: luminosity;

  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

  cursor: pointer;

  & h2 {
    font-size: clamp(1rem, 4vw, 3rem);
  }
}

.switch-image:not(.active):hover {
  background-blend-mode: multiply;
  color: white;
}

.active {
  color: #ffd700;
  background-color: transparent;
  background-blend-mode: normal;

  border: 2px solid #007bff;

  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.sgtb-container {
  display: flex;
  flex-direction: column;
  
  width: 70%;

  border: 2px solid #a7a7a7;
  border-radius: 10px;
}

.tb-title,
.tb-filter,
.tb-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding: 1rem 1rem 1.5rem;

  & p {
    font-size: 1rem;
  }
}

.tb-title-left,
.tb-filter-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-title-left {
  font-size: 1.3rem;
}

.trips-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 7em;
  margin: 0.1em 0.5em;
  padding: 0 0.5em;

  border: none;
  
  font-size: 1rem;
  line-height: 1.5rem;

  background-color: white;

  anchor-name: --tq-list;

  cursor: pointer;

  &:hover {
    background-image: linear-gradient(90deg, #0c4a6e, #55aedf);
    background-repeat: no-repeat;
    background-position-y: 100%;
    background-size: 100% 8%;
  }
}

.tq-option-list {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;

  width: 8em;
  padding: 0.3em 0;
  margin-top: 0.5em;


  border: 1px solid #a7a7a7;
  border-radius: 10px;

  list-style: none;

  background-color: white;

  box-shadow: 0px 0px 3px 0px #1b1b1b;

  position: absolute;
  position-anchor: --tq-list;
  position-area: bottom;  
}

.tq-option-list li{
  width: 95%;

  border-radius: 5px;
}

.tq-option-list li:hover {
  color: white;

  background-image: linear-gradient(90deg, #0c4a6e, #55aedf);
}

/* Trips Type Filter CSS */
.tb-filter-right {
  width: 13em;
}

.trips-type {
  display: flex;
  justify-content: space-between;

  width: 100%;
  padding: 0.4em;

  border: 1px dashed #a7a7a7;
  border-radius: 5px;

  font-size: 1rem;

  background-color: #eaecef;

  cursor: pointer;

  anchor-name: --tt-filter-menu;
}

.tt-filter-container {
  display: none;
  flex-direction: column;

  width: 20em;
  margin-top: 0.5em;

  border: 2px solid #a7a7a7;
  border-radius: 10px;

  font-size: 1.2rem;

  box-shadow: 0px 0px 5px 0px #1b1b1b;
  background-color: white;

  position: absolute;
  position-anchor: --tt-filter-menu;
  position-area: bottom;
  translate: -23%;
}

.tt-filter-top {
  display: flex;
  justify-content: space-between;

  padding: 1em;

  border-bottom: 2px solid #a7a7a7;
}

.tt-filter-top .reset-btn {
  cursor: pointer;
}

.tt-filter-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5em;

  padding: 1em;
}

/* Destination Filter CSS */
.tt-destination,
.tt-operator {
  display: flex;
  justify-content: space-between;

  width: 100%;
  padding: 0.5em;
  margin-top: 0.5em;

  border: 1px solid #a7a7a7;
  border-radius: 5px;

  font-size: 1.2rem;

  background-color: white;

  cursor: pointer;
}

.tt-destination {
  anchor-name: --destination-list;
}

.tt-operator {
  anchor-name: --operator-list;
}

.tt-destination-list {
  display: none;
  flex-direction: column;

  width: 100%;
  margin-top: 0.2em;

  border: 2px solid #a7a7a7;
  border-radius: 10px;

  text-align: start;
  list-style: none;

  background-color: white;

  position: absolute;
  position-anchor: --destination-list;
  position-area: bottom center;

  & li {
    padding: 0.4em 1.5em;
  }

  & li:hover {
    border-radius: 5px;

    color: white;

    background: linear-gradient(90deg, #0c4a6e, #55aedf);
  }
}

.tt-operator-list {
  display: none;
  flex-direction: column;

  width: 100%;
  transform: translate(0, 45%);

  border: 2px solid #a7a7a7;
  border-radius: 10px;

  text-align: start;
  list-style: none;

  background-color: white;

  position: absolute;
  position-anchor: --operator-list;
  position-area: bottom center;

  & li {
    padding: 0.4em 1.5em;
  }

  & li:hover {
    border-radius: 5px;

    color: white;

    background: linear-gradient(90deg, #0c4a6e, #55aedf);
  }
}

.tt-apply-filter-btn {
  padding: 0.5em;

  border: none;
  border-radius: 5px;

  font-size: 1.2rem;
  color: white;
    
  background-color: #5f9dbe;

  cursor: pointer;
}

.filter-open {
  display: flex;
}

/* To center every text in table */
.tb-text-center {
  text-align: center;
}

.schedule-sg,
.schedule-my {
  border-top: 2px solid #a7a7a7;
  border-bottom: 2px solid #a7a7a7;
  border-collapse: collapse;
}
th,
td {
  height: 3.5em;
  border-top: 2px solid #a7a7a7;
}

th {
  font-size: 1.5em;
}

td {
  font-size: 1.5rem;
}

.tb-body {
  & .logo-sindo,
  & .logo-batamfast {
    width: 150px;
  }
}

.row {
  width: 25%;
}

.row-no {
  width: 10%;
}

/* Table Footer */
.tb-navigation {
  display: flex;

  & .active {
    color: white;
    background: linear-gradient(90deg, #0c4a6e, #55aedf);
  }

  & button {
    padding: 0.5em 1em;

    border: 1px solid #a7a7a7;

    background-color: white;
  }

  & button:hover {
    color: white;
    background: linear-gradient(90deg, #0c4a6e, #55aedf);
  }

  & .tb-nav-pagination {
    display: flex;
  }

  & .previous-btn {
    border-radius: 10px 0px 0px 10px;
  }

  & .next-btn {
    border-radius: 0px 10px 10px 0px;
  }
}

/* Malaysian CSS */
.mytb-container {
  display: flex;
  flex-direction: column;
  
  width: 70%;

  border: 2px solid #a7a7a7;
  border-radius: 10px;

  & > h2 {
    padding: 1rem 1rem 1.5rem 1rem;
  }

  & > ul {
    padding: 1em 1em 1em 3em;
    font-size: 1.3rem;
  }
}

.mytb-title {
  margin-top: 1.5em;
}

.time-split .time-left {
  margin-right: 10px;
}

.time {
  width: 16%;
}

.dolphin-pintas-tb-note {
  margin-bottom: 3em;
}

.hidden {
  display: none;
}

.darken {
  filter: opacity(10%);
}

@media (max-width: 1500px) {
  .middle-section {
    padding: 0 0 5em 0;
  }

  .table-switch-container {
    width: 80%;
  }

  .sgtb-container {
    width: 80%;
  }

  .mytb-container {
    width: 80%;
  }
}

@media (max-width: 1180px) {
  .middle-section {
    padding: 0 0 5em 0;
  }

  .table-switch-container {
    width: 90%;
  }

  .sgtb-container {
    width: 90%;
  }

  .mytb-container {
    width: 90%;
  }
}

@media (max-width: 900px) {
  .tb-title-left {
    font-size: 1rem;
  }

  .tb-title p {
    text-align: end;
  } 

  th, 
  td,
  .mytb-container > ul {
    font-size: 1rem;
  }
  
}

@media (max-width: 700px) {
  .box-shadow f{
      & h1 {
        font-size: 4rem;
        text-align: center;
      }

      & p {
      font-size: 1rem;
    }
  }
}

@media (max-width: 600px) {
  .tb-body {
    & .logo-majestic {
      width: 150px;
    }

    & .logo-sindo,
    & .logo-batamfast {
      width: 100px;
    }
  }
}

@media (max-width: 500px) {
  .sgtb-container h2,
  .mytb-container h2{
    font-size: 1rem;
  }

  .tb-body {
    & .logo-majestic{
      width: 120px;
    }

    & .logo-idm,
    & .logo-ctf{
      width: 100px;
    }

    & .logo-sindo,
    & .logo-batamfast{
      width: 80px;
    }

    & .logo-igs,
    & .logo-dbs{
      width: 60px;
    }

    & .logo-dff,
    & .logo-psa{
      width: 50px;
    }
  }

  .time-split .time-left {
    margin: 0;
    display: block;
  }
}

@media (max-width: 470px) {
  header{
    background-position: center;
  }

  .box-shadow {
    text-align: center;
      & h1 {
        font-size: 2.5rem;
        padding-left: 20px;
        padding-right: 20px;
      }

      & p {
      font-size: 1rem;
    }
  }

  .table-switch-container{
    height: 7em;
    margin-top: 2em;
    gap: 1em;
  }

  .tb-title{
    padding-bottom: 1rem;
  }

  .tb-title p{
    font-size: 0.8rem;
  }

  .tb-foot p{
    font-size: 0.8rem;
  }

  .trips-quantity{
    width: 3.5em;
  }

  .tb-filter-right{
    width: 8em;
  }

  .time,
  .row-time{
    width: 20%;
  }

  .tt-filter-container {
    transform: translate(10%);
    width: 70%;
    max-width: 400px;
  }

  .tt-destination-container li{
    font-size: 1rem;
  }

  .tt-operator-container li{
    font-size: 1rem;
  }

  .tt-apply-filter-btn{
    font-size: 1rem;
  }

  th, 
  td,
  .sgtb-container h2,
  .mytb-container h2,
  .tb-title-left,
  .mytb-container > ul {
    font-size: 0.8rem;
  } 
}