/* ─── Pxsol Hero Search Widget ──────────────────────────────────────────────── */ #pxsol-hero-widget { font-family: inherit; background: #ede8dc; border-radius: 4px; padding: 28px 28px 22px; max-width: 500px; width: 100%; box-sizing: border-box; color: #333 !important; box-shadow: 10px 10px 70px rgba(0, 0, 0, 0.4); } /* Force all direct text to be dark — blocks white inherited from hero */ #pxsol-hero-widget *, #pxsol-hero-widget *::before, #pxsol-hero-widget *::after { color: inherit; } /* ── Cabecera ── */ .pxsol-hero-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 0px; } .pxsol-hero-title { font-size: 26px; font-style: italic; font-weight: 400; color: #1e3354 !important; margin: 0; line-height: 1.2; } .pxsol-hero-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8b1c1c !important; border: 1.5px solid #8b1c1c !important; background: transparent !important; padding: 7px 11px; border-radius: 3px; white-space: nowrap !important; flex-shrink: 0; line-height: 1.3; cursor: default; display: inline-block; word-break: keep-all; overflow-wrap: normal; } /* ── Title group ── */ .pxsol-hero-title-group { display: flex; flex-direction: column; } #pxsol-hero-widget .pxsol-hero-title-group .pxsol-hero-title { margin: 0 !important; padding: 0 !important; } /* ── Subtitle (mobile only) ── */ .pxsol-hero-subtitle { display: none; } .pxsol-hero-divider { border: none; border-top: 1px solid rgba(0, 0, 0, 0.13); margin: 0 0 20px; } /* ── Labels ── */ .pxsol-hero-field label { display: block; font-size: 12px !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1e3354 !important; margin-bottom: 7px; } /* ── Fila de fechas (dos columnas) ── */ .pxsol-hero-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } /* ── Inputs de fecha ── */ .pxsol-hero-field input[type="date"] { width: 100%; height: 48px; padding: 0 12px; background: #fff !important; border: 1px solid #ccc !important; border-radius: 3px; font-size: 14px; color: #333 !important; box-sizing: border-box; -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; transition: border-color 0.15s; } .pxsol-hero-field input[type="date"]:focus { outline: none; border-color: #1e3354 !important; } .pxsol-hero-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; } /* ── Campo huéspedes ── */ .pxsol-hero-guests-wrap { margin-bottom: 16px; } #pxsol-hero-guests-toggle { width: 100%; height: 48px; padding: 0 14px; background: #fff !important; border: 1px solid #ccc !important; border-radius: 3px; font-size: 14px; color: #333 !important; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s; gap: 8px; text-align: left; } #pxsol-hero-guests-toggle:hover, #pxsol-hero-guests-toggle:focus { border-color: #1e3354; outline: none; } #pxsol-hero-guests-toggle svg { flex-shrink: 0; opacity: 0.5; transition: transform 0.2s; } #pxsol-hero-guests-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* ── Panel desplegable (portaleado a ) ── */ #pxsol-hero-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; position: fixed; } #pxsol-hero-guests-panel .pxsol-counter-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f2f2f2; } #pxsol-hero-guests-panel .pxsol-counter-row:last-of-type { border-bottom: none; } #pxsol-hero-guests-panel .pxsol-counter-label span { font-size: 14px; font-weight: 600; color: #1e1e1e; display: block; line-height: 1.2; } #pxsol-hero-guests-panel .pxsol-counter-label small { font-size: 11px; color: #999; font-weight: 400; } #pxsol-hero-guests-panel .pxsol-counter { display: flex; align-items: center; gap: 14px; } #pxsol-hero-guests-panel .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-hero-guests-panel .pxsol-counter-btn:hover { border-color: #1e3354; color: #1e3354; } #pxsol-hero-guests-panel .pxsol-counter > span { min-width: 22px; text-align: center; font-size: 15px; font-weight: 600; color: #1e1e1e; } #pxsol-hero-guests-panel .pxsol-confirm-btn { display: block; width: 100%; margin-top: 14px; padding: 10px; background: #1e3354; 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; font-family: inherit; } #pxsol-hero-guests-panel .pxsol-confirm-btn:hover { background: #c4a46c; } /* ── Botón principal ── */ #pxsol-hero-widget .pxsol-hero-submit-btn { width: 100%; height: 54px; background: #b5924a; color: #fff; border: none; border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; margin-bottom: 14px; box-sizing: border-box; } #pxsol-hero-widget .pxsol-hero-submit-btn:hover:not(:disabled) { background: #9e7e3e; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transform: translateY(-2px); } #pxsol-hero-widget .pxsol-hero-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; } /* ── Pie de tarjeta ── */ .pxsol-hero-footer { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #555 !important; } .pxsol-hero-footer svg { flex-shrink: 0; color: #8b1c1c; } /* ── Mensaje de error ── */ .pxsol-hero-error { color: #8b1c1c; font-size: 13px; padding: 9px 13px; background: rgba(139, 28, 28, 0.07); border: 1px solid rgba(139, 28, 28, 0.2); border-radius: 6px; margin-bottom: 12px; } /* ── Responsive ── */ @media (max-width: 520px) { #pxsol-hero-widget { padding: 22px 18px 18px; } .pxsol-hero-title { font-size: 32px; } .pxsol-hero-badge { display: none; } #pxsol-hero-widget .pxsol-hero-subtitle { display: block !important; font-size: 12px !important; font-style: normal !important; font-weight: 400 !important; color: #555 !important; opacity: 1 !important; margin: 3px 0 14px !important; padding: 0 !important; line-height: 1.3 !important; } .pxsol-hero-dates { grid-template-columns: 1fr; } #pxsol-hero-guests-panel { width: calc(100vw - 32px); min-width: unset; } }