.musement-widget {
    margin: 32px 0;
}

.musement-widget__header {
    margin-bottom: 16px;
}

.musement-widget__title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.musement-widget__status {
    padding: 14px 16px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
}

.musement-widget__status.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.musement-tours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: 20px;
}

.musement-tour {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
}

.musement-tour__media {
    flex: 0 0 auto;
}

.musement-tour__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #e5e7eb;
}

.musement-tour__image--empty {
    background: linear-gradient(135deg, #e5e7eb, #f8fafc);
}

.musement-tour__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px;
}

.musement-tour__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
}

.musement-tour__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    margin: 0 0 12px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.musement-tour__meta {
    min-height: 22px;
    margin-bottom: 12px;
    font-weight: 700;
}

.musement-tour__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.musement-tour__date,
.musement-tour__button {
    min-height: 40px;
    border-radius: 6px;
    font-size: 14px;
}

.musement-tour__date {
    min-width: 0;
    flex: 1;
    border: 1px solid #cbd5e1;
    padding: 0 8px;
}

.musement-tour__button {
    flex: 0 0 auto;
    border: 0;
    padding: 0 12px;
    background: #0f172a;
    color: #fff;
    cursor: pointer;
}

.musement-tour__button:disabled {
    cursor: wait;
    opacity: .65;
}

.musement-tour__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    color: #475569;
    font-size: 14px;
}

.musement-tour__calendar .flatpickr-prev-month {
    pointer-events: auto !important;
    visibility: visible !important;
    z-index: 9999  !important;
}

.musement-tour__slot {
    display: grid;
    grid-template-columns: 1fr 68px auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    padding: 8px;
}

.musement-tour__slot-info {
    min-width: 0;
    overflow-wrap: anywhere;
}

.musement-tour__quantity {
    min-width: 0;
    height: 36px;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 0 6px;
}

.musement-tour__add,
.musement-checkout__submit,
.musement-cart-bar__checkout {
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    background: #0f172a;
    color: #fff;
    cursor: pointer;
    padding: 0 12px;
    text-decoration: none;
}

/* Carrito vacio: el enlace al checkout se apaga. Un <a> no admite "disabled",
   asi que hace falta pointer-events para que el clic no llegue. */
.musement-cart-bar__checkout.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.musement-cart-bar {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d7dde5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
    color: #0f172a;
    padding: 10px;
    font-size: 14px;
}

/* El checkout va dentro de una tarjeta propia para que se lea como un bloque
   cerrado y no como texto suelto sobre el fondo de la pagina. */
.musement-checkout {
    max-width: 920px;
    margin: 32px auto;
    padding: 28px 32px 32px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

.musement-checkout__title {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 26px;
    line-height: 1.2;
}

.musement-checkout__status {
    margin-bottom: 16px;
    color: #475569;
}

/* La primera fila no lleva separador arriba: ya lo pone el titulo. */
.musement-checkout__item {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 0;
}

.musement-checkout__item-media {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f5f9;
}

.musement-checkout__item-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Empuja el precio y el boton de quitar a la derecha, y deja que el titulo largo
   se parta en vez de estirar la fila. */
.musement-checkout__item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.musement-checkout__item-info strong {
    display: block;
    line-height: 1.3;
}

.musement-checkout__item-price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.musement-checkout__item-price strong {
    display: block;
    font-size: 16px;
}

.musement-checkout__item span {
    display: block;
    margin-top: 4px;
    color: #475569;
    font-size: 14px;
}

.musement-checkout__item button {
    flex: 0 0 auto;
    min-height: 34px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #991b1b;
    cursor: pointer;
    padding: 0 10px;
}

@media (max-width: 600px) {
    .musement-checkout__item {
        flex-wrap: wrap;
    }

    .musement-checkout__item-media {
        width: 64px;
        height: 64px;
    }

    .musement-checkout__item-info {
        flex: 1 1 60%;
    }
}

/* El total cierra el bloque del carrito: sin borde inferior (lo pone la ultima
   fila) y alineado a la derecha, donde estan los importes de cada linea. */
.musement-checkout__total {
    margin: 0 0 24px;
    padding: 16px 0;
    text-align: right;
    font-size: 20px;
    font-weight: 700;
}

.musement-checkout__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.musement-checkout__fields label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 14px;
}

.musement-checkout__fields input {
    min-height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 10px;
}

/* Campos que Musement exige para la actividad concreta (fecha de nacimiento,
   documento...). Se pintan en la misma rejilla que el resto para que el cliente
   los rellene de una sola pasada. */
.musement-checkout__fields input.has-error {
    border-color: #d63638;
}

.musement-checkout__submit {
    margin-top: 16px;
    min-height: 42px;
    width: 100%;
    font-weight: 700;
}

/* Separador entre "tus datos" y el pago, para que se vean como dos pasos y no
   como una lista continua de campos. */
.musement-payment {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.musement-payment__title {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
}

.musement-payment__item {
    overflow: hidden;
    border: 1px solid #d7dde5;
    background: #fff;
}

.musement-payment__item + .musement-payment__item {
    border-top: 0;
}

.musement-payment__item:first-of-type {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.musement-payment__item:last-of-type {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.musement-payment__item.is-active {
    border-color: #94a3b8;
}

.musement-payment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 58px;
    border: 0;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 12px 16px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
}

.musement-payment__header[aria-expanded="true"] {
    background: #f8fafc;
}

.musement-payment__header img {
    display: block;
    max-width: 86px;
    max-height: 28px;
    object-fit: contain;
}

.musement-payment__body {
    border-top: 1px solid #e2e8f0;
    padding: 14px 16px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.musement-payment__body p,
.musement-payment__terms {
    margin: 0;
}

.musement-payment__terms {
    margin-top: 12px;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.dayContainer{
    grid-row-gap: 5px;
    padding:5px;
}

.flatpickr-day.flatpickr-disabled{
    color: rgba(57, 57, 57, 0.3);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.musement-day-low{
    background: #9CCC65 !important;
    color: black !important;
    border-color: none !important;
}

@media (max-width: 600px) {
    /* En movil la tarjeta se pega mas a los bordes: 32px de padding a cada lado
       se comen media pantalla. */
    .musement-checkout {
        margin: 16px auto;
        padding: 20px 16px 24px;
        border-radius: 10px;
    }

    .musement-checkout__title {
        font-size: 22px;
    }
}

@media (max-width: 420px) {
    .musement-tour__actions {
        flex-direction: column;
    }

    .musement-tour__date,
    .musement-tour__button {
        width: 100%;
    }

    .musement-tour__slot,
    .musement-checkout__fields {
        grid-template-columns: 1fr;
    }

    .musement-cart-bar {
        right: 8px;
        bottom: 8px;
        left: 8px;
        justify-content: space-between;
    }

    .musement-payment__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .musement-tour__calendar {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .musement-calendar__day {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 72px;
        min-height: 72px;
        border: 1px solid #d7dde5;
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
        transition: .2s;
    }

    .musement-calendar__day:hover {
        border-color: #0f172a;
    }

    .musement-calendar__day.is-active {
        background: #0f172a;
        color: #fff;
        border-color: #0f172a;
    }

    .musement-calendar__weekday {
        font-size: 12px;
        text-transform: uppercase;
        opacity: .7;
    }

    .musement-calendar__number {
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        margin-top: 4px;
    }

    .musement-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        margin-top: 10px;
    }

    .musement-calendar-grid__header {
        font-weight: 600;
        text-align: center;
        padding: 6px 0;
    }

    .musement-calendar-grid__day {
        aspect-ratio: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        background: #fff;
        cursor: pointer;
    }

    .musement-calendar-grid__day:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

    .musement-calendar-grid__day.is-available {
        border-color: #2ecc71;
    }

    .musement-calendar-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .musement-day-available {
        background: #dcfce7 !important;
        border-radius: 6px;
    }

    .musement-day-low {
        background: #fabada !important;
        border-radius: 6px;
        color: #1b995a !important;
    }

    .musement-day-full {
        background: #fee2e2 !important;
        color: #991b1b !important;
        text-decoration: line-through;
        border-radius: 6px;
    }

    
}