.dwq-wrapper {
  --dwq-green: #34C77B;
  --dwq-green-dark: #22A866;
  --dwq-dark: #14161A;
  --dwq-dark-2: #1D2024;
  --dwq-border: #E3E5E8;
  --dwq-text: #14161A;
  --dwq-text-muted: #6B7076;
  --dwq-control-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --dwq-control-font-size: 1rem;
  --dwq-control-font-weight: 400;
  --dwq-control-line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--dwq-text);
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dwq-wrapper *, .dwq-wrapper *::before, .dwq-wrapper *::after { box-sizing: border-box; }

/* El atributo nativo [hidden] debe ganar siempre, sin importar el display que
   tenga el elemento por su clase (.dwq-field, .dwq-addon, etc.). Sin esta regla,
   un elemento oculto por JS (el.hidden = true) sigue mostrandose visualmente. */
.dwq-wrapper [hidden] { display: none !important; }

.dwq-header { text-align: center; padding: 0 1rem 2.5rem; }
.dwq-title {
  font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.75rem;
}
.dwq-subtitle { font-size: 1.05rem; color: var(--dwq-text-muted); margin: 0; }

.dwq-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 20px 60px rgba(20,22,26,0.06);
  border: 1px solid var(--dwq-border);
}

.dwq-form {
  flex: 1 1 60%;
  background: #ffffff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dwq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.dwq-field { display: flex; flex-direction: column; gap: 0.6rem; }
.dwq-field > label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dwq-text-muted);
}

.dwq-select, .dwq-input {
  appearance: none;
  width: 100%;
  font-family: var(--dwq-control-font-family);
  font-size: var(--dwq-control-font-size);
  font-weight: var(--dwq-control-font-weight);
  line-height: var(--dwq-control-line-height);
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--dwq-border);
  background: #fff;
  color: var(--dwq-text);
  min-height: 44px;
}
.dwq-select option {
  font-family: var(--dwq-control-font-family);
  font-size: var(--dwq-control-font-size);
  font-weight: var(--dwq-control-font-weight);
}
.dwq-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B7076' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.dwq-select:focus, .dwq-input:focus {
  outline: none; border-color: var(--dwq-green); box-shadow: 0 0 0 3px rgba(52,199,123,0.15);
}

.dwq-building-hint { font-size: 0.8rem; color: var(--dwq-green-dark); margin: 0.35rem 0 0; }

.dwq-addons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dwq-addon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 220px;
  border: 1.5px solid var(--dwq-border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dwq-addon input { position: absolute; opacity: 0; pointer-events: none; }
.dwq-addon-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--dwq-border);
  flex: none; display: flex; align-items: center; justify-content: center;
}
.dwq-addon-label {
  font-family: var(--dwq-control-font-family);
  font-size: var(--dwq-control-font-size);
  font-weight: var(--dwq-control-font-weight);
  line-height: var(--dwq-control-line-height);
  flex: 1;
}
.dwq-addon-price { font-size: 0.9rem; color: var(--dwq-text-muted); white-space: nowrap; }
.dwq-addon.is-selected {
  border-color: var(--dwq-green); background: rgba(52,199,123,0.08);
}
.dwq-addon.is-selected .dwq-addon-check {
  background: var(--dwq-green); border-color: var(--dwq-green); color: #fff;
}
.dwq-addon.is-selected .dwq-addon-check::after { content: "\2713"; font-size: 13px; color: #fff; }
.dwq-addon.is-locked { cursor: default; }
.dwq-addon.is-locked .dwq-addon-check { opacity: 0.7; }


.dwq-error {
  color: #B3441E; background: #FDF1EC; border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.85rem; margin: 0;
}

.dwq-summary {
  flex: 1 1 40%;
  background: var(--dwq-dark);
  color: #fff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}
.dwq-summary-title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin: 0 0 1.4rem;
}
.dwq-summary-lines { display: flex; flex-direction: column; gap: 0.9rem; min-height: 1rem; }
.dwq-summary-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; }
.dwq-summary-line-label { color: rgba(255,255,255,0.85); }
.dwq-summary-line-amount { font-weight: 500; }
.dwq-summary-line-amount.is-included { color: var(--dwq-green); font-size: 0.9rem; }

.dwq-summary-divider { height: 1px; background: rgba(255,255,255,0.14); margin: 1.6rem 0; }

.dwq-total-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin: 0 0 0.5rem;
}
.dwq-total-amount { font-size: 3.4rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1; }
.dwq-total-note { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: 0.9rem 0 0; line-height: 1.4; }

.dwq-manual-quote {
  margin: 0.9rem 0 0; font-size: 0.85rem; color: #FFD9A8; background: rgba(255,255,255,0.06);
  border-radius: 8px; padding: 0.7rem 0.9rem;
}

.dwq-review-note {
  margin: 0.9rem 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.6);
  border-left: 2px solid var(--dwq-green); padding: 0.15rem 0 0.15rem 0.7rem;
}

.dwq-summary-divider-thin { height: 1px; background: rgba(255,255,255,0.14); margin: 0.9rem 0; }
.dwq-summary-line.is-subtotal .dwq-summary-line-label,
.dwq-summary-line.is-subtotal .dwq-summary-line-amount { color: rgba(255,255,255,0.7); font-size: 0.92rem; }

.dwq-field-group { display: flex; flex-direction: column; }
.dwq-field-group .dwq-field { flex: 1; }

/* Bloque de hospedaje: mismo lenguaje visual del cotizador (verde de marca,
   bordes finos, tipografia sobria) pero con mas presencia para que el usuario
   note que aparecio una condicion nueva, sin que parezca un error/alerta. */
.dwq-hotel-highlight {
  background: rgba(52,199,123,0.06);
  border: 1px solid var(--dwq-border);
  border-left: 3px solid var(--dwq-green);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0.4rem 0 0.2rem;
  gap: 0.7rem;
  animation: dwq-hotel-fade-in 0.25s ease;
}
@keyframes dwq-hotel-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.dwq-hotel-highlight-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--dwq-text);
  margin: 0;
}
.dwq-hotel-highlight label.dwq-hotel-highlight-desc {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dwq-text-muted);
  margin: 0;
}
.dwq-hotel-highlight-note {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dwq-text-muted);
  opacity: 0.85;
  margin: 0.1rem 0 0;
}@media (prefers-reduced-motion: reduce) {
  .dwq-hotel-highlight { animation: none; }
}
@media (max-width: 860px) {
  .dwq-hotel-highlight { padding: 1rem 1.1rem 1.15rem; }
}
.dwq-button {
  margin-top: 1.6rem;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  background: var(--dwq-green);
  color: #06210F;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background .15s ease;
}
.dwq-button:hover { background: var(--dwq-green-dark); }
.dwq-button-icon { font-size: 1rem; }

@media (max-width: 860px) {
  .dwq-wrapper { padding: 0 1rem; } /* gutter de seguridad si el tema no da margen al ancho completo */
  .dwq-title { font-size: 1.9rem; }
  .dwq-card { flex-direction: column; border-radius: 16px; }
  .dwq-form, .dwq-summary { padding: 1.5rem; flex-basis: auto; }
  .dwq-row { grid-template-columns: 1fr; gap: 1rem; }
  .dwq-select, .dwq-input { font-size: 16px; } /* evita auto-zoom de iOS al enfocar */
  .dwq-summary { order: 2; }
  .dwq-total-amount { font-size: 2.6rem; }
  .dwq-addon { flex-basis: 100%; } /* un chip de servicio por fila: mas facil de tocar */
  .dwq-button { min-height: 48px; }
}

/* Seccion secundaria: salida ligera para casos de cotizacion personalizada
   (villas, varias unidades, configuraciones especiales). Reutiliza las mismas
   variables/convenciones del cotizador principal (bordes, radios, tipografia,
   verde de marca) para que se vea disenada al mismo tiempo, no pegada. */
.dwq-alt-quote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--dwq-border);
  border-radius: 16px;
  background: #ffffff;
}
.dwq-alt-quote-text { flex: 1 1 auto; min-width: 0; }
.dwq-alt-quote-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--dwq-text);
}
.dwq-alt-quote-subtitle {
  font-size: 0.9rem;
  color: var(--dwq-text-muted);
  margin: 0;
}

.dwq-button.dwq-button--secondary {
  margin-top: 0;
  width: auto;
  flex: none;
  min-height: 46px;
  padding: 0 1.6rem;
  background: transparent;
  color: var(--dwq-green-dark);
  border: 1.5px solid var(--dwq-green);
  text-decoration: none;
  white-space: nowrap;
}
.dwq-button.dwq-button--secondary:hover { background: rgba(52,199,123,0.08); }

@media (max-width: 860px) {
  .dwq-alt-quote {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
    border-radius: 14px;
  }
  .dwq-button.dwq-button--secondary { width: 100%; justify-content: center; }
}

/* Ubicacion: lista desplegable propia (reemplaza el datalist nativo, que no se
   despliega en iOS ni en navegadores internos de apps). Ver quote.js. */
.dwq-combo { position: relative; }
.dwq-combo .dwq-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B7076' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.dwq-wrapper .dwq-combo-menu {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--dwq-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20,22,26,0.12);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.dwq-wrapper .dwq-combo-menu[hidden] { display: none; }
.dwq-wrapper .dwq-combo-option {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--dwq-control-font-family);
  font-size: 16px;
  line-height: 1.3;
  color: var(--dwq-text);
  list-style: none;
}
.dwq-wrapper .dwq-combo-option:hover,
.dwq-wrapper .dwq-combo-option.is-active { background: rgba(52,199,123,0.08); }
.dwq-wrapper .dwq-combo-option.is-selected { color: var(--dwq-green-dark); font-weight: 600; }