:root{
            --primary:#13906B;
            --border:#dadada;
            --divider:#ededed;
            --hover:#f7f7f7;
            --pill-radius:9999px;
            }

            #widget-wrapper {
                position: absolute;
                top: 400px;
                width: 100%;
                z-index: 1;
            }

            @media (max-width: 600px) {
                #widget-wrapper {
                    position: relative !important;
                    top: auto;
                }
            }

            /* ---------- CONTENEDOR ---------- */
            .booking-widget{
                display:flex;
                flex-direction:row;           /* desktop */
                align-items:stretch;
                margin:0 auto;
                gap:0;
                width:100%;
                max-width:700px;
                border:1px solid var(--border);
                border-radius:var(--pill-radius);
                background:#fff;
                box-shadow:0 4px 10px rgba(0,0,0,.05);
            }

            /* ---------- CAMPOS ---------- */
            .field {
                flex:1;
                display:flex;
                flex-direction:column;
                justify-content:center;
                padding:12px 16px;
                cursor:pointer;
            }
            .field label{
                font-size:.65rem;
                font-weight: 700;
                text-transform:uppercase;
                letter-spacing:.03em;
                color:#717171;
                margin-bottom:4px;
            }
            .field span{font-size:.9rem;color:#222;}
            .field:hover{background:var(--hover);}

            #date-field {
                border-radius: var(--pill-radius) 0 0 var(--pill-radius);
            }

            #guests-field {
                position: relative;
            }

            #guests-popup {
                position: absolute;
                display: none;
                padding: 25px;
                flex-direction: column;
                gap: 10px;
                top: calc(100% + 10px);
                left: 0;
                width: 100%;
                background-color: #ffffff;
                border-radius: 10px;
                border: 1px solid #f2f2f2;
                box-shadow:0 4px 10px rgba(0,0,0,.05);

            }

            #guests-popup.open {
                display: flex !important;
                z-index: 1;
            }

            #close-button {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 25px;
                height: 25px;
                border: none;
                border-radius: 100%;
                padding: 3px;
                cursor: pointer;
            }

            .guest-type {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .guests-counter-value {
                width: 15px;
                text-align: center;
            }

            .counter {
                display: flex;
                gap: 10px;
                align-items: center;
            }

            .increase, .decrease {
                width: 30px;
                height: 30px;
                border: none;
                border-radius: 100%;
                cursor: pointer;
            }

            .children-age-wrapper {
                display: none;
                justify-content: space-between;
                align-items: center;
            }

            .children-age-input {
                width: 40px;
                height: 30px;
                text-align: center;
            }



            /* separador */
            .divider{width:1px;height:auto;background:var(--divider);}

            /* ---------- BOTÓN ---------- */
            .search-btn{
                display:flex;
                align-items:center;
                gap:8px;
                padding:0 24px;
                background: var(--primary);
                color:#fff;
                border:none;
                font-size:.9rem;
                cursor:pointer;
                transition:background .2s;
                /* radio solo lado derecho en desktop */
                border-top-right-radius:var(--pill-radius);
                border-bottom-right-radius:var(--pill-radius);
                height: 70px;
            }
            .search-btn:hover{
                background: hsl(from var(--primary) h s calc(l + 5));
            }
            .search-btn svg{width:16px;height:16px;fill:currentColor;}

            /* ---------- RESPONSIVE ---------- */
            @media (max-width:600px){
                .booking-widget{
                flex-direction:column;      /* apilamos */
                border-radius: 6px;
                }
                .divider{
                display:none;
                }

                .field{
                width:100%;
                /* sin radios: los da el contenedor pill */
                }

                .field:nth-child(1) {
                border-bottom: 1px solid #f2f2f2;
                }

                .search-btn{
                width:100%;
                padding: 14px 0px;
                align-self:stretch;
                justify-content:center;
                border-radius:0;            /* radios los pone el contenedor */
                margin-top:4px;             /* pequeño respiro */
                }
            }