#checkout-summary {
    margin-top: 20px;
    color: #666;
    font-size: 16px;
}
#checkout-summary div {
    margin-bottom: 20px;
}
.summary-ammount {
    color: #000;
}
#checkout-summary strong {
    color: #000;
}
#checkout-summary span {
    float: right; /* Mantener para spans dentro de divs fuera de details/summary */
    font-size: 16px;
}
#summary-total {
    margin-top: 30px;
}
#summary-total strong,
#summary-total span {
    font-weight: 900;
    color: #31b8c6;
    font-size: 22px;
}
.summary-details {
    margin-top: 5px;
    margin-left: 5px;
}
#bookingButton {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    background-color: #31b8c6;
    color: #fff;
    border: none;
    cursor: pointer;
}
#bookingButton:hover {
    background-color: #f28f52;
}

/* --- Modificaciones para la flecha de details/summary (Chevron) --- */

#checkout-summary details summary {
    list-style: none !important; /* Fuerza la eliminación de la flecha predeterminada */
    cursor: pointer;
    display: flex; /* Usa flexbox para alinear el contenido y la flecha */
    justify-content: space-between; /* Empuja el contenido a los extremos */
    align-items: center; /* Alinea verticalmente los elementos */
    padding-right: 15px; /* Añade un poco de espacio a la derecha */
    position: relative;
}

/* Oculta los marcadores por defecto para todos los navegadores */
#checkout-summary details summary::-webkit-details-marker {
    display: none !important;
}
#checkout-summary details summary::marker {
    display: none !important;
}

/* Contenido principal del summary (e.g., "Fees", "Rental") */
#checkout-summary details summary strong {
    order: 1; /* Asegura que el strong va primero */
    margin-right: 5px; /* Pequeño espacio entre el texto y la flecha */
}

/* Pseudo-elemento para el chevron */
#checkout-summary details summary::after {
    content: '›'; /* Carácter Unicode para chevron derecho */
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
    order: 2; /* Coloca el chevron después del strong */
    line-height: 1;
    margin-left: 0;
    margin-right: 5px; /* Pequeño espacio entre la flecha y el monto */
}

/* Estilo para el span.summary-ammount dentro del summary */
#checkout-summary details summary span.summary-ammount {
    float: none; /* Anula el float: right del estilo global */
    margin-left: auto; /* Empuja el monto a la derecha dentro del flex container */
    order: 3; /* Coloca el span después del chevron */
}

/* Rotar el chevron cuando los detalles están abiertos */
#checkout-summary details[open] summary::after {
    transform: rotate(90deg); /* Rota 90 grados para que apunte hacia abajo */
}