/*!
 * theme-airbnb.css — Tema visual estilo Airbnb sobre los estilos existentes.
 * Se carga después de style.css y ui-fixes.css; sólo sobreescribe apariencia.
 *
 * Tokens:
 *   Tipografía  'Plus Jakarta Sans' (alternativa libre a Airbnb Cereal)
 *   Texto       #222222 principal / #717171 secundario
 *   Bordes      #DDDDDD controles / #EBEBEB divisores
 *   Radios      8px controles · 12px cards y dropdowns · 16px modals
 *   Error       #C13515
 *   Marca       #ED7768 (se conserva el salmón Voyovoy como color de acción)
 */

/* ==========================================================================
   1. TIPOGRAFÍA Y COLOR BASE
   ========================================================================== */

body,
h1, h2, h3, h4, h5, h6,
input, select, textarea, button,
.btn,
.tooltip-1 .bottom {
    font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body {
    color: #222222;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* El hero usaba azul corporativo; en el tema pasa a negro suave con el
   acento de marca intacto en los <span> */
.box-home h1,
.box-home h2 {
    color: #222222;
}

/* Las secciones de contenido heredaban el azul corporativo #1d2b47 */
.container-section {
    color: #222222;
}

/* Textos secundarios (ubicación, "por persona", impuestos) */
.poi-list span,
.container-info-price span,
.info-price-label span,
.c-range-filters span + span {
    color: #717171;
}

.c-price {
    color: #222222;
}

/* Enlaces de contenido: oscuros y con subrayado, estilo Airbnb */
.link-1 {
    color: #222222 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-1:hover {
    color: #717171 !important;
}

/* ==========================================================================
   2. CARDS
   ========================================================================== */

.items-list {
    border: 1px solid #ebebeb;
    border-radius: 12px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.items-list:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Bloques de destino del home (amarillo/azul/rojo) y contenedores blancos */
.figure-1,
.figure-2,
.figure-3,
.custom-container,
.container-modal-cart {
    border-radius: 12px;
    overflow: hidden;
}

.into-item-list {
    padding: 12px 14px 14px;
}

.into-item-list h5 {
    color: #222222;
    font-weight: 600;
}

/* ==========================================================================
   3. BOTONES
   ========================================================================== */

/* Primario: sin degradados, radio 8, peso 600, hover más oscuro */
.btn-avv-primary {
    background-color: #ed7768;
    background-image: none !important;
    border: 1px solid #ed7768;
    border-radius: 8px;
    filter: none !important;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.btn-avv-primary:hover {
    background-color: #de5f4c;
    background-image: none !important;
    border-color: #de5f4c;
}

.btn-avv-primary:active {
    transform: scale(0.99);
}

/* Secundario: borde oscuro, radio 8 (las variantes blancas de los bloques
   de color conservan su borde blanco por especificidad) */
.btn-round {
    border-color: #222222;
    border-radius: 8px;
    font-weight: 600;
}

.btn-line {
    border-radius: 8px;
    font-weight: 600;
}

/* ==========================================================================
   4. INPUTS, SELECTS Y BUSCADORES
   ========================================================================== */

.form-control,
.input-type {
    border-color: #dddddd;
    border-radius: 8px;
    color: #222222;
}

.form-control:focus,
.input-type:focus {
    border-color: #222222;
    box-shadow: 0 0 0 1px #222222;
}

.form-control::placeholder {
    color: #717171;
}

/* Cajas del buscador de destinos (home y nav) */
.form-input,
.form-input .input,
.form-input .evt-input {
    border-radius: 8px;
}

.form-input .input .container-evt-input {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    margin-top: 6px;
    overflow: hidden;
    padding: 8px 0;
}

.row-evt-input {
    transition: background-color 0.15s ease;
}

.row-evt-input:hover {
    background-color: #f7f7f7 !important;
}

/* ==========================================================================
   5. DROPDOWNS
   ========================================================================== */

.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.14);
    padding: 8px;
}

.dropdown-item,
.dropdown-menu .cl-languages {
    border-radius: 8px;
    color: #222222;
    padding: 10px 12px;
}

.dropdown-item:hover,
.dropdown-menu .cl-languages:hover {
    background-color: #f7f7f7;
}

/* Chips del header alineados al tema */
.c-menu .container-language > a {
    border-color: #dddddd;
    color: #222222;
    font-weight: 500;
}

.c-menu .container-language > a:hover {
    background-color: #f7f7f7;
    border-color: #222222;
}

/* ==========================================================================
   6. MODALS
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.modal-header {
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    padding: 16px 24px;
}

.modal-header h2,
.modal-header h4 {
    font-size: 18px;
    margin: 0;
}

.modal-body {
    padding: 24px;
}

.modal-header .close {
    border-radius: 50%;
    height: 32px;
    line-height: 1;
    padding: 0;
    transition: background-color 0.15s ease;
    width: 32px;
}

.modal-header .close:hover {
    background-color: #f7f7f7;
}

/* ==========================================================================
   7. VALIDACIONES DE FORMULARIO
   ========================================================================== */

.is-invalid label {
    color: #c13515;
}

.is-invalid input,
.is-invalid select,
.is-invalid .form-control,
.is-invalid .input-type {
    border-color: #c13515 !important;
}

.is-invalid input:focus,
.is-invalid select:focus,
.is-invalid .form-control:focus {
    box-shadow: 0 0 0 1px #c13515;
}

.text-danger,
.error-text {
    color: #c13515 !important;
}

.error-text,
.coupon-danger {
    font-size: 13px;
    font-weight: 500;
}

/* ==========================================================================
   8. DETALLES
   ========================================================================== */

/* Filtros del listado: checkboxes y contadores más suaves */
.c-module-filters .count,
.c-collapse .count {
    color: #717171;
}

.c-squeare {
    border: 1px solid #dddddd;
    border-radius: 8px !important;
    background-color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Paginador */
.cp-body .pagination-ui li a {
    border-radius: 8px !important;
}

.cp-body .pagination-ui li.active a,
.cp-body .pagination-ui li a:hover {
    background: #222222;
    border: 1px solid #222222;
    border-radius: 8px !important;
    color: #ffffff;
}

/* Tooltips */
.tooltip-1 .bottom {
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}