/* Multi-start calendars, one start day at a time (start-pick).
   Port of crystalseas-v2 style.scss "start-pick" (v126), as plain CSS (no build step here).
   public/js/tt-multi-start-calendar.js sets data-start-pick="N" on .acvc_dual and adds the
   .tt-startpick toggle. Only trip_index_N bars are shown, drawn like the single-start
   calendars: circle on the first and last day, band between. Without the JS, nothing here
   applies and the embed's overlapping bars + legend show as before. */

.acvc_dual[data-start-pick="1"] .c_row .day > div:not(.trip_index_1),
.acvc_dual[data-start-pick="2"] .c_row .day > div:not(.trip_index_2),
.acvc_dual[data-start-pick="3"] .c_row .day > div:not(.trip_index_3),
.acvc_dual[data-start-pick="4"] .c_row .day > div:not(.trip_index_4) {
  display: none !important;
}

.acvc_dual[data-start-pick] .acvc_dual_legend {
  display: none !important;
}

.acvc_dual[data-start-pick] .c_row .day {
  height: 44px !important;
}

.acvc_dual[data-start-pick] .c_row .day p {
  position: relative;
  z-index: 3;
}

.acvc_dual[data-start-pick] .c_row .day > div {
  top: 4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 36px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.acvc_dual[data-start-pick] .c_row .day > div.cal_middle.available { background: #85B1FF !important; }
.acvc_dual[data-start-pick] .c_row .day > div.cal_start.available { background: linear-gradient(to right, transparent 50%, #85B1FF 50%) !important; }
.acvc_dual[data-start-pick] .c_row .day > div.cal_end.available { background: linear-gradient(to left, transparent 50%, #85B1FF 50%) !important; }
.acvc_dual[data-start-pick] .c_row .day > div.cal_middle.not_available { background: #f87777 !important; }
.acvc_dual[data-start-pick] .c_row .day > div.cal_start.not_available { background: linear-gradient(to right, transparent 50%, #f87777 50%) !important; }
.acvc_dual[data-start-pick] .c_row .day > div.cal_end.not_available { background: linear-gradient(to left, transparent 50%, #f87777 50%) !important; }

.acvc_dual[data-start-pick] .c_row .day > div.cal_start::before,
.acvc_dual[data-start-pick] .c_row .day > div.cal_end::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border-radius: 50%;
  background: #4487FF;
}

.acvc_dual[data-start-pick] .c_row .day > div.not_available.cal_start::before,
.acvc_dual[data-start-pick] .c_row .day > div.not_available.cal_end::before {
  background: #f53d3d;
}

/* Toggle. CS draws it white on its blue panel; TT's calendar sits on a light background,
   so it is outlined and filled in TT blue instead. */
.acvc_dual .tt-startpick {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* equal widths, so the highlight can slide by whole steps */
  width: max-content;
  max-width: 100%;
  margin: 10px auto 12px;
  border: 1px solid #2678da;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

/* Sliding highlight behind the selected button (--tt-n buttons, --tt-i selected). */
.acvc_dual .tt-startpick::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / var(--tt-n, 2));
  background: #2678da;
  transform: translateX(calc(100% * var(--tt-i, 0)));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.acvc_dual .tt-startpick button {
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: #2678da !important;
  background: transparent !important;
  text-shadow: none !important; /* TT's global button style adds one */
  padding: 9px 18px;
  margin: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.28s;
}

.acvc_dual .tt-startpick button[aria-pressed="true"] {
  color: #ffffff !important;
}

.acvc_dual .tt-startpick button:focus-visible {
  outline: 2px solid #ffb000;
  outline-offset: -2px;
}

/* Attention pulse: a soft blue ring, 3 times, when the calendar first opens. */
.acvc_dual .tt-startpick.tt-startpick--nudge {
  animation: tt-startpick-pulse 1.6s ease-out 0.5s 3;
}

@media (prefers-reduced-motion: reduce) {
  .acvc_dual .tt-startpick::before,
  .acvc_dual .tt-startpick button {
    transition: none;
  }

  .acvc_dual .tt-startpick.tt-startpick--nudge {
    animation: none;
  }
}

@keyframes tt-startpick-pulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 120, 218, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(38, 120, 218, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 120, 218, 0); }
}