.payment-information {
   background-color: #f2f2f2;
   border: 1px solid lightgrey;
   border-radius: 3px;
   height: 100%;
   padding: 10%
}

.preview-price,
.preview-discounted-price {
   margin-top: 30px;
   font-weight: bold;
   display: flex;
   margin-left: 10%;
   margin-right: auto;
   width: 100%;
}

.preview-discounted-price {
   font-weight: 100;
}

.payment-information h4 {
   font-size: 1.5em;
}

.price {
   font-size: xx-large;
}

.discounted-price {
   font-size: larger;
}

.recurring {
   font-size: small;
}

.subtotal {
   display: flex;
   justify-content: space-between;
}

.subtotal-text {
}

.subtotal-price {
   font-weight: bold;
}

.subtotal-advising {
   font-size: small;
}

.container {
    text-align: center;
    margin-top: 100px;
}

#submit-button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

    #submit-button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }
#cancel-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
/* Spinner (círculo giratorio) */
.spinner {
    border: 8px solid #f3f3f3; /* Gris claro */
    border-top: 8px solid #4CAF50; /* Color de la animación */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#statusMessage {
    margin-top: 20px;
    font-size: 18px;
    color: #555;
}