/* =============================================================================
   KIDDOS RENTALS — ONE-SWEEP DATE-RANGE CALENDAR (pairs with kre-daterange.js)
   1) the hidden native inputs, 2) the .kre-range-display button per surface
   (mirrors the input it replaces on that surface), 3) the calendar popover /
   bottom sheet. Coastal-teal tokens from kre.css with literal fallbacks.
   z-index: above the theme quick-view (.kqv 9998) and the drawer (9001).
   ============================================================================= */

/* 1) Native inputs: kept as the Y-m-d value source, visually hidden (clip
   pattern). Specificity beats kre.css's !important phone rules for date inputs. */
.kre-range-ready input.kre-range-native[data-kre-range-start],
.kre-range-ready input.kre-range-native[data-kre-range-end]{
	position:absolute !important;top:0 !important;left:0 !important;
	width:1px !important;height:1px !important;min-width:0 !important;min-height:0 !important;
	padding:0 !important;margin:-1px !important;border:0 !important;
	overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;
	white-space:nowrap !important;opacity:0 !important;pointer-events:none !important;
	background:none !important;box-shadow:none !important;
}

/* 2) Display button — base look = the shared .kre-daterange input (kre.css §0). */
.kre-range-display{
	-webkit-appearance:none;appearance:none;box-sizing:border-box;
	display:flex;align-items:center;gap:8px;width:100%;min-width:0;max-width:100%;margin:0;
	padding:11px 14px;min-height:46px;
	font-family:var(--font-body,'Nunito',sans-serif);font-size:.95rem;font-weight:400;line-height:1.25;
	letter-spacing:normal;text-transform:none;text-align:left;text-decoration:none;
	color:var(--ink,#0F172A);background:var(--white,#fff);
	border:1.5px solid var(--border,#D1E8E3);border-radius:var(--r-btn,12px);box-shadow:none;
	cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
	transition:border-color 200ms ease,box-shadow 200ms ease;
}
.kre-range-display__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kre-range-display.is-empty .kre-range-display__text{color:var(--muted,#475569);}
.kre-range-display__icon{flex:none;width:16px;height:16px;color:var(--teal-ink,#0A5446);}
.kre-range-display:hover{border-color:var(--teal,#0E8A72);background:var(--white,#fff);color:var(--ink,#0F172A);}
.kre-range-display:focus{outline:none;}
.kre-range-display:focus-visible{outline:3px solid var(--mint,#A5E8D3);outline-offset:1px;border-color:var(--teal,#0E8A72);box-shadow:0 0 0 1px var(--teal,#0E8A72);}
.kre-range-display[aria-expanded="true"]{border-color:var(--teal,#0E8A72);box-shadow:0 0 0 1px var(--teal,#0E8A72);}

/* Product page booking box (.kre-booking__dates label > input). */
.kre-booking__dates .kre-range-display{margin-top:0;}

/* "Your Trip" drawer + cart "Edit dates" editor (.kt-dates__field input). */
.kt-dates__field .kre-range-display{padding:9px 10px;min-height:42px;font-size:.9rem;}
.kt-dates__field .kre-range-display:focus-visible{outline:2px solid var(--teal,#0E8A72);outline-offset:1px;box-shadow:none;}

/* Home [kiddos_date_search] (mirrors the shortcode's inline input rules). */
.kre-datesearch__field .kre-range-display{
	padding:15px 14px;min-height:54px;font-size:16px;color:#1f2d2f;background:#fff;
	border:2px solid #bcdbd4;border-radius:12px;box-shadow:0 1px 2px rgba(10,84,70,.06);
}
.kre-datesearch__field .kre-range-display.is-empty .kre-range-display__text{color:#5c7f78;}
.kre-datesearch__field .kre-range-display:hover{border-color:#0f7d8a;}
.kre-datesearch__field .kre-range-display:focus-visible,
.kre-datesearch__field .kre-range-display[aria-expanded="true"]{outline:none;border-color:#0f7d8a;box-shadow:0 0 0 3px rgba(15,125,138,.15);}

@media (max-width:600px){
	/* Rent-here hero + quick-view (kre.css phone rule: .9rem, 44px). */
	.kre-daterange .kre-field .kre-range-display{padding:10px 12px;min-height:44px;font-size:.9rem;}
	.kt-dates__field .kre-range-display{padding:10px 12px;min-height:44px;}
	.kre-range-display{gap:6px;}
}
@media (max-width:380px){
	/* The home labels already carry a calendar icon — drop the inner one so
	   "Wed, Sep 30" never truncates in the narrow two-up search card. */
	.kre-datesearch__field .kre-range-display{padding:15px 12px;}
	.kre-datesearch__field .kre-range-display__icon{display:none;}
}

/* 3) Calendar panel ---------------------------------------------------------- */
.kre-dr-live{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.kre-dr-backdrop{position:fixed;inset:0;z-index:99989;background:rgba(10,63,82,.45);animation:kre-dr-fade 180ms ease;}
.kre-dr{
	position:fixed;z-index:99990;box-sizing:border-box;width:min(632px,calc(100vw - 16px));
	padding:12px 16px 12px;background:var(--white,#fff);color:var(--ink,#0F172A);
	font-family:var(--font-body,'Nunito',sans-serif);font-size:16px;line-height:1.3;text-align:left;
	border:1px solid var(--border,#D1E8E3);border-radius:16px;box-shadow:0 14px 44px rgba(10,63,82,.24);
	animation:kre-dr-pop 160ms ease;
}
.kre-dr.is-pop{max-height:calc(100vh - 16px);overflow:auto;overscroll-behavior:contain;} /* backstop on short viewports */
.kre-dr *,.kre-dr *::before,.kre-dr *::after{box-sizing:border-box;}
.kre-dr p{margin:0;}
.kre-dr button{font-family:inherit;letter-spacing:normal;text-transform:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.kre-dr__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px;}
.kre-dr__title{font-family:var(--font-head,'Fredoka',sans-serif);font-weight:600;font-size:1.02rem;color:var(--teal-ink,#0A5446);}
.kre-dr__close,.kre-dr__nav{
	-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;
	width:36px;height:36px;margin:0;padding:0;border-radius:50%;cursor:pointer;
	color:var(--teal-ink,#0A5446);background:var(--white,#fff);border:1.5px solid var(--border,#D1E8E3);box-shadow:none;
	transition:background 150ms ease,border-color 150ms ease;
}
.kre-dr__close{border-color:transparent;}
.kre-dr__close:hover,.kre-dr__nav:hover:not(:disabled){background:var(--mist,#F0FDFA);border-color:var(--teal,#0E8A72);}
.kre-dr__close:focus-visible,.kre-dr__nav:focus-visible{outline:3px solid var(--mint,#A5E8D3);outline-offset:1px;border-color:var(--teal,#0E8A72);}
.kre-dr__nav:disabled{opacity:.35;cursor:default;}
.kre-dr__body{position:relative;}
.kre-dr__nav{position:absolute;top:0;z-index:2;}
.kre-dr__nav--prev{left:0;}
.kre-dr__nav--next{right:0;}
.kre-dr__months{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.kre-dr__caption{display:flex;align-items:center;justify-content:center;height:36px;font-family:var(--font-head,'Fredoka',sans-serif);font-weight:600;font-size:1rem;color:var(--teal-ink,#0A5446);}
.kre-dr__dow,.kre-dr__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.kre-dr__dow{margin:6px 0 2px;}
.kre-dr__dow span{text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#475569);}
.kre-dr__grid{row-gap:2px;}
.kre-dr__blank{height:40px;}
.kre-dr__day{
	-webkit-appearance:none;appearance:none;position:relative;display:flex;align-items:center;justify-content:center;
	height:40px;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
	font-size:.92rem;font-weight:700;color:var(--ink,#0F172A);cursor:pointer;
}
.kre-dr__day::before{content:"";position:absolute;top:3px;bottom:3px;left:0;right:0;background:transparent;}
.kre-dr__day > span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;}
@media (hover:hover){.kre-dr__day:not(.is-start):not(.is-end):not(:disabled):hover > span{background:var(--mist,#F0FDFA);box-shadow:inset 0 0 0 1.5px var(--teal,#0E8A72);}}
.kre-dr__day:focus{outline:none;}
.kre-dr__day:focus-visible > span{outline:3px solid var(--coral,#F97316);outline-offset:1px;}
.kre-dr__day.is-today > span::after{content:"";position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--coral,#F97316);}
.kre-dr__day.is-range::before{background:#D7F3EA;}
.kre-dr__day.is-start.has-range::before{left:50%;background:#D7F3EA;}
.kre-dr__day.is-end.has-range::before{right:50%;background:#D7F3EA;}
.kre-dr__day.is-preview::before,.kre-dr__day.is-preview.is-end.has-range::before{background:#EAF8F3;}
.kre-dr__day.is-start > span,.kre-dr__day.is-end > span{background:var(--teal-deep,#0B6E5B);color:#fff;box-shadow:0 2px 6px rgba(11,110,91,.35);} /* white on teal-deep >= 4.5:1 */
.kre-dr__day.is-preview.is-end > span{background:#fff;color:var(--teal-ink,#0A5446);box-shadow:inset 0 0 0 2px var(--teal,#0E8A72);}
.kre-dr__day.is-start.is-today > span::after,.kre-dr__day.is-end.is-today > span::after{background:#fff;}
.kre-dr__day:disabled{color:#A9B8B4;cursor:not-allowed;font-weight:600;}
.kre-dr__day:disabled > span{text-decoration:line-through;text-decoration-color:rgba(71,85,105,.35);}
.kre-dr__foot{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border,#D1E8E3);}
.kre-dr__summary{font-family:var(--font-head,'Fredoka',sans-serif);font-weight:600;font-size:1rem;color:var(--teal-ink,#0A5446);}
.kre-dr__hint{font-size:.82rem;color:var(--muted,#475569);}

/* Phone bottom sheet (<=600px wide or <=560px tall): one month, 44px+ targets,
   sticky summary. Centered + capped on landscape phones. */
.kre-dr.is-sheet{
	top:auto;left:0;right:0;bottom:0;width:100%;max-width:520px;margin:0 auto;max-height:92vh;max-height:92dvh;
	display:flex;flex-direction:column;padding:10px 16px 0;border:0;border-radius:20px 20px 0 0;
	box-shadow:0 -10px 40px rgba(10,63,82,.25);animation:kre-dr-up 220ms ease;
}
.kre-dr.is-sheet .kre-dr__head{flex:none;margin-bottom:6px;}
.kre-dr.is-sheet .kre-dr__title{font-size:1.15rem;}
.kre-dr.is-sheet .kre-dr__close{width:44px;height:44px;margin-right:-6px;}
.kre-dr.is-sheet .kre-dr__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.kre-dr.is-sheet .kre-dr__nav{width:44px;height:44px;}
.kre-dr.is-sheet .kre-dr__months{grid-template-columns:1fr;}
.kre-dr.is-sheet .kre-dr__caption{height:44px;font-size:1.08rem;}
.kre-dr.is-sheet .kre-dr__day,.kre-dr.is-sheet .kre-dr__blank{height:46px;}
.kre-dr.is-sheet .kre-dr__day > span{width:42px;height:42px;font-size:1rem;}
.kre-dr.is-sheet .kre-dr__foot{flex:none;margin:8px -16px 0;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--mist,#F0FDFA);}
.kre-dr.is-sheet .kre-dr__summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:.98rem;}
.kre-dr__leg{display:flex;flex-direction:column;min-width:0;}
.kre-dr__leg small{font-family:var(--font-body,'Nunito',sans-serif);font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-deep,#0B6E5B);}
.kre-dr__leg b{font-weight:600;white-space:nowrap;}
.kre-dr__arrow{color:var(--teal,#0E8A72);font-weight:700;}
.kre-dr__count{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--teal-deep,#0B6E5B);color:#fff;font-size:.82rem;white-space:nowrap;}

@keyframes kre-dr-pop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes kre-dr-up{from{transform:translateY(100%);}to{transform:none;}}
@keyframes kre-dr-fade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.kre-dr,.kre-dr.is-sheet,.kre-dr-backdrop{animation:none;}}

/* 4) WP-admin order screen — per-item "Change rental dates" box ---------------
   wp-admin has no theme fonts/tokens: use its system stack, WP-sized fields,
   and sit the panel above the admin bar (#wpadminbar is z-index 99999). */
body.wp-admin .kre-dr,.kre-admin-range{
	--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--font-head:var(--font-body);
}
body.wp-admin .kre-dr-backdrop{z-index:100000;}
body.wp-admin .kre-dr{z-index:100001;}
.kre-admin-range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin-top:8px;}
.kre-admin-range__field{position:relative;display:flex;flex-direction:column;gap:3px;flex:0 1 200px;min-width:150px;}
.kre-admin-range__field label{font-size:12px;font-weight:600;color:#1d2327;}
.kre-admin-range__arrow{align-self:flex-end;line-height:36px;color:var(--teal,#0E8A72);font-weight:700;}
.kre-admin-range .kre-range-display{min-height:36px;padding:6px 10px;font-size:14px;border:1px solid #8c8f94;border-radius:4px;}
.kre-admin-range .kre-range-display:hover{border-color:var(--teal,#0E8A72);}
.kre-admin-range .kre-range-display:focus-visible,
.kre-admin-range .kre-range-display[aria-expanded="true"]{outline:2px solid transparent;border-color:var(--teal,#0E8A72);box-shadow:0 0 0 1px var(--teal,#0E8A72);}
.kre-admin-range > .button{min-height:36px;}
@media (max-width:600px){
	.kre-admin-range__field{flex:1 1 0;min-width:0;}
	.kre-admin-range .kre-range-display{min-height:44px;font-size:15px;}
	.kre-admin-range > .button{flex:1 0 100%;min-height:44px;}
}