/* Availability Modal - alinhado ao design system de frontend.css */

.ggbf-availability-modal { position: fixed; inset: 0; z-index: 999999; display: none; }
.ggbf-availability-modal.active { display: flex; align-items: center; justify-content: center; padding: 24px; }
.ggbf-availability-modal .ggbf-av-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.ggbf-availability-modal .ggbf-av-dialog { position: relative; width: min(960px, 92vw); margin: 0; background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; max-height: 90vh; max-height: 90dvh; }

/* Header */
.ggbf-availability-modal .ggbf-av-header { background: linear-gradient(135deg, hsl(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l)) 0%, hsl(var(--ggbf-primary-h), var(--ggbf-primary-s), calc(var(--ggbf-primary-l) - 10%)) 100%); color: #fff; padding: 20px 22px; position: relative; box-shadow: inset 0 -1px 0 rgba(255,255,255,.15); padding-top: calc(20px + constant(safe-area-inset-top)); padding-top: calc(20px + env(safe-area-inset-top)); }
.ggbf-availability-modal .ggbf-av-title { color: #fff !important; /* margin: 0 42px 8px 0 !important; */ margin: 0 42px 15px 0 !important; font-size: 22px !important; line-height: 1.2 !important; }
.ggbf-availability-modal .ggbf-av-close { position: absolute !important; /* top: 14px !important; */ top: 7px !important; /* right: 20px !important; */ right: 15px !important; background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.28) !important; color: #fff !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.ggbf-availability-modal .ggbf-av-close:hover { background: rgba(255,255,255,.12) !important; }
.ggbf-availability-modal .ggbf-av-close:focus { outline: 2px solid rgba(255,255,255,.6) !important; outline-offset: 2px !important; }
.ggbf-availability-modal .ggbf-av-room-info { margin-top: 6px; opacity: .95; }
.ggbf-availability-modal .ggbf-av-room-info select { background: rgba(255,255,255,.15) !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; border-radius: 10px !important; height: 42px !important; padding: 0 12px !important; outline: none !important; box-shadow: none !important; appearance: none !important; }
.ggbf-availability-modal .ggbf-av-room-info select option { color: #111827 !important; background: #fff !important; }
.ggbf-availability-modal .ggbf-av-room-info select:focus { border-color: rgba(255,255,255,.6) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.25) !important; }
/* Garantir isolamento do botão close dentro do modal */
.ggbf-availability-modal .ggbf-close { background: none !important; border: none !important; color: #fff !important; width: 36px !important; height: 36px !important; border-radius: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; }

/* Body */
.ggbf-availability-modal .ggbf-av-body { /* padding: 18px; */ padding: 22px; background: #fff; flex: 1; overflow: auto; }
.ggbf-availability-modal .ggbf-av-months { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.ggbf-availability-modal .ggbf-av-month { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; width: 100%; max-width: 560px; }
.ggbf-availability-modal .ggbf-av-month-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
.ggbf-availability-modal .ggbf-av-month-title { margin: 0 !important; font-size: 16px !important; color: #111827 !important; }
/* Botões de navegação de mês, isolados do formulário */
.ggbf-availability-modal .ggbf-calendar-nav-btn { background: #f8f9fa !important; border: 1px solid #dee2e6 !important; color: #495057 !important; width: 32px !important; height: 32px !important; border-radius: 4px !important; cursor: pointer !important; font-size: 14px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: all .2s ease !important; }
.ggbf-availability-modal .ggbf-calendar-nav-btn:hover { background: #e9ecef !important; border-color: #adb5bd !important; color: #212529 !important; }
.ggbf-availability-modal .ggbf-calendar-nav-btn:active { background: #dee2e6 !important; }

.ggbf-availability-modal .ggbf-av-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; /* padding: 8px 12px 6px; */ padding: 8px 12px 0px; color: #6b7280; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .1px; }
.ggbf-availability-modal .ggbf-av-weekdays > span { text-align: center; }

.ggbf-availability-modal .ggbf-av-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 10px 12px 12px; }

/* Day cell (reutiliza regras do frontend.css) */
.ggbf-availability-modal .ggbf-calendar-day { all: revert; border: 1px solid #e5e7eb !important; background: #ffffff !important; border-radius: 10px !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; /* height: 54px !important; */ height: 45px !important; transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important; position: relative !important; color: #111827 !important; padding: 6px 8px !important; }
.ggbf-availability-modal .ggbf-av-grid .ggbf-calendar-day:hover { box-shadow: 0 0 0 2px hsla(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l), .18) !important; border-color: hsla(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l), .35) !important; }
.ggbf-availability-modal .ggbf-calendar-day:hover { background: hsl(var(--ggbf-primary-h), var(--ggbf-primary-s), 97%) !important; }
.ggbf-availability-modal .ggbf-calendar-day.disabled { color: #9f1239 !important; cursor: not-allowed !important; background: hsla(0, 85%, 60%, .08) !important; border-color: hsla(0, 85%, 60%, .25) !important; }
.ggbf-availability-modal .ggbf-calendar-day.disabled .ggbf-av-day-number { color: #9f1239 !important; }
.ggbf-availability-modal .ggbf-calendar-day.disabled .ggbf-av-day-price { display: none !important; }
.ggbf-availability-modal .ggbf-calendar-day.los-blocked { color: #b45309 !important; cursor: not-allowed !important; background: hsla(39, 85%, 60%, .08) !important; border-color: hsla(39, 85%, 60%, .25) !important; opacity: .75 !important; }
.ggbf-availability-modal .ggbf-calendar-day.los-blocked .ggbf-av-day-number { color: #b45309 !important; }
.ggbf-availability-modal .ggbf-calendar-day.los-blocked .ggbf-av-day-price { color: #b45309 !important; opacity: .6 !important; }
.ggbf-availability-modal .ggbf-calendar-day.in-range { background: hsla(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l), .12) !important; border-color: hsla(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l), .35) !important; color: hsl(var(--ggbf-primary-h), var(--ggbf-primary-s), calc(var(--ggbf-primary-l) - 15%)) !important; }
.ggbf-availability-modal .ggbf-calendar-day.selected,
.ggbf-availability-modal .ggbf-calendar-day.range-start,
.ggbf-availability-modal .ggbf-calendar-day.range-end { background: hsl(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l)) !important; border-color: hsl(var(--ggbf-primary-h), var(--ggbf-primary-s), var(--ggbf-primary-l)) !important; color: #ffffff !important; }
.ggbf-availability-modal .ggbf-calendar-day.other-month { color: #94a3b8 !important; background: #f8fafc !important; border-style: dashed !important; border-color: #e2e8f0 !important; opacity: .85 !important; cursor: default !important; }
.ggbf-availability-modal .ggbf-calendar-day.other-month .ggbf-av-day-price { color: #94a3b8 !important; opacity: .7 !important; }
.ggbf-availability-modal .ggbf-calendar-day.other-month:hover { box-shadow: none !important; border-color: #e2e8f0 !important; }
.ggbf-availability-modal .ggbf-av-day-number { align-self: flex-start !important; font-size: 11px !important; line-height: 1 !important; margin: 0 0 4px 0 !important; font-weight: 600 !important; color: #64748b !important; letter-spacing: .05px !important; }
.ggbf-availability-modal .ggbf-av-day-price { margin-top: auto !important; align-self: flex-start !important; font-size: 10px !important; color: #059669 !important; font-weight: 600 !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; letter-spacing: .05px !important; padding: 0 !important; }
.ggbf-availability-modal .ggbf-calendar-day.selected .ggbf-av-day-price,
.ggbf-availability-modal .ggbf-calendar-day.range-start .ggbf-av-day-price,
.ggbf-availability-modal .ggbf-calendar-day.range-end .ggbf-av-day-price { background: transparent !important; color: #ffffff !important; padding: 0 !important; border-radius: 0 !important; }
/* texto branco (dia e preço) quando selecionado */
.ggbf-availability-modal .ggbf-calendar-day.selected .ggbf-av-day-number,
.ggbf-availability-modal .ggbf-calendar-day.range-start .ggbf-av-day-number,
.ggbf-availability-modal .ggbf-calendar-day.range-end .ggbf-av-day-number { color: #ffffff !important; }

/* CTA/CTD badges (pequenos indicadores) */
.ggbf-availability-modal .ggbf-av-badge { position: absolute !important; top: 4px !important; right: 6px !important; font-size: 8px !important; padding: 1px 4px !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #64748b !important; font-weight: 700 !important; border: 1px solid #e2e8f0 !important; }

/* Legibilidade do preço quando selecionado */
.ggbf-availability-modal .ggbf-calendar-day.selected .ggbf-av-day-price,
.ggbf-availability-modal .ggbf-calendar-day.range-start .ggbf-av-day-price,
.ggbf-availability-modal .ggbf-calendar-day.range-end .ggbf-av-day-price { color: #ffffff !important; }
.ggbf-availability-modal .ggbf-av-badge.cta { background: #fee2e2; color: #991b1b; }
.ggbf-availability-modal .ggbf-av-badge.ctd { background: #e0e7ff; color: #3730a3; }

/* UX: checkout permitido (mesmo que o dia não seja pernoitável) */
.ggbf-availability-modal .ggbf-calendar-day.checkout-allowed { 
  background: #f0fdf4 !important; 
  border-color: #22c55e !important; 
  color: #065f46 !important; 
  cursor: pointer !important; 
}
.ggbf-availability-modal .ggbf-calendar-day.checkout-allowed.disabled .ggbf-av-day-price { display: inline !important; }
.ggbf-availability-modal .ggbf-calendar-day.checkout-allowed.disabled .ggbf-av-day-number { color: #065f46 !important; }
.ggbf-availability-modal .ggbf-calendar-day.checkout-allowed .ggbf-av-day-number { color: #065f46 !important; }
.ggbf-availability-modal .ggbf-calendar-day.checkout-allowed:hover { box-shadow: 0 0 0 2px rgba(34,197,94,.25) !important; }
/* Remover badge textual de checkout e usar ícone minimalista */
.ggbf-availability-modal .ggbf-av-badge.checkout { display: none !important; }
/* Ícone seta diagonal (cima-direita) para checkout permitido */
.ggbf-availability-modal .ggbf-calendar-day.checkout-allowed::after {
  content: "";
  position: absolute; top: 4px; right: 6px;
  width: 14px; height: 14px;
  background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 999px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}

/* Footer */
.ggbf-availability-modal .ggbf-av-footer { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; background: #f8f9fa; border-top: 1px solid #e5e7eb; padding-bottom: calc(14px + constant(safe-area-inset-bottom)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* Responsive */
@media (max-width: 900px) {
  .ggbf-availability-modal .ggbf-av-months { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { 
  .ggbf-availability-modal.active { padding: 0; align-items: stretch; justify-content: flex-start; }
  .ggbf-availability-modal .ggbf-av-dialog { margin: 0; width: 100vw; height: 100vh; height: 100svh; height: -webkit-fill-available; height: 100dvh; height: var(--ggbf-vv-height, 100dvh); border-radius: 0; max-height: none; }
  .ggbf-availability-modal .ggbf-av-header { padding: 16px; }
  .ggbf-availability-modal .ggbf-av-title { font-size: 18px !important; margin-right: 38px !important; /* margin-bottom: 6px !important; */ margin-bottom: 15px !important; }
  .ggbf-availability-modal .ggbf-av-room-info select { height: 40px !important; width: 100% !important; }
  /* Empilhar meses na vertical no mobile */
  .ggbf-availability-modal .ggbf-av-months { grid-template-columns: 1fr; }
  .ggbf-availability-modal .ggbf-av-month { max-width: 100% !important; }
  .ggbf-availability-modal .ggbf-av-month[data-slot="next"] { display: block; }
  /* Ajustes finos de densidade das células no mobile */
  .ggbf-availability-modal .ggbf-calendar-day { padding: 6px 6px !important; }
  .ggbf-availability-modal .ggbf-av-day-price { font-size: 8px !important; }
  .ggbf-availability-modal .ggbf-av-body { padding: 16px; }
  .ggbf-availability-modal .ggbf-av-footer { position: sticky; bottom: 0; padding: 14px 16px; }
}