/* Shared by the booking pages and the homepage hero. These are OpenTable's own
   class names — if they rename one the widget falls back to their default styling
   rather than breaking. */

/* ---------- OpenTable booking form, dressed as part of the page ---------- */
/* the hero inherits uppercase down its type block, and the widget is inside it now */
.ot-dtp-picker,.ot-dtp-picker *{text-transform:none!important;letter-spacing:normal!important}
.ot-button,.ot-dtp-picker-button{text-transform:uppercase!important;letter-spacing:.08em!important}
.ot-dtp-picker{font-family:Montserrat,system-ui,sans-serif!important;background:transparent!important;
  width:100%!important;max-width:none!important;padding:0!important;margin:0!important}

/* the panel header above already says what this is */
.ot-dtp-picker .ot-title{display:none!important}

.ot-dtp-picker-form{display:flex!important;width:100%!important;background:transparent!important;
  gap:10px!important;align-items:stretch!important;border:0!important;border-radius:0!important}
.ot-dtp-picker-form > *{flex:1 1 0!important;min-width:0!important}

/* one surface per control, square like everything else on the site */
.ot-dtp-picker-selector{background:var(--ink)!important;
  border:1px solid var(--hair)!important;border-radius:0!important;box-shadow:none!important;
  height:58px!important;transition:border-color .25s var(--e)!important}
.ot-dtp-picker-selector:hover{border-color:rgba(199,205,212,.42)!important}
.ot-dtp-picker-selector:focus-within{border-color:var(--hot)!important}

.ot-select-label,.ot-dtp-picker-selector-link{height:100%!important;padding:0 15px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;text-decoration:none!important}
.ot-dropdown-content{background:transparent!important;border:0!important;display:flex!important;
  align-items:center!important;gap:11px!important;min-width:0!important}
.ot-label-text{color:#fff!important;font-family:Montserrat,system-ui,sans-serif!important;
  font-size:15px!important;font-weight:400!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important}

/* the leading icon carries the accent; the chevron stays quiet so it does not compete.
   Their svg paths carry a hardcoded fill="#2D333F", so the path itself has to be told. */
.ot-dropdown-content .icon{color:var(--hot)!important;flex:0 0 auto!important}
.ot-dropdown-content .icon svg,.ot-dropdown-content .icon svg path{fill:var(--hot)!important}
.ot-select-label > div:not(.ot-dropdown-content) .icon svg,
.ot-select-label > div:not(.ot-dropdown-content) .icon svg path{fill:var(--dim)!important}

/* the real controls already sit over that label — they only arrive white, so take them
   to zero opacity and leave OpenTable's own positioning alone. Moving them is what
   squeezed the date popup to the width of its field. */
.ot-dtp-picker select,.ot-dtp-picker input.ot-datepicker{opacity:0!important;cursor:pointer!important}
.ot-dtp-picker select option{background:var(--ink2)!important;color:var(--mercury)!important}

/* the button, matching the site's buttons */
.ot-button,.ot-dtp-picker-button{background:var(--hot)!important;border:2px solid var(--hot)!important;
  border-radius:0!important;color:#fff!important;font-family:Montserrat,sans-serif!important;
  font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  height:58px!important;padding:0 26px!important;box-shadow:none!important;cursor:pointer!important;
  transition:.3s var(--e)!important;-webkit-appearance:none!important;appearance:none!important}
.ot-button:hover,.ot-dtp-picker-button:hover{background:transparent!important;color:#fff!important}
.ot-button:focus-visible,.ot-dtp-picker-button:focus-visible{outline:2px solid #FF6B70!important;outline-offset:3px!important}

/* the date popup is react-day-picker inside OpenTable's shell. Colour only — every
   attempt at its layout made things worse: pinning the columns stretched the month
   across the page, and .picker__button sits on every day as well as the arrows. */
.ot-dtp-picker .picker__holder{background:var(--ink2)!important;border:1px solid var(--hair)!important;
  border-radius:0!important;box-shadow:0 26px 70px rgba(0,0,0,.65)!important;
  /* the popup inherits the width of the field it hangs off, and our fields are a quarter
     of the row — without a floor the month grid is clipped */
  min-width:310px!important}
.ot-dtp-picker .picker__frame,.ot-dtp-picker .picker__wrap,.ot-dtp-picker .picker__box,
.ot-dtp-picker .rdp-months,.ot-dtp-picker .rdp-month,.ot-dtp-picker .picker__table,
.ot-dtp-picker .picker__table thead,.ot-dtp-picker .picker__table tbody,
.ot-dtp-picker .picker__table tr,.ot-dtp-picker .picker__table td,
.ot-dtp-picker .picker__table th{background:transparent!important}
.ot-dtp-picker .picker__close{background:var(--ink2)!important;color:var(--hot)!important;
  border-bottom:1px solid var(--hair)!important}
.ot-dtp-picker .picker__header,.ot-dtp-picker .caption_label{color:#fff!important;
  font-family:Montserrat,sans-serif!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:-.01em!important}
.ot-dtp-picker .nav .picker__button,.ot-dtp-picker .nav .icon{color:var(--hot)!important}
.ot-dtp-picker .nav .icon svg,.ot-dtp-picker .nav .icon svg path{fill:var(--hot)!important}
/* the weekday row is not a table row at all — OpenTable makes thead a flex container,
   and it was sitting at 148px inside a 276px table, so the labels bunched up on the left
   and stopped lining up with the columns underneath. Stretch it and share the space. */
.ot-dtp-picker .picker__table thead{display:table-header-group!important;width:auto!important}
.ot-dtp-picker .rdp-head_row{display:table-row!important;width:auto!important}
.ot-dtp-picker .picker__weekday{display:table-cell!important;flex:none!important;
  text-align:center!important;color:var(--dim)!important}
.ot-dtp-picker .picker__day{color:var(--mercury)!important;background:transparent!important}
.ot-dtp-picker .picker__day:hover{background:rgba(194,28,34,.26)!important;color:#fff!important}
.ot-dtp-picker .rdp-day_selected,.ot-dtp-picker .picker__day--selected{background:var(--hot)!important;color:#fff!important}
.ot-dtp-picker .rdp-day_disabled,.ot-dtp-picker .rdp-day_outside,
.ot-dtp-picker .picker__day--disabled{color:rgba(199,205,212,.24)!important}

@media(max-width:900px){
  .ot-dtp-picker-form{flex-direction:column!important}
  /* stacked, flex-basis:0 would compute the height and ignore ours */
  .ot-dtp-picker-form > *{flex:0 0 auto!important}
  .ot-dtp-picker-selector,.ot-button,.ot-dtp-picker-button{height:54px!important;width:100%!important}
}