/* =====================================================================
   FIT THE KASBAH · the site's dropdowns and calendar (js/pickers.js)
   Loads after booking.css. The trigger is the form's dark well; the
   popover is the booking card's glass, darker, so it reads over the form.
   Anchored under its box on PC, a bottom sheet on phones.
   ===================================================================== */

/* the native control stays in the form for its value, out of sight and out of reach */
.pk-native{position:absolute !important; inset:auto !important; width:1px !important; height:1px !important; padding:0 !important; border:0 !important; opacity:0 !important; pointer-events:none !important; overflow:hidden}

/* ---------------------------------------------------------------------
   TRIGGERS: the same well as the text fields
   --------------------------------------------------------------------- */
.pk-btn{
  display:flex; align-items:center; width:100%; height:54px; padding:0 44px 0 16px; border-radius:12px; text-align:left;
  font:400 16px/1.2 var(--font-body); color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:oklch(100% 0 0 / .04); border:1px solid var(--hair); cursor:pointer;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.pk-btn.is-empty, .bk-dial-show.is-empty{color:oklch(100% 0 0 / .32)}
.pk-btn:focus-visible, .pk-btn[aria-expanded="true"],
.bk-dial-show:focus-visible, .bk-dial-show[aria-expanded="true"]{
  outline:none; border-color:var(--c-orange); background:oklch(100% 0 0 / .065); box-shadow:0 0 0 4px oklch(60.59% 0.1768 40.17 / .2);
}
@media (hover:hover){ .pk-btn:hover:not(:focus-visible):not([aria-expanded="true"]){border-color:var(--hair-2)} }
.bk-dial-show{cursor:pointer}
.field.is-bad .pk-btn{border-color:var(--bad); background:oklch(67.97% 0.1445 40.17 / .06)}
/* the drawn chevron turns while its list is open */
.bk-select::after, .bk-dial::after{transition:transform .25s var(--ease), margin .25s var(--ease)}
.bk-select:has([aria-expanded="true"])::after, .bk-dial:has([aria-expanded="true"])::after{transform:rotate(-135deg); margin-top:-2px; border-color:var(--c-orange)}

/* date trigger: the date, then a calendar mark in place of the chevron */
.pk-date{position:relative; gap:10px; padding:0 40px 0 14px}
.pk-date-txt{overflow:hidden; text-overflow:ellipsis}
.pk-date-ico{position:absolute; right:13px; top:50%; width:20px; height:20px; margin-top:-10px; color:var(--txt-3); transition:color .2s var(--ease)}
.pk-date-ico svg{width:100%; height:100%}
.pk-date:focus-visible .pk-date-ico, .pk-date[aria-expanded="true"] .pk-date-ico{color:var(--c-orange)}

/* ---------------------------------------------------------------------
   THE POPOVER
   --------------------------------------------------------------------- */
.pk-pop{
  --pk-txt:oklch(98.88% 0.0045 71.42); --pk-txt-2:oklch(100% 0 0 / .7); --pk-txt-3:oklch(100% 0 0 / .45);
  --pk-hair:oklch(100% 0 0 / .1); --pk-hair-2:oklch(100% 0 0 / .18);
  position:fixed; z-index:200; display:flex; flex-direction:column; max-height:min(420px, calc(100vh - 24px));
  padding:8px; border-radius:16px; color:var(--pk-txt); font-family:var(--font-body); color-scheme:dark;
  background:oklch(19% 0.006 60 / .94); border:1px solid var(--pk-hair-2);
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 24px 60px oklch(0% 0 0 / .55), 0 2px 8px oklch(0% 0 0 / .3), inset 0 1px 0 oklch(100% 0 0 / .06);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.985); transform-origin:top center;
  transition:opacity .18s var(--ease), transform .22s var(--ease-out), visibility 0s linear .22s;
}
.pk-pop.is-open{opacity:1; visibility:visible; transform:none; transition:opacity .18s var(--ease), transform .22s var(--ease-out), visibility 0s}

/* search: a dark well with a magnifier */
.pk-search{position:relative; flex:none; margin-bottom:6px}
.pk-search svg{position:absolute; left:13px; top:50%; width:18px; height:18px; margin-top:-9px; color:var(--pk-txt-3); pointer-events:none}
.pk-search input{
  width:100%; height:44px; padding:0 14px 0 40px; border-radius:10px;
  font:400 16px/1.2 var(--font-body); color:var(--pk-txt);
  background:oklch(0% 0 0 / .25); border:1px solid var(--pk-hair); -webkit-appearance:none; appearance:none;
}
.pk-search input::placeholder{color:var(--pk-txt-3)}
.pk-search input:focus{outline:none; border-color:var(--c-orange); box-shadow:0 0 0 3px oklch(60.59% 0.1768 40.17 / .2)}
.pk-search input::-webkit-search-cancel-button{-webkit-appearance:none}

/* the list */
.pk-list{list-style:none; margin:0; padding:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:oklch(100% 0 0 / .2) transparent}
.pk-opt{
  display:flex; align-items:center; gap:10px; min-height:42px; padding:0 12px; border-radius:10px; cursor:pointer;
  font-size:.92rem; color:var(--pk-txt-2); transition:background .12s var(--ease), color .12s var(--ease);
}
.pk-opt-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-opt-code{flex:none; font-size:.84rem; font-variant-numeric:tabular-nums; color:var(--pk-txt-3)}
.pk-opt-tick{flex:none; width:16px; height:16px; color:var(--c-orange); opacity:0}
.pk-opt-tick svg{width:100%; height:100%}
.pk-opt.is-active{background:oklch(100% 0 0 / .07); color:var(--pk-txt)}
.pk-opt[aria-selected="true"]{color:var(--pk-txt); font-weight:500}
.pk-opt[aria-selected="true"] .pk-opt-tick{opacity:1}
.pk-opt[aria-selected="true"] .pk-opt-code{color:var(--c-coral)}
.pk-empty{padding:18px 12px; font-size:.88rem; text-align:center; color:var(--pk-txt-3)}
.pk-empty[hidden]{display:none}

/* ---------------------------------------------------------------------
   THE CALENDAR
   --------------------------------------------------------------------- */
.pk-cal{padding:6px 6px 4px}
.pk-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.pk-month{font-size:.98rem; font-weight:600; letter-spacing:.01em}
.pk-nav{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px; cursor:pointer; color:var(--pk-txt-2);
  background:oklch(100% 0 0 / .04); border:1px solid var(--pk-hair); transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pk-nav svg{width:18px; height:18px}
.pk-nav:disabled{opacity:.3; cursor:default}
@media (hover:hover){ .pk-nav:not(:disabled):hover{color:var(--pk-txt); border-color:var(--pk-hair-2); background:oklch(100% 0 0 / .08)} }
.pk-nav:focus-visible{outline:none; border-color:var(--c-orange)}
.pk-week, .pk-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.pk-week span{padding:4px 0 8px; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-align:center; text-transform:uppercase; color:var(--pk-txt-3)}
.pk-day{
  position:relative; display:grid; place-items:center; aspect-ratio:1; min-height:38px; border-radius:50%; cursor:pointer;
  font:500 .9rem/1 var(--font-body); font-variant-numeric:tabular-nums; color:var(--pk-txt);
  background:none; border:1px solid transparent; transition:background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
@media (hover:hover){ .pk-day:not(:disabled):not(.is-sel):hover{background:oklch(100% 0 0 / .08)} }
.pk-day:focus-visible{outline:none; border-color:var(--c-orange)}
.pk-day:disabled{color:oklch(100% 0 0 / .2); cursor:default}
.pk-day.is-today{border-color:var(--pk-hair-2)}
/* the retreat days: a gold dot under the number */
.pk-day.is-mark::after{content:""; position:absolute; bottom:5px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--c-gold)}
/* departure: the arrival day ringed, the stay between tinted */
.pk-day.is-anchor{border-color:var(--c-orange); color:var(--c-coral)}
.pk-day.is-range{background:oklch(60.59% 0.1768 40.17 / .14); border-radius:10px}
.pk-day.is-sel{color:#fff; background:var(--c-orange); border-color:var(--c-orange); box-shadow:0 0 16px oklch(60.59% 0.1768 40.17 / .45)}
.pk-day.is-sel::after{background:#fff}
.pk-legend{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--pk-hair); font-size:.76rem; color:var(--pk-txt-3)}
.pk-legend i{width:6px; height:6px; border-radius:50%; background:var(--c-gold)}

/* ---------------------------------------------------------------------
   PHONES: a bottom sheet over a dimmed page
   --------------------------------------------------------------------- */
.pk-scrim{position:fixed; inset:0; z-index:199; background:oklch(0% 0 0 / .55); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility 0s linear .25s}
.pk-scrim.is-open{opacity:1; visibility:visible; transition:opacity .25s var(--ease), visibility 0s}
html.pk-lock, html.pk-lock body{overflow:hidden}
.pk-pop.is-sheet{
  left:0 !important; right:0; bottom:0; top:auto !important; width:auto !important; max-height:78vh; max-height:78dvh;
  padding:0 14px calc(14px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; border-bottom:0;
  transform:translateY(100%); transition:transform .32s var(--ease-out), visibility 0s linear .32s;
  opacity:1;
}
.pk-pop.is-sheet.is-open{transform:none; transition:transform .32s var(--ease-out), visibility 0s}
.pk-head{position:relative; flex:none; display:flex; align-items:center; justify-content:center; min-height:58px; padding-top:10px}
.pk-grab{position:absolute; top:8px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:2px; background:oklch(100% 0 0 / .22)}
.pk-title{font-size:.95rem; font-weight:600}
.pk-x{position:absolute; right:0; top:14px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--pk-txt-2); background:oklch(100% 0 0 / .07); border:0}
.pk-x svg{width:18px; height:18px}
.is-sheet .pk-opt{min-height:48px; font-size:.95rem}
.is-sheet .pk-day{min-height:44px; font-size:.98rem}
.is-sheet .pk-cal{padding:4px 2px 6px}

@media (prefers-reduced-motion:reduce){
  .pk-pop, .pk-pop.is-open, .pk-pop.is-sheet, .pk-pop.is-sheet.is-open, .pk-scrim{transition:none}
}