/* ==========================================================================
   vr-datepicker.css — Calendario Airbnb-style
   Usa CSS variables del admin: --vr-primario, --vr-primario-alfa, etc.
   ========================================================================== */


/* ==========================================================================
   TRIGGER — el "input" visible
   Prefijo body + !important en propiedades visuales clave para ganar
   a cualquier regla button{} del tema de WordPress.
   ========================================================================== */
.vr-dp-wrap { position: relative; }

body .vr-dp-wrap .vr-dp-trigger,
body .vr-dp-trigger {
	/* Reset completo frente al tema */
	-webkit-appearance: none !important;
	appearance:         none !important;
	margin:             0 !important;
	text-decoration:    none !important;
	letter-spacing:     normal !important;
	text-transform:     none !important;
	line-height:        1.4 !important;

	/* Layout */
	width:          100% !important;
	max-width:      100% !important;
	display:        flex !important;
	align-items:    center !important;
	gap:            10px !important;
	padding:        14px 16px !important;
	box-sizing:     border-box !important;

	/* Visual */
	background:     var(--vr-fondo, #f8fafc) !important;
	border:         1.5px solid var(--vr-borde, #e2e8f0) !important;
	border-radius:  10px !important;
	box-shadow:     none !important;
	outline:        none !important;

	/* Tipografía */
	font-family:    var(--vr-fuente, inherit) !important;
	font-size:      15px !important;
	font-weight:    400 !important;
	color:          var(--vr-texto-muted, #94a3b8) !important;
	text-align:     left !important;

	cursor:         pointer !important;
	position:       relative !important;
	transition:     border-color .18s, box-shadow .18s, background .18s, color .18s !important;
}

/* Icono izquierdo */
body .vr-dp-wrap .vr-dp-trigger .vr-dp-trig-icon,
body .vr-dp-trigger .vr-dp-trig-icon {
	flex-shrink: 0 !important;
	color:       var(--vr-primario, #2563eb) !important;
	display:     flex !important;
	align-items: center !important;
}

/* Texto del trigger */
body .vr-dp-wrap .vr-dp-trigger .vr-dp-display,
body .vr-dp-trigger .vr-dp-display {
	flex:          1 !important;
	min-width:     0 !important;
	font-weight:   500 !important;
	color:         inherit !important;
	overflow:      hidden !important;
	text-overflow: ellipsis !important;
	white-space:   nowrap !important;
}

/* Chevron derecho */
body .vr-dp-wrap .vr-dp-trigger .vr-dp-trig-chev,
body .vr-dp-trigger .vr-dp-trig-chev {
	flex-shrink: 0 !important;
	color:       var(--vr-texto-muted, #94a3b8) !important;
	display:     flex !important;
	align-items: center !important;
	transition:  transform .22s !important;
}

body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--focus .vr-dp-trig-chev,
body .vr-dp-trigger.vr-dp-trigger--focus .vr-dp-trig-chev {
	transform: rotate(180deg) !important;
}

/* ── Con valor seleccionado ── */
body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--ok,
body .vr-dp-trigger.vr-dp-trigger--ok {
	color:      var(--vr-texto, #0f172a) !important;
	background: var(--vr-fondo-card, #fff) !important;
}

/* ── Focus / hover ── */
body .vr-dp-wrap .vr-dp-trigger:hover,
body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--focus,
body .vr-dp-trigger:hover,
body .vr-dp-trigger.vr-dp-trigger--focus {
	background:   var(--vr-fondo-card, #fff) !important;
	border-color: var(--vr-primario, #2563eb) !important;
	box-shadow:   0 0 0 3px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}

/* ── Error ── */
body .vr-dp-wrap .vr-dp-trigger.vr-dp-trigger--err,
body .vr-dp-trigger.vr-dp-trigger--err {
	border-color: var(--vr-error, #dc2626) !important;
	box-shadow:   0 0 0 3px rgba(220,38,38,.12) !important;
}

/* ==========================================================================
   POPUP — ventana flotante
   ========================================================================== */
body .vr-dp-popup {
	position:       fixed !important;
	z-index:        99900 !important;
	background:     #ffffff !important;
	border-radius:  20px !important;
	box-shadow:
		0 2px 4px   rgba(0,0,0,.04),
		0 8px 24px  rgba(0,0,0,.10),
		0 24px 56px rgba(0,0,0,.14) !important;
	padding:        22px !important;
	width:          340px !important;
	max-width:      calc(100vw - 16px) !important;
	font-family:    var(--vr-fuente, inherit) !important;
	border:         none !important;
	margin:         0 !important;

	/* Estado oculto */
	opacity:         0 !important;
	transform:       translateY(-10px) scale(.97) !important;
	pointer-events:  none !important;
	transition:      opacity .2s cubic-bezier(.4,0,.2,1),
	                 transform .2s cubic-bezier(.4,0,.2,1) !important;
}

/* Visible */
body .vr-dp-popup.vr-dp-popup--vis {
	opacity:        1 !important;
	transform:      none !important;
	pointer-events: auto !important;
}

/* ==========================================================================
   CABECERA DE MES
   ========================================================================== */
body .vr-dp-popup .vr-dp-header {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	margin-bottom:   18px !important;
}

body .vr-dp-popup .vr-dp-ym {
	display:   flex !important;
	gap:       6px !important;
	font-size: 16px !important;
}
body .vr-dp-popup .vr-dp-mes {
	font-weight: 800 !important;
	color:       var(--vr-texto, #0f172a) !important;
}
body .vr-dp-popup .vr-dp-yr {
	font-weight: 500 !important;
	color:       var(--vr-texto-suave, #64748b) !important;
}

/* Botones prev / next — reset total frente al tema */
body .vr-dp-popup .vr-dp-nav {
	-webkit-appearance: none !important;
	appearance:         none !important;
	width:         34px !important;
	height:        34px !important;
	min-width:     0 !important;
	min-height:    0 !important;
	flex-shrink:   0 !important;
	border:        none !important;
	background:    transparent !important;
	border-radius: 8px !important;
	display:       flex !important;
	align-items:   center !important;
	justify-content: center !important;
	cursor:        pointer !important;
	color:         var(--vr-texto-suave, #64748b) !important;
	transition:    background .14s, color .14s !important;
	padding:       0 !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1 !important;
	font-size:     inherit !important;
}
body .vr-dp-popup .vr-dp-nav:hover:not([disabled]) {
	background: var(--vr-fondo, #f1f5f9) !important;
	color:      var(--vr-texto, #0f172a) !important;
}
body .vr-dp-popup .vr-dp-nav[disabled] {
	opacity: .3 !important;
	cursor:  not-allowed !important;
}

/* ==========================================================================
   DÍAS DE LA SEMANA
   ========================================================================== */
body .vr-dp-popup .vr-dp-wkd {
	display:               grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap:                   2px !important;
	margin-bottom:         8px !important;
}
body .vr-dp-popup .vr-dp-wkd span {
	text-align:     center !important;
	font-size:      11px !important;
	font-weight:    700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	color:          var(--vr-texto-muted, #94a3b8) !important;
	padding:        4px 0 !important;
}

/* ==========================================================================
   GRID DE DÍAS
   ========================================================================== */
body .vr-dp-popup .vr-dp-grid {
	display:               grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap:                   3px !important;
}

/* Celda vacía de relleno */
body .vr-dp-popup .vr-dp-blank { aspect-ratio: 1; }

/* Botón día — reset total */
body .vr-dp-popup .vr-dp-d {
	-webkit-appearance: none !important;
	appearance:         none !important;
	aspect-ratio:  1 !important;
	min-height:    38px !important;
	border:        none !important;
	background:    transparent !important;
	border-radius: 50% !important;
	font-size:     14px !important;
	font-weight:   500 !important;
	color:         var(--vr-texto, #0f172a) !important;
	cursor:        pointer !important;
	display:       flex !important;
	align-items:   center !important;
	justify-content: center !important;
	padding:       0 !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1 !important;
	transition:    background .12s, color .12s, transform .1s !important;
	position:      relative !important;
}
body .vr-dp-popup .vr-dp-d:hover:not(.vr-dp-d--off):not(.vr-dp-d--sel) {
	background: var(--vr-fondo, #f1f5f9) !important;
}
body .vr-dp-popup .vr-dp-d:active:not(.vr-dp-d--off) { transform: scale(.88) !important; }

/* Día pasado / deshabilitado */
body .vr-dp-popup .vr-dp-d.vr-dp-d--off {
	color:   var(--vr-texto-muted, #94a3b8) !important;
	cursor:  not-allowed !important;
	opacity: .38 !important;
}

/* Hoy */
body .vr-dp-popup .vr-dp-d.vr-dp-d--today {
	font-weight: 800 !important;
	color:       var(--vr-primario, #2563eb) !important;
}
body .vr-dp-popup .vr-dp-d.vr-dp-d--today::after {
	content:       '' !important;
	position:      absolute !important;
	bottom:        4px !important;
	left:          50% !important;
	transform:     translateX(-50%) !important;
	width:         4px !important;
	height:        4px !important;
	border-radius: 50% !important;
	background:    var(--vr-primario, #2563eb) !important;
}

/* Seleccionado */
body .vr-dp-popup .vr-dp-d.vr-dp-d--sel {
	background:  var(--vr-primario, #2563eb) !important;
	color:       var(--vr-primario-texto, #ffffff) !important;
	font-weight: 800 !important;
	box-shadow:  0 4px 12px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}
body .vr-dp-popup .vr-dp-d.vr-dp-d--sel::after { display: none !important; }

/* ==========================================================================
   TIME PICKER — Wheel intuitivo estilo iOS (horas + minutos en scroll snap)
   ========================================================================== */
body .vr-dp-popup .vr-dp-time {
	overflow:   hidden !important;
	max-height: 0 !important;
	opacity:    0 !important;
	transition: max-height .32s ease, opacity .24s ease !important;
}
body .vr-dp-popup .vr-dp-time.vr-dp-time--vis {
	max-height: 290px !important;
	opacity:    1 !important;
}

/* Encabezado de la sección time */
body .vr-dp-popup .vr-dp-time-hd {
	display:        flex !important;
	align-items:    center !important;
	justify-content: center !important;
	gap:            6px !important;
	font-size:      11px !important;
	font-weight:    800 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color:          var(--vr-texto-muted, #94a3b8) !important;
	margin:         18px 0 10px !important;
	padding-top:    14px !important;
	border-top:     1px solid var(--vr-borde, #e2e8f0) !important;
}

/* Contenedor de los dos wheels + colon */
body .vr-dp-popup .vr-dp-wheels {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             4px !important;
	padding:         4px 0 6px !important;
}

/* Cada wheel = contenedor con overlay y highlight central */
body .vr-dp-popup .vr-dp-wheel {
	position:       relative !important;
	width:          84px !important;
	height:         180px !important;
	overflow:       hidden !important;
	border-radius:  14px !important;
	background:     #f8fafc !important;
	border:         1.5px solid var(--vr-borde, #e2e8f0) !important;
}

/* Highlight central — banda resaltada del item seleccionado */
body .vr-dp-popup .vr-dp-wheel-hl {
	position:       absolute !important;
	top:            50% !important;
	left:           6px !important;
	right:          6px !important;
	height:         48px !important;
	margin-top:     -24px !important;
	pointer-events: none !important;
	background:     var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
	border-radius:  10px !important;
	border:         1.5px solid var(--vr-primario, #2563eb) !important;
	z-index:        2 !important;
}

/* Overlays de fade arriba/abajo */
body .vr-dp-popup .vr-dp-wheel-overlay {
	position:       absolute !important;
	left:           0 !important;
	right:          0 !important;
	height:         60px !important;
	pointer-events: none !important;
	z-index:        3 !important;
}
body .vr-dp-popup .vr-dp-wheel-overlay--t {
	top:        0 !important;
	background: linear-gradient(to bottom, #f8fafc 30%, rgba(248,250,252,0)) !important;
}
body .vr-dp-popup .vr-dp-wheel-overlay--b {
	bottom:     0 !important;
	background: linear-gradient(to top, #f8fafc 30%, rgba(248,250,252,0)) !important;
}

/* Contenedor scrollable */
body .vr-dp-popup .vr-dp-wheel-scroll {
	position:               relative !important;
	height:                 100% !important;
	overflow-y:             auto !important;
	overflow-x:             hidden !important;
	scroll-snap-type:       y mandatory !important;
	scroll-behavior:        smooth !important;
	scrollbar-width:        none !important;
	-ms-overflow-style:     none !important;
	overscroll-behavior:    contain !important;
	-webkit-overflow-scrolling: touch !important;
	z-index:                1 !important;
	outline:                none !important;
}
body .vr-dp-popup .vr-dp-wheel-scroll::-webkit-scrollbar { display: none !important; }
body .vr-dp-popup .vr-dp-wheel-scroll:focus-visible {
	box-shadow: inset 0 0 0 2px var(--vr-primario, #2563eb) !important;
	border-radius: 14px !important;
}

/* Padding superior/inferior para que primer/último item lleguen al centro: (180-48)/2 = 66 */
body .vr-dp-popup .vr-dp-wheel-pad {
	height: 66px !important;
	width:  100% !important;
}

/* Cada item del wheel */
body .vr-dp-popup .vr-dp-wheel-item {
	-webkit-appearance: none !important;
	appearance:         none !important;
	display:            block !important;
	width:              100% !important;
	height:             48px !important;
	line-height:        48px !important;
	padding:            0 !important;
	margin:             0 !important;
	border:             0 !important;
	background:         transparent !important;
	font-size:          22px !important;
	font-weight:        600 !important;
	font-variant-numeric: tabular-nums !important;
	color:              var(--vr-texto-muted, #94a3b8) !important;
	text-align:         center !important;
	cursor:             pointer !important;
	scroll-snap-align:  center !important;
	scroll-snap-stop:   always !important;
	transition:         color .15s ease, transform .15s ease, font-size .15s ease !important;
	box-shadow:         none !important;
	outline:            none !important;
}

/* Item activo (centrado) */
body .vr-dp-popup .vr-dp-wheel-item.vr-dp-wheel-item--sel {
	color:       var(--vr-primario, #2563eb) !important;
	font-size:   28px !important;
	font-weight: 800 !important;
	transform:   scale(1.05) !important;
}

/* Item inválido (slot pasado) */
body .vr-dp-popup .vr-dp-wheel-item.vr-dp-wheel-item--off {
	color:          #cbd5e1 !important;
	text-decoration: line-through !important;
	cursor:         not-allowed !important;
	pointer-events: none !important;
}

/* Separador ":" central entre los dos wheels */
body .vr-dp-popup .vr-dp-wheel-colon {
	font-size:   30px !important;
	font-weight: 800 !important;
	color:       var(--vr-primario, #2563eb) !important;
	line-height: 1 !important;
	padding:     0 6px !important;
	flex-shrink: 0 !important;
}

/* ==========================================================================
   TIME PICKER — Responsive (móviles)
   ========================================================================== */
@media (max-width: 480px) {
	body .vr-dp-popup .vr-dp-wheel       { width: 76px !important; height: 168px !important; }
	body .vr-dp-popup .vr-dp-wheel-pad   { height: 60px !important; }
	body .vr-dp-popup .vr-dp-wheel-item  { height: 48px !important; line-height: 48px !important; font-size: 20px !important; }
	body .vr-dp-popup .vr-dp-wheel-item.vr-dp-wheel-item--sel { font-size: 26px !important; }
	body .vr-dp-popup .vr-dp-wheel-colon { font-size: 26px !important; }
	body .vr-dp-popup .vr-dp-time.vr-dp-time--vis { max-height: 275px !important; }
}

/* ==========================================================================
   FOOTER — resumen + botón confirmar
   ========================================================================== */
body .vr-dp-popup .vr-dp-footer {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	gap:             12px !important;
	margin-top:      16px !important;
	padding-top:     14px !important;
	border-top:      1px solid var(--vr-borde, #e2e8f0) !important;
}

body .vr-dp-popup .vr-dp-footer-txt { flex: 1 !important; min-width: 0 !important; }

body .vr-dp-popup .vr-dp-resumen {
	font-size:     13px !important;
	font-weight:   700 !important;
	color:         var(--vr-texto, #0f172a) !important;
	white-space:   nowrap !important;
	overflow:      hidden !important;
	text-overflow: ellipsis !important;
	display:       block !important;
}

body .vr-dp-popup .vr-dp-hint {
	font-size:  12px !important;
	color:      var(--vr-texto-muted, #94a3b8) !important;
	font-style: italic !important;
}

/* Botón confirmar — reset total */
body .vr-dp-popup .vr-dp-ok {
	-webkit-appearance: none !important;
	appearance:         none !important;
	flex-shrink:   0 !important;
	padding:       11px 22px !important;
	background:    linear-gradient(135deg, var(--vr-primario, #2563eb) 0%, var(--vr-primario-hover, #1d4ed8) 100%) !important;
	color:         var(--vr-primario-texto, #ffffff) !important;
	border:        none !important;
	border-radius: 10px !important;
	font-size:     14px !important;
	font-weight:   700 !important;
	cursor:        pointer !important;
	white-space:   nowrap !important;
	margin:        0 !important;
	box-shadow:    none !important;
	line-height:   1.4 !important;
	text-decoration: none !important;
	text-transform:  none !important;
	letter-spacing:  normal !important;
	transition:    filter .15s, box-shadow .15s, transform .1s !important;
}
body .vr-dp-popup .vr-dp-ok:not([disabled]):hover {
	filter:     brightness(1.08) !important;
	box-shadow: 0 4px 14px var(--vr-primario-alfa, rgba(37,99,235,.12)) !important;
}
body .vr-dp-popup .vr-dp-ok:not([disabled]):active { transform: scale(.96) !important; }
body .vr-dp-popup .vr-dp-ok[disabled] {
	background:  var(--vr-borde, #e2e8f0) !important;
	color:       var(--vr-texto-muted, #94a3b8) !important;
	cursor:      not-allowed !important;
	box-shadow:  none !important;
}

/* ==========================================================================
   RESPONSIVE — móvil
   ========================================================================== */
@media (max-width: 560px) {
	body .vr-dp-popup             { border-radius: 16px !important; padding: 18px !important; }
	body .vr-dp-popup .vr-dp-d   { min-height: 40px !important; font-size: 13px !important; }
}

/* Pantallas muy pequeñas: popup fluido para no desbordar el viewport */
@media (max-width: 355px) {
	body .vr-dp-popup             { padding: 14px !important; border-radius: 14px !important; }
	body .vr-dp-popup .vr-dp-d   { min-height: 32px !important; font-size: 12px !important; }
	body .vr-dp-popup .vr-dp-nav { width: 28px !important; height: 28px !important; }
	body .vr-dp-popup .vr-dp-ok  { padding: 10px 14px !important; font-size: 13px !important; }
	body .vr-dp-popup .vr-dp-wheel       { width: 70px !important; height: 156px !important; }
	body .vr-dp-popup .vr-dp-wheel-pad   { height: 54px !important; }
	body .vr-dp-popup .vr-dp-wheel-item  { font-size: 18px !important; }
	body .vr-dp-popup .vr-dp-wheel-item.vr-dp-wheel-item--sel { font-size: 22px !important; }
}

/* ── Trigger: mejoras de UX en móvil ── */
@media (max-width: 560px) {
	body .vr-dp-wrap .vr-dp-trigger,
	body .vr-dp-trigger {
		min-height:  52px !important;
		font-size:   16px !important;   /* evita zoom automático en iOS */
		padding:     12px 14px !important;
		gap:         8px !important;
	}
}

/* Paisaje en móvil: popup acotado a la altura disponible */
@media (max-height: 500px) and (orientation: landscape) {
	body .vr-dp-popup {
		max-height: calc(100vh - 24px) !important;
		overflow-y: auto !important;
	}
}