/*
  GoRacings responsive patch — calendar & date picker controls.
  Loaded after all other stylesheets; desktop rendering (>= 992px) is
  unchanged.
*/

/* Native date/time fields never exceed their container */
input[type="date"],
input[type="datetime-local"] {
  max-width: 100%;
  min-width: 0;
}

/* ---------- Tablet and below (<= 991px) ---------- */
@media (max-width: 991px) {

  /* Calendar card takes the full row instead of squeezing beside the banner */
  .cal_banner_container {
    flex-wrap: wrap;
  }

  .calendar-contain {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 530px;
  }
}

/* ---------- Mobile (<= 767px) ---------- */
@media (max-width: 767px) {

  /* Calendar card grows with its content instead of clipping it */
  .calendar-contain {
    min-height: 0;
  }

  /* Title bar wraps instead of overflowing */
  .calendar-titlebar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .calendar-controls {
    flex-wrap: wrap;
  }

  /* 16px font prevents iOS auto-zoom; taller fields give comfortable tap targets */
  input[type="date"],
  input[type="datetime-local"] {
    font-size: 16px;
    min-height: 44px;
  }

  .calendar-controls select {
    font-size: 16px;
    min-height: 32px;
  }

  /* Larger tap targets for the month navigation arrows */
  .calendar-navigation span {
    padding: 6px;
  }

  /* Day cells stay comfortably tappable */
  .calendar-day {
    min-height: 40px;
  }
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
  .calendar-titlebar {
    margin: 14px;
    margin-bottom: 0;
  }

  #calendar {
    gap: 2px;
  }

  .calendar-day {
    padding: 8px 4px;
  }

  .month-header {
    font-size: 16px;
    padding: 8px;
  }
}