/* Airbnb-inspired date preferences, using Miami Azul's existing palette. */
.search-form>.search-field{position:relative;transition:background .18s,box-shadow .18s}

.search-form>.date-field{padding-right:42px}
.date-field #dates-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-field:has(.date-reset:not([hidden])) .search-trigger svg{display:none}
.date-reset{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:22px;line-height:1;padding:0}
.date-reset:hover{background:#edf3f7}
.date-popover{padding:34px 36px 22px;border:1px solid #e5edf2;border-radius:32px;box-shadow:0 8px 35px #12395720;overscroll-behavior:contain}
.date-popover [hidden],.date-reset[hidden]{display:none!important}
.date-popover .date-dismiss{position:absolute;right:15px;top:15px;width:27px;height:27px;background:transparent;color:#627e90;font-size:22px}
.date-popover .date-dismiss:hover{background:#f1f6f9}
.date-popover .date-tabs{width:312px;max-width:calc(100% - 32px);height:44px;gap:0;margin:0 auto 29px;padding:4px;background:#edf0f2}
.date-popover .date-tabs button{padding:6px 16px;font-size:14px;font-weight:600;line-height:1.3}
.date-popover .date-tabs button[aria-selected=true]{border-color:#dfe5e9;box-shadow:none}
.calendar-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.calendar-layout{position:relative}
.date-popover .calendar-nav{top:0;left:-11px;right:-11px;height:36px;align-items:center}
.date-popover .calendar-nav button{width:32px;height:32px;background:transparent;font-size:25px;color:var(--ink)}
.date-popover .calendar-nav button:hover:not(:disabled){background:#eff6fa}
.date-popover .calendar-nav button:disabled{opacity:.22}
.date-popover .calendar-months{gap:42px}
.date-popover .calendar-month h4{font:600 16px/36px var(--sans);margin:0 24px 14px;text-transform:capitalize}
.date-popover .weekdays{font-size:12px;color:#758590;gap:0;margin-bottom:10px;line-height:24px}
.date-popover .calendar-days{gap:0;grid-auto-rows:52px}
.date-popover .calendar-days button{position:relative;isolation:isolate;height:52px;min-height:0;aspect-ratio:auto;box-shadow:none;border-radius:0;font-size:14px;font-weight:500;background:transparent!important;transition:color .15s}
.date-popover .calendar-days button:before,.date-popover .calendar-days button:after{content:'';position:absolute;z-index:-1;pointer-events:none}
.date-popover .calendar-days button:before{inset:2px 0;background:transparent}
.date-popover .calendar-days button:after{width:48px;height:48px;max-width:100%;border-radius:50%;background:transparent;left:50%;top:50%;transform:translate(-50%,-50%)}
.date-popover .calendar-days button:hover:not(:disabled):after{box-shadow:inset 0 0 0 1px #397797}
.date-popover .calendar-days button.today:after{box-shadow:inset 0 0 0 1px #b1cedf}
.date-popover .calendar-days button.in-range:before,.date-popover .calendar-days button.preview-range:before,.date-popover .calendar-days button.range-start:before,.date-popover .calendar-days button.range-end:before,.date-popover .calendar-days button.preview-start:before,.date-popover .calendar-days button.preview-end:before{background:#eff5f8}
.date-popover .calendar-days button.range-start:before,.date-popover .calendar-days button.preview-start:before{left:50%}
.date-popover .calendar-days button.range-end:before,.date-popover .calendar-days button.preview-end:before{right:50%}
.date-popover .calendar-days button.selected:after,.date-popover .calendar-days button.preview-end:after{background:#163e59;box-shadow:none}
.date-popover .calendar-days button.preview-end:after,.date-popover .calendar-days button.range-end:after{box-shadow:inset 0 0 0 2px #7090a4}
.date-popover .calendar-days button.selected,.date-popover .calendar-days button.preview-end{color:#fff;font-weight:650;box-shadow:none}
.date-popover .calendar-days button:disabled:not(.selected){color:#bcc5ca}
.date-popover .calendar-days button.unavailable:not(.selected){color:#9ca7ae;text-decoration:line-through;text-decoration-thickness:1px;cursor:not-allowed}
.date-popover .calendar-days button.unconfirmed{color:#bcc5ca;cursor:not-allowed}
.calendar-availability-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:#627e90}
.date-popover .calendar-days button:focus-visible{outline-offset:-4px;border-radius:50%}
.date-popover .date-tolerances{gap:10px;margin-top:24px}
.date-popover .date-tolerances button,.date-popover .stay-lengths button,.date-popover .any-month{border:1px solid #d8e0e5;background:#fff;border-radius:999px;padding:8px 14px;font-size:12px;line-height:1.4;min-height:36px}
.date-popover .date-tolerances button:hover,.date-popover .stay-lengths button:hover{border-color:#7090a4}
.date-popover .date-tolerances button[aria-pressed=true],.date-popover .stay-lengths button[aria-pressed=true]{border-color:#173f59;background:#f2f8fc;box-shadow:inset 0 0 0 1px #173f59;color:#173f59}
.date-popover .calendar-bottom{margin-top:20px;padding-top:15px;border-color:#edf1f4;gap:14px;min-height:46px}
.date-popover .picker-clear{font-size:12px;padding:9px 0}
.date-popover .picker-done{min-height:36px;font-size:12px;padding:8px 20px}
.date-popover .flex-panel{padding:0;text-align:center}
.date-popover .flex-panel h3{font:600 19px/1.35 var(--sans);margin:17px 0}
.date-popover .stay-lengths{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.date-popover .stay-lengths button{font-size:14px;min-height:42px;padding:9px 19px}
.date-popover .flex-month-heading{min-height:34px;margin:49px 0 19px;position:relative}
.date-popover .flex-month-heading h3{margin:0}
.date-popover .any-month{display:block;min-height:30px;margin:10px auto 0;padding:5px 12px;font-size:11px}
.flex-month-carousel{position:relative}
.date-popover .flex-months{grid-auto-columns:calc((100% - 50px)/6);gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:3px 0 5px;scroll-padding:0}
.date-popover .flex-months::-webkit-scrollbar{display:none}
.date-popover .flex-months button{min-height:136px;border-radius:17px;padding:17px 5px;gap:6px;border:1px solid #d8e0e5;background:white;color:#254c63;scroll-snap-align:start}
.date-popover .flex-months button:hover{border-color:#7090a4}
.date-popover .flex-months button[aria-pressed=true]{border:1px solid #173f59;box-shadow:inset 0 0 0 1px #173f59;background:#f2f8fc}
.date-popover .flex-months svg{width:30px;height:30px;margin-bottom:4px;stroke:#768894}
.date-popover .flex-months strong{font-size:13px;font-weight:600;line-height:1.35}
.date-popover .flex-months span{font-size:12px;line-height:1.3}
.date-popover .flex-month-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:33px;height:33px;border:1px solid #d8e0e5;border-radius:50%;background:#fff;box-shadow:0 2px 5px #163e5912;font-size:24px;line-height:1;padding:0}
.flex-month-arrow.previous{left:-17px}.flex-month-arrow.next{right:-17px}
.date-popover .flex-month-arrow:hover{box-shadow:0 3px 10px #163e5926}
.date-popover .flex-bottom{margin-top:36px;justify-content:space-between}
@media(max-width:850px) and (min-width:600px){
 .date-popover{padding:30px 26px 20px}.date-popover .calendar-months{gap:24px}
 .date-popover .calendar-days{grid-auto-rows:46px}.date-popover .calendar-days button{height:46px}
 .date-popover .calendar-days button:after{width:42px;height:42px}
 .date-popover .flex-months{grid-auto-columns:calc((100% - 30px)/4)}
}
@media(max-width:599px){
 .date-popover{padding:25px 20px 17px;border-radius:25px;max-height:calc(100svh - 24px)}
 .date-popover .date-tabs{height:42px;margin-bottom:22px;width:270px}
 .date-popover .date-tabs button{font-size:13px}
 .date-popover .calendar-months{grid-template-columns:1fr;gap:0}
 .date-popover .second-month{display:none}
 .date-popover .calendar-nav{top:0;left:-7px;right:-7px}
 .date-popover .calendar-month h4{font-size:15px;margin-bottom:9px}
 .date-popover .weekdays{font-size:11px;margin-bottom:6px}
 .date-popover .calendar-days{grid-auto-rows:44px}
 .date-popover .calendar-days button{height:44px;font-size:13px}
 .date-popover .calendar-days button:after{width:40px;height:40px}
 .date-popover .date-tolerances{gap:7px;margin-top:19px}
 .date-popover .date-tolerances button{font-size:11px;padding:7px 11px;min-height:34px}
 .date-popover .calendar-bottom{gap:9px;font-size:11px;margin-top:15px;padding-top:12px;flex-wrap:wrap}
 .date-popover .picker-clear{font-size:11px}
 .date-popover .picker-done{padding:8px 17px}
 .date-popover .flex-panel h3{font-size:17px;margin:15px 0}
 .date-popover .stay-lengths{gap:7px}
 .date-popover .stay-lengths button{font-size:12px;padding:9px 14px;min-height:40px}
 .date-popover .flex-month-heading{margin:34px 0 16px}
 .date-popover .flex-month-heading h3{margin:0}
 .date-popover .flex-months{grid-auto-columns:calc((100% - 20px)/3)}
 .date-popover .flex-months button{min-height:123px;gap:5px}
 .date-popover .flex-months strong{font-size:11px}
 .date-popover .flex-months span{font-size:11px}
 .date-popover .flex-months svg{width:27px;height:27px}
 .date-popover .flex-month-arrow{width:29px;height:29px;font-size:21px}
 .flex-month-arrow.previous{left:-14px}.flex-month-arrow.next{right:-14px}
 .date-popover .flex-bottom{margin-top:25px}
}
@media(min-width:600px){.date-popover .second-month{display:block}}
@media(prefers-reduced-motion:reduce){.search-form>.search-field{transition:none}}
