/* ======== base ======== */
.av-ds {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  font-family: var(--ds-i-family, Roboto), system-ui, -apple-system, Segoe UI,
    Arial, sans-serif;
  font-size: var(--ds-i-fontSize, 16px);
  line-height: 1;
}
.av-ds * {
  box-sizing: inherit;
}
/* opcional */
.av-ds select:disabled {
  opacity: 0.7;
}

/* ancho según orientación */
.av-ds.is-hor {
  width: min(1440px, var(--ds-c-totalWidth, 1200px));
  margin-inline: auto;
}
.av-ds.is-vert {
  width: auto;
  max-width: 460px;
  min-width: 360px;
}

/* caja visual */
.av-ds .dsp-wrap {
  background: var(--ds-c-colorBg, #d3d3d3);
  border-style: var(--ds-c-borderType, solid);
  border-color: var(--ds-c-colorBorder, #a0a0a0);
  border-top-width: var(--ds-c-borderWidthTop, 1px);
  border-right-width: var(--ds-c-borderWidthRight, 1px);
  border-bottom-width: var(--ds-c-borderWidthBottom, 1px);
  border-left-width: var(--ds-c-borderWidthLeft, 1px);
  border-top-left-radius: var(--ds-c-borderRadTl, 10px);
  border-top-right-radius: var(--ds-c-borderRadTr, 10px);
  border-bottom-right-radius: var(--ds-c-borderRadBr, 10px);
  border-bottom-left-radius: var(--ds-c-borderRadBl, 10px);
  padding: var(--ds-c-compact, 15px 15px);
  box-shadow: var(--ds-c-shadowBox, none);
}

/* CTA */
.av-ds .cta {
  font-weight: 600;
  margin: 0.25rem 0 0.75rem;
  color: var(--ds-c-colorCTA, #444);
  font-size: var(--ds-c-ctaFontSize, 18px);
}

/* labels */
.av-ds[data-show-labels="0"] label {
  display: none;
}
.av-ds label {
  display: block;
  margin: 0 0 0.25rem;
  color: var(--ds-i-colorLabels, #444);
  font-size: var(--ds-i-labelSize, 16px);
  letter-spacing: var(--ds-i-letterSpacing, 0px);
  margin-left: var(--ds-i-borderRadTl);
}

/* subwrap: hor/vert */
.av-ds .subwrap.is-hor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--ds-i-spacingHor, 16px);
  row-gap: var(--ds-i-spacingVert, 16px);
  min-width: 0;
}

.av-ds .subwrap.is-vert {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--ds-i-spacingVert, 16px);
}

/* field box  */
.av-ds .dsp {
  flex: 1;
}

/* Inputs */
.ds-i-num {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.ds-number-incrementor,
.ds-number-decrementor {
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.number-edit_simbol {
  height: 10px;
  stroke: #000;
}
.ds-number-subwrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* icons */
.dsp-inputIcon {
  display: flex;
}
.av-ds .svgicocalendar {
  width: var(--ds-i-iconWidth);
  fill: var(--ds-i-colorIcon);
}

/* groups */
.av-ds .dates-wrap.is-hor,
.av-ds .numbers-wrap.is-hor {
  display: flex;
  gap: var(--ds-i-spacingHor, 16px);
  flex-grow: 1;
}
.av-ds .dates-wrap.is-vert,
.av-ds .numbers-wrap.is-vert {
  display: flex;
  flex-direction: row;
  gap: var(--ds-i-spacingVert, 16px);
  flex-wrap: wrap;
}

/* inputs/selects */
.av-ds input[type="number"] {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: var(--ds-i-colorText, #333);
  font-size: var(--ds-i-fontSize, 16px);
  text-align: center;
  line-height: 1;
}
.number-edit_simbol {
  stroke: var(--ds-i-colorBorder);
  stroke-opacity: 1;
  stroke-width: 4px;
  stroke-linecap: round;
}
.av-ds input[type="text"]:not(.flatpickr-input),
.ds-number-subwrap,
.dsp-date-selector-wrap,
.av-ds select {
width: 100%;
  line-height: 1;
  background: var(--ds-i-colorBg, #fff);
  color: var(--ds-i-colorText, #333);
  border: 1px solid var(--ds-i-colorBorder, #a0a0a0);
  border-radius: var(--ds-i-borderRadTl, 4px);
  font-size: var(--ds-i-fontSize, 16px);
  max-height: var(--ds-i-height, 26px);
  height: 100%;
  text-align: center;
  border-style: var(--ds-i-borderType, solid);
  border-width: var(--ds-i-borderWidthTop) var(--ds-i-borderWidthRight) var(--ds-i-borderWidthBottom) var(--ds-i-borderWidthLeft);
  display: flex;
    justify-content: center;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: var(--ds-i-borderRadTl);
  padding-right: var(--ds-i-borderRadTr);

  min-height: var(--ds-i-height, 26px);
}
.av_dsp_dateselect {
  background-color: transparent !important;
}
.av-ds input:focus,
.av-ds input:focus-visible {
  outline: none;
}
.av_dsp_dateselect,
.ds-btn {
  background: none;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--ds-i-fontSize, 16px);
  text-align: center;
  color: var(--ds-i-colorText, #333);
}
.dates-wrap.is-hor > .dsp-checkin,
.dates-wrap.is-hor > .dsp-checkout {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

/* tamaños prácticos en horizontal (como el admin) */
@media (min-width: 1200px) {
  .av-ds.is-hor .dsp-est,
  .av-ds.is-hor .dsp-ubi,
  .av-ds.is-hor .dsp-alo {
    flex: 1 1 18rem;
    width: 14ch;
  }
  .av-ds.is-hor .dsp-checkin input,
  .av-ds.is-hor .dsp-checkout input {
    min-width: 11ch;
    width: 12ch;
  }
  .av-ds .subwrap.is-hor .dsp.dsp-est {
    max-width: 30ch;
  }
  /* Fechas y números: tamaños prácticos cuando el layout general es vertical */
  .av-ds.is-vert .dsp-checkin input,
  .av-ds.is-vert .dsp-checkout input {
    min-width: calc(10ch + 1.5rem);
  }

  .av-ds.is-vert .dsp-adults input,
  .av-ds.is-vert .dsp-kids input,
  .av-ds.is-vert .dsp-beds input {
    min-width: 4ch;
    max-width: 6ch;
    text-align: center;
  }

  /* (Opcional) si la pantalla es muy estrecha, apilar los grupos */
  @media (max-width: 480px) {
    .av-ds .dates-wrap.is-vert,
    .av-ds .numbers-wrap.is-vert {
      flex-direction: column;
    }
  }

  .av-ds.is-hor .dsp-adults input,
  .av-ds.is-hor .dsp-kids input,
  .av-ds.is-hor .dsp-beds input {
    min-width: 3ch;
    max-width: 4ch;
    text-align: center;
  }
  .av-ds.is-hor .dsp-promocode {
    flex: 1 1 16rem;
    min-width: 12rem;
  }
}

/* botón */
.dsp-btn-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
  background: var(--ds-b-colorBg, #444);
  color: var(--ds-b-colorText, #fff);
  border: 1px solid var(--ds-b-colorBorder, #a0a0a0);
  min-height: var(--ds-i-height, 26px);
  border-style: var(--ds-b-borderType, solid);
  border-width: var(--ds-b-borderWidthTop, 1px)
    var(--ds-b-borderWidthRight, 1px) var(--ds-b-borderWidthBottom, 1px)
    var(--ds-b-borderWidthLeft, 1px);
  border-radius: var(--ds-b-borderRadTl, 4px) var(--ds-b-borderRadTr, 4px)
    var(--ds-b-borderRadBr, 4px) var(--ds-b-borderRadBl, 4px);
  gap: var(--ds-b-spacing, 5px);
    padding-left: var(--ds-b-borderRadTl);
  padding-right: var(--ds-b-borderRadTr);
  width: 100%;
  display: flex;
  justify-content: center;
}
.av-ds .ds-btn {
  line-height: 1;
  color: var(--ds-b-colorText);
  font-size: var(--ds-i-fontSize, 16px);
  font-family: var(--ds-i-family, Roboto), system-ui, -apple-system, Segoe UI, Arial, sans-serif;  
}
.av-ds .ds-btn:hover {
  background-color: transparent;
  color: var(--ds-b-colorText);
  
}
.svgbtncalendar {
  width: var(--ds-b-iconWidth);
}
/* ancho del bloque botón */
.av-ds .btn-wrap {
  min-width: var(--ds-b-width, 15%);
  flex: 0 0 var(--ds-b-width, 15%);
  transition: opacity .3s ease;
}
.av-ds .subwrap.is-hor .btn-wrap {
  margin-left: auto;

}
.av-ds .subwrap.is-hor .btn-wrap:hover{
    opacity: .7;
}
.av-ds .subwrap.is-vert .btn-wrap {
  grid-column: 1/-1;
}

.dsp.btn-wrap:hover > .ds-btn:hover {
  background-color: var(--ds-i-colorBg);
  color: var(--ds-i-colorText);
  border-color: var(--ds-i-colorBorder);
}
.div-buttonIcon {
  display: flex;
}
.svgbtncalendar {
  width: var(--ds-b-iconWidth);
  fill: var(--ds-b-colorText);
}