/*-----------------------------------------------------------------------------------

    LearnPress checkout — theme design layer

    Covers both screens the checkout page serves: the checkout form itself, and
    the order-received receipt it swaps in once the order is placed.

    LearnPress ships the checkout as two floated halves of a 50/50 form with a
    bordered table on the right and a stack of unstyled fields on the left. This
    file rebuilds it as a modern two-column purchase page without touching a
    single template: the summary becomes a sticky order card, the form column
    becomes a numbered sequence of cards, and the payment list becomes a set of
    selectable tiles. The receipt becomes a centred success page (section 12).

    Everything here is CSS-only and works against the stock markup of
    learnpress/templates/checkout/*.php, so plugin updates cannot break the
    layout by regenerating a template the theme never overrode.

    Notable techniques, and why:

      - Grid instead of floats. LP floats __before right and __after left, then
        flips to `column-reverse` under 815px. Grid lets the summary sit in
        column two while staying first in the DOM (so it can be sticky), and
        lets the mobile stack put the summary on top where a buyer expects it.

      - CSS counters for the step numbers (01, 02, …). LP renders the guest /
        sign-in / sign-up blocks all three at once and hides two with
        `display: none`; counters skip display:none boxes, so the numbering is
        automatically correct for whichever block is on screen.

      - The summary <table> is switched to grid/flex rows. Table layout cannot
        give the thumbnail a fixed square, clamp the title, and let the totals
        panel bleed to the card edge — display:block on the table parts can.

      - Icons are inline SVG masks tinted with background-color, not the
        lp-icon webfont, so a glyph never renders as a stray character if the
        font fails to load.

    Accent colour follows the customizer (--tp-theme-secondary), so the
    checkout restyles itself along with the rest of the site.

    Loaded by: acadia_learnpress_checkout_styles() in inc/common/acadia-scripts.php

-----------------------------------------------------------------------------------*/

/*----------------------------------------
    1. Design tokens
----------------------------------------*/
:root {
    --acd-co-accent: var(--tp-theme-secondary, #1A73E8);

    /* Derived shades. The flat fallback is declared first so browsers without
       color-mix() drop the second declaration and keep a sane value. */
    --acd-co-accent-deep: #185AB7;
    --acd-co-accent-deep: color-mix(in srgb, var(--acd-co-accent) 78%, #12030A);
    --acd-co-accent-soft: #EDF4FD;
    --acd-co-accent-soft: color-mix(in srgb, var(--acd-co-accent) 8%, #fff);
    --acd-co-accent-line: #C4DBF9;
    --acd-co-accent-line: color-mix(in srgb, var(--acd-co-accent) 26%, #fff);
    --acd-co-accent-ring: rgba(26, 115, 232, 0.14);
    --acd-co-accent-ring: color-mix(in srgb, var(--acd-co-accent) 14%, transparent);

    --acd-co-ink: var(--tp-heading-primary, #161613);
    --acd-co-muted: var(--tp-text-body, #57595F);
    --acd-co-faint: #8A8B8F;

    --acd-co-surface: #ffffff;
    --acd-co-wash: #F7F6F3;
    --acd-co-line: rgba(22, 22, 19, 0.10);
    --acd-co-line-soft: rgba(22, 22, 19, 0.055);
    --acd-co-success: var(--tp-theme-11, #1D9267);

    --acd-co-radius: 22px;
    --acd-co-radius-sm: 14px;

    --acd-co-shadow: 0 1px 2px rgba(16, 16, 14, 0.04), 0 14px 32px -14px rgba(16, 16, 14, 0.16);
    --acd-co-shadow-lg: 0 2px 4px rgba(16, 16, 14, 0.05), 0 30px 64px -24px rgba(16, 16, 14, 0.26);

    --acd-co-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Clearance for the theme's sticky header when the summary pins itself. */
    --acd-co-sticky-top: 110px;

    --acd-co-font: var(--tp-ff-body, "Outfit", sans-serif);
}

/*----------------------------------------
    2. Page shell

    The theme already prints its own breadcrumb banner with the page title
    above this wrapper, so LP's breadcrumb list and <h1> are a second copy of
    the same two things — both are dropped, and the wrapper carries the
    top spacing that the breadcrumb used to provide.
----------------------------------------*/

/* No page tint — the cards carry the separation on their own, through the
   hairline border and shadow. */
.lp-archive-courses {
    position: relative;
    padding-top: 70px;
    padding-bottom: 90px;
    font-family: var(--acd-co-font);
}

.lp-archive-courses > ul.learn-press-breadcrumb,
.lp-archive-courses > h1.lp-content-area {
    display: none;
}

/*----------------------------------------
    3. Form grid — form column + sticky summary
----------------------------------------*/
#learn-press-checkout .lp-checkout-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 396px;
    align-items: start;
    gap: 28px;
    margin: 0;
}

/* LP's clearfix would become a stray grid item and open an empty row. */
#learn-press-checkout .lp-checkout-form::after {
    display: none;
}

/* Both halves are pinned to row 1 explicitly. The summary comes first in the
   DOM but belongs in column 2, and with sparse auto-placement the cursor has
   already passed column 1 by then — the form column would drop to row 2 and
   leave the whole height of the summary card as dead space above it. */
#learn-press-checkout .lp-checkout-form__after {
    display: flex;
    flex-direction: column;
    gap: 22px;
    float: none;
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    margin: 0;
}

#learn-press-checkout .lp-checkout-form__before {
    position: sticky;
    top: var(--acd-co-sticky-top);
    float: none;
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    margin: 0;
}

/*----------------------------------------
    4. Card shell + numbered headings
----------------------------------------*/
#learn-press-checkout .lp-checkout-form__after > .lp-checkout-block,
#learn-press-checkout .learn-press-checkout-comment {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 28px 30px 30px;
    border: 1px solid var(--acd-co-line);
    border-radius: var(--acd-co-radius);
    background: var(--acd-co-surface);
    box-shadow: var(--acd-co-shadow);
    transition: box-shadow 0.35s var(--acd-co-ease), border-color 0.35s var(--acd-co-ease);
}

#learn-press-checkout .lp-checkout-form__after > .lp-checkout-block:hover,
#learn-press-checkout .learn-press-checkout-comment:hover {
    border-color: var(--acd-co-line);
    box-shadow: var(--acd-co-shadow-lg);
}

/* The account bar is a status strip, not a section — keep it flat and slim. */
#learn-press-checkout .lp-checkout-form__after > #checkout-account-logged-in {
    padding: 16px 22px;
    border-color: var(--acd-co-line-soft);
    border-radius: var(--acd-co-radius-sm);
    background: var(--acd-co-wash);
    box-shadow: none;
}

#learn-press-checkout .lp-checkout-form__after > #checkout-account-logged-in:hover {
    box-shadow: none;
}

/* 01, 02, 03 … — display:none blocks are skipped, so the visible account
   variant (guest / sign in / sign up) always takes the first number. */
#learn-press-checkout .lp-checkout-form__after {
    counter-reset: acd-co-step;
}

#learn-press-checkout .lp-checkout-form__after .lp-checkout-block > h4,
#learn-press-checkout .learn-press-checkout-comment > h4 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--acd-co-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    counter-increment: acd-co-step;
}

#learn-press-checkout .lp-checkout-form__after .lp-checkout-block > h4::before,
#learn-press-checkout .learn-press-checkout-comment > h4::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--acd-co-accent-soft);
    color: var(--acd-co-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    content: counter(acd-co-step, decimal-leading-zero);
}

/*----------------------------------------
    5. Account — logged in, guest, sign in, sign up
----------------------------------------*/
#learn-press-checkout #checkout-account-logged-in p {
    display: block;
    margin: 0;
    padding-left: 40px;
    color: var(--acd-co-muted);
    font-size: 15px;
    line-height: 28px;
}

/* Avatar chip, drawn rather than fetched. A background-image over a background
   colour rather than a two-layer mask — no mask-composite support to depend on. */
#learn-press-checkout #checkout-account-logged-in p::before {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--acd-co-accent);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    transform: translateY(-50%);
    content: "";
}

#learn-press-checkout #checkout-account-logged-in p > a:first-of-type {
    color: var(--acd-co-ink);
    font-weight: 600;
}

#learn-press-checkout #checkout-account-logged-in p > a:first-of-type:hover {
    color: var(--acd-co-accent);
}

/* "Log out »" reads as a secondary action, so it gets pulled out as a chip. */
#learn-press-checkout #checkout-account-logged-in p > a:last-child {
    float: right;
    margin-left: 12px;
    padding: 5px 14px;
    border: 1px solid var(--acd-co-line);
    border-radius: 999px;
    background: var(--acd-co-surface);
    color: var(--acd-co-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    transition: color 0.25s var(--acd-co-ease), border-color 0.25s var(--acd-co-ease);
}

#learn-press-checkout #checkout-account-logged-in p > a:last-child:hover {
    border-color: var(--acd-co-accent-line);
    color: var(--acd-co-accent);
}

/* Guest / login / register blocks: LP gives them a bottom rule to separate
   them from the payment section. As cards they no longer need it. */
#learn-press-checkout .lp-checkout-form #checkout-account-guest,
#learn-press-checkout #checkout-account-login,
#learn-press-checkout #checkout-account-register {
    margin: 0;
    padding-bottom: 30px;
    border-bottom: 0;
}

#learn-press-checkout .lp-checkout-form .lp-guest-checkout-notice {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: var(--acd-co-radius-sm);
    background: var(--acd-co-wash);
    color: var(--acd-co-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

#learn-press-checkout .lp-checkout-form .lp-guest-switch-login,
#learn-press-checkout .lp-checkout-sign-in-link,
#learn-press-checkout .lp-checkout-sign-up-link {
    margin-top: 18px;
    color: var(--acd-co-muted);
    font-size: 14.5px;
}

#learn-press-checkout .lp-checkout-form a,
#learn-press-checkout .lp-checkout-sign-in-link a,
#learn-press-checkout .lp-checkout-sign-up-link a {
    color: var(--acd-co-accent);
    font-weight: 600;
    transition: opacity 0.25s var(--acd-co-ease);
}

#learn-press-checkout .lp-checkout-form a:hover {
    color: var(--acd-co-accent-deep);
    opacity: 0.85;
}

/*----------------------------------------
    6. Form fields
----------------------------------------*/
#learn-press-checkout .lp-checkout-form .lp-form-fields {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#learn-press-checkout .lp-checkout-form .lp-form-fields .form-field {
    margin: 0;
    padding: 0;
    list-style: none;
}

#learn-press-checkout .lp-checkout-form .lp-form-fields label {
    display: block;
    margin-bottom: 8px;
    color: var(--acd-co-ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#learn-press-checkout .lp-checkout-form .lp-form-fields .required {
    color: var(--acd-co-accent);
}

#learn-press-checkout .lp-checkout-form .lp-form-fields input:not([type="checkbox"]),
#learn-press-checkout .learn-press-checkout-comment .order-comments {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--acd-co-line);
    border-radius: var(--acd-co-radius-sm);
    background: var(--acd-co-surface);
    color: var(--acd-co-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.25s var(--acd-co-ease), box-shadow 0.25s var(--acd-co-ease);
}

#learn-press-checkout .lp-checkout-form .lp-form-fields input:not([type="checkbox"])::placeholder,
#learn-press-checkout .learn-press-checkout-comment .order-comments::placeholder {
    color: var(--acd-co-faint);
}

#learn-press-checkout .lp-checkout-form .lp-form-fields input:not([type="checkbox"]):focus,
#learn-press-checkout .learn-press-checkout-comment .order-comments:focus {
    border-color: var(--acd-co-accent);
    box-shadow: 0 0 0 4px var(--acd-co-accent-ring);
    outline: 0;
}

/* Remember me + lost password */
#learn-press-checkout .lp-checkout-form .lp-checkout-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

#learn-press-checkout .lp-checkout-form .lp-checkout-remember label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--acd-co-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

#learn-press-checkout .lp-checkout-form .lp-checkout-remember label input[type="checkbox"] {
    top: 0;
    width: 18px;
    height: 18px;
    margin: 0 9px 0 0;
    border: 1.5px solid var(--acd-co-line);
    border-radius: 6px;
    background: var(--acd-co-surface);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s var(--acd-co-ease), background-color 0.2s var(--acd-co-ease);
}

#learn-press-checkout .lp-checkout-form .lp-checkout-remember label input[type="checkbox"]:checked {
    border-color: var(--acd-co-accent);
    background-color: var(--acd-co-accent);
}

/* Replaces LP's webfont tick with a drawn one so it cannot render as "\f00c". */
#learn-press-checkout .lp-checkout-form .lp-checkout-remember label input[type="checkbox"]:checked::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e") no-repeat center / 11px 11px;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e") no-repeat center / 11px 11px;
    color: transparent;
    content: "";
}

#learn-press-checkout .lp-checkout-form .lp-checkout-remember a {
    float: none;
    color: var(--acd-co-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

#learn-press-checkout .lp-checkout-form .lp-checkout-remember a:hover {
    color: var(--acd-co-accent);
}

/*----------------------------------------
    7. Order note
----------------------------------------*/
#learn-press-checkout .learn-press-checkout-comment .order-comments {
    display: block;
    min-height: 128px;
    resize: vertical;
}

/*----------------------------------------
    8. Payment methods
----------------------------------------*/
#learn-press-checkout #checkout-payment {
    margin: 0;
}

#learn-press-checkout #checkout-payment h4 {
    margin-bottom: 22px;
}

/* Trust badge, pushed to the end of the heading row. */
#learn-press-checkout #checkout-payment .secure-connection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(29, 146, 103, 0.10);
    color: var(--acd-co-success);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 1;
    white-space: nowrap;
}

#learn-press-checkout #checkout-payment .secure-connection i {
    margin: 0;
    font-size: 12px;
}

#learn-press-checkout #checkout-payment .payment-methods {
    display: grid;
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

#learn-press-checkout #checkout-payment .lp-payment-method {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1.5px solid var(--acd-co-line);
    border-radius: var(--acd-co-radius-sm);
    background: var(--acd-co-surface);
    list-style: none;
    transition: border-color 0.25s var(--acd-co-ease), box-shadow 0.25s var(--acd-co-ease), background-color 0.25s var(--acd-co-ease);
}

#learn-press-checkout #checkout-payment .lp-payment-method:hover {
    border-color: var(--acd-co-accent-line);
}

/* LP's JS adds .selected; :has() keeps the tile in sync even if it does not. */
#learn-press-checkout #checkout-payment .lp-payment-method.selected,
#learn-press-checkout #checkout-payment .lp-payment-method:has(.gateway-input:checked) {
    border-color: var(--acd-co-accent);
    background: var(--acd-co-accent-soft);
    box-shadow: 0 0 0 4px var(--acd-co-accent-ring);
}

#learn-press-checkout #checkout-payment .lp-payment-method > label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 20px;
    color: var(--acd-co-ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#learn-press-checkout #checkout-payment .lp-payment-method .gateway-input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid var(--acd-co-line);
    border-radius: 50%;
    background: var(--acd-co-surface);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.25s var(--acd-co-ease);
}

#learn-press-checkout #checkout-payment .lp-payment-method .gateway-input::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--acd-co-accent);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.25s var(--acd-co-ease);
    content: "";
}

#learn-press-checkout #checkout-payment .lp-payment-method .gateway-input:checked {
    border-color: var(--acd-co-accent);
}

#learn-press-checkout #checkout-payment .lp-payment-method .gateway-input:checked::before {
    transform: translate(-50%, -50%) scale(1);
    content: "";
}

#learn-press-checkout #checkout-payment .lp-payment-method .gateway-input:focus-visible {
    box-shadow: 0 0 0 4px var(--acd-co-accent-ring);
    outline: 0;
}

/* Gateways return either a logo <img> or a plain title string. */
#learn-press-checkout #checkout-payment .lp-payment-method .gateway-icon {
    max-height: 36px;
    width: auto;
    border-radius: 8px;
}

#learn-press-checkout #checkout-payment .lp-payment-method .payment-method-form {
    margin: 0;
    padding: 16px 20px 18px 56px;
    border-top: 1px dashed var(--acd-co-line);
    color: var(--acd-co-muted);
    font-size: 14px;
    line-height: 1.65;
}

/*----------------------------------------
    9. Place order button
----------------------------------------*/
#learn-press-checkout #checkout-order-action {
    margin: 0;
}

#learn-press-checkout #checkout-order-action .lp-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    width: 100%;
    min-height: 60px;
    padding: 18px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--acd-co-accent) 0%, var(--acd-co-accent-deep) 100%);
    box-shadow: 0 12px 26px -12px var(--acd-co-accent), 0 2px 4px rgba(16, 16, 14, 0.12);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: transform 0.3s var(--acd-co-ease), box-shadow 0.3s var(--acd-co-ease);
}

/* Light sweep across the face on hover. */
#learn-press-checkout #checkout-order-action .lp-button::before {
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-22deg);
    transition: left 0.7s var(--acd-co-ease);
    content: "";
    pointer-events: none;
}

#learn-press-checkout #checkout-order-action .lp-button::after {
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='5' y1='12' x2='19' y2='12'/%3e%3cpolyline points='12 5 19 12 12 19'/%3e%3c/svg%3e") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='5' y1='12' x2='19' y2='12'/%3e%3cpolyline points='12 5 19 12 12 19'/%3e%3c/svg%3e") no-repeat center / contain;
    transition: transform 0.3s var(--acd-co-ease);
    content: "";
}

#learn-press-checkout #checkout-order-action .lp-button:hover {
    background: linear-gradient(120deg, var(--acd-co-accent) 0%, var(--acd-co-accent-deep) 100%);
    box-shadow: 0 18px 34px -12px var(--acd-co-accent), 0 3px 6px rgba(16, 16, 14, 0.14);
    color: #fff;
    opacity: 1;
    transform: translateY(-2px);
}

#learn-press-checkout #checkout-order-action .lp-button:hover::before {
    left: 130%;
}

#learn-press-checkout #checkout-order-action .lp-button:hover::after {
    transform: translateX(4px);
}

#learn-press-checkout #checkout-order-action .lp-button:active {
    transform: translateY(0);
}

#learn-press-checkout #checkout-order-action .lp-button:focus-visible {
    outline: 3px solid var(--acd-co-accent-ring);
    outline-offset: 3px;
}

/* While submitting, LP swaps in its own spinner glyph — drop the arrow so the
   button does not show two indicators at once. */
#learn-press-checkout #checkout-order-action .lp-button.loading {
    pointer-events: none;
    opacity: 0.75;
}

#learn-press-checkout #checkout-order-action .lp-button.loading::after {
    display: none;
}

/*----------------------------------------
    10. Terms + messages
----------------------------------------*/
#learn-press-checkout .lp-terms-and-conditions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0 4px;
    color: var(--acd-co-faint);
    font-size: 13.5px;
    line-height: 1.6;
}

#learn-press-checkout .lp-terms-and-conditions::before {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='11' width='18' height='11' rx='2'/%3e%3cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3e%3c/svg%3e") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='11' width='18' height='11' rx='2'/%3e%3cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3e%3c/svg%3e") no-repeat center / contain;
    content: "";
}

#learn-press-checkout .lp-terms-and-conditions a {
    color: var(--acd-co-muted);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#learn-press-checkout .lp-terms-and-conditions a:hover {
    color: var(--acd-co-accent);
}

/* Empty cart / "please log in" notices. */
.lp-archive-courses .learn-press-message {
    margin: 0 auto;
    padding: 18px 22px;
    border: 1px solid var(--acd-co-line);
    border-left: 4px solid var(--acd-co-accent);
    border-radius: var(--acd-co-radius-sm);
    background: var(--acd-co-surface);
    box-shadow: var(--acd-co-shadow);
    color: var(--acd-co-ink);
    font-size: 15px;
    line-height: 1.6;
}

.lp-archive-courses .learn-press-message.success {
    border-left-color: var(--acd-co-success);
}

.lp-archive-courses .learn-press-message a {
    color: var(--acd-co-accent);
    font-weight: 600;
}

/*----------------------------------------
    11. Order summary card

    The table is switched to block/grid rows: table cells cannot hold a fixed
    square thumbnail next to a clamped title, and the totals panel has to bleed
    past the card padding to sit flush with the card edge.
----------------------------------------*/
#learn-press-checkout #checkout-order {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 30px 26px 0;
    border: 1px solid var(--acd-co-line);
    border-radius: var(--acd-co-radius);
    background: var(--acd-co-surface);
    box-shadow: var(--acd-co-shadow-lg);
}

/* Accent strip along the top edge of the card. */
#learn-press-checkout #checkout-order::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--acd-co-accent), var(--acd-co-accent-deep));
    content: "";
}

#learn-press-checkout #checkout-order > h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--acd-co-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

#learn-press-checkout #checkout-order > h4::before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: var(--acd-co-accent);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3e%3cpath d='M3 6h18'/%3e%3cpath d='M16 10a4 4 0 0 1-8 0'/%3e%3c/svg%3e") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3e%3cpath d='M3 6h18'/%3e%3cpath d='M16 10a4 4 0 0 1-8 0'/%3e%3c/svg%3e") no-repeat center / contain;
    content: "";
}

#learn-press-checkout #checkout-order .lp-checkout-order__inner {
    padding: 0;
    border: 0;
    border-radius: 0;
}

#learn-press-checkout #checkout-order table,
#learn-press-checkout #checkout-order tbody,
#learn-press-checkout #checkout-order tfoot {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

/* --- Line items --- */
#learn-press-checkout #checkout-order tr.cart-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--acd-co-line-soft);
}

#learn-press-checkout #checkout-order tr.cart-item:first-child {
    padding-top: 0;
}

#learn-press-checkout #checkout-order tr.cart-item:last-child {
    border-bottom: 0;
}

#learn-press-checkout #checkout-order tr.cart-item td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    vertical-align: middle;
}

#learn-press-checkout #checkout-order .course-thumbnail {
    width: 74px;
}

#learn-press-checkout #checkout-order .course-thumbnail .course-img {
    overflow: hidden;
    width: 74px;
    height: 74px;
    border-radius: var(--acd-co-radius-sm);
    background: var(--acd-co-wash);
}

/* LP forces `height: auto !important` on the image, so the square crop has to
   answer in kind. */
#learn-press-checkout #checkout-order .course-thumbnail img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    transition: transform 0.5s var(--acd-co-ease);
}

#learn-press-checkout #checkout-order tr.cart-item:hover .course-thumbnail img {
    transform: scale(1.06);
}

#learn-press-checkout #checkout-order .course-name {
    min-width: 0;
    font-weight: 600;
}

#learn-press-checkout #checkout-order .course-name a.course-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--acd-co-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.25s var(--acd-co-ease);
}

#learn-press-checkout #checkout-order .course-name a.course-name:hover {
    color: var(--acd-co-accent);
}

#learn-press-checkout #checkout-order .course-quantity {
    display: inline-block;
    margin-top: 6px;
    color: var(--acd-co-muted);
    font-size: 13px;
    font-weight: 500;
}

#learn-press-checkout #checkout-order td.course-total {
    color: var(--acd-co-ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Totals panel: bleeds to the card edges ---
   width has to go back to auto: with the inherited `width: 100%` the negative
   margins only shift the panel left instead of widening it, so it overhangs
   one edge and falls short of the other. */
#learn-press-checkout #checkout-order tfoot {
    width: auto;
    margin: 20px -26px 0;
    padding: 22px 26px 26px;
    border-top: 1.5px dashed var(--acd-co-line);
    background: linear-gradient(180deg, var(--acd-co-wash) 0%, rgba(247, 246, 243, 0.45) 100%);
    font-size: inherit;
}

#learn-press-checkout #checkout-order tfoot tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border: 0;
}

#learn-press-checkout #checkout-order tfoot tr + tr {
    margin-top: 12px;
}

#learn-press-checkout #checkout-order tfoot th,
#learn-press-checkout #checkout-order tfoot td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: right;
}

#learn-press-checkout #checkout-order tfoot th {
    color: var(--acd-co-muted);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
}

#learn-press-checkout #checkout-order tfoot td {
    color: var(--acd-co-ink);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

#learn-press-checkout #checkout-order tfoot tr.order-total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--acd-co-line-soft);
    font-size: inherit;
}

#learn-press-checkout #checkout-order tfoot tr.order-total th {
    color: var(--acd-co-ink);
    font-size: 17px;
    font-weight: 700;
}

#learn-press-checkout #checkout-order tfoot tr.order-total td {
    color: var(--acd-co-accent);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/*----------------------------------------
    12. Order received — the thank-you screen

    Same URL, different template: after the order is placed LP swaps the form
    for checkout/order-received.php, which renders into a plain .lp-content-area
    carrying no id of its own. So the receipt column is identified by excluding
    the checkout's wrapper rather than by matching something of its own.

    The stock output is a full-width bordered grid of th/td pairs. Here it
    becomes a narrow centred column: success badge, headline, and the details
    as a receipt card of label/value rows.
----------------------------------------*/
.lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout) {
    /* LP sets max-width on .lp-content-area with !important. */
    max-width: 720px !important;
    margin: 0 auto;
}

/* The badge is hung off the column rather than the first paragraph, and gated
   on the details table existing — the "Invalid order." branch renders the same
   single paragraph and must not be greeted with a success tick. */
.lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout):has(> table.order_details)::before {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background-color: rgba(29, 146, 103, 0.10);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D9267' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px 38px;
    box-shadow: 0 0 0 12px rgba(29, 146, 103, 0.05);
    animation: acd-co-badge-in 0.55s var(--acd-co-ease) both;
    content: "";
}

@keyframes acd-co-badge-in {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }

    65% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout) > p {
    margin: 0 0 12px;
    color: var(--acd-co-muted);
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

.lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout) > p:first-of-type {
    margin-bottom: 14px;
    color: var(--acd-co-ink);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout) > p a {
    color: var(--acd-co-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout) > p a:hover {
    color: var(--acd-co-accent-deep);
}

/* --- Receipt card --- */
.lp-archive-courses table.order_details {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 36px 0 0;
    padding: 10px 30px 12px;
    border: 1px solid var(--acd-co-line);
    border-radius: var(--acd-co-radius);
    background: var(--acd-co-surface);
    box-shadow: var(--acd-co-shadow-lg);
    text-align: left;
}

.lp-archive-courses table.order_details::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--acd-co-accent), var(--acd-co-accent-deep));
    content: "";
}

.lp-archive-courses table.order_details tbody {
    display: block;
    width: 100%;
}

.lp-archive-courses table.order_details tbody tr {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 17px 0;
    border: 0;
    border-bottom: 1px solid var(--acd-co-line-soft);
}

.lp-archive-courses table.order_details tbody tr:last-child {
    border-bottom: 0;
}

/* Undoes .learnpress table tbody th/td — the 1px grid and white cell fill. */
.lp-archive-courses table.order_details tbody th,
.lp-archive-courses table.order_details tbody td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.5;
    text-align: left;
}

.lp-archive-courses table.order_details tbody th {
    color: var(--acd-co-faint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lp-archive-courses table.order_details tbody td {
    color: var(--acd-co-ink);
    font-size: 16px;
    font-weight: 600;
}

/* Order number and guest order key read as reference codes. */
.lp-archive-courses table.order_details tbody tr.order td,
.lp-archive-courses table.order_details tbody tr.order-key td {
    justify-self: start;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--acd-co-wash);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* Status pill. The label is localised and status-dependent, and LP puts no
   class on the cell to key off, so one neutral accent treatment covers all. */
.lp-archive-courses table.order_details tbody tr.status td {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    padding: 6px 15px;
    border-radius: 999px;
    background: var(--acd-co-accent-soft);
    color: var(--acd-co-accent);
    font-size: 13.5px;
    font-weight: 600;
}

.lp-archive-courses table.order_details tbody tr.status td::before {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.lp-archive-courses table.order_details tbody tr.item td a {
    color: var(--acd-co-accent);
    font-weight: 600;
    text-decoration: none;
}

.lp-archive-courses table.order_details tbody tr.item td a:hover {
    color: var(--acd-co-accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Multi-course orders come through as an ordered list. */
.lp-archive-courses table.order_details tbody tr.item td ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.lp-archive-courses table.order_details tbody tr.item td ol li {
    margin: 0;
    padding: 0;
}

/* "Continue" / "Enroll" button LP appends to a purchased course. */
.lp-archive-courses table.order_details tbody tr.item td .lp-button {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--acd-co-accent), var(--acd-co-accent-deep));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.lp-archive-courses table.order_details tbody tr.total td {
    color: var(--acd-co-accent);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/*----------------------------------------
    13. Responsive
----------------------------------------*/

/* Narrower sidebar before the stack, so the form column keeps a usable width. */
@media (max-width: 1199px) {
    #learn-press-checkout .lp-checkout-form {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 24px;
    }
}

/* Single column. The summary leads — a buyer checks what they are paying for
   before they reach the payment tiles. Also overrides LP's `column-reverse`
   flex rule, which would otherwise push the summary to the bottom. */
@media (max-width: 991px) {
    .lp-archive-courses {
        padding-top: 52px;
        padding-bottom: 70px;
    }

    #learn-press-checkout .lp-checkout-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        margin: 0;
    }

    #learn-press-checkout .lp-checkout-form__before {
        position: static;
        grid-row: auto;
        grid-column: auto;
        order: 1;
    }

    #learn-press-checkout .lp-checkout-form__after {
        grid-row: auto;
        grid-column: auto;
        order: 2;
    }
}

@media (max-width: 575px) {
    .lp-archive-courses {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    #learn-press-checkout .lp-checkout-form__after > .lp-checkout-block,
    #learn-press-checkout .learn-press-checkout-comment {
        padding: 24px 20px 26px;
        border-radius: 18px;
    }

    #learn-press-checkout .lp-checkout-form__after > #checkout-account-logged-in {
        padding: 14px 18px;
    }

    #learn-press-checkout #checkout-account-logged-in p {
        padding-left: 0;
    }

    #learn-press-checkout #checkout-account-logged-in p::before {
        display: none;
    }

    #learn-press-checkout #checkout-account-logged-in p > a:last-child {
        float: none;
        display: inline-block;
        margin: 10px 0 0;
    }

    #learn-press-checkout .lp-checkout-form__after .lp-checkout-block > h4,
    #learn-press-checkout .learn-press-checkout-comment > h4 {
        flex-wrap: wrap;
        gap: 10px;
        font-size: 18px;
    }

    #learn-press-checkout #checkout-payment .secure-connection {
        margin-left: 0;
    }

    #learn-press-checkout #checkout-order {
        padding: 26px 20px 0;
        border-radius: 18px;
    }

    #learn-press-checkout #checkout-order tfoot {
        margin-inline: -20px;
        padding: 20px 20px 22px;
    }

    #learn-press-checkout #checkout-order tr.cart-item {
        grid-template-columns: 62px minmax(0, 1fr) auto;
        gap: 12px;
    }

    #learn-press-checkout #checkout-order .course-thumbnail,
    #learn-press-checkout #checkout-order .course-thumbnail .course-img {
        width: 62px;
    }

    #learn-press-checkout #checkout-order .course-thumbnail .course-img {
        height: 62px;
    }

    #learn-press-checkout #checkout-order tfoot tr.order-total td {
        font-size: 24px;
    }

    #learn-press-checkout #checkout-order-action .lp-button {
        min-height: 54px;
        font-size: 15px;
    }

    /* Receipt: the label column no longer fits beside the value, so the pair
       stacks. */
    .lp-archive-courses .learnpress > .lp-content-area:not(#learn-press-checkout):has(> table.order_details)::before {
        width: 70px;
        height: 70px;
        margin-bottom: 24px;
        background-size: 32px 32px;
    }

    .lp-archive-courses table.order_details {
        margin-top: 28px;
        padding: 8px 20px 10px;
        border-radius: 18px;
    }

    .lp-archive-courses table.order_details tbody tr {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 7px;
        padding: 15px 0;
    }

    .lp-archive-courses table.order_details tbody td {
        font-size: 15px;
    }

    .lp-archive-courses table.order_details tbody tr.total td {
        font-size: 22px;
    }
}

/*----------------------------------------
    14. Motion preferences
----------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    #learn-press-checkout .lp-checkout-form *,
    #learn-press-checkout .lp-checkout-form *::before,
    #learn-press-checkout .lp-checkout-form *::after,
    .lp-archive-courses .learnpress > .lp-content-area::before {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    #learn-press-checkout #checkout-order-action .lp-button:hover {
        transform: none;
    }
}