/**
 * Tommy booking widget: make geboortedatum (dag / maand / jaar) usable on narrow screens.
 * Tommy uses tbs-col-xs-3 / xs-6 which leaves day/year inputs ~28px wide at 390px.
 */

/* Prefer stacked fields on phones so day/year stay tappable and readable. */
@media screen and (max-width: 767px) {
  .tbs_persoon_geboortedatum .tbs-col-xs-3,
  .tbs_persoon_geboortedatum .tbs-col-xs-6,
  .tbs_gast_geboortedatum .tbs-col-xs-3,
  .tbs_gast_geboortedatum .tbs-col-xs-6,
  [class*="_geboortedatum"] > .tbs-col-xs-3,
  [class*="_geboortedatum"] > .tbs-col-xs-6 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 8px;
  }

  [class*="_geboortedatum"] input.tbs-form-control,
  [class*="_geboortedatum"] select.tbs-form-control {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mid-width: keep one row but give day/year enough space to type 4 digits. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  [class*="_geboortedatum"] > .tbs-col-xs-3 {
    width: 28% !important;
  }

  [class*="_geboortedatum"] > .tbs-col-xs-6 {
    width: 44% !important;
  }
}

.booking-geboortedatum-tip {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  background: #f3f6f4;
  border-left: 4px solid #1a3a2c;
  color: #1a3a2c;
  font-size: 15px;
  line-height: 1.45;
}

.booking-geboortedatum-tip strong {
  font-weight: 700;
}

.booking-fallback-link {
  margin: 0 0 1.5rem;
  font-size: 15px;
  line-height: 1.45;
}