/* Cursus-upsells
 *
 * De opmaak van de upsell-kaarten. Stond eerst alleen in my-account.css, waar
 * het plugin-formulier op de accountpagina staat. Nu het VC-element
 * `academia_course_upsells` dezelfde kaarten op elke pagina kan plaatsen, leeft
 * de opmaak hier: één bron voor beide plekken, met dezelfde classes in de HTML.
 *
 * De accountpagina houdt in my-account.css alleen nog de regel die de container
 * van de plugin neutraliseert; die is daar specifiek voor.
 */

/* My-accounty upsell form */

/* 2-column grid */
.upsell-order-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    /* Kaarten per rij even hoog (stretch). De lege ruimte bij een kortere
       kaart wordt opgevangen door de actie-rij onderaan te pinnen (zie .item),
       zodat prijs/quantity/knop netjes op één lijn staan. */
    align-items: stretch;
}


/* 1 grid col */
.upsell-order-form-col {
    padding: 30px 19px;
    grid-column: 1 span / auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* content strak bovenaan, geen uit-elkaar-duwen */

    background-color: #fff;
    border-radius: 15px;
}

.upsell-order-form-col h3 {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 15px;
}

/* 1 column on smaller screens */
@media screen and (max-width: 991px) {
    .upsell-order-form-col {
        grid-column: 2 span / auto;
    }
}

input[type="number"].upsell-quantity {
    box-sizing: border-box; /* 48px hoog incl. border + padding */
    height: 48px;
    width: 74px; /* verbreed zodat 20px padding + cijfer passen (was 50px) */
    padding: 13px 20px;
    border: 2px solid var(--font-color, #0A2636);
    border-radius: 34px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* Prijs (door my-account.js uit de h3-titel geknipt) linksonder in de
   actie-rij; margin-right auto duwt quantity + knop naar rechts. */
.upsell-order-form-col .upsell-price {
    margin-right: auto;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

button.upsell-buy-button {
    cursor: pointer;
    border: 0;
    outline: none;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
    display: inline-block;
    white-space: nowrap;

    padding: 15px 24px;
    border-radius: 40px;
    background-color: var(--pink, #E4087E);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.42px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Hover: donkerroze, zoals de overige knoppen in het account. */
button.upsell-buy-button:hover,
button.upsell-buy-button:focus {
    background-color: var(--dark-pink, #C20068);
    color: #fff;
}

/* De knop mag nooit krimpen: de tekst staat op nowrap, dus samenpersen betekent
   dat "Buy Now!" er letterlijk uit loopt. Hetzelfde geldt voor het aantal-veld. */
button.upsell-buy-button,
input[type="number"].upsell-quantity {
    flex: 0 0 auto;
}

/* Mobiel: prijs op een eigen regel, daaronder aantal + knop. De knop vult de
   resterende breedte, zodat hij goed aantikbaar is en de tekst ruim past. */
@media (max-width: 767px) {
    .upsell-order-form-col .item > div:has(> .upsell-buy-button) {
        row-gap: 14px;
    }

    .upsell-order-form-col .upsell-price {
        flex: 1 0 100%;
        margin-right: 0;
    }

    button.upsell-buy-button {
        flex: 1 1 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* .item binnen de upsell-kolom — opnieuw op te zetten. (Oude styling met
   rand/padding/margin is verwijderd.) */

/* Label-div in .item (de plugin geeft die div geen class; targeten via de
   <strong> die erin zit). */
.upsell-order-form-col .item > div:has(> strong) {
    padding: 10px 16px;
    margin-bottom: 40px;
    border-radius: 10px;
    background-color: var(--lighter-blue, #EEF5FA);
    font-size: 14px;
    line-height: 24px;
}

/* Tekst niet vet (staat in een <strong>). */
.upsell-order-form-col .item > div > strong {
    font-weight: normal;
}

/* .item vult de resterende kolomhoogte, zodat de actie-rij eronder gepind kan
   worden (kaarten lijnen zo onderaan uit ook bij verschillende titel-lengtes). */
.upsell-order-form-col .item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Quantity-veld + "Buy now"-knop rechts uitlijnen, verticaal gecentreerd,
   met 10px ertussen. margin-top: auto pint de rij onderaan de kaart. */
.upsell-order-form-col .item > div:has(> .upsell-buy-button) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap; /* liever afbreken dan de knop platdrukken */
    gap: 10px;
    margin-top: auto;
}

/* Laadstatus na het aanklikken van de koopknop.
 *
 * De tekst wordt doorzichtig in plaats van verwijderd: zo houdt de knop precies
 * dezelfde breedte en springt de kaart niet op tijdens het laden. De spinner
 * komt er als pseudo-element overheen.
 *
 * De JS (assets/js/course-upsells.js) zet deze class bij het versturen en haalt
 * hem er weer af als er iets misgaat; bij succes volgt een doorverwijzing en
 * blijft de spinner staan tot de nieuwe pagina laadt.
 */
button.upsell-buy-button.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

button.upsell-buy-button.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tt-upsell-spin 0.7s linear infinite;
}

@keyframes tt-upsell-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Wie liever geen bewegende elementen ziet, krijgt een rustige indicatie. */
@media (prefers-reduced-motion: reduce) {
    button.upsell-buy-button.loading::after {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.4);
    }
}