/* === ESTILOS BÁSICOS === */
.calendario-day.occupied {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	position: relative;
	overflow: hidden;
}

.calendario-day.occupied-confirmed {
	background-color: #FFD4D4 !important;
	color: #888 !important;
	text-decoration: line-through;
	cursor: not-allowed;
}

.calendario-day.occupied-pending {
	background-color: #FFF4E4 !important;
	color: #999 !important;
	font-style: italic;
}

.calendario-day.occupied:hover {
	transform: none !important;
	box-shadow: none !important;
}

.calendario-day.bloqueado {
    background-color: #dc3545 !important;
    color: white !important;
    cursor: not-allowed !important;
}

.calendario-day.bloqueado:hover {
    background-color: #c82333 !important;
    transform: none !important;
}

.calendario-day:not(.disabled):not(.occupied):not(.empty-day):hover {
	background: rgba(66, 153, 225, 0.2) !important;
	font-weight: bold;
	cursor: pointer;
	transform: scale(1.05);
	transition: all 0.2s ease;
}

/* === ESTILOS DO MODAL === */
.calendario-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.2s ease-out;
}

.calendario-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.calendario-modal-content {
	position: relative;
	background: white;
	border-radius: 12px;
	width: 90%;
	max-width: 500px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: slideUp 0.3s ease-out;
	overflow: hidden;
}

@keyframes fadeIn {
	from { opacity:0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { transform:translateY(20px)scale(0.95);
	opacity: 0;
}

to {
	transform: translateY(0) scale(1);
	opacity: 1;
}

}
.calendario-modal-header {
	display: flex;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid #EBEBEB;
	background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%);
}

.calendario-modal-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-right: 16px;
	font-size: 24px;
	flex-shrink: 0;
}

.calendario-modal-icon.warning {
	color: #FFA500;
}

.calendario-modal-icon.error {
	color: #FF385C;
}

.calendario-modal-title {
	flex: 1;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: #222222;
}

.calendario-modal-close {
	background: none;
	border: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s;
	color: #717171;
	font-size: 16px;
}

.calendario-modal-close:hover {
	background: #F7F7F7;
	color: #222222;
}

.calendario-modal-body {
	padding: 24px;
}

.calendario-modal-message {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #222222;
}

.calendario-modal-message strong {
	color: #FF385C;
	font-weight: 600;
}

.calendario-modal-footer {
	padding: 16px 24px;
	background: #FAFAFA;
	border-top: 1px solid #EBEBEB;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.calendario-modal-btn {
	padding: 10px 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	outline: none;
}

.calendario-modal-btn-primary {
	background: var(--nga-primary-color);
	color: white;
}

.calendario-modal-btn-primary:hover {
	background: var(--nga-primary-color);
	color: var(--nga-secondary-color);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--nga-primary-color);
}

/* === ESTILOS PARA MÚLTIPLOS MESES === */
.calendario-months-container {
	display: grid;
	gap: 24px;
}

.calendario-month-wrapper {
	border: 1px solid #EBEBEB;
	border-radius: 8px;
	padding: 16px;
	background: white;
}

.calendario-month-header {
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 12px;
	color: #222222;
}

.calendario-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px;
}

.calendario-weekday {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #717171;
	padding: 4px;
}

.calendario-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.calendario-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #EBEBEB;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 14px;
}

.calendario-day.empty-day {
	border: none;
	cursor: default;
}

.calendario-day.disabled {
	background: #F7F7F7;
	color: #DDDDDD;
	cursor: not-allowed;
}

.calendario-day.today {
	border-color: #00A699;
	font-weight: 600;
}

.calendario-day.selected-checkin, .calendario-day.selected-checkout {
	background: var(--nga-primary-color);
	color: white;
	font-weight: 600;
}

.calendario-day.in-range {
	background: rgb(30, 30, 30, 0.5);
	color: white;
}

/* === CONTROLES DE NAVEGAÇÃO === */
.calendario-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding: 12px;
	background: #F7F7F7;
	border-radius: 8px;
}

.calendario-nav-btn {
	background: white;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.calendario-nav-btn:hover:not(:disabled) {
	background: var(--nga-primary-color);
	color: white;
	border-color: var(--nga-primary-color);
}

.calendario-nav-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.calendario-month-year {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.calendario-month {
	font-size: 16px;
	font-weight: 600;
	color: #222222;
}

.calendario-year {
	font-size: 14px;
	color: #717171;
}

/* === LEGENDA === */
.calendario-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 2px;
	padding: 12px;
	background: #F7F7F7;
	border-radius: 8px;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}
.legend-item span {
    font-size: 12px;
}

.legend-color {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid #DDDDDD;
}

.legend-checkin, .legend-checkout {
	background: var(--nga-primary-color);
}
.legend-selected {
	background: rgb(30, 30, 30, 0.5);
}
	
   /* Adicionar ao <style> existente */
.legend-item.bloqueio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color.legend-bloqueado {
    background-color: rgb(204, 0, 51, 0.3);
}

.legend-reserved {
	background: #FFD4D4;
}

.legend-pending {
	background: #FFF4E4;
}

/* === DISPLAY DE DATAS SELECIONADAS - footer do componente onde aparece o botão de limpar seleção  === */
.selected-dates-display {
	display: flex;
	justify-content: space-between;
	align-items: right;
	padding: 16px;
	background: #F7F7F7;
	border-radius: 8px;
	margin-top: 16px;
}

.clear-dates-btn {
	background: var(--nga-primary-color);;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.clear-dates-btn:hover {
	background: var(--nga-primary-color);
	color: var(--nga-secondary-color);;
}

/* === MODO COMPACTO === */
.nga-calendario-disponibilidade[data-compact-mode="true"] {
	font-size: 0.9em;
}

.nga-calendario-disponibilidade[data-compact-mode="true"] .calendario-month-header {
	font-size: 14px;
}

.nga-calendario-disponibilidade[data-compact-mode="true"] .calendario-day {
	font-size: 12px;
}

/* === MODO READ-ONLY === */
.nga-calendario-disponibilidade[data-read-only="true"] .calendario-day:not(.disabled):not(.occupied) {
	cursor: default;
}

/* === RESPONSIVO === */
@media ( max-width : 768px) {
	.calendario-months-container {
		grid-template-columns: 1fr !important;
	}
}