/* etick-datepicker.css — CR-P008 T-C
 *
 * The look of the calendar that replaces flatpickr. Plain CSS rather than
 * Tailwind utilities: this is a component drawn by JavaScript, so there is no
 * markup for the build's scanner to read.
 *
 * The palette follows flatpickr's own defaults closely enough that the field
 * does not change character - white panel, soft shadow, the site's orange for
 * the chosen day.
 *
 * CR-P177 T-B. The orange is now the theme colour: the chosen day, today's
 * ring, the focus outlines and the hover tint read --etick-accent (text on it
 * --etick-accent-contrast). Each keeps the old orange as its fallback, so a
 * page without the palette looks as it did. The greys stay as they are.
 */

.etick-dp {
  position: absolute;
  z-index: 100020;
  box-sizing: border-box;
  /* Sizes raised on the owner's request in Q-P008-verify-C item 2 - "make the
     calendar a bit bigger". Grown by roughly a sixth: the panel, the day cells,
     the weekday row and the month arrows all move together, so the proportions
     stay exactly as they were. */
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  font-size: 1rem;
  color: #1f2937;
  user-select: none;
  /* As wide as the field it belongs to, and never narrower than this (CR-P123
     T-B). position() hands the field's width over as --etick-dp-field-width;
     the floor is here rather than there so that the phone rule at the foot of
     this file can raise it without JavaScript needing to know the breakpoint. */
  min-width: max(var(--etick-dp-field-width, 260px), 260px);
  /* Never wider or taller than the screen it is drawn on (CR-P123 T-A). The
     panel is placed by JavaScript, which can only keep on screen something that
     fits on screen in the first place; these two are what make that true. The
     scroll is the last resort - a phone in landscape, where no arrangement of a
     whole calendar fits between the keyboard-less 340px of viewport. */
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}

.etick-dp[hidden] {
  display: none;
}

/* --- header ------------------------------------------------------------ */

.etick-dp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.etick-dp__title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
}

.etick-dp__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #475569;
  cursor: pointer;
}

.etick-dp__nav:hover:not(:disabled) {
  background: #f1f5f9;
}

.etick-dp__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.etick-dp__nav:focus-visible {
  outline: 2px solid var(--etick-accent, #F88400);
  outline-offset: 2px;
}

.etick-dp__nav svg {
  width: 18px;
  height: 18px;
}

/* --- grid -------------------------------------------------------------- */

.etick-dp__weekdays,
.etick-dp__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.etick-dp__weekdays {
  margin-bottom: 4px;
}

.etick-dp__weekdays span {
  padding: 6px 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.etick-dp__pad {
  display: block;
}

.etick-dp__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.etick-dp__day:hover:not(:disabled):not(.is-selected) {
  background: #fff3e5;
  background: color-mix(in srgb, var(--etick-accent, #F88400) 12%, #fff);
}

.etick-dp__day:focus-visible {
  outline: 2px solid var(--etick-accent, #F88400);
  outline-offset: 1px;
}

.etick-dp__day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px var(--etick-accent, #F88400);
}

.etick-dp__day.is-selected {
  background: var(--etick-accent, #F88400);
  color: var(--etick-accent-contrast, #fff);
  font-weight: 700;
}

.etick-dp__day.is-disabled,
.etick-dp__day:disabled {
  color: #cbd5e1;
  cursor: default;
}

/* --- phones ------------------------------------------------------------ */

/* CR-P123 T-A. This file had no @media block at all, which is the whole of
   what was wrong with it on a phone: the day cell was pinned at 38px whatever
   the screen, so seven columns plus their gaps and the panel's padding could
   only ever be the size a desktop was measured for.

   Here the cell gives up its fixed width and lets the grid's seven equal
   columns divide whatever width the panel has, while its HEIGHT goes UP - a
   finger is not a mouse pointer, and a day that is fiddly to tap is the same
   complaint in a new form. At 375px, with the panel taking the width of the
   field in the Customize Trip sheet, that works out at 44 x 44 per day.

   The padding and gap come in a little to buy those cells their width; nothing
   else about the calendar changes, and none of it reaches a desktop. */
@media (max-width: 480px) {
  .etick-dp {
    padding: 10px;
    /* Seven 44px days, their six 1px gaps, the padding either side and the
       border: 336px. Below that the days would start giving width back, which
       is what the home page search showed - its date boxes are narrower than
       the ones in Customize Trip, so the same calendar came out with 33px days
       there and 44px ones in the sheet. The floor makes a phone's calendar the
       same size wherever it is opened, at the price of being a little wider
       than a narrow box - Q-P123-3, answered "same comfortable size
       everywhere". max-width still keeps it inside the screen. */
    min-width: max(var(--etick-dp-field-width, 336px), 336px);
  }

  .etick-dp__weekdays,
  .etick-dp__grid {
    gap: 1px;
  }

  .etick-dp__day {
    min-width: 0;
    height: 44px;
  }
}