/* ============================================================================
   KLLD-CAL-2026 — daterangepicker re-skin, KLLD-PROTO language
   Source of truth: _proto/cal-2026/index.html
   Loaded site-wide (functions.php → klld_enqueue_cal_2026_skin) so EVERY
   daterangepicker — transfer page, villa booking, anywhere — gets the same
   roomy grid, circular green nav, solid-green selected day, mono labels and
   green Apply pill. Variables are scoped to .daterangepicker so they never
   leak into the surrounding template palette (villa cream / transfer green).
   ========================================================================== */

.daterangepicker{
  /* self-contained design tokens — scoped, do not leak */
  --surface:#fff; --surface-2:#f7f6f3;
  --border:#ece7dc; --border-2:#d6cfbf;
  --ink:#14130f; --ink-2:#383530; --ink-3:#5b5648; --ink-4:#97907f;
  --green:#099024; --green-deep:#084d10; --green-soft:#ecfdf2; --green-ring:rgba(11,112,22,.14);
  --r-sm:8px; --r-lg:16px; --r-pill:999px;
  --shadow-lg:0 24px 56px -20px rgba(15,15,15,.22), 0 8px 16px -6px rgba(15,15,15,.06);
  --font-sans:"Poppins",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);

  z-index:99999!important; max-width:min(348px, calc(100vw - 16px))!important; box-sizing:border-box!important;
  font-family:var(--font-sans)!important; color:var(--ink)!important;
  background:var(--surface)!important; border:1px solid var(--border)!important;
  border-radius:var(--r-lg)!important; box-shadow:var(--shadow-lg)!important;
  padding:6px!important; margin-top:9px!important; animation:kcalPop .28s var(--ease) both;
}
@keyframes kcalPop{ from{ opacity:0; transform:translateY(-6px) scale(.985);} to{opacity:1;transform:none;} }
.daterangepicker::before, .daterangepicker::after{ display:none!important; } /* drop the stock caret — clean floating card */
.daterangepicker .drp-calendar{ max-width:312px!important; padding:8px!important; }
.daterangepicker .calendar-table{ background:transparent!important; border:0!important; padding:0!important; }
.daterangepicker .calendar-table table{ border-collapse:separate!important; border-spacing:2px!important; }
.daterangepicker .calendar-table th.month{ font-weight:600!important; font-size:14px!important; letter-spacing:-.01em!important; color:var(--ink)!important; }
.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next{ background:var(--surface-2)!important; border-radius:50%!important; width:30px!important; min-width:30px!important; height:30px!important; transition:background .2s var(--ease)!important; }
.daterangepicker .calendar-table th.prev.available:hover,
.daterangepicker .calendar-table th.next.available:hover{ background:var(--green-soft)!important; }
.daterangepicker .calendar-table th.prev span,
.daterangepicker .calendar-table th.next span{ border-color:var(--green)!important; border-width:0 2px 2px 0!important; }
.daterangepicker .calendar-table thead tr:last-child th{ font-family:var(--font-mono)!important; font-size:9.5px!important; letter-spacing:.06em!important; text-transform:uppercase!important; color:var(--ink-4)!important; font-weight:500!important; padding-top:6px!important; }
.daterangepicker .calendar-table td{ font-size:13px!important; font-weight:500!important; color:var(--ink-2)!important; width:34px!important; height:34px!important; line-height:34px!important; border:0!important; border-radius:var(--r-sm)!important; transition:background .15s, color .15s!important; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover{ background:var(--green-soft)!important; color:var(--green-deep)!important; border-radius:var(--r-sm)!important; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{ background:transparent!important; color:var(--ink-4)!important; opacity:.45!important; }
.daterangepicker td.disabled, .daterangepicker option.disabled{ color:var(--ink-4)!important; opacity:.4!important; text-decoration:none!important; cursor:not-allowed!important; }
.daterangepicker td.in-range{ background:var(--green-soft)!important; color:var(--green-deep)!important; }
.daterangepicker td.active, .daterangepicker td.active:hover,
.daterangepicker td.start-date, .daterangepicker td.end-date{ background:var(--green)!important; color:#fff!important; border-radius:var(--r-sm)!important; box-shadow:0 6px 14px -6px rgba(9,144,36,.7)!important; }
.daterangepicker .calendar-time{ margin:6px 0 2px!important; }
.daterangepicker .calendar-time select{ font-family:var(--font-mono)!important; font-size:13px!important; font-weight:500!important; color:var(--ink)!important; background:var(--surface-2)!important; border:1px solid var(--border)!important; border-radius:var(--r-sm)!important; padding:6px!important; outline:none!important; transition:border-color .2s, box-shadow .2s!important; }
.daterangepicker .calendar-time select:focus{ border-color:var(--green)!important; box-shadow:0 0 0 3px var(--green-ring)!important; }
.daterangepicker .calendar-time .separator{ color:var(--ink-3)!important; }
.daterangepicker .drp-buttons{ border-top:1px solid var(--border)!important; padding:10px 8px 4px!important; }
.daterangepicker .drp-buttons .drp-selected{ font-family:var(--font-mono)!important; font-size:11px!important; color:var(--ink-3)!important; }
.daterangepicker .drp-buttons .btn{ font-weight:600!important; font-size:12.5px!important; border-radius:var(--r-pill)!important; padding:8px 18px!important; transition:transform .2s var(--ease), background .2s!important; }
.daterangepicker .drp-buttons .applyBtn{ background:var(--green)!important; border-color:var(--green)!important; color:#fff!important; box-shadow:0 10px 22px -12px rgba(11,112,22,.8)!important; }
.daterangepicker .drp-buttons .applyBtn:hover{ background:var(--green-deep)!important; transform:translateY(-1px)!important; }
.daterangepicker .drp-buttons .cancelBtn{ background:transparent!important; border:1px solid var(--border-2)!important; color:var(--ink-3)!important; }

@media (prefers-reduced-motion: reduce){
  .daterangepicker, .daterangepicker *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}