/* ============================================================
   Shared date picker — one branded calendar across the whole site.
   Loaded by both the public site (_Layout) and the agency Portal
   (_PortalLayout) so the omni search popover and the form date
   pickers (rl-datepicker.js) look identical everywhere.
   ============================================================ */

/* Floating popover box (omni date/passengers popovers + the rl-datepicker calendar). */
.popover{position:absolute;top:calc(100% + 8px);left:0;z-index:70;background:#fff;border:1px solid var(--line-2,#cfd8dc);border-radius:14px;box-shadow:var(--shadow-float,0 14px 36px rgba(20,40,46,.18));padding:14px;min-width:252px;color:var(--ink,#15333d);max-height:70dvh;overflow:auto;}

/* Calendar grid */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px;font-weight:700;}
.cal-head button{width:28px;height:28px;border-radius:8px;border:none;background:#F4F6F5;font-size:16px;cursor:pointer;color:var(--ink,#15333d);}
.cal-head button:hover{background:var(--teal-50,#e6f0ef);color:var(--teal-d,#0f5a52);}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.cal-dow span{text-align:center;font-size:11px;color:var(--faint,#7a8a89);font-weight:600;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-empty{height:32px;}
.cal-day{height:32px;border:none;background:none;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink,#15333d);font-family:inherit;}
.cal-day:hover:not(.past){background:var(--teal-50,#e6f0ef);}
.cal-day.past{color:#CBD3D2;cursor:default;}
.cal-day.in{background:var(--teal-50,#e6f0ef);} /* in-between days keep the rounded 8px chip like selected days */
.cal-day.on{background:var(--teal-d,#0f5a52);color:#fff;}

/* ---- rl-datepicker: native <input type=date> progressively enhanced into the branded calendar ---- */
.rldp{position:relative;display:block;}
.rldp-native{position:absolute!important;width:1px;height:1px;padding:0;margin:0;border:0;clip:rect(0 0 0 0);overflow:hidden;pointer-events:none;} /* kept in DOM for form posting + JS reads */
.rldp-v{display:flex;align-items:center;gap:8px;width:100%;font:inherit;text-align:left;cursor:pointer;
  padding:7px 9px;border:1px solid var(--line,#cfd8dc);border-radius:8px;background:#fff;color:var(--ink,#15333d);}
.rldp-v:hover{border-color:var(--teal,#137a6f);}
.rldp-v:focus-visible{outline:none;border-color:var(--teal,#137a6f);box-shadow:0 0 0 2px var(--teal-50,#e6f0ef);}
.rldp-v .ph{color:var(--teal,#137a6f);font-size:16px;flex:none;}
.rldp-v .rldp-txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rldp-v.is-placeholder .rldp-txt{color:var(--muted,#7a8a89);}
.rldp .popover{min-width:248px;}

/* On the bigger B2C form inputs, match their taller padding / radius so the trigger reads like the others. */
.authcard .rldp-v,.fld .rldp-v{padding:12px 13px;border-radius:var(--r-btn,10px);border-color:var(--line-2,#cfd8dc);font-size:15px;}
/* Quote modal: match the date trigger exactly to the modal's other inputs (.qm-fld input). */
.qm-fld .rldp-v{padding:12px 13px;border-radius:var(--r-btn,11px);border-color:var(--line-2,#DCE4E3);font-size:15px;line-height:1.4;}
.qm-fld .rldp-v .ph{font-size:15px;line-height:1;} /* keep the icon from making the date field taller than the text inputs */