/* 
  A container that will break out to the full viewport width (100vw).
  The margin-left and margin-right trick ensures it escapes any parent container limits.
*/
.destination-widget-container {
  position: relative;
  width: 100%;
  max-width: 940px;   /* Constrain width to 940px */
  margin: 20px auto;  /* Center horizontally and keep vertical spacing */
  display: flex;
  flex-wrap: nowrap;  /* Keep columns side-by-side on larger screens */
  gap: 20px;
}

/* LEFT COLUMN: The map */
.map-column {
  flex: 1 1 auto;
  min-width: 500px;  /* so it doesn't shrink too narrow */
  min-height: 400px; /* ensures a decent map area */
  background: #fafafa;
}

/* The dynamic map iframe should fill the column */
.map-column iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* RIGHT COLUMN: Ticket prices */
.prices-column {
  flex: 0 0 350px;  /* fixed or minimum width for the right column */
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}

/* Title above the ticket prices */
.prices-column .title {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

/* Tabs for Return / One Way */
.price-tabs {
  display: flex;
  margin-bottom: 16px;
  border-bottom: 1px solid #ddd;
}

.tab-button {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-button:hover {
  color: #000;
}

.tab-button.active {
  color: #000;
  border-bottom-color: #1e88e5; /* highlight active tab */
}

/* Price list styling */
.price-list {
  margin-bottom: 20px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 16px;
  color: #444;
}

.price-label {
  font-weight: 500;
}

.price-value {
  font-weight: 600;
  color: #333;
}

.price-label.discount {
  color: #555;
}

/* Amenities below the price list */
.amenities {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

/* Mobile: stack columns vertically below 800px */
@media (max-width: 800px) {
  .destination-widget-container {
    flex-wrap: wrap;     /* allow wrapping */
    margin-left: 0;      /* remove negative margins */
    margin-right: 0;
    width: 100%;         /* revert to normal width */
  }
  .map-column {
    flex: 1 1 100%;
    min-width: auto;
    margin-bottom: 20px; /* spacing */
  }
  .prices-column {
    flex: 1 1 100%;
    min-width: auto;
  }
}