@media (min-width: 1100px) {
  #itinerary > form > .wrapper {
    display: flex;
  }
}

#itinerary > form main {
  padding: 1rem;
}

#itinerary > form .breadcrumb {
  padding: 1rem 1rem 0 1rem;
}

#itinerary > form .breadcrumb a {
  color: inherit;
  text-decoration: none;
}

#itinerary > form .breadcrumb span {
  opacity: 0.5;
}

#itinerary > form main .section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--black-rgb), 0.1);
}

#itinerary > form main .lightbox {
  margin-bottom: 1rem;
}

#itinerary > form main .lightbox img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  object-fit: cover;
  object-position: center;
}

#itinerary > form main .lightbox .embla .embla__container {
  margin-bottom: 1rem;
}

#itinerary > form main .lightbox .embla .embla__container .embla__slide {
  position: relative;
  flex: 0 0 100%;
  margin-right: 1rem;
}

#itinerary
  > form
  main
  .lightbox
  .embla
  .embla-thumbs__container
  .embla-thumbs__slide {
  position: relative;
  flex: 0 0 calc(25% - 0.75rem);
  margin-right: 1rem;
  cursor: pointer;
  opacity: 0.5;
}

#itinerary
  > form
  main
  .lightbox
  .embla
  .embla-thumbs__container
  .embla-thumbs__slide.embla-thumbs__slide--selected {
  opacity: 1;
}

#itinerary > form main .navigation {
  position: relative;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

#itinerary > form main .navigation::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 120px;
  height: 4px;
  background: var(--eastons-gradient);
}

#itinerary > form main .navigation .heading {
  position: relative;
}

#itinerary > form main .navigation .heading a {
  display: block;
  margin-bottom: 0.5rem;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

#itinerary > form main #summary {
  line-height: 1.5rem;
}

#itinerary > form main #breakdown .subtitle {
  font-style: italic;
  color: rgba(var(--black-rgb), 0.5);
}

#itinerary > form main #breakdown .items .item {
  /* padding: 1rem; */
  margin-bottom: 1rem;
  border: 1px solid rgba(var(--black-rgb), 0.1);
  border-radius: 0.5rem;
}

#itinerary > form main #breakdown .items .item .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  cursor: pointer;
}

#itinerary > form main #breakdown .items .item .title:hover {
  background-color: rgba(var(--primary-accent-rgb), 0.1);
  border-radius: 0.25rem;
}

#itinerary > form main #breakdown .items .item .title > svg {
  transition: rotate 0.2s cubic-bezier(0.1, 0.51, 0.37, 1.05);
}

#itinerary > form main #breakdown .items .item .title > h6 {
  flex-shrink: 0;
}

#itinerary > form main #breakdown .items .item .title > svg {
  min-width: 2rem;
  min-height: 2rem;
}

#itinerary > form main #breakdown .items .item .title > span {
  flex-grow: 1;
  overflow: hidden;
  white-space: no-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
}

#itinerary > form main #breakdown .items .item[data-visibility='show'] .title > span {
  display: none;
}

#itinerary
  > form
  main
  #breakdown
  .items
  .item[data-visibility='show']
  .title
  > svg {
  rotate: 180deg;
}

#itinerary > form main #breakdown .items .item .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.33s cubic-bezier(0.1, 0.51, 0.37, 1.05);
}

#itinerary
  > form
  main
  #breakdown
  .items
  .item[data-visibility='show']
  .content {
  grid-template-rows: 1fr;
}

#itinerary > form main #breakdown .items .item .content .wrapper {
  overflow: hidden;
}

#itinerary > form main #breakdown .items .item .content .wrapper > div {
  padding: 0.5rem 1rem;
}

#itinerary > form main #hotel .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

#itinerary > form main #hotel .title .rating {
  white-space: nowrap;
  color: rgb(var(--accent-rgb));
}

#itinerary > form main #hotel .subtitle {
  margin-bottom: 1rem;
  font-size: var(--heading-sm);
  font-family: var(--heading-font);
  opacity: 0.75;
}

#itinerary > form main #hotel .content {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

@media (min-width: 768px) {
  #itinerary > form main #hotel .content {
    flex-direction: row;
  }
}

#itinerary > form main #hotel .content .text {
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  #itinerary > form main #hotel .content .lightbox {
    flex: 0 0 300px;
    width: unset;
  }
}

#itinerary > form main #hotel .content .lightbox .main {
  position: relative;
}

#itinerary > form main #hotel .content .lightbox .main img {
  width: 100%;
  box-shadow: var(--box-shadow);
}

#itinerary > form aside {
  padding: 1rem;
}

@media (min-width: 1100px) {
  #itinerary > form aside {
    min-width: 484px;
  }
}

#itinerary > form aside .about {
  margin-bottom: 1rem;
}

#itinerary > form aside .about h1 {
  margin-bottom: 1rem;
  font-size: var(--heading-md);
  font-weight: 500;
}

#itinerary > form aside .about .highlights ul {
  margin-bottom: 1rem;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23e24b92" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-flare" > <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 3l3 6l6 3l-6 3l-3 6l-3 -6l-6 -3l6 -3z" /> </svg>');
  column-count: 2;
}

#itinerary > form aside .about .highlights ul li::marker {
  font-size: 1rem;
}

#itinerary > form aside .about .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#itinerary > form aside .about .footer .duration {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#itinerary > form aside .about .footer .duration svg {
  color: rgb(var(--primary-rgb));
}

#itinerary > form aside .about .footer .price {
  display: flex;
  flex-direction: column;
  color: rgba(var(--black-rgb), 0.5);
  line-height: 1.5rem;
}

#itinerary > form aside .about .footer span {
  font-size: 1.25rem;
  font-family: var(--heading-font);
  color: rgb(var(--black-rgb));
}

#itinerary > form aside .about .footer span > strong {
  font-size: 2.5rem;
  font-weight: 400;
}

#itinerary > form aside .booking-info {
  padding: 1rem;
  font-weight: 500;
  box-shadow: var(--box-shadow);
  border-radius: 0.5rem;
}

#itinerary > form aside .booking-info .tour {
  margin-bottom: 1rem;
  background-color: rgba(var(--secondary-rgb), 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}

#itinerary > form aside .booking-info .tour .active .date {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem;
  color: rgb(var(--white-rgb));
  background-color: rgb(var(--secondary-rgb));
  border-radius: 0.5rem;
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

#itinerary > form aside .booking-info .tour .active .date .depart,
#itinerary > form aside .booking-info .tour .active .date .return {
  flex: 1;
}

#itinerary > form aside .booking-info .tour .active .date .return {
  padding-left: 1rem;
  border-left: 1px solid rgba(var(--white-rgb), 0.5);
}

#itinerary > form aside .booking-info .tour .active .date #expand {
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
}

#itinerary > form aside .booking-info .tour .active .date #expand::before,
#itinerary > form aside .booking-info .tour .active .date #expand::after {
  content: '';
  position: absolute;
  background-color: rgb(var(--white-rgb));
  transition: transform 0.25s ease-out;
}

#itinerary > form aside .booking-info .tour .active .date #expand::before {
  top: 0%;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

#itinerary > form aside .booking-info .tour .active .date #expand::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

#itinerary
  > form
  aside
  .booking-info[data-tours='show']
  .tour
  .active
  .date
  #expand::before {
  transform: translateX(-50%) rotate(90deg);
}

#itinerary
  > form
  aside
  .booking-info[data-tours='show']
  .tour
  .active
  .date
  #expand::after {
  transform: translateY(-50%) rotate(180deg);
}

#itinerary > form aside .booking-info .tour .list {
  display: grid;
  grid-template-rows: 0fr;
}

#itinerary > form aside .booking-info .tour .list > .wrapper {
  max-height: 148px;
  overflow: auto;
}

#itinerary > form aside .booking-info .tour .list > .wrapper .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

#itinerary
  > form
  aside
  .booking-info
  .tour
  .list
  > .wrapper
  .item:has(input[type='radio']:checked) {
  background-color: rgb(var(--primary-accent-rgb));
}

#itinerary > form aside .booking-info .tour .active .date .depart > span,
#itinerary > form aside .booking-info .tour .active .date .return > span,
#itinerary > form aside .booking-info .info-item > span {
  display: inline-block;
  margin-bottom: 0.25rem;
  opacity: 0.75;
  font-size: 0.875rem;
}

#itinerary > form aside .booking-info .info-item {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--black-rgb), 0.1);
}

#itinerary > form aside .booking-info .hotel .name {
  margin-bottom: 0.5rem;
}

#itinerary > form aside .booking-info .hotel .rooms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#itinerary > form aside .booking-info .hotel .rooms .room {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.875rem;
  background-color: #f3f3f3;
  border-radius: 999px;
  box-shadow: 2px 2px 2px rgba(var(--black-rgb), 0.1);
  cursor: pointer;
}

#itinerary > form aside .booking-info .hotel .rooms .room:hover {
  color: rgba(var(--white-rgb));
  background-color: rgba(var(--black-rgb));
}

#itinerary > form aside .booking-info .hotel .rooms .room .icon {
  display: flex;
  align-items: center;
}

#itinerary > form aside .booking-info .hotel .supplement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

#itinerary > form aside .booking-info .hotel .supplement span:first-child {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#itinerary > form aside .booking-info .hotel .supplement span > svg {
  color: rgb(var(--secondary-rgb));
}

#itinerary > form aside .booking-info .hotel .supplement .price {
  color: rgb(var(--light-rgb));
  font-family: var(--heading-font);
}

#itinerary > form aside .booking-info .coach {
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--black-rgb), 0.1);
}

#itinerary > form aside .booking-info .coach .seating,
#itinerary > form aside .booking-info .coach .pickup-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

#itinerary > form aside .booking-info .coach .seating button,
#itinerary > form aside .booking-info .coach .pickup-points button {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border-bottom: unset;
}

#itinerary > form aside .booking-info .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#itinerary > form aside .booking-info .footer .price {
  font-size: 0.875rem;
  color: rgba(var(--black-rgb), 0.75);
}

#itinerary > form aside .booking-info .footer .price span {
  font-size: 1rem;
  font-family: var(--heading-font);
  color: rgb(var(--black-rgb));
}

#itinerary > form aside .booking-info .footer .price span > strong {
  font-size: 1.5rem;
  font-weight: 400;
}