/* ================================
   DESKTOP PREMIUM (Centralizado e Maior)
   ================================ */
@media (min-width: 769px) {

  /* Caixa Principal: Centralizada e com tamanho ampliado */
  .litepicker {
    /* background: #ffffff !important; */
    border-radius: 6px !important; /* Bordas um pouco mais arredondadas para o tamanho maior */
    border: 1px solid #ebebeb !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    padding: 10px !important; /* Aumentado o respiro interno */
    
    /* Centralização na tela */
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Tamanho maior */
    width: 850px !important; /* Aumentamos de 700px para 850px */
    max-width: 95vw !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
  }

  /* Container dos meses lado a lado */
  .litepicker .container__months {
    display: flex !important;
    flex-direction: row !important;
    gap: 50px !important; /* Aumentado o espaço entre os meses */
    justify-content: center !important;
    width: 100% !important;
  }

  /* Ajuste do tamanho dos dias para acompanhar o container maior */
  .litepicker .day-item {
    height: 48px !important; /* Aumentado de 38px para 48px */
    font-size: 16px !important; /* Fonte um pouco maior para legibilidade */
    margin: 2px 0 !important;
  }

  /* Cabeçalho do mês maior */
  .litepicker .month-item-header div {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  /* Overlay para escurecer o fundo quando o calendário abrir (opcional) */
  #lp-overlay {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(2px);
  }


  /* Container dos meses - Ocupa 100% da largura da .litepicker */
  .litepicker .container__months {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 40px !important; 
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cada bloco de mês agora é flexível (1fr) */
  .litepicker .month-item {
    flex: 1 !important; 
    width: auto !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  /* GRID 7 COLUNAS - Sem margens externas que empurram o container */
  .litepicker .month-item-weekdays-row,
  .litepicker .container__days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Estilo do dia - Travado para não expandir */
  .litepicker .day-item {
    aspect-ratio: 1 / 1 !important;
    height: 38px !important; /* Reduzi levemente para caber melhor */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin: 1px 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
  }

  /* SELEÇÃO FITA (Igual Mobile) */
  .litepicker .day-item.is-in-range {
    background: rgba(255, 102, 0, 0.1) !important;
    color: #ff6600 !important;
    border-radius: 0 !important;
  }

  .litepicker .day-item.is-start-date {
    background: #ff6600 !important;
    color: #fff !important;
    border-radius: 50% 0 0 50% !important;
  }

  .litepicker .day-item.is-end-date {
    background: #ff6600 !important;
    color: #fff !important;
    border-radius: 0 50% 50% 0 !important;
  }

  /* Data única selecionada */
  .litepicker .day-item.is-start-date.is-end-date {
    border-radius: 50% !important;
  }
}


/* ================================
   MODAL MOBILE/TABLET
   ================================ */
@media (max-width: 768px){
  body.lp-open .litepicker{
    position:fixed !important;
    left:50% !important;
    top:52% !important;
    transform:translate(-50%, -50%) !important;
    width:min(380px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    background:var(--lp-bg) !important;
    box-shadow:var(--lp-shadow) !important;
    z-index:99999 !important;
    overflow:hidden !important;
  }
}

/* ================================
   MODAL MOBILE / TABLET (Até 768px)
   ================================ */
@media (max-width: 768px) {
  /* Caixa externa: Fundo branco único, sem bordas duplas */
  body.lp-open .litepicker {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important; /* Centralização perfeita */
    transform: translate(-50%, -50%) !important;
    width: min(380px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    background: #ffffff !important; 
    border-radius: 22px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    padding: 0 !important; 
  }

  /* Container principal: define o respiro interno geral */
  .litepicker .container__main {
    padding: 24px 16px 16px !important;
    background: transparent !important;
  }

  /* Remove os estilos "de cartão" dos meses para não parecer caixa dentro de caixa */
  .litepicker .container__months,
  .litepicker .month-item {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Espaçamento entre os meses (caso mostre mais de um rolando para baixo) */
  .litepicker .month-item:not(:first-child) {
    margin-top: 24px !important;
  }

  /* Cabeçalho do mês (Ex: fevereiro 2026) */
  .litepicker .month-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 16px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #222 !important;
  }
  
  /* Garante que Mês e Ano tenham o mesmo peso de fonte */


  /* Botões de navegação (setinhas) */
  .litepicker .button-previous-month,
  .litepicker .button-next-month {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important; /* Airbnb usa botões redondos */
    border: 1px solid #ddd !important;
    background: #fff !important;
    cursor: pointer !important;
  }

  /* GRID 7 COLUNAS PERFEITO: Dias da semana e Datas */
  .litepicker .month-item-weekdays-row,
  .litepicker .container__days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px 0 !important; /* Espaço vertical entre as linhas */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Títulos dos dias (dom, seg...) */
  .litepicker .month-item-weekdays-row > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #777 !important;
    padding-bottom: 8px !important;
  }

  /* Formato dos dias (Redondos, centralizados) */
  .litepicker .container__days > a,
  .litepicker .container__days > div,
  .litepicker .day-item {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Garante que fiquem perfeitamente proporcionais */
    height: auto !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* Formato redondo padrão Airbnb */
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
  }

  .litepicker .day-item:hover {
    background: rgba(255,102,0,.08) !important;
  }
}

/* ================================
   RANGE E SELEÇÃO (ESTILO AIRBNB)
   ================================ */

/* Dias que estão no meio da seleção */
.litepicker .day-item.is-in-range {
  background: rgba(255,102,0,.12) !important; /* Laranja bem suave */
  color: var(--inn-orange, #ff6600) !important;
  border-radius: 0 !important; /* Tira o redondo para criar o efeito de "fita" contínua */
}

/* Dia de Check-in */
.litepicker .day-item.is-start-date {
  background: var(--inn-orange, #ff6600) !important;
  color: #fff !important;
  border-radius: 50% 0 0 50% !important; /* Redondo na esquerda, reto na direita */
  box-shadow: 0 4px 10px rgba(255,102,0,.30) !important;
}

/* Dia de Check-out */
.litepicker .day-item.is-end-date {
  background: var(--inn-orange, #ff6600) !important;
  color: #fff !important;
  border-radius: 0 50% 50% 0 !important; /* Reto na esquerda, redondo na direita */
  box-shadow: 0 4px 10px rgba(255,102,0,.30) !important;
}

/* Se Check-in e Check-out forem o mesmo dia */
.litepicker .day-item.is-start-date.is-end-date {
  border-radius: 50% !important; 
}

/* Dia atual (Hoje) */
.litepicker .day-item.is-today {
  outline: 1px solid #222 !important;
  outline-offset: -2px !important;
}

/* =========================
   ISOLAMENTO DE CORES
========================= */
.litepicker,
.litepicker * {
  font-family: inherit !important;
}

@media print {
  .litepicker,
  #lp-overlay {
    display: none !important;
  }
}

/* ==============================================
   BLOQUEIO TOTAL (iCal, Eventos e Passado)
   ============================================== */
/* Força o bloqueio visual em qualquer classe de desativação */
.litepicker .day-item.is-locked, 
.litepicker .day-item.is-disabled, 
.litepicker .day-item.is-booked,
.litepicker .day-item[disabled] {
    background-color: #f5f5f5 !important;
    color: #d2d2d2 !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* Impede hover laranja */
}

/* Remove o efeito de "fita" laranja se o dia estiver bloqueado */
.litepicker .day-item.is-locked.is-in-range {
    background: #f5f5f5 !important;
}


/* overlay padrão */
#lp-overlay{
  display:none;
}

/* ativa somente quando lp-open estiver no body */
body.lp-open #lp-overlay{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:99998;
}

/* calendário acima do overlay */
body.lp-open .litepicker{
  z-index:99999 !important;
}


.litepicker .month-item-header div,
.litepicker .month-item-header span,
.litepicker .month-item-name,
.litepicker .month-item-year {
    font-weight: 600 !important; /* Ou 600, conforme sua preferência */
    font-size: 17px !important;
    color: #222 !important;
}