/* Clone-only adjustments.
 *
 * The original page relied on Livewire/Spreedly JS to reveal several blocks and
 * to inject the card iframes. These rules keep the static clone looking
 * identical without that runtime.
 */

/* Payment method container was revealed once the gateway finished loading. */
.store-front-checkout .checkout-custom .checkout-container {
    display: block !important;
}

.store-front-checkout .checkout-container .tab-container .tab-content .tab-pane.active.show {
    display: block !important;
}

/* City / State / ZIP stay collapsed until an address is entered, as on the
   original page. js/checkout.js flips them to display:block. */
#card-address .address-detail-field[style*="display: block"] {
    opacity: 1 !important;
    max-height: 200px;
}

/* Card fields were Spreedly iframes; they are plain inputs here. */
input#spreedly-card-number,
input#spreedly-card-cvv {
    width: 100%;
}

/* Slot the Commas embed will live in. */
.commas-checkout-embed {
    width: 100%;
}

/* --- Kay Capitals University logo -------------------------------------------
   The original Ecom Degree mark was a 162x32 wordmark and the header img carried
   no width rule, so it rendered at its intrinsic size. The KCU mark is ~1.58:1,
   so both slots need explicit sizing or the image renders at full pixel width. */
.ecomdegree-checkout-header {
    padding: 12px 0;
}

.ecomdegree-checkout-header img {
    height: 68px;
    width: auto;
    display: inline-block;
}

.ecomdegree-checkout-wrapper .footer-logo-link img {
    width: auto;
    height: 78px;
}

@media (max-width: 767px) {
    .ecomdegree-checkout-header img {
        height: 54px;
    }

    .ecomdegree-checkout-wrapper .footer-logo-link img {
        height: 64px;
    }
}

/* --- hero video --------------------------------------------------------------
   Replaces the cut-out hero PNG, which was a transparent image that blended
   into the page. A player is a hard-edged rectangle, so it gets the same
   568px measure as the image plus rounding and a shadow to sit deliberately. */
.ecom-right-tab-col-video {
    width: 100%;
    max-width: 568px;
    aspect-ratio: 16 / 9;
    margin: 0 auto 8px;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.ecom-right-tab-col-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}