/* ═══════════════════════════════════════════════════
   GoFeels Motor de Reservas — Widget CSS
   Sin dependencias externas
═══════════════════════════════════════════════════ */

:root, .gofeels-dp-wrapper {
  --gdp-primary:      #21283C;
  --gdp-primary-dark: #181f30;
  --gdp-muted:        #617387;
  --gdp-border:       #d1d9e0;
  --gdp-bg:           #FFFFFF;
  --gdp-range:        #E7EDF5;
  --gdp-error:        #c0392b;
  --gdp-h:            48px;
  --gdp-radius:       4px;
  --gdp-font:         inherit;
}

.gofeels-dp-wrapper {
  position:    relative;
  display:     flex;
  padding:     0;
  width:       100%;
  box-sizing:  border-box;
  font-family: var(--gdp-font);
}

.gofeels-dp-inner {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  width:          100%;
  max-width:      420px;
}

/* ── Label ── */
.gofeels-dp-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--gdp-muted);
  padding-left:   2px;
  line-height:    1;
}

/* ── Fila campo + botón ── */
.gofeels-dp-row {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  width:          100%;
  gap:            8px;
}

@media (min-width: 480px) {
  .gofeels-dp-row {
    flex-direction: row;
    align-items:    stretch;
    height:         var(--gdp-h);
    gap:            0;
  }
}

.gofeels-dp-inputs {
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--gdp-bg);
  border:        1.5px solid var(--gdp-border);
  border-radius: var(--gdp-radius);
  padding:       12px 14px;
  cursor:        pointer;
  transition:    border-color .15s, box-shadow .15s;
  box-sizing:    border-box;
  min-width:     0;
  min-height:    56px;
  height:        auto;
}

@media (min-width: 480px) {
  .gofeels-dp-inputs {
    padding:       0 14px;
    height:        var(--gdp-h);
    min-height:    auto;
    border-right:  none;
    border-radius: var(--gdp-radius) 0 0 var(--gdp-radius);
  }
}

.gofeels-dp-inputs:focus-within {
  border-color: var(--gdp-primary);
  box-shadow:   0 0 0 3px rgba(33,40,60,.1);
  z-index:      1;
}

.gofeels-dp-calendar-icon {
  flex-shrink: 0;
  color:       var(--gdp-muted);
  display:     block;
  cursor:      pointer;
}

.gofeels-dp-input {
  border:      none !important;
  outline:     none !important;
  background:  transparent !important;
  font-family: var(--gdp-font);
  font-size:   14px;
  color:       var(--gdp-primary);
  width:       0;
  flex:        1;
  padding:     0;
  cursor:      pointer;
  min-width:   0;
}

.gofeels-dp-input::placeholder {
  color:     var(--gdp-muted);
  font-size: 14px;
}

.gofeels-dp-separator {
  color:       var(--gdp-muted);
  font-size:   13px;
  flex-shrink: 0;
  user-select: none;
}

/* ── Botón buscar ── */
.gofeels-dp-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--gdp-primary);
  color:           #fff !important;
  font-family:     var(--gdp-font);
  font-size:       13px;
  font-weight:     600;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  text-decoration: none !important;
  padding:         0 24px;
  border:          1.5px solid var(--gdp-primary);
  border-radius:   var(--gdp-radius);
  cursor:          pointer;
  transition:      background .15s;
  white-space:     nowrap;
  flex-shrink:     0;
  box-sizing:      border-box;
  height:          var(--gdp-h);
  width:           100%;
}

@media (min-width: 480px) {
  .gofeels-dp-btn {
    height:        100%;
    width:         auto;
    border-radius: 0 var(--gdp-radius) var(--gdp-radius) 0;
  }
}

.gofeels-dp-btn:hover {
  background:    var(--gdp-primary-dark);
  border-color:  var(--gdp-primary-dark);
}

.gofeels-dp-btn[aria-disabled="true"] {
  background:     #9aa3b0;
  border-color:   #9aa3b0;
  cursor:         default;
  pointer-events: none;
}

/* ── Error ── */
.gofeels-dp-error-msg {
  font-size:    12px;
  color:        var(--gdp-error);
  line-height:  1.4;
  padding-left: 2px;
}

/* ═══════════════════════════════════════════════════
   CALENDARIO PROPIO
═══════════════════════════════════════════════════ */

.gofeels-dp-calendar {
  position:      absolute;
  top:           calc( var(--gdp-h) + 18px + 6px + 4px );
  left:          0;
  z-index:       9999;
  background:    #fff;
  border:        1px solid #e0e4ea;
  border-radius: 6px;
  box-shadow:    0 8px 30px rgba(0,0,0,.15);
  width:         640px;
  overflow:      hidden;
  user-select:   none;
  font-family:   inherit;
  font-size:     14px;
  line-height:   normal;
  box-sizing:    border-box;
  padding:       12px 14px 10px;
}

/* Reset total de todos los hijos directos e indirectos */
.gofeels-dp-calendar *,
.gofeels-dp-calendar *::before,
.gofeels-dp-calendar *::after {
  box-sizing:  border-box !important;
  margin:      0 !important;
  padding:     0 !important;
  float:       none !important;
  line-height: normal !important;
}

/* Restaurar paddings explícitos después del reset global */
.gofeels-dp-banner         { padding: 10px 14px !important; }
.gofeels-dp-weekdays       { padding: 6px 8px 8px !important; }
.gofeels-dp-days           { padding: 8px 8px 10px !important; }
.gofeels-dp-banner__nights { padding: 2px 8px !important; }

/* Banner de rango seleccionado */
.gofeels-dp-banner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  background:      #f0f3f8;
  border-bottom:   1px solid #e0e4ea;
  gap:             8px;
}

.gofeels-dp-banner__dates {
  font-size:     13px;
  font-weight:   600;
  color:         var(--gdp-primary);
  letter-spacing: .01em;
}

.gofeels-dp-banner__nights {
  font-size:     11px;
  font-weight:   600;
  color:         #fff;
  background:    var(--gdp-primary);
  padding:       2px 8px;
  border-radius: 20px;
  white-space:   nowrap;
  flex-shrink:   0;
}

/* Días de la semana */
.gofeels-dp-weekdays {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  background:            transparent;
  padding:               6px 8px 8px;
  text-align:            center;
}

.gofeels-dp-weekdays span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     700;
  color:           var(--gdp-muted);
  text-transform:  uppercase;
  letter-spacing:  .04em;
}

/* Cuadrícula de días */
.gofeels-dp-days {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  padding:               8px 8px 10px;
}

.gofeels-dp-day {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          36px;
  font-size:       13px;
  font-weight:     500;
  color:           #374151;
  border-radius:   4px;
  cursor:          pointer;
  transition:      background .1s, color .1s;
}

.gofeels-dp-day:hover:not(.gofeels-dp-day--past):not(.gofeels-dp-day--start):not(.gofeels-dp-day--end) {
  background: #f0f2f6;
}

.gofeels-dp-day--empty { cursor: default; }

.gofeels-dp-day--past {
  color:  #d1d5db;
  cursor: default;
}

.gofeels-dp-day--adjacent {
  color: #c0c8d4;
}

.gofeels-dp-day--adjacent:hover:not(.gofeels-dp-day--past) {
  background: #f0f2f6;
  color: #617387;
}

.gofeels-dp-day--today:not(.gofeels-dp-day--start):not(.gofeels-dp-day--end) {
  border:       1.5px solid var(--gdp-primary);
  color:        var(--gdp-primary);
  font-weight:  700;
}

.gofeels-dp-day--start {
  background:    var(--gdp-primary) !important;
  color:         #fff !important;
  border-radius: 4px 0 0 4px !important;
  font-weight:   700;
}

.gofeels-dp-day--end {
  background:    var(--gdp-primary) !important;
  color:         #fff !important;
  border-radius: 0 4px 4px 0 !important;
  font-weight:   700;
}

.gofeels-dp-day--single {
  border-radius: 4px !important;
}

.gofeels-dp-day--range {
  background:    var(--gdp-range) !important;
  color:         var(--gdp-primary) !important;
  border-radius: 0 !important;
}

.gofeels-dp-day--range:hover {
  background: var(--gdp-range) !important;
}

/* Error de configuración (admin) */
.gofeels-dp-error {
  color:      var(--gdp-error);
  font-style: italic;
  font-size:  .875rem;
}