/* =====================================================================
 * ceASAP — CE Courses Page Styling
 *
 * Scoped to #ce-courses to avoid collisions with theme styles.
 * Companion file to ceASAP CE Courses Shortcode (registers [ce_courses]).
 * Companion file to filters.js (handles tab/filter/search interaction).
 *
 * Palette:
 *   #2b6cb0  brand blue (active states, ADD TO CART)
 *   #1b4f7a  darker navy (hover, course-number)
 *   #e5e7eb  borders
 *   #6b7280  muted gray
 *   #374151  body text
 * ===================================================================== */

#ce-courses {
    color: #374151;
    font-family: inherit;
}

#ce-courses *,
#ce-courses *::before,
#ce-courses *::after {
    box-sizing: border-box;
}

#ce-courses .container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* =====================================================================
 * SVG SIZE GUARDRAILS — caps any SVG so it can never balloon.
 * Belt-and-suspenders fix for the "giant black circle" bug.
 * ===================================================================== */
#ce-courses svg {
    max-width: 100%;
    max-height: 100%;
}
#ce-courses .icon {
    width: 18px !important;
    height: 18px !important;
}

/* =====================================================================
 * SIDEBAR — matched to staging screenshot
 *
 * Pale blue background, centered dark-navy header, white search box and
 * filter pills with no borders, blue active pill, quiet reset button.
 * ===================================================================== */
#ce-courses .sidebar {
    flex: 0 0 290px;
    background: #d9e7f3;
    border-radius: 16px;
    padding: 26px 22px;
    /* Sticky to follow scroll. No height constraint or overflow rule
       so it grows naturally and never shows an internal scrollbar. */
    position: sticky;
    top: 60px;
    align-self: flex-start;
}

#ce-courses .sidebar-header {
    text-align: center;
    margin: 0 0 22px 0;
    font-size: 1.7rem;             /* large header to match screenshot */
    font-weight: 800;
    color: #1b4f7a;
    line-height: 1.2;
    letter-spacing: 0;
}

#ce-courses .search-box {
    margin-bottom: 18px;
}

#ce-courses .search {
    width: 100%;
    padding: 10px 15px;
    background: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.92rem;
    color: #374151;
    outline: none;
    box-shadow: none;
    transition: box-shadow 0.15s;
}
#ce-courses .search::placeholder {
    color: #9ca3af;
}
#ce-courses .search:focus {
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18);
}

/* Filter group: only the active one renders */
#ce-courses .filter-group {
    display: none;
}
#ce-courses .filter-group.active {
    display: block;
}

#ce-courses .filter {
    display: block;
    background: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 10px 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: none;
}
#ce-courses .filter:hover {
    background: #1b4f7a;
    color: #fff;
}
#ce-courses .filter.active {
    background: #1b4f7a;            /* match original */
    color: #fff;
    font-weight: 700;
}

#ce-courses .reset-btn {
    width: 100%;
    margin-top: 14px;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid #c2d4e6;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
}
#ce-courses .reset-btn:hover {
    background: #f3f7fb;
    color: #1b4f7a;
    border-color: #a8bfd4;
}

/* =====================================================================
 * MAIN AREA
 * ===================================================================== */
#ce-courses .main {
    flex: 1;
    min-width: 0; /* prevents flex children from overflowing */
}

/* Sticky H1 + tabs wrapper */
#ce-courses .head_main {
    position: sticky;
    top: 32px; /* matches WP admin bar offset for logged-in users */
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 0;
    margin-bottom: 18px;
}
body:not(.admin-bar) #ce-courses .head_main {
    top: 0;
}

#ce-courses .main h1,
#ce-courses .head_main h1 {
    text-align: center;
    margin: 0 0 14px 0;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    color: #042C53 !important;
    line-height: 1.25 !important;
}

/* =====================================================================
 * TABS (Live | Self-Paced)
 * ===================================================================== */
#ce-courses .tabs {
    display: flex;
    gap: 0;
    background: #F1F5F9;
    border-radius: 999px;
    padding: 4px;
    margin: 0 auto;
    max-width: 520px;
}

#ce-courses .tab {
    flex: 1;
    text-align: center;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
#ce-courses .tab.active {
    background: #084FBE;
    color: #fff;
}

/* =====================================================================
 * TAB CONTENT (cards container)
 *
 * Baseline rule prevents flash of all cards on first load:
 * only the active tab's cards render until JS swaps.
 * ===================================================================== */
#ce-courses .tabs_cards {
    display: none;
}
#ce-courses .tabs_cards.active {
    display: block;
}

/* =====================================================================
 * CARDS GRID
 * ===================================================================== */
#ce-courses .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 25px;
}

#ce-courses .card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s, box-shadow 0.15s;
}
#ce-courses .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Card image area — fixed 250px height to match original */
#ce-courses .card-img {
    position: relative;
}
#ce-courses .card-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Category badge — top-left, with curved bottom-right corner */
#ce-courses .badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px;
    background: #2b6cb0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 0 0 15px 0;
}

/* Per-category badge tints — match original simple class names */
#ce-courses .badge.Agency    { background: #1e3a5f; }    /* dark blue */
#ce-courses .badge.Contracts { background: #3b82f6; }    /* blue */
#ce-courses .badge.Ethics    { background: #d851e2; }    /* purple */
#ce-courses .badge.Risk      { background: #f59e0b; }    /* orange */
#ce-courses .badge.Property  { background: #4bb549; }    /* green */
#ce-courses .badge.General   { background: #f57547; }    /* red */
#ce-courses .badge.Law       { background: #1f2937; }    /* almost black */
#ce-courses .badge.Broker    { background: #6366f1; }    /* indigo */
#ce-courses .badge.Business  { background: #475569; }    /* slate */

/* Hours circle — bottom-left, 50x50 to match original */
#ce-courses .hours {
    position: absolute;
    bottom: -20px;
    left: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0F5EAA;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#ce-courses .hours span {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
#ce-courses .hours small {
    font-size: 10px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}

/* Card body — match original padding and typography */
#ce-courses .card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#ce-courses .card-body h4 {
    margin: 0;
    color: #0F5EAA;
    font-size: 18px;
    font-weight: 600;
    padding-top: 15px;
    line-height: 1.3;
}
#ce-courses .card-body h4 .course-number {
    color: #0F5EAA;
    font-weight: 600;
}

#ce-courses .course-date {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin: 6px 0 0 0;
}

#ce-courses .card-body h3 {
    margin: 10px 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    color: #111827;
}
/* Date line above the title — same h3 styling but smaller breathing room */
#ce-courses .card-body h3 .card-date {
    display: block;
    margin-bottom: 10px;
}
/* Course title — block element with no top margin (date span handles spacing) */
/* Clamps to 2 lines max with ellipsis if longer. Universal for Live and Self-Paced cards. */
#ce-courses .card-body h3 .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
#ce-courses .tabs_cards .card-body h3 {
    min-height: 52px;
}

#ce-courses .price {
    font-size: 18px;
    font-weight: 600;
    color: #1b4f7a;
    margin: auto 0 14px 0;
}

/* Buttons */
#ce-courses .btns {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

#ce-courses .btns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    text-align: center;
    line-height: 1.2;
    width: 50%;
}

#ce-courses .btns .primary {
    background: #2b6cb0;
    color: #fff;
}
#ce-courses .btns .primary:hover {
    background: #1b4f7a;
}
#ce-courses .btns .primary svg {
    fill: #fff;
}

#ce-courses .btns .secondary {
    background: #fff;
    color: #2b6cb0;
    border: 1px solid #2b6cb0;
}
#ce-courses .btns .secondary:hover {
    background: #f3f7fb;
    color: #1b4f7a;
    border-color: #1b4f7a;
}
#ce-courses .btns .secondary svg {
    fill: currentColor;
}

/* =====================================================================
 * MOBILE FILTER TOGGLE BUTTON + OVERLAY
 * Hidden on desktop; visible at <=991px viewport.
 * ===================================================================== */
#ce-courses .filter-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    padding: 12px 18px;
    background: #2b6cb0;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#ce-courses .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}
#ce-courses .overlay.active {
    display: block;
}

/* =====================================================================
 * RESPONSIVE BREAKPOINTS
 * ===================================================================== */

/* Tablet: 2-col cards */
@media (max-width: 1100px) {
    #ce-courses .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: drawer-style sidebar, sticky off, single-col cards */
@media (max-width: 991px) {
    /* Hide " CE" suffix in tabs to keep labels on one line */
    #ce-courses .tabs .ce-suffix {
        display: none;
    }

    #ce-courses .container {
        flex-direction: column;
        padding: 0 12px;
        gap: 0;
    }

    /* Sidebar becomes a slide-in drawer */
    #ce-courses .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 320px !important;
        max-width: 90vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        z-index: 1000 !important;
        border-radius: 0 !important;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2) !important;
        align-self: auto !important;
        overflow-y: auto !important;
        transition: left 0.25s ease;
    }
    #ce-courses .sidebar.active {
        left: 0 !important;
    }
    body.admin-bar #ce-courses .sidebar {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }

    /* Add ✕ close button to sidebar header (handled in filters.js) */
    #ce-courses .sidebar-header {
        position: relative;
        padding-right: 36px;
    }
    #ce-courses .sidebar-header::after {
        content: "✕";
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 18px;
        color: #6b7280;
        cursor: pointer;
        border-radius: 50%;
    }

    /* Show the mobile filter button */
    #ce-courses .filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Drop sticky behavior on mobile (saves vertical space) */
    #ce-courses .head_main {
        position: static !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 12px 0;
    }

    #ce-courses .main h1,
    #ce-courses .head_main h1 {
        font-size: 1.55rem !important;
    }

    #ce-courses .main {
        width: 100%;
    }

    #ce-courses .tab {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
}

/* Small phones: 1-col cards */
@media (max-width: 600px) {
    #ce-courses .cards {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
/* =====================================================================
 * CREDITS BANNER (injected by filters.js INSIDE .head_main, right
 * after the toggle, when a logged-in student has Live/ZOOM credits
 * AND the Live tab is active).
 *
 * Behaviorally:
 *   - Hidden by default (no .visible class)
 *   - JS adds .visible when credits > 0 AND Live tab is active
 *   - Lives inside the sticky .head_main group so it stays pinned
 *     under the toggle as the user scrolls
 * ===================================================================== */
#ce-courses .ce-sticky-credits {
    /* Hidden default — JS toggles .visible based on credits + active tab */
    display: none;
    margin: 12px 0 0 0;
    background: #F0F6FE;
    color: #084FBE;
    border: 1px solid rgba(8, 79, 190, 0.15);
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(8, 79, 190, 0.06);
}
#ce-courses .ce-sticky-credits.visible {
    display: block;
}
#ce-courses .ce-sticky-credits__inner {
    max-width: 800px;
    margin: 0 auto;
}
#ce-courses .ce-sticky-credits__name {
    font-weight: 700;
}
#ce-courses .ce-sticky-credits__count {
    font-weight: 700;
    font-size: 1.15em;
    color: #084FBE;
}
/* Mobile: tighter padding */
@media (max-width: 600px) {
    #ce-courses .ce-sticky-credits {
        padding: 10px 12px;
        font-size: 0.88rem;
    }
}

/* =====================================================================
 * ENROLLMENT STATE (Currently Enrolled / Course Completed)
 *
 * Per-user state is fetched by filters.js after page load via
 * /wp-json/ce/v1/enrollment-status. Until that fetch resolves, the
 * #ce-courses root has no .user-state-resolved class. We use that
 * gate to hide the price + buttons strip during the brief moment
 * between HTML render and REST response — preventing button-text flicker.
 *
 * For logged-out users, the fetch is skipped entirely and
 * .user-state-resolved is added immediately, so they see the default
 * state with no perceptible delay.
 *
 * State rules:
 *   .card.is-enrolled   → hide price; ADD TO CART → "Enrolled" (status only),
 *                          COURSE INFO → "Go to Course"
 *   .card.is-completed  → hide price; ADD TO CART → "Completed" (status only),
 *                          COURSE INFO → "View Certificate" (links to cert)
 *   default (no class)  → price visible; ADD TO CART + COURSE INFO normal
 * ===================================================================== */

/* Hide price + buttons during the brief moment before user state is known.
   Cards, images, badges, hours, titles, dates all render normally. */
#ce-courses:not(.user-state-resolved) .price,
#ce-courses:not(.user-state-resolved) .btns {
    visibility: hidden;
}

/* When the user state is resolved (or it was a guest), reveal price+buttons. */
#ce-courses.user-state-resolved .price,
#ce-courses.user-state-resolved .btns {
    visibility: visible;
}

/* ----- Currently Enrolled -----
 * ⚠ is-enrolled-other SHARES THESE RULES, IT DOES NOT GET ITS OWN. Scott, 14 Oct 2026: "if a
 * student is enrolled in a course on either the calendar or course cards, the button should say
 * Enrolled." Enrolment is a fact about the COURSE, so a seat in this cohort and a seat in another
 * date of the same course present identically. A separate colour here was a second idea of the
 * same state, which is the fault this whole arc has been removing. */
#ce-courses .card.is-enrolled .price,
#ce-courses .card.is-enrolled-other .price {
    display: none;
}
#ce-courses .card.is-enrolled .primary,
#ce-courses .card.is-enrolled-other .primary {
    /* Becomes a non-clickable status label. */
    pointer-events: none;
    cursor: default;
}

/* ⚠ THE BUTTON LABELS USED TO BE INVENTED HERE, with ::before content and font-size:0 hiding the
   real text: "ADD TO CE PACKAGE", "ENROLLED", "COMPLETED", "GO TO COURSE", "VIEW CERTIFICATE".
   Every one had drifted from what the product page and calendar show for the same state — the
   resolver says "Add to Package", not "ADD TO CE PACKAGE". filters.js now writes the real text
   from the resolver, so there is one set of words. Do not reintroduce a label here: a second
   place to spell these is how they diverged in the first place, and CSS text is invisible to
   translation and unreliable for assistive technology.

   What legitimately stays below: hiding the price, the non-clickable status treatment, the
   completed shade, and the icon swaps. Those are presentation the resolver has no opinion on. */


/* ⚠ THE CAPS ARE PRESENTATION, AND THEY LIVE HERE. The cards were designed all-caps, and the
   server used to render the text that way ("ADD TO CART"). Now that filters.js writes the real
   label from the resolver, that text arrives in sentence case ("Add to Cart", "Completed - Go to
   Course"), so without this rule every button on the page quietly changed appearance — caught in
   a browser on staging, not in review. Uppercasing in CSS keeps the look and leaves the resolver
   the single source of the WORDS, which is the whole point of the split. */
#ce-courses .card .btns .btn-label {
    text-transform: uppercase;
}

/* ----- Course Completed ----- */
#ce-courses .card.is-completed .price {
    display: none;
}
#ce-courses .card.is-completed .primary {
    pointer-events: none;
    cursor: default;
    /* Slightly different shade to distinguish from enrolled state */
    background: #1b4f7a;
}
/* When .btn-label::before sets content via the state classes above,
   we hide the original label text. The shortcode renders each button
   label inside a .btn-label span so we can target it cleanly. */
/* Hide the SVG icons (cart, book) when card has enrolled/completed state */
#ce-courses .card.is-enrolled .btns .icon,
#ce-courses .card.is-enrolled-other .btns .icon,
#ce-courses .card.is-completed .btns .icon {
    display: none;
}

/* =====================================================================
 * USES-CREDIT button text swap (Live/ZOOM cards in default state when
 * user has Live/ZOOM credits).
 *
 * JS adds .uses-credit class to qualifying cards. CSS then:
 *   - Swaps the .primary button label from "ADD TO CART" to "ADD TO CE PACKAGE"
 *   - Hides the original cart icon
 *   - Adds a plus-sign icon via SVG background (data URI)
 *   - Hides the price (the credit covers it)
 *
 * ⚠ THIS BLOCK USED TO END "Click handler in filters.js intercepts and runs
 *   redeem flow". There is no such handler and no redeem route. The button is
 *   an ordinary add-to-cart link wearing a different label, which is also what
 *   the product page and the calendar do for a credit holder: the credit is
 *   taken at checkout, not here.
 * ===================================================================== */

/* Hide the price — credit covers the cost, no $ needed. */
#ce-courses .card.uses-credit .price {
    display: none;
}

/* ⚠ THE .primary RELABEL IS GONE, AND MUST NOT COME BACK. It painted the ORDINARY CART LINK as
 * "+ ADD TO PACKAGE" -- same words and same plus icon as the real credit button, a different
 * destination. Two controls, one promise. The resolver now refuses to claim HAS_CREDIT unless
 * Package_Button::available_for_product() agrees, so a .uses-credit card ALWAYS receives the real
 * button in place of .primary and there is nothing left here to restyle. Scott, 14 Oct 2026:
 * "both pages need to use the same function, not seperate functions."
 * The plus-and-caps treatment moved to the real button, at the end of this file. */

/* =====================================================================
 * TOAST (confirm/cancel + auto-dismiss for credit redemption)
 * Slides up from bottom-right on desktop, bottom-center on mobile.
 * ===================================================================== */
.ce-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    padding: 16px 20px;
    max-width: 380px;
    min-width: 280px;
    font-family: inherit;
    color: #1f2937;
    line-height: 1.5;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}
.ce-toast.visible {
    transform: translateY(0);
    opacity: 1;
}

.ce-toast--error {
    border-color: #fecaca;
    background: #fff5f5;
    color: #991b1b;
}

.ce-toast__msg {
    font-size: 14px;
    margin-bottom: 12px;
}
.ce-toast__msg:last-child {
    margin-bottom: 0;
}

.ce-toast__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ce-toast__btn {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ce-toast__btn:hover {
    background: #f3f4f6;
}
.ce-toast__btn--confirm {
    background: #1b4f7a;
    border-color: #1b4f7a;
    color: #fff;
}
.ce-toast__btn--confirm:hover {
    background: #143957;
    border-color: #143957;
}

/* Mobile: bottom-center, full-width-ish */
@media (max-width: 600px) {
    .ce-toast {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
        min-width: 0;
    }
}

/* =====================================================================
 * Instructions button (Live/ZOOM How-To link)
 *
 * Sits between the tabs and the credits banner inside .head_main.
 * Self-contained styling; will not affect any other button on the page.
 * ===================================================================== */
#ce-courses .ceasap-instructions-btn-wrap {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
    width: 100%;
}
#ce-courses .ceasap-instructions-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: #084FBE;
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(8, 79, 190, 0.2), 0 1px 2px rgba(8, 79, 190, 0.08);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    cursor: pointer;
    max-width: 100%;
}
#ce-courses .ceasap-instructions-btn:hover,
#ce-courses .ceasap-instructions-btn:focus-visible {
    background: #063e9b;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(8, 79, 190, 0.3), 0 2px 4px rgba(8, 79, 190, 0.12);
    outline: none;
}
#ce-courses .ceasap-instructions-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(8, 79, 190, 0.2);
}
#ce-courses .ceasap-instructions-btn__text {
    text-align: center;
}
#ce-courses .ceasap-instructions-btn__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 0.18s ease;
}
#ce-courses .ceasap-instructions-btn:hover .ceasap-instructions-btn__icon {
    transform: translate(2px, -2px);
}
@media (max-width: 640px) {
    #ce-courses .ceasap-instructions-btn {
        font-size: 0.875rem;
        padding: 0.8125rem 1.25rem;
        gap: 0.5rem;
    }
    #ce-courses .ceasap-instructions-btn__icon {
        width: 14px;
        height: 14px;
    }
}
@media (max-width: 420px) {
    #ce-courses .ceasap-instructions-btn {
        font-size: 0.8125rem;
        padding: 0.75rem 1rem;
    }
}
/* Card CE number. Was injected with wp_add_inline_style() while this file lived in uploads
   and could not be changed by a deploy; it belongs here now. */
#ce-courses .card-ce-no { display: block; margin-top: 4px; }

/* =====================================================================
 * THE CREDIT BUTTON HAS TO BORROW THE CARD'S BUTTON BOX
 *
 * ⚠ `#ce-courses .btns a` SIZES EVERY BUTTON IN A CARD, AND IT IS AN ELEMENT
 * SELECTOR. The credit control is a <button> inside .ce-card-credit-action >
 * .ce-package-wrap, so not one of those rules reaches it. Left alone it keeps
 * the PRODUCT PAGE's metrics -- 15px text, 11px/22px padding, and a
 * .ce-package-wrap margin of 18px 0 -- which is correct there and wrong in a
 * 335x250 card. Measured on production: the pair went from 50.6px tall to 96px
 * (60px button + 36px of wrap margin), the wider button squeezed COURSE INFO
 * until its label wrapped, and because the button sits inside a block wrapper
 * it did not fill the stretched row while COURSE INFO did -- so the two
 * controls were visibly different sizes. Reported by Scott, 14 Oct 2026.
 *
 * These rules restate `#ce-courses .btns a` for the button and make both
 * wrappers transparent to the flex row, so the credit card's pair measures the
 * same as every other card's. Scoped to #ce-courses: the product page and the
 * session panel keep the larger control, which suits them.
 * ===================================================================== */
#ce-courses .btns .ce-card-credit-action,
#ce-courses .btns .ce-card-credit-action .ce-package-wrap {
    display: flex;
    width: 50%;
    min-width: 0;
    margin: 0;
}

#ce-courses .btns .ce-card-credit-action .ce-package-wrap {
    width: 100%;
}

#ce-courses .btns .ce-card-credit-action .ce-package-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: 8px 6px;
    border: 0;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    /* The resolver owns the WORDS ("Add to Package"); the caps are presentation, exactly as
       `.btns .btn-label` does for every other button on the card. */
    text-transform: uppercase;
    /* Match the card's own primary, not the product page's -- this button now sits in a grid
       beside ADD TO CART and ENROLLED, and a second blue reads as a second kind of control. */
    background: #2b6cb0;
    color: #fff;
}

#ce-courses .btns .ce-card-credit-action .ce-package-button:hover,
#ce-courses .btns .ce-card-credit-action .ce-package-button:focus {
    background: #1b4f7a;
    border: 0;
    color: #fff;
}

/* The plus, moved here from the old .primary relabel: same icon, now on the control that
   actually spends the credit. */
#ce-courses .btns .ce-card-credit-action .ce-package-button::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center/contain no-repeat;
    flex-shrink: 0;
}