/* Barra de seleccion de viaje ("carrito") ---------------------------------
 *
 * Aparece abajo cuando el visitante marca alojamientos o destinos y le lleva al
 * formulario de propuesta. Discreta por defecto: la ficha sigue siendo la
 * protagonista y la barra solo confirma lo que ha ido eligiendo.
 */

.trip-selection {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 900;
    width: min(1360px, calc(100vw - 2rem));
    transform: translate(-50%, calc(100% + 2rem));
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--public-ink, #171513);
    font-family: inherit;
}

.trip-selection.is-visible {
    transform: translate(-50%, -1.25rem);
}

@media (prefers-reduced-motion: reduce) {
    .trip-selection {
        transition: none;
    }
}

.trip-selection__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    background: var(--public-surface, #fbf8f2);
    border: 1px solid var(--public-line, rgba(23, 21, 19, 0.1));
    border-radius: 999px;
    box-shadow: 0 18px 50px rgba(17, 15, 12, 0.16);
}

/* --- resumen / disparador --- */

.trip-selection__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    letter-spacing: 0.01em;
}

.trip-selection__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--public-ink, #171513);
    color: var(--public-surface, #fbf8f2);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.trip-selection__label {
    font-size: 0.95rem;
}

.trip-selection__chevron {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-135deg);
    opacity: 0.55;
    transition: transform 200ms ease;
}

.trip-selection__toggle[aria-expanded="true"] .trip-selection__chevron {
    transform: rotate(45deg);
}

/* --- acciones --- */

.trip-selection__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trip-selection__clear {
    padding: 0.4rem 0.2rem;
    background: none;
    border: 0;
    color: var(--public-muted, #6e665d);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trip-selection__clear:hover {
    color: var(--public-ink, #171513);
}

.trip-selection__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    background: var(--public-ink, #171513);
    color: var(--public-surface, #fbf8f2);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 200ms ease;
}

.trip-selection__cta:hover {
    background: var(--public-accent, #8f6f48);
}

/* --- panel desplegable --- */

.trip-selection__panel {
    margin-top: 0.5rem;
    padding: 0.5rem;
    max-height: min(48vh, 22rem);
    overflow-y: auto;
    background: var(--public-surface, #fbf8f2);
    border: 1px solid var(--public-line, rgba(23, 21, 19, 0.1));
    border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(17, 15, 12, 0.16);
}

.trip-selection__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trip-selection__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--public-line, rgba(23, 21, 19, 0.1));
}

.trip-selection__item:last-child {
    border-bottom: 0;
}

.trip-selection__type {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--public-muted, #6e665d);
}

.trip-selection__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 0.98rem;
    text-decoration: none;
}

a.trip-selection__name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trip-selection__remove {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--public-line, rgba(23, 21, 19, 0.1));
    border-radius: 999px;
    color: var(--public-muted, #6e665d);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.trip-selection__remove:hover {
    border-color: var(--public-ink, #171513);
    color: var(--public-ink, #171513);
}

/* --- movil: la pastilla pasa a bloque para que quepa el CTA --- */

@media (max-width: 720px) {
    .trip-selection {
        width: calc(100vw - 1rem);
    }

    .trip-selection.is-visible {
        transform: translate(-50%, -0.5rem);
    }

    .trip-selection__inner {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: 1.25rem;
    }

    .trip-selection__toggle {
        flex: 1 1 100%;
    }

    .trip-selection__actions {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .trip-selection__cta {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --- campo de destinos del formulario de propuesta ---------------------------
 *
 * Recoge la frase con la seleccion hecha en la web, que suele ocupar mas de una
 * linea. El alto minimo garantiza espacio aunque el autoajuste por JS no corra.
 */

.step-form textarea[data-autogrow] {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.5;
}

/* --- estado del boton "Incluir en mi viaje" en las fichas --- */

[data-trip-add]:not([data-trip-icon]).is-selected {
    background: var(--public-olive, #3b4636);
    border-color: var(--public-olive, #3b4636);
    color: #fbf8f2;
}

/* --- boton de las tarjetas de listado ---------------------------------------
 *
 * La tarjeta entera ya es un enlace, asi que el boton vive fuera de el y se
 * superpone en la esquina de la imagen. Es un icono: la etiqueta va en
 * aria-label para que se entienda con lector de pantalla.
 */

.public-card {
    position: relative;
}

.public-card__add {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: rgba(251, 248, 242, 0.92);
    border: 1px solid rgba(23, 21, 19, 0.12);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.public-card__add:hover {
    background: #fbf8f2;
    transform: scale(1.06);
}

.public-card__add:focus-visible {
    outline: 2px solid var(--public-accent, #8f6f48);
    outline-offset: 2px;
}

/* Signo "+" dibujado con dos barras: evita depender de un icono externo. */
.public-card__add::before,
.public-card__add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--public-ink, #171513);
    transform: translate(-50%, -50%);
    transition: opacity 160ms ease, transform 160ms ease;
}

.public-card__add::before {
    width: 0.95rem;
    height: 1.5px;
}

.public-card__add::after {
    width: 1.5px;
    height: 0.95rem;
}

/* Seleccionado: el "+" se convierte en una marca de verificacion. */
.public-card__add.is-selected {
    background: var(--public-olive, #3b4636);
    border-color: var(--public-olive, #3b4636);
}

.public-card__add.is-selected::before,
.public-card__add.is-selected::after {
    background: #fbf8f2;
}

.public-card__add.is-selected::before {
    width: 0.5rem;
    height: 1.5px;
    transform: translate(-72%, 15%) rotate(45deg);
}

.public-card__add.is-selected::after {
    width: 1.5px;
    height: 0.9rem;
    transform: translate(-30%, -18%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .public-card__add,
    .public-card__add::before,
    .public-card__add::after {
        transition: none;
    }

    .public-card__add:hover {
        transform: none;
    }
}