/* Accommodations, Deck Plans and FAQs tabs */

/* A ship has up to six tabs, and at their full size they stop fitting on one line below about
   1060 pixels, so the labels and their padding shrink with the window. */
.adc_tabs {
  --adc-tab-font: clamp(15px, 1.75vw, 20px);
  --adc-tab-pad: clamp(8px, 1.25vw, 18px);
}

.ship-tab-heading {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.3;
  color: #004a83;
}

.ship-plan[hidden],
.deck-details[hidden],
.deck-figure[hidden],
.staterooms_class[hidden] {
  display: none;
}

.deck_dates_container {
  margin-bottom: 18px;
  color: #004a83;
}

.deck_dates_container .adc_select_dropdown {
  margin-left: 6px;
}

/* Stateroom guide */

.stateroom-guide {
  border: 1px solid #cfdde8;
  border-radius: 6px;
  background-color: #f5f9fc;
  padding: 16px 18px 12px;
}

.stateroom-guide-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 18px;
}

.stateroom-guide-head h3 {
  margin: 0;
  font-size: 18px;
  color: #004a83;
}

.stateroom-guide-head p {
  margin: 4px 0 0;
  color: #4d5b66;
  max-width: 80ch;
}

.view-more-toggle {
  display: inline-block;
  margin-top: 6px;
}

.stateroom-guide-toggle,
.view-more-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #1a7dde;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.stateroom-guide-toggle:hover,
.view-more-toggle:hover {
  color: #004a83;
}

.stateroom-guide.is-collapsed .stateroom-guide-body {
  display: none;
}

.category-table {
  width: 100%;
  max-width: 860px;
  margin: 6px 0 4px;
  border-collapse: collapse;
  font-size: 14px;
}

.stateroom-guide-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.stateroom-guide-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Table cells, least specific first. */

.stateroom-guide-table td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid #dde7ef;
  text-align: left;
  vertical-align: top;
}

.category-table th {
  padding: 0 14px 5px 0;
  border-bottom: 2px solid #d6dee5;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: #5b6b78;
  white-space: nowrap;
}

.category-table td {
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid #e3e9ee;
  vertical-align: top;
}

.stateroom-guide-table thead th {
  padding: 6px 12px 6px 0;
  border-bottom: 2px solid #cfdde8;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: #5b6b78;
  white-space: nowrap;
}

.stateroom-guide-table tbody th {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid #dde7ef;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

.category-table th:first-child,
.category-table td:first-child {
  width: 1%;
  padding-left: 6px;
}

.category-table td.category-size {
  width: 1%;
  padding-right: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.category-table tbody tr:nth-child(even) td {
  background-color: #f7f9fb;
}

.stateroom-guide-table tbody tr:last-child th,
.stateroom-guide-table tbody tr:last-child td {
  border-bottom: 0;
}

.stateroom-guide-link {
  font-weight: bold;
  color: #1a7dde;
}

.stateroom-guide-link:hover {
  color: #004a83;
  text-decoration: underline;
}

.stateroom-view-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid currentcolor;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  color: #a5520c;
  white-space: nowrap;
}

.stateroom-guide-size {
  white-space: nowrap;
}

.stateroom-guide-codes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stateroom-guide-codes .code_box {
  min-width: 34px;
  font-size: 12px;
  line-height: 18px;
}

/* A category with no booking code of its own: its color, with nothing written in it. */
.code_box--swatch {
  min-height: 20px;
  vertical-align: middle;
}

.stateroom-guide-codes .code_box--swatch {
  min-height: 18px;
}

.stateroom-guide-sub {
  display: block;
  font-size: 12px;
  color: #5b6b78;
}

.stateroom-guide-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #5b6b78;
}

.ship-deck-link {
  color: #1a7dde;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ship-deck-link:hover {
  color: #004a83;
}

.ship-position-lead {
  font-weight: bold;
}

.stateroom-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
}

.stateroom-divider::before,
.stateroom-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #cfdde8;
}

.stateroom-divider span {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6b78;
}

.stateroom-guide-back {
  margin: 10px 0 0;
  font-size: 13px;
}

/* Every stateroom type */

.accommodation-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid #c9d6e3;
  border-left: 4px solid #47a3da;
  border-radius: 4px;
  background-color: #f1f5f9;
  color: #004a83;
}

.accommodation-filter legend {
  float: left;
  margin-right: 4px;
  padding: 0;
  font-weight: bold;
}

.accommodation-filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.accommodation-filter label:has(input:checked) {
  font-weight: bold;
}

.general_amenities {
  margin: 0 0 20px;
}

.staterooms_class_description {
  max-width: 95ch;
}

.stateroom {
  scroll-margin-top: 16px;
}

.stateroom + .stateroom {
  border-top: 1px dashed #d6dee5;
}

.stateroom-flash {
  animation: stateroom-flash 1.6s ease;
}

@keyframes stateroom-flash {
  0% {
    background-color: #e3f1fb;
  }

  100% {
    background-color: transparent;
  }
}

.category-muted {
  color: #5b6b78;
}

.category-balcony {
  display: block;
  font-size: 12px;
}

.ship-location-group {
  display: block;
}

.ship-location-group + .ship-location-group {
  margin-top: 3px;
}

.ship-position {
  color: #5b6b78;
}

.category-table-note {
  margin: 0 0 14px;
  font-size: 12px;
  color: #5b6b78;
}

.stateroom .subtype-images {
  margin: 12px 0 14px;
}

/* The photos load when the tab opens; their space is kept so the text below does not jump. */
.stateroom .subtype-images img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.stateroom .description {
  display: block;
  position: relative;
  max-width: 95ch;
  line-height: 21px;
}

.stateroom .description > :first-child {
  margin-top: 0;
}

.stateroom .description.is-clamped {
  max-height: 168px;
  overflow: hidden;
}

.stateroom .description.is-clamped::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3em;
  background: linear-gradient(rgb(255 255 255 / 0%), #fff);
}

.view-more-toggle[hidden] {
  display: none;
}

/* Deck plans */

.deck-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.deck-plan-info.is-sticky {
  position: sticky;
  top: 10px;
}

.deck-select {
  margin-bottom: 12px;
  color: #004a83;
}

.deck-select .adc_select_dropdown {
  margin-left: 6px;
}

.deck-details-name {
  margin: 0 0 10px;
  font-size: 17px;
  color: #004a83;
}

.deck-profile-img {
  display: block;
  width: 74%;
  max-width: 100%;
  height: auto;
}

.deck-lists {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  margin: 20px 0 6px;
}

.deck-lists-single {
  grid-template-columns: minmax(0, 1fr);
}

.deck-lists .title,
.keys_container .title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
  color: #004a83;
}

.deck-lists ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck-lists li {
  margin-bottom: 4px;
}

.deck-categories .category_box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deck-category-link,
.deck-public-areas a {
  color: #1a7dde;
  transition: color 0.12s;
}

.deck-category-link:hover,
.deck-category-link:focus-visible,
.deck-public-areas a:hover,
.deck-public-areas a:focus-visible {
  color: #0b3f73;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.keys_container {
  margin-top: 14px;
  padding: 10px 12px 12px;
  border: 1px solid #ccc;
}

.keys_container ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.deck-lists-single .deck-public-areas ul {
  columns: 2 180px;
}

.keys_container .key_box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.keys_container .key_icon {
  display: flex;
  flex: none;
  justify-content: center;
  width: 30px;
}

.keys_container .key_icon img {
  max-width: 30px;
  max-height: 20px;
}

.deck-figure {
  position: relative;
  width: 330px; /* If you change the value here, also update the width of the admin's display to be the same */
  max-width: 100%;
  margin: 0 auto;
}

/* 330px wide, the width the admin places the dots at; narrower only on a phone that cannot fit it,
   where ship.js moves the dots by the same factor. */
.deck-figure .main_deck_img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
}

.deck-figure .pub_loc_dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: dodgerblue;
  animation: blink 1s step-start 0s infinite;
}

.deck-figure .pub_loc_dot:hover,
.deck-figure .pub_loc_dot:focus-visible {
  animation: none;
}

.deck-figure-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stateroom-popup .category-table {
  margin-bottom: 12px;
}

/* FAQs */

.ship-faqs-intro {
  margin: -6px 0 14px;
  color: #4d5b66;
}

.ship-faq-toc {
  margin: 0 0 22px;
  padding: 14px 18px 12px;
  border: 1px solid #cfdde8;
  border-radius: 6px;
  background-color: #f5f9fc;
}

.ship-faq-toc-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6b78;
}

.ship-faq-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 300px;
  column-gap: 32px;
}

.ship-faq-toc li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 14px;
  break-inside: avoid;
}

.ship-faq-toc li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 2px solid #47a3da;
  border-right: 2px solid #47a3da;
  transform: rotate(45deg);
}

.ship-faq-toc-link {
  color: #1a7dde;
  line-height: 1.4;
}

.ship-faq-toc-link:hover,
.ship-faq-toc-link:focus-visible {
  color: #004a83;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ship-faq {
  padding: 16px 0;
  border-top: 1px solid #dde7ef;
  scroll-margin-top: 16px;
}

.ship-faq:target {
  animation: stateroom-flash 1.6s ease;
}

.ship-faq h3 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.35;
  color: #004a83;
}

.ship-faq p {
  margin: 0;
  line-height: 22px;
}

.ship-overview-more {
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .stateroom-flash,
  .deck-figure .pub_loc_dot {
    animation: none;
  }
}

@media (width <= 950px) {
  .deck-plan-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .deck-plan-info.is-sticky {
    position: static;
  }
}

@media (width <= 759px) {
  /* The tab's own heading names it, so the phone-only tab label above it is not repeated. */
  .tab-accommodation .mobile_tab_content_header,
  .tab-deckplans .mobile_tab_content_header,
  .tab-faqs .mobile_tab_content_header {
    display: none;
  }

  .ship-tab-heading {
    font-size: 19px;
  }

  .stateroom-guide {
    padding: 12px;
  }

  .stateroom-guide-table,
  .stateroom-guide-table tbody,
  .stateroom-guide-table tr,
  .stateroom-guide-table th,
  .stateroom-guide-table td {
    display: block;
    width: 100%;

    /* Each row is a card with padding and a border; without this it is wider than the guide by both. */
    box-sizing: border-box;
  }

  .stateroom-guide-table thead {
    display: none;
  }

  .stateroom-guide-table tbody tr {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #dde7ef;
    border-radius: 6px;
    background-color: #fff;
  }

  .stateroom-guide-table tbody th,
  .stateroom-guide-table td {
    padding: 3px 0;
    border: 0;
  }

  .stateroom-guide-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b6b78;
  }

  .deck-lists {
    grid-template-columns: minmax(0, 1fr);
  }

  .stateroom {
    padding: 16px 0;
  }
}

@media (width <= 559px) {
  .category-table thead {
    display: none;
  }

  .category-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid #e3e9ee;
  }

  .category-table tbody tr:nth-child(even) {
    background-color: #f7f9fb;
  }

  .category-table td {
    padding: 0;
    border: 0;
    background: none;
  }

  .category-table td:first-child {
    width: auto;
    padding: 0 12px 0 0;
  }

  .category-table td.category-size {
    width: auto;
  }

  .category-table td.category-location {
    grid-column: 1 / -1;
    padding-top: 6px;
  }
}