/* =========================
   RESERVA EXPERIENCIA
========================= */

.gs-reserva-exp {
    background: var(--color-blanco);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-borde-primario);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* =========================
   PRECIO
========================= */
.gs-reserva-exp__precio{
    display:flex;
    align-items:baseline;
    gap:var(--space-sm);
}
.gs-reserva-exp__precio h4{
    font-size:var(--text-lg);
    font-weight:var(--font-bold);
    color:var(--color-text-cafe);
}

.gs-reserva-exp__precio span{
    font-size:var(--text-sm);
    color:var(--color-text-azul);
    font-weight:var(--font-medium);
}

/* =========================
   FIELD
========================= */

.gs-reserva-exp__field{
    border: 1px solid var(--color-borde-primario);
    border-radius:var(--radius-md);
    padding:var(--space-sm) var(--space-md);
    transition:all .2s ease;
    background:var(--color-blanco);
    cursor:pointer;
}



/* =========================
   LABEL
========================= */

.gs-reserva-exp__label{
    font-size:10px;
    text-transform:uppercase;
    color:var(--color-text-azul);
    display:block;
    margin-bottom:2px;
    font-weight:var(--font-medium);
}

/* =========================
   INPUT FECHA
========================= */

.gs-reserva-exp__input-fecha{
    border:none;
    outline:none;
    font-size:var(--text-sm);
    width:100%;
    background:transparent;
    cursor:pointer;
    color:var(--color-text-negro);
}

/* =========================
   PERSONAS (ANTES HUESPEDES)
========================= */

.gs-reserva-exp__toggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.gs-reserva-exp__text{
    font-size:var(--text-sm);
    font-weight:var(--font-medium);
    color:var(--color-text-negro);
}

.gs-reserva-exp__arrow{
    font-size:10px;
    color:var(--color-text-azul);
}

/* =========================
   DROPDOWN
========================= */

.gs-reserva-exp__dropdown{
    display:none;
    flex-direction:column;
    gap:var(--space-md);
    margin-top:var(--space-sm);
    padding-top:var(--space-sm);
}

.gs-reserva-exp__dropdown.active{
    display:flex;
}

/* =========================
   ROW
========================= */

.gs-reserva-exp__row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.gs-reserva-exp__row strong{
    font-size:var(--text-sm);
    font-weight:var(--font-semibold);
}

.gs-reserva-exp__row small{
    font-size:12px;
    color:var(--color-text-azul);
}

/* =========================
   CONTROLS
========================= */

.gs-reserva-exp__controls{
    display:flex;
    align-items:center;
    gap:var(--space-sm);
}

/* =========================
   BUTTONS +/-
========================= */

.gs-reserva-exp__btn{
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--color-bg-soft);
    background:var(--color-blanco);
    cursor:pointer;
    transition:all .2s ease;
    font-size:16px;
}

.gs-reserva-exp__btn:hover{
    background:var(--color-bg);
    border-color:var(--color-primario);
}

/* =========================
   COUNT
========================= */

.gs-reserva-exp__count{
    min-width:20px;
    text-align:center;
    font-weight:var(--font-medium);
}

/* =========================
   BOTÓN PRINCIPAL
========================= */

.gs-reserva-exp__btn-submit {
    background: var(--color-primario);
    color: var(--color-text-blanco);
    padding: 16px;
    border: none;
    border-radius: 10px;
    font-weight: var(--font-semibold);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s ease;
}

.gs-reserva-exp__btn-submit:hover{
    background:var(--color-primario-oscuro);
}

/* =========================
   NOTA
========================= */

.gs-reserva-exp__nota{
    text-align:center;
    font-size:12px;
    color:var(--color-text-azul);
}