/* ─── Pxsol Search Widget ──────────────────────────────────────────────────── */ #pxsol-search-widget { font-family: inherit; width: 100%; background: transparent; max-width: 1184px; margin-left: auto; margin-right: auto; } /* ── Fila principal ── */ .pxsol-row { display: flex; gap: 10px; align-items: flex-end; /* todos los campos se alinean por su borde inferior */ flex-wrap: wrap; } /* ── Campos individuales ── */ .pxsol-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 150px; } .pxsol-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.8); margin: 0; padding: 0; line-height: 1; } /* ── Estilo base compartido: fecha + huéspedes + submit ── */ .pxsol-field input[type="date"], .pxsol-guests-btn, .pxsol-submit-btn { height: 52px; box-sizing: border-box; border-radius: 10px; font-size: 14px; font-family: inherit; } /* ── Inputs de fecha ── */ .pxsol-field input[type="date"] { padding: 0 24px !important; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.18); color: #fff; width: 100%; -webkit-appearance: none; appearance: none; cursor: pointer; } .pxsol-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); cursor: pointer; padding: 0; } .pxsol-field input[type="date"]:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.25); } /* ── Botón de huéspedes ── */ .pxsol-guests-btn { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; width: 100%; gap: 8px; transition: background 0.15s, border-color 0.15s; text-align: left; } .pxsol-guests-btn:hover, .pxsol-guests-btn:focus { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.7); outline: none; } .pxsol-guests-btn svg { flex-shrink: 0; opacity: 0.6; transition: transform 0.2s; } .pxsol-guests-btn[aria-expanded="true"] svg { transform: rotate(180deg); } /* ── Campo huéspedes (wrapper) ── */ .pxsol-field--guests { min-width: 190px; } /* ── Panel desplegable — portaleado a vía JS ── */ /* position:fixed y top/left los setea el JS */ #pxsol-guests-panel { background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 16px; z-index: 999999; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); min-width: 270px; width: 300px; box-sizing: border-box; } /* ── Filas contador (Adultos / Niños / Bebés) ── */ .pxsol-counter-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f2f2f2; } .pxsol-counter-row:last-of-type { border-bottom: none; } .pxsol-counter-label span { font-size: 14px; font-weight: 600; color: #1E1E1E; display: block; line-height: 1.2; } .pxsol-counter-label small { font-size: 11px; color: #999; font-weight: 400; } .pxsol-counter { display: flex; align-items: center; gap: 14px; } .pxsol-counter-btn { width: 32px; height: 32px; border: 1.5px solid #ccc; border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; padding: 0; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; } .pxsol-counter-btn:hover { border-color: #214768; color: #214768; } .pxsol-counter > span { min-width: 22px; text-align: center; font-size: 15px; font-weight: 600; color: #1E1E1E; } /* ── Botón confirmar dentro del panel ── */ .pxsol-confirm-btn { display: block; width: 100%; margin-top: 14px; padding: 10px; background: #214768; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.15s; } .pxsol-confirm-btn:hover { background: #c3a46c; } /* ── Botón Ver disponibilidad ── */ .pxsol-field--submit { flex: 0 0 auto; min-width: fit-content; /* sin label arriba → empujar el botón hacia abajo para alinearlo */ padding-top: 17px; } #pxsol-search-widget .pxsol-submit-btn, #pxsol-search-widget .pxsol-submit-btn:visited, #pxsol-search-widget .pxsol-submit-btn:link { width: 100%; padding: 0 35px !important; background: #C4A46C !important; background-color: #C4A46C !important; color: #fff !important; border: none !important; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; transform: translateY(0); } #pxsol-search-widget .pxsol-submit-btn:hover:not(:disabled) { background: #ad8f5c !important; background-color: #ad8f5c !important; color: #fff !important; opacity: 1 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important; transform: translateY(-2px); } #pxsol-search-widget .pxsol-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; } /* ── Mensaje de error ── */ .pxsol-error { color: #214768; font-size: 13px; padding: 9px 13px; background: rgba(122, 60, 30, 0.08); border: 1px solid rgba(122, 60, 30, 0.25); border-radius: 8px; margin-top: 10px; } /* ── Responsive ── */ @media (max-width: 768px) { .pxsol-row { flex-direction: column; gap: 14px; padding: 0 4px; } .pxsol-field, .pxsol-field--submit, .pxsol-field--guests { min-width: 100%; width: 100%; } .pxsol-field--submit { padding-top: 0; } .pxsol-field input[type="date"] { text-align: left; padding: 0 12px 0 16px !important; } /* El panel en mobile ocupa el ancho de la pantalla */ #pxsol-guests-panel { width: calc(100vw - 32px); min-width: unset; } }