﻿/* AC Integration – frontend shortcode styles */

/* ── Generic field ────────────────────────────────────────── */
.ac-field { display: inline; }
.ac-field__label { font-weight: 600; margin-right: .3em; }
.ac-field--block,
div.ac-field,
p.ac-field { display: block; }

/* ── Media list ───────────────────────────────────────────── */
.ac-media {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1.2em;
}
.ac-media__item { display: inline-flex; align-items: center; gap: .35em; }
.ac-media__link {
    text-decoration: none;
    color: inherit;
}
.ac-media__link:hover { text-decoration: underline; }

/* ── Minutes table / dl / inline ─────────────────────────── */
.ac-minutes--table {
    width: 100%;
    border-collapse: collapse;
}
.ac-minutes--table th,
.ac-minutes--table td {
    text-align: left;
    padding: .4em .6em;
    border-bottom: 1px solid #e2e2e2;
}
.ac-minutes--table thead th { font-weight: 600; }

.ac-minutes--dl { margin: 0; }
.ac-minutes--dl dt { font-weight: 600; float: left; clear: left; min-width: 14em; }
.ac-minutes--dl dd { margin-left: 14em; }

.ac-minutes--inline { display: flex; flex-wrap: wrap; gap: .4em 1em; }
.ac-minutes__label  { font-weight: 600; }

/* ── States table ─────────────────────────────────────────── */
.ac-states {
    width: 100%;
    border-collapse: collapse;
}
.ac-states th,
.ac-states td {
    text-align: left;
    padding: .4em .6em;
    border-bottom: 1px solid #e2e2e2;
}
.ac-states thead th { font-weight: 600; background: #f8f8f8; }
.ac-states-empty { color: #888; font-style: italic; }

/* ── Specialties ──────────────────────────────────────────── */
.ac-specialties--table {
    width: 100%;
    border-collapse: collapse;
}
.ac-specialties--table th,
.ac-specialties--table td {
    text-align: left;
    padding: .4em .6em;
    border-bottom: 1px solid #e2e2e2;
}

.ac-specialties--list { list-style: disc; padding-left: 1.4em; }

.ac-specialties--inline { display: flex; flex-wrap: wrap; gap: .4em 1em; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATE BUNDLE FILTER  [ac_bundle_state_filter]
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-bundle-filter {
    display: inline-flex;
    flex-direction: column;
    gap: .5em;
}

/* ── Select wrapper ───────────────────────────────────────────────────────
   The <div> provides the visible white box (border, radius, background).
   The <select> inside is transparent — completely immune to theme overrides
   that strip background-color on :focus/:active states.
   ─────────────────────────────────────────────────────────────────────── */
.ac-bundle-filter__select-wrap {
    position: relative;
    display: inline-block;
    background: #fff;
    border: 1.5px solid #d0d7de;
    border-radius: 8px;
    min-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    transition: border-color .2s, box-shadow .2s;
    z-index: 5;         /* sit above hero overlays */
    cursor: pointer;
    overflow: hidden;   /* clip any theme border on the <select> that bleeds out */
}

/* Chevron drawn via pseudo-element on the wrapper */
.ac-bundle-filter__select-wrap::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
}

.ac-bundle-filter__select-wrap:focus-within {
    border-color: #00b4d8;
    box-shadow: 0 0 0 3px rgba(0,180,216,.18);
}

/* The select itself — transparent, fills the wrapper */
.ac-bundle-filter__select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    width: 100%;
    padding: .65em 2.8em .65em 1em;
    font-size: 1rem;
    color: #222;
    cursor: pointer;
    line-height: 1.4;
    display: block;
    margin: 0 !important;   /* some themes add bottom margin to selects */
}

.ac-bundle-filter__empty {
    color: #888;
    font-style: italic;
}

/* ── State prompt (shown inside [ac_bundle_grid] when no state selected) ── */
.ac-bundle-grid__state-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
}

.ac-bundle-grid__state-prompt-icon svg {
    width: 64px;
    height: 64px;
    opacity: .7;
}

.ac-bundle-grid__state-prompt-text {
    font-size: 1.05rem;
    color: #6a7f90;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUNDLE GRID  [ac_bundle_grid]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper (persistent — JS targets this) ───────────────────────── */
.ac-bundle-grid-wrap {
    position: relative;
}

/* ── Loading overlay ────────────────────────────────────────────────────── */
/*
   Uses the HTML `hidden` attribute for initial hide — works even before CSS loads.
   JS removes the attribute to show (display reverts to `flex` from the rule below).
*/
.ac-bundle-grid-loader {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* The `hidden` attribute overrides everything with display:none in browsers.
   When JS removes `hidden`, the element gets display:flex from the rule above. */
.ac-bundle-grid-loader[hidden] {
    display: none;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.ac-bundle-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ac-bundle-spinner__ring {
    width: 48px;
    height: 48px;
    border: 4px solid #e0ecf3;
    border-top-color: #0096c7;
    border-radius: 50%;
    animation: ac-spin 0.75s linear infinite;
}

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

.ac-bundle-spinner__text {
    font-size: .85rem;
    font-weight: 600;
    color: #5a7a90;
    margin: 0;
    letter-spacing: .02em;
}

/* ── Grid container ─────────────────────────────────────────────────────── */
.ac-bundle-grid {
    display: grid;
    gap: 28px;
    width: 100%;
    box-sizing: border-box;
}

/* 4-column default (desktop ≥ 1024 px) */
.ac-bundle-grid--4col { grid-template-columns: repeat(4, 1fr); }
.ac-bundle-grid--3col { grid-template-columns: repeat(3, 1fr); }
.ac-bundle-grid--2col { grid-template-columns: repeat(2, 1fr); }
.ac-bundle-grid--1col { grid-template-columns: 1fr; }

/* 4-col → 3 at ≤ 1100 px */
@media (max-width: 1100px) {
    .ac-bundle-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
/* 3-col → 2 at ≤ 820 px */
@media (max-width: 820px) {
    .ac-bundle-grid--4col,
    .ac-bundle-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
/* 1-col on mobile (≤ 540 px) */
@media (max-width: 540px) {
    .ac-bundle-grid--4col,
    .ac-bundle-grid--3col,
    .ac-bundle-grid--2col { grid-template-columns: 1fr; }
}

.ac-bundle-grid__empty {
    color: #888;
    font-style: italic;
    grid-column: 1 / -1;
    text-align: center;
    padding: 2em 0;
}

/* ── Individual card ────────────────────────────────────────────────────── */
.ac-bundle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    padding: 32px 24px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    border: 1px solid #eef1f4;
    transition: transform .22s ease, box-shadow .22s ease;
    box-sizing: border-box;
}

.ac-bundle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,.12);
}

/* ── Circular image ─────────────────────────────────────────────────────── */
.ac-bundle-card__image-wrap {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e4edf2;
    margin-bottom: 18px;
    flex-shrink: 0;
    background: #f0f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * Hide alt-text rendered inside a broken <img>.
     * The img pixel content is unaffected by color — only the fallback text is.
     */
    color: transparent;
    font-size: 0;
}

.ac-bundle-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    color: transparent; /* belt-and-suspenders: hide alt text on the img itself */
}

.ac-bundle-card__image--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

.ac-bundle-card__image--placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── State name ─────────────────────────────────────────────────────────── */
.ac-bundle-card__state {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #7a8fa0;
    text-transform: uppercase;
    margin: 0 0 14px;
    line-height: 1.2;
}

/* ── Buy Now button ─────────────────────────────────────────────────────── */
.ac-bundle-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .2s, transform .15s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
}

.ac-bundle-card__btn--buy {
    background: linear-gradient(135deg, #00c9e4 0%, #0096c7 100%);
    color: #fff !important;
    padding: .7em 1em;
    margin-bottom: 18px;
    box-shadow: 0 3px 10px rgba(0,150,199,.3);
}

.ac-bundle-card__btn--buy:hover {
    background: linear-gradient(135deg, #00d9f7 0%, #007eb0 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,150,199,.4);
    color: #fff !important;
}

.ac-bundle-card__btn-label {
    white-space: nowrap;
}

/* ── Price inside Buy Now ───────────────────────────────────────────────── */
.ac-price {
    font-size: 1em;
    font-weight: 700;
    white-space: nowrap;
}

.ac-price__cents {
    font-size: .6em;
    vertical-align: super;
    line-height: 1;
    font-weight: 700;
}

/* ── Bundle title ───────────────────────────────────────────────────────── */
.ac-bundle-card__title {
    font-size: .92rem;
    font-weight: 800;
    color: #1a2b3c;
    letter-spacing: .04em;
    margin: 0 0 10px;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ── Credits ────────────────────────────────────────────────────────────── */
.ac-bundle-card__credits {
    font-size: .92rem;
    font-weight: 700;
    color: #0096c7;
    letter-spacing: .06em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.ac-bundle-card__live-credits {
    font-size: .78rem;
    font-weight: 500;
    color: #555;
    margin: 0 0 18px;
    font-style: italic;
}

/* ── View Details button ────────────────────────────────────────────────── */
.ac-bundle-card__btn--details {
    background: transparent;
    color: #555 !important;
    border: 1.5px solid #cdd5de;
    padding: .6em 1em;
    font-size: .88rem;
    font-weight: 600;
    margin-top: auto;
}

.ac-bundle-card__btn--details:hover {
    border-color: #0096c7;
    color: #0096c7 !important;
    background: rgba(0,150,199,.05);
    transform: none;
}

/* ── [ac_bundle_buy_btn] wrapper — stacks buy + trial vertically ────────── */
.acbb-wrap {
    display: flex;
    flex-direction: column;
}

/* ── Start Free Trial button ────────────────────────────────────────────── */
.ac-bundle-card__btn--trial {
    background: #c0392b;
    color: #fff !important;
    border: 1.5px solid #c0392b;
    padding: .6em 1em;
    font-size: .88rem;
    font-weight: 600;
    margin-top: 8px;
}

.ac-bundle-card__btn--trial:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff !important;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_unlimited_plans]  — Unlimited CLE pricing cards
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-unlimited-plans {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;   /* cards anchor to the bottom — featured hangs lower */
    padding: 40px 20px 20px;
    /* No background — controlled by the WPBakery section wrapper */
}

/* Non-featured card — matches .acunl-hero-card on live site */
.ac-unlimited-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e4e8ec;
    border-radius: 12px;
    padding: 27px 11px 24px;
    width: 167px;
    flex: 0 0 167px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: rgba(20, 40, 60, 0.14) 0 8px 22px;
    margin-bottom: 20px;   /* lifts card up from the flex-end baseline */
}

/* Featured card — matches .acunl-hero-card + .acunl-hero-card on live site */
.ac-unlimited-card--featured {
    width: 212px;
    flex: 0 0 212px;
    padding: 36px 16px 27px;
    margin-bottom: 0;
    margin-left: -4px;
    box-shadow: rgba(0, 0, 0, 0.28) 0 12px 30px;
    z-index: 2;
}

/* Badge */
.ac-unlimited-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2979b4;
    color: #ffffff;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 5px;
    white-space: nowrap;
}

/* Heading — matches .acunl-hero-card h3 on the live site */
.ac-unlimited-card__heading {
    font-family: Inter, "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: rgb(22, 50, 79) !important;
    margin: 0 0 18px;
}

/* Icon circle — matches .acunl-hero-icon */
.ac-unlimited-card__icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgb(0, 68, 139);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 29px;
}

/* Duration label — matches .acunl-hero-term */
.ac-unlimited-card__duration {
    font-size: 15px;
    font-weight: 400;
    color: rgb(60, 72, 84) !important;
    margin: 0 0 4px;
    text-transform: none;
    letter-spacing: 0;
}

/* Price — matches .acunl-hero-price: full number at 36px, only $ is superscript */
.ac-unlimited-card__price {
    margin: 0 0 20px;
    line-height: 1;
    color: rgb(15, 37, 64) !important;
    font-size: 36px;
    font-weight: 700;
}

/* $ superscript — matches sup inside .acunl-hero-price */
.ac-unlimited-card__currency {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    top: 5px;
    vertical-align: top;
}

@media (max-width: 600px) {
    .ac-unlimited-plans {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-top: 32px;
        gap: 20px;
    }
    .ac-unlimited-card,
    .ac-unlimited-card--featured {
        flex: 1 1 160px;
        width: auto;
        margin-bottom: 0;
        margin-left: 0;
    }
}

/* Buy button */
.ac-unlimited-card__buy-btn {
    display: inline-block;
    margin-top: auto;
    background: #0d1b2a;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .7em 1.8em;
    border-radius: 30px;
    transition: background .2s ease;
    text-transform: uppercase;
}

.ac-unlimited-card__buy-btn:hover {
    background: #1a3d6e;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_unlimited_cards]  — flat white pricing cards (LMS-style layout)
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-unlimited-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

.ac-unlimited-card-v2 {
    flex: 1 1 300px;
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* Heading */
.ac-unlimited-card-v2__heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d2045;
    margin: 0 0 10px;
}

/* Price row */
.ac-unlimited-card-v2__price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0d2045;
    margin: 0 0 14px;
    line-height: 1.1;
}

.ac-unlimited-card-v2__duration {
    font-size: 1rem;
    font-weight: 600;
    color: #0d2045;
}

/* Description */
.ac-unlimited-card-v2__description {
    font-size: .88rem;
    color: #555;
    line-height: 1.5;
    margin: 0 0 18px;
}

/* Feature checklist */
.ac-unlimited-card-v2__features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.ac-unlimited-card-v2__features li {
    position: relative;
    padding-left: 22px;
    font-size: .9rem;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.ac-unlimited-card-v2__features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #1a6fb5;
    font-weight: 700;
}

/* Buy button */
.ac-unlimited-card-v2__buy-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #1a5fa8;
    color: #ffffff !important;
    text-decoration: none !important;
    text-align: center;
    font-size: .95rem;
    font-weight: 700;
    padding: .85em 1.2em;
    border-radius: 6px;
    transition: background .2s ease;
    margin-bottom: 14px;
}

.ac-unlimited-card-v2__buy-btn:hover {
    background: #0d4580;
}

/* Below-button links */
.ac-unlimited-card-v2__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ac-unlimited-card-v2__link {
    font-size: .82rem;
    color: #1a6fb5;
    text-decoration: underline;
    text-align: center;
}

.ac-unlimited-card-v2__link:hover {
    color: #0d4580;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_unlimited_buy_btns]  — buy-button row (for dark backgrounds)
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-unlimited-buy-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.ac-unlimited-buy-btns__btn {
    display: inline-block;
    padding: 12px 22.5px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    cursor: pointer;
}

/* First button — solid blue fill */
.ac-unlimited-buy-btns__btn--filled {
    background: #2979b4;
    color: #ffffff !important;
    border: 0.8px solid #2979b4;
}

.ac-unlimited-buy-btns__btn--filled:hover {
    background: #1a6fb5;
    border-color: #1a6fb5;
}

/* Subsequent buttons — ghost/outline on dark background */
.ac-unlimited-buy-btns__btn--outline {
    background: transparent;
    color: #ffffff !important;
    border: 0.8px solid rgba(255, 255, 255, 0.85);
}

.ac-unlimited-buy-btns__btn--outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .08);
}

@media (max-width: 600px) {
    .ac-unlimited-buy-btns {
        flex-direction: column;
        align-items: stretch;
    }
    .ac-unlimited-buy-btns__btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_unlimited_cta]  — dark navy CTA banner with icon + buy buttons
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-unlimited-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

/* Left: icon + copy */
.ac-unlimited-cta__left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 340px;
}

.ac-unlimited-cta__icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ac-unlimited-cta__icon svg {
    display: block;
}

.ac-unlimited-cta__heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    line-height: 1.3;
}

.ac-unlimited-cta__text {
    font-size: .88rem;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    line-height: 1.5;
}

/* Right: buttons */
.ac-unlimited-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.ac-unlimited-cta__btn {
    display: inline-block;
    padding: .65em 1.6em;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.ac-unlimited-cta__btn--filled {
    background: #2a82d0;
    color: #ffffff !important;
    border: 2px solid #2a82d0;
}

.ac-unlimited-cta__btn--filled:hover {
    background: #1a6fb5;
    border-color: #1a6fb5;
}

.ac-unlimited-cta__btn--outline {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, .6);
}

.ac-unlimited-cta__btn--outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .08);
}

@media (max-width: 600px) {
    .ac-unlimited-cta__buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .ac-unlimited-cta__btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_state_selector]  — state tiles ↔ bundle display
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-state-selector {
    width: 100%;
}

/* ── States view ────────────────────────────────────────────────────────── */
.ac-state-selector__states-view {
    transition: opacity .25s ease, transform .25s ease;
}

.ac-state-selector__states-view.ac-ss--leaving {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.ac-state-selector__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0 0 20px;
    letter-spacing: .01em;
}

/* ── State tiles grid ───────────────────────────────────────────────────── */
.ac-state-selector__tiles {
    display: grid;
    gap: 8px;
}

/* Column variants */
.ac-state-selector__tiles--6col { grid-template-columns: repeat(6, 1fr); }
.ac-state-selector__tiles--5col { grid-template-columns: repeat(5, 1fr); }
.ac-state-selector__tiles--4col { grid-template-columns: repeat(4, 1fr); }

/* 6-col → 4 at ≤ 1100px */
@media (max-width: 1100px) {
    .ac-state-selector__tiles--6col,
    .ac-state-selector__tiles--5col { grid-template-columns: repeat(4, 1fr); }
}
/* → 3 at ≤ 820px */
@media (max-width: 820px) {
    .ac-state-selector__tiles--6col,
    .ac-state-selector__tiles--5col,
    .ac-state-selector__tiles--4col { grid-template-columns: repeat(3, 1fr); }
}
/* → 2 at ≤ 540px */
@media (max-width: 540px) {
    .ac-state-selector__tiles--6col,
    .ac-state-selector__tiles--5col,
    .ac-state-selector__tiles--4col { grid-template-columns: repeat(2, 1fr); }
}

/* ── Individual state tile ──────────────────────────────────────────────── */
.ac-state-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .6em .8em;
    background: #f4f8fb;
    border: 1.5px solid #dce8f0;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: #2a4a60;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
    line-height: 1.25;
    word-break: break-word;
    hyphens: auto;
}

.ac-state-tile:hover {
    background: #0096c7;
    border-color: #0096c7;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,150,199,.3);
}

.ac-state-tile:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Bundles view ───────────────────────────────────────────────────────── */
.ac-state-selector__bundles-view {
    opacity: 0;
    transition: opacity .25s ease;
}

.ac-state-selector__bundles-view.ac-ss--entering {
    opacity: 0;
}

.ac-state-selector__bundles-view.ac-ss--visible {
    opacity: 1;
}

.ac-state-selector__bundles-view.ac-ss--leaving {
    opacity: 0;
    transition: opacity .2s ease;
}

.ac-state-selector__bundles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ac-state-selector__selected-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0;
    letter-spacing: .01em;
}

/* ── Back button ────────────────────────────────────────────────────────── */
.ac-state-selector__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1.5px solid #cdd5de;
    border-radius: 7px;
    padding: .45em 1em;
    font-size: .85rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
    white-space: nowrap;
}

.ac-state-selector__back-btn:hover {
    border-color: #0096c7;
    color: #0096c7;
    background: rgba(0,150,199,.05);
}

.ac-state-selector__back-btn svg {
    flex-shrink: 0;
}

/* ── State selector inline loader ───────────────────────────────────────── */
.ac-state-selector__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 0;
}

.ac-state-selector__loader[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_bundle_credits]  — "45.00 Total Credits | 10.50 Specialty Credits"
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-bundle-credits {
    margin: 0 0 1em;
    padding: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
}

.ac-bundle-credits strong {
    font-weight: 700;
font-size: 20px;
}

.ac-bundle-credits__sep {
    display: inline-block;
    padding: 0 .25em;
    color: #7a8fa0;   /* muted separator colour */
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_bundle_features]  — Media Options + Feature 1-6 blocks
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-bundle-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}

/* Each feature / media block */
.ac-bundle-feature {
    margin: 0;
    padding: 0;
}

/* Title row — bold, uppercase-ready, no extra margin between title and text */
.ac-bundle-feature__title {
    margin: 0 0 .2em;
    padding: 0;
    font-weight: 700;
    line-height: 1.3;
}

/* Body text */
.ac-bundle-feature__text {
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Media text is often a pipe-separated list — keep it on one line where possible */
.ac-bundle-feature__text--media {
    white-space: pre-line;   /* honour explicit newlines from the field if any */
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_bundle_media]  — standalone "Media Options :" block
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-bundle-media {
    margin: 0 0 1em;
    padding: 0;
}

.ac-bundle-media__label {
    margin: 0 0 .15em;
    padding: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.ac-bundle-media__text {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #00b0da;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_bundle_buy]  — Buy Now button with price
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-bundle-buy {
    margin: 0;
    padding: 0;
}

.ac-bundle-buy__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .7em 2em;
    border-radius: 4px;
    background: #1a3a5c;
    color: #fff !important;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
    white-space: nowrap;
}

.ac-bundle-buy__btn:hover,
.ac-bundle-buy__btn:focus {
    background: #0d2a47;
    color: #fff !important;
    transform: translateY(-1px);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_bundle_courses]  — course card grid
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-course-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* default: 1 column (mobile-first) */
    grid-template-columns: 1fr;
}

@media (min-width: 540px) {
    .ac-course-grid--2col,
    .ac-course-grid--3col,
    .ac-course-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .ac-course-grid--3col { grid-template-columns: repeat(3, 1fr); }
    .ac-course-grid--4col { grid-template-columns: repeat(4, 1fr); }
}

/* ── Individual course card ─────────────────────────────────────────────── */
.ac-course-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid #dde4ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Course title */
.ac-course-card__title {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.ac-course-card__title a {
    color: inherit;
    text-decoration: none;
}

.ac-course-card__title a:hover {
    text-decoration: underline;
    color: #0096c7;
}

/* Total credits */
.ac-course-card__credits {
    margin: 0;
    padding: 0;
    font-size: .9rem;
    font-weight: 600;
    color: #1a3a5c;
}

/* Specialty credit list */
.ac-course-card__specialties {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ac-course-card__spec {
    font-size: .82rem;
    color: #5a7a9a;
}

/* Footer: View Details button pushed to the bottom of the card */
.ac-course-card__footer {
    margin-top: auto;
    padding-top: .5rem;
}

.ac-course-card__btn {
    display: inline-block;
    padding: .45em 1.2em;
    border-radius: 4px;
    background: #1a3a5c;
    color: #fff !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}

.ac-course-card__btn:hover,
.ac-course-card__btn:focus {
    background: #0d2a47;
    color: #fff !important;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_bundle_course_list]  — table / list layout
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-course-list-wrap {
    overflow-x: auto;   /* scroll horizontally on small screens */
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
}

.ac-course-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    line-height: 1.45;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ac-course-table__head {
    background: #1a3a5c;
    color: #fff;
}

.ac-course-table__th {
    padding: .65rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ac-course-table__th--action { width: 1%;  }   /* shrink to content */
.ac-course-table__th--credits { width: 10%; white-space: nowrap; }
.ac-course-table__th--specialty { width: 20%; }

/* ── Rows ───────────────────────────────────────────────────────────────── */
.ac-course-table__row {
    border-bottom: 1px solid #dde4ec;
    transition: background .15s ease;
}

.ac-course-table__row:nth-child(even) { background: #f7f9fc; }
.ac-course-table__row:hover           { background: #edf4fb; }

.ac-course-table__td {
    padding: .75rem 1rem;
    vertical-align: top;
}

/* Course name link */
.ac-course-table__course-link {
    color: #1a3a5c;
    font-weight: 600;
    text-decoration: none;
}

.ac-course-table__course-link:hover {
    color: #0096c7;
    text-decoration: underline;
}

/* Credits cell */
.ac-course-table__td--credits {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ac-course-table__credit-label {
    font-size: .8rem;
    color: #6b849e;
    font-weight: 400;
}

/* Specialty list */
.ac-course-table__spec-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac-course-table__spec-list li {
    font-size: .82rem;
    color: #5a7a9a;
    padding: .1rem 0;
}

/* Em-dash placeholder */
.ac-course-table__none {
    color: #aab9c8;
}

/* Action button */
.ac-course-table__td--action {
    text-align: right;
    white-space: nowrap;
}

.ac-course-table__btn {
    display: inline-block;
    padding: .35em 1em;
    border: 2px solid #1a3a5c;
    border-radius: 4px;
    color: #1a3a5c !important;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.ac-course-table__btn:hover,
.ac-course-table__btn:focus {
    background: #1a3a5c;
    color: #fff !important;
    text-decoration: none;
}

/* ── Responsive: stack columns on mobile ───────────────────────────────── */
@media (max-width: 768px) {
    .ac-course-table,
    .ac-course-table tbody,
    .ac-course-table__th,
    .ac-course-table__td,
    .ac-course-table__row {
        display: block;
        width: 100%;
    }

    /* thead removed from block rule above so this display:none is never overridden */
    .ac-course-table .ac-course-table__head { display: none; }

    .ac-course-table__row {
        border: 1px solid #dde4ec;
        border-radius: 6px;
        margin-bottom: calc(.75rem + 10px);
        padding: .5rem 0;
    }

    .ac-course-table__td {
        padding: .4rem 1rem;
        text-align: left;
    }

    .ac-course-table__td::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #8aa0b8;
        margin-bottom: .15rem;
    }

    .ac-course-table__td[data-label=""]::before { display: none; }
    .ac-course-table__td--empty { display: none; }
    .ac-course-table__td--action {
        text-align: center;
        border-bottom: none;
        padding: 0;                        /* remove all cell padding — button fills the space */
    }
    .ac-course-table__td--action .ac-course-table__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 2px solid #dde4ec;
        border-radius: 0 0 6px 6px;
        padding: .85rem 1rem;
        background: none;
        font-size: 1rem;                  /* slightly larger than the default .82rem */
        color: #1a3a5c !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ac_related_bundles]  — "More Bundles for [State]" section
   ═══════════════════════════════════════════════════════════════════════════ */

.ac-related-bundles {
    margin-top: 2.5em;
}

/* Heading — "More Bundles for Texas" */
.ac-related-bundles__title {
    margin: 0 0 1em;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a3a5c;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATE ARCHIVE SHORTCODES
   [ac_state_title]  [ac_state_bundles]  [ac_state_courses]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── [ac_state_title] ────────────────────────────────────────────────────── */
.ac-state-title {
    margin: 0 0 .5em;
    padding: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ── [ac_state_bundles] ──────────────────────────────────────────────────── */
/* Inner .ac-bundle-grid already provides columns, gap, and card styles.     */
/* This wrapper just gives us a predictable hook for spacing overrides.       */
.ac-state-bundles {
    /* intentionally minimal — inherits grid styles from .ac-bundle-grid */
}

.ac-state-bundles__title {
    margin: 0 0 .75em;
    padding: 0;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── [ac_state_courses] — heading + Load More section ───────────────────── */
.ac-state-courses-wrap {
    margin-top: 1em;
}

.ac-state-courses__title {
    margin: 0 0 .75em;
    padding: 0;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}

/* Footer: centered Load More button */
.ac-state-courses__footer {
    margin-top: 1.75em;
    text-align: center;
}

/* Load More button — same brand palette as card Buy Now */
.ac-state-courses__load-more {
    display: inline-block;
    padding: .65em 2.2em;
    background: #1a3a5c;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
    line-height: 1.4;
}

.ac-state-courses__load-more:hover,
.ac-state-courses__load-more:focus {
    background: #0d2a47;
    outline: none;
}

/* Disabled / loading state */
.ac-state-courses__load-more:disabled {
    background: #7a95ad;
    cursor: default;
    opacity: .8;
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_state_badge]
   ══════════════════════════════════════════════════════════════════════════ */

.ac-state-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: .875rem;
    color: #1a3a5c;
    background: #e8eff6;
    border-radius: 4px;
    padding: .3em .75em;
    line-height: 1.4;
    float: right;
}
.ac-state-badge__label  { font-weight: 600; }
.ac-state-badge__name   { font-weight: 700; }
.ac-state-badge__change {
    background: none;
    border: none;
    color: #2563ae;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    line-height: inherit;
}
.ac-state-badge__change:hover { color: #1a3a5c; }

/* ══════════════════════════════════════════════════════════════════════════
   [ac_all_courses] — State selection modal
   ══════════════════════════════════════════════════════════════════════════ */

body.ac-modal-open { overflow: hidden; }

.ac-state-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ac-state-modal[hidden] { display: none; }

.ac-state-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.ac-state-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
    padding: 2em 2.5em;
    max-width: 420px;
    width: 90%;
    text-align: center;
    z-index: 1;
}
.ac-state-modal__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 .4em;
    text-transform: uppercase;
}
.ac-state-modal__sub {
    color: #555;
    margin: 0 0 1.25em;
}
.ac-state-modal__select-wrap { margin-bottom: 1.25em; }
.ac-state-modal__continue {
    background: #1a3a5c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: .65em 2em;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background .18s;
}
.ac-state-modal__continue:hover { background: #0f2540; }

/* ══════════════════════════════════════════════════════════════════════════
   [ac_all_courses] — Practice-area tabs
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin-bottom: 1.5em;
}
.ac-course-tab {
    background: #e8eff6;
    border: 1px solid #c8d9e9;
    border-radius: 20px;
    color: #1a3a5c;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    padding: .35em 1em;
    transition: background .16s, color .16s;
    white-space: nowrap;
}
.ac-course-tab:hover         { background: #d0e2f0; }
.ac-course-tab.is-active     {
    background: #1a3a5c;
    border-color: #1a3a5c;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_all_courses] — Two-column layout
   ══════════════════════════════════════════════════════════════════════════ */

.ac-all-courses__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.75em;
    align-items: start;
}
@media (max-width: 768px) {
    .ac-all-courses__layout {
        grid-template-columns: 1fr;
    }
}

/* Sidebar */

.ac-all-courses__sidebar {
    position: sticky;
    top: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}
.ac-filter-group { display: flex; flex-direction: column; gap: .35em; }
.ac-filter-label { font-size: .8rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .05em; color: #1a3a5c; }

.ac-type-btns,
.ac-sort-btns { display: flex; flex-direction: column; gap: .3em; }

.ac-type-btn,
.ac-sort-btn {
    background: #f0f4f8;
    border: 1px solid #ccd8e5;
    border-radius: 4px;
    color: #1a3a5c;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .35em .75em;
    text-align: left;
    transition: background .14s;
}
.ac-type-btn:hover,
.ac-sort-btn:hover  { background: #dce8f4; }
.ac-type-btn.is-active,
.ac-sort-btn.is-active {
    background: #1a3a5c;
    border-color: #1a3a5c;
    color: #fff;
}

.ac-keyword-input {
    border: 1px solid #ccd8e5;
    border-radius: 4px;
    font-size: .9rem;
    padding: .45em .7em;
    width: 100%;
    box-sizing: border-box;
    color: #1a3a5c;
}
.ac-keyword-input:focus {
    border-color: #2563ae;
    outline: 2px solid rgba(37,99,174,.25);
}

/* Main column */

.ac-all-courses__main { position: relative; min-height: 200px; }

.ac-all-courses__loader {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.ac-all-courses__loader[hidden] { display: none; }

.ac-all-courses__empty,
.ac-all-courses__error,
.ac-all-courses__state-prompt {
    padding: 2em 1em;
    text-align: center;
    color: #555;
}

.ac-all-courses__footer { margin-top: 1.5em; text-align: center; }
.ac-all-courses__footer[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   [ac_all_courses] — Course rows
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-row {
    display: grid;
    grid-template-columns: 1fr 272px 180px;
    gap: 1em;
    align-items: start;
    border-bottom: 1px solid #e0e8f0;
    padding: 1em 0;
}
.ac-course-row:last-child { border-bottom: none; }

@media (max-width: 640px) {
    .ac-course-row { grid-template-columns: 1fr; }
}

.ac-course-row__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 .35em;
    line-height: 1.35;
}
.ac-course-row__title a { color: inherit; text-decoration: none; }
.ac-course-row__title a:hover { text-decoration: underline; }

.ac-course-row__badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 3px;
    padding: .15em .55em;
    margin-bottom: .5em;
}
.ac-course-row__badge--on-demand    { background: #e4f0ff; color: #2563ae; }
.ac-course-row__badge--live-webinar { background: #fff3e0; color: #b45309; }

.ac-course-row__duration {
    font-size: .85rem;
    color: #555;
    margin: 0 0 .5em;
}
.ac-course-row__play-icon { color: #1a3a5c; }

.ac-course-row__links { font-size: .85rem; }
.ac-course-row__link {
    background: none;
    border: none;
    color: #2563ae;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
}
.ac-course-row__link:hover { color: #1a3a5c; }
.ac-course-row__link-sep { color: #aaa; margin: 0 .25em; }

.ac-course-row__thumb { text-align: center; }
.ac-course-row__thumb img,
.ac-course-row__thumb-img {
    max-width: 100%;
    border-radius: 4px;
    display: block;
    margin: 0 auto .4em;
}
.ac-course-row__preview-link {
    font-size: .8rem;
    font-weight: 600;
    color: #2563ae;
    text-decoration: none;
}
.ac-course-row__preview-link:hover { text-decoration: underline; }

/* ── Thumbnail trigger button ─────────────────────────────────────────────── */

/* CSS-only placeholder when no thumbnail image is available */
.ac-course-row__thumb-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background: #1b2d50;
    border-radius: 4px;
}

/* Clickable thumbnail button (wraps the img) */
.ac-course-row__thumb-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
}
.ac-course-row__thumb-btn:focus-visible {
    outline: 2px solid #2563ae;
    outline-offset: 2px;
}
.ac-course-row__thumb-btn .ac-course-row__thumb-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 4px;
    transition: opacity .2s;
}
.ac-course-row__thumb-btn:hover .ac-course-row__thumb-img { opacity: .85; }

/* Subtle dark scrim on hover */
.ac-course-row__thumb-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    border-radius: 4px;
    transition: background .2s;
    pointer-events: none;
}
.ac-course-row__thumb-btn:hover::after { background: rgba(0,0,0,.12); }

/* ── "▶ Preview Course" link-style text below the thumbnail ───────────────── */

.ac-course-row__preview-btn {
    display: block;
    width: 100%;
    margin-top: .35em;
    padding: 0;
    background: none;
    color: #2563ae;
    border: none;
    border-radius: 0;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    transition: color .15s;
}
.ac-course-row__preview-btn:hover,
.ac-course-row__preview-btn:focus {
    color: #1a3a5c;
    background: none;
    outline: none;
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_state_links] — alphabetical state grid
   ══════════════════════════════════════════════════════════════════════════ */

.ac-state-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5em 1.5em;
    /* default: 1 column (mobile-first) */
    grid-template-columns: 1fr;
}

/* Column variants — desktop */
.ac-state-links--2col { grid-template-columns: repeat(2, 1fr); }
.ac-state-links--3col { grid-template-columns: repeat(3, 1fr); }
.ac-state-links--4col { grid-template-columns: repeat(4, 1fr); }
.ac-state-links--5col { grid-template-columns: repeat(5, 1fr); }
.ac-state-links--6col { grid-template-columns: repeat(6, 1fr); }

/* Responsive collapse */
@media (max-width: 900px) {
    .ac-state-links--4col,
    .ac-state-links--5col,
    .ac-state-links--6col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .ac-state-links--3col,
    .ac-state-links--4col,
    .ac-state-links--5col,
    .ac-state-links--6col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .ac-state-links--2col,
    .ac-state-links--3col,
    .ac-state-links--4col,
    .ac-state-links--5col,
    .ac-state-links--6col { grid-template-columns: 1fr; }
}

.ac-state-links__item {
    margin: 0;
    padding: 0;
}

.ac-state-links__link {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5;
    padding: .1em 0;
    transition: color .15s;
}
.ac-state-links__link:hover,
.ac-state-links__link:focus {
    color: #00c9e4;
    text-decoration: underline;
}

.ac-state-links__empty {
    color: #888;
    font-style: italic;
}

/* ── ACI Standalone Preview Modal ─────────────────────────────────────────── */

#aci-preview-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}
#aci-preview-modal.is-open { display: block; }

.aci-preview-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.82);
    cursor: pointer;
}

/* Centering wrapper */
.aci-preview-modal__wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
}

/* Dialog box */
.aci-preview-modal__box {
    position: relative;
    width: 100%;
    max-width: 860px;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: all;
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
}

/* Close button */
.aci-preview-modal__closer {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
    background: rgba(0,0,0,.65);
    border: none;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
}
.aci-preview-modal__closer:hover { background: rgba(0,0,0,.9); }

/* 16:9 content area */
.aci-preview-modal__content {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* Native video element — fills the 16:9 box */
.aci-preview-modal__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Loading spinner — shown while the JW API resolves the MP4 URL */
.aci-preview-modal__spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(0,0,0,.6);
    pointer-events: none;
}
#aci-preview-modal.is-loading .aci-preview-modal__spinner {
    display: flex;
}
.aci-preview-modal__spinner-ring {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: aci-spin .75s linear infinite;
}
@keyframes aci-spin { to { transform: rotate(360deg); } }

body.aci-modal-open { overflow: hidden; }

.ac-course-row__pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    gap: .35em;
}
.ac-course-row__state-abbr {
    font-size: .75rem;
    font-weight: 700;
    background: #1a3a5c;
    color: #fff;
    border-radius: 3px;
    padding: .1em .5em;
    letter-spacing: .06em;
}
.ac-course-row__credits {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #1a3a5c;
    margin-top: .25em;
    margin-bottom: .35em;
}
.ac-course-row__credit-type {
    display: block;
    font-size: .78rem;
    color: #555;
    margin-top: 2px;
    line-height: 1.4;
}
.ac-course-row__credit-type--general { font-style: italic; }
.ac-course-row__credit-type--specialty { font-weight: 500; }
.ac-course-row__fee {
    font-size: .95rem;
    font-weight: 700;
    color: #222;
}
.ac-course-row__cart-btn {
    display: inline-block;
    background: #1a3a5c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: .5em 1em;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s;
    text-align: center;
}
.ac-course-row__cart-btn:hover { background: #0f2540; color: #fff; }
.ac-course-row__cart-btn--disabled { background: #9ab0c6; cursor: default; }
.ac-course-row__cart-hint { font-size: .75rem; color: #777; }

/* ── Inline action strip (Design-B) — hidden by default ─────────────────── */
.ac-course-row__inline-action {
    display: none;
    align-items: center;
    gap: .45em .75em;
    flex-wrap: wrap;
    margin-top: .65em;
}
.ac-course-row__inline-action .ac-course-row__fee {
    font-size: .9rem;
}
.ac-course-row__inline-action .ac-course-row__cart-btn {
    padding: .4em .9em;
    font-size: .82rem;
}

/* ── Regular design — mobile: pricing items go inline and centered ───────── */
@media (max-width: 640px) {
    .ac-course-row__pricing {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: .45em .75em;
    }
    .ac-course-row__inline-action {
        justify-content: center;
    }
}

/* ── Design-B desktop (layout_desktop="design-b") ───────────────────────── */
@media (min-width: 641px) {
    /* Collapse to 2-column grid so the thumb fills the freed right space */
    .ac-all-courses--desktop-b .ac-course-row {
        grid-template-columns: 1fr 272px;
    }
    .ac-all-courses--desktop-b .ac-course-row__pricing    { display: none; }
    .ac-all-courses--desktop-b .ac-course-row__inline-action { display: flex; }
}

/* ── Design-B mobile (layout_mobile="design-b") ─────────────────────────── */
@media (max-width: 640px) {
    .ac-all-courses--mobile-b .ac-course-row__pricing    { display: none; }
    .ac-all-courses--mobile-b .ac-course-row__inline-action { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_all_courses] — Accredited States popover
   ══════════════════════════════════════════════════════════════════════════ */

.ac-acc-states-popover {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccd8e5;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,.16);
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    padding: 1em 1.25em 1.25em;
}
.ac-acc-states-popover[hidden] { display: none; }

.ac-acc-states-popover__close {
    float: right;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #555;
    cursor: pointer;
    line-height: 1;
    padding: 0 0 .2em .5em;
}
.ac-acc-states-popover__close:hover { color: #000; }

.ac-acc-states-popover__title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 .75em;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ac-acc-states-popover__loading { color: #777; font-size: .9rem; }

.ac-acc-states-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.ac-acc-states-table tr:not(:last-child) td {
    border-bottom: 1px solid #eef2f7;
}
.ac-acc-states-table__state   { padding: .3em .5em .3em 0; color: #222; }
.ac-acc-states-table__credits { padding: .3em 0; text-align: right; font-weight: 600;
                                  color: #1a3a5c; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   [ac_all_courses] — "All Practice Areas" caret + expandable panel
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-tabs-wrap { position: relative; margin-bottom: 1.5em; }
.ac-course-tabs      { margin-bottom: 0; } /* override earlier rule */

/* Caret on the All Practice Areas tab */
.ac-course-tab__caret {
    display: inline-block;
    font-size: .7em;
    margin-left: .25em;
    transition: transform .2s;
    vertical-align: middle;
}
.ac-course-tab[aria-expanded="true"] .ac-course-tab__caret {
    transform: rotate(180deg);
}

/* Expandable panel */
.ac-practice-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 500;
    background: #fff;
    border: 1px solid #c8d9e9;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.13);
    padding: .85em 1em;
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    width: max-content;
    max-width: min(780px, 95vw);
}
.ac-practice-panel[hidden] { display: none; }

.ac-practice-panel__pill {
    background: #e8eff6;
    border: 1px solid #c8d9e9;
    border-radius: 20px;
    color: #1a3a5c;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .3em .9em;
    transition: background .14s, color .14s;
    white-space: nowrap;
}
.ac-practice-panel__pill:hover { background: #d0e2f0; }
.ac-practice-panel__pill.is-active {
    background: #1a3a5c;
    border-color: #1a3a5c;
    color: #fff;
}

/* Accredited States popover — "above" variant (opens upward) */
.ac-acc-states-popover--above { transform: translateY(-100%); }

/* ══════════════════════════════════════════════════════════════════════════
   [ac_course_practice_areas]
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-practice-areas {
    display: flex;
    flex-direction: column;
    gap: .25em;
    margin: .35em 0;
}

.ac-course-practice-areas__label {
    font-weight: 700;
    font-size: .9rem;
    color: #1a3a5c;
    line-height: 1.3;
}

.ac-course-practice-areas__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.ac-course-practice-areas__term {
    color: #2563ae;
}

.ac-course-practice-areas__term--link {
    color: #2563ae;
    text-decoration: none;
}

.ac-course-practice-areas__term--link:hover {
    text-decoration: underline;
}

.ac-course-practice-areas__sep {
    color: #6b849e;
    padding: 0 .1em;
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_course_credit_type]
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-credit-type {
    display: flex;
    flex-direction: column;
    gap: .25em;
    margin: .35em 0;
}

.ac-course-credit-type__label {
    font-weight: 700;
    font-size: .9rem;
    color: #1a3a5c;
    line-height: 1.3;
}

.ac-course-credit-type__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.ac-course-credit-type__term {
    color: #2563ae;
}

.ac-course-credit-type__sep {
    color: #6b849e;
    padding: 0 .1em;
}

/* ══════════════════════════════════════════════════════════════════════════
   Individual course page shortcodes  (ac_course_*)
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared label + value layout */
.ac-course-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3em;
    margin: .35em 0;
    font-size: .95rem;
    color: #222;
}
.ac-course-meta__label {
    font-weight: 700;
    color: #1a3a5c;
    flex-shrink: 0;
}

/* Links inside course meta (practice areas, states) */
.ac-course-meta__term-link,
.ac-course-meta__state-link {
    color: #2563ae;
    text-decoration: none;
}
.ac-course-meta__term-link:hover,
.ac-course-meta__state-link:hover { text-decoration: underline; }

/* Offered In state list  — slight pill look */
.ac-course-states .ac-course-meta__state-link {
    display: inline-block;
    background: #e8eff6;
    border-radius: 3px;
    padding: .05em .45em;
    font-size: .85rem;
    font-weight: 600;
    color: #1a3a5c;
    text-decoration: none;
    transition: background .14s;
}
.ac-course-states .ac-course-meta__state-link:hover { background: #ccdcee; }

/* State Accreditation button */
.ac-course-acc-wrap { position: relative; display: inline-block; }

.ac-course-acc-btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: #1a3a5c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: .55em 1.1em;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background .16s;
}
.ac-course-acc-btn:hover { background: #0f2540; }
.ac-course-acc-btn__icon { font-size: .7em; }

/* The popover itself reuses .ac-acc-states-popover from All Courses styles.
   Override position to be relative to the wrapper on course detail pages. */
.ac-course-acc-popover {
    position: fixed;   /* already set globally; explicit for clarity */
}

/* ══════════════════════════════════════════════════════════════════════════
   Course detail — credit hours chip  (above State Accreditation button)
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-credits-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35em;
    margin-bottom: .75em;
    font-size: 1rem;
    color: #1a3a5c;
}
.ac-course-credits-row[hidden] { display: none; }

.ac-course-credits-row__value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a3a5c;
    line-height: 1;
}
.ac-course-credits-row__unit {
    font-weight: 600;
    color: #1a3a5c;
}
.ac-course-credits-row__sep {
    color: #b0c4d8;
    padding: 0 .1em;
}
.ac-course-credits-row__change {
    background: none;
    border: 1px solid #c8d9e9;
    border-radius: 20px;
    color: #2563ae;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    padding: .2em .75em;
    transition: background .14s, border-color .14s;
    line-height: 1.4;
    white-space: nowrap;
}
.ac-course-credits-row__change:hover {
    background: #e8eff6;
    border-color: #2563ae;
}
.ac-course-credits-row__caret {
    font-size: .8em;
    margin-left: .15em;
}

/* Outer wrapper keeps button + popover together */
.ac-course-acc-outer { display: inline-block; }

/* ══════════════════════════════════════════════════════════════════════════
   Course detail — specialty credits row  (below credit hours chip)
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-specialty-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3em .6em;
    margin-bottom: .6em;
    font-size: .9rem;
    color: #1a3a5c;
}
.ac-course-specialty-row[hidden] { display: none; }

.ac-course-specialty-row__label {
    font-weight: 700;
    color: #1a3a5c;
    flex-shrink: 0;
}

.ac-course-specialty-row__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25em .75em;
}

.ac-course-specialty-row__item {
    display: inline-flex;
    align-items: baseline;
    gap: .25em;
    font-size: .875rem;
}

.ac-course-specialty-row__sp-name { color: #333; }

.ac-course-specialty-row__sp-hrs {
    font-weight: 700;
    color: #1a3a5c;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_course_bundles]  — course-page bundle upsell section
   ══════════════════════════════════════════════════════════════════════════ */

.ac-course-bundles-outer { margin-top: 2.5em; }
.ac-course-bundles-outer[hidden] { display: none; }

.ac-course-bundles__header { margin-bottom: 1.25em; }

.ac-course-bundles__heading {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a3a5c;
    margin: 0 0 .35em;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ac-course-bundles__sub {
    color: #444;
    font-size: .95rem;
    margin: 0;
    max-width: 680px;
}

.ac-course-bundles__loading {
    color: #777;
    font-size: .9rem;
    padding: 1em 0;
}

/* Bundle cards inside this section reuse the existing .ac-bundle-grid styles */

/* ── [ac_course_acc_button]  — outline "View State Accreditation" button ──── */

.ac-course-acc-btn--outline {
    background: #fff;
    color: #1a3a5c !important;
    border: 1.5px solid #cdd5de;
    border-radius: 8px;
    padding: .65em 1.25em .65em 1.5em;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: .75em;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

.ac-course-acc-btn--outline:hover,
.ac-course-acc-btn--outline:focus {
    border-color: #1a3a5c;
    background: #f4f7fb;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    outline: none;
}

.ac-course-acc-btn--outline .ac-course-acc-btn__icon {
    font-size: .9em;
    color: #6b849e;
}

/* ── [ac_course_state_info]  — accreditation + state display block ─────────── */

.ac-course-state-info {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.ac-course-state-info[hidden] { display: none; }

.ac-course-state-info__row {
    display: flex;
    flex-direction: column;
    gap: .3em;
}

.ac-course-state-info__label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1a3a5c;
}

.ac-course-state-info__credits {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2563ae;
    line-height: 1.3;
}

.ac-course-state-info__state-btn {
    display: inline-block !important;
    width: auto !important;
    align-self: flex-start;
    background: #e8eff6;
    border: none;
    border-radius: 6px;
    padding: .35em .9em;
    font-size: .95rem;
    font-weight: 600;
    color: #1a3a5c;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
    line-height: 1.4;
    white-space: nowrap;
}

.ac-course-state-info__state-btn:hover,
.ac-course-state-info__state-btn:focus {
    background: #d0e2f0;
    outline: none;
}

/* ── [ac_course_buy_btn] ─────────────────────────────────────────────────── */

.ac-course-buy-btn-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.ac-course-buy-btn-wrap[hidden] { display: none; }

.ac-course-buy-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: .75em 2em;
    border-radius: 8px;
    background: linear-gradient(135deg, #00c9e4 0%, #0096c7 100%);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 3px 10px rgba(0, 150, 199, .3);
    white-space: nowrap;
    box-sizing: border-box;
}

.ac-course-buy-btn:hover,
.ac-course-buy-btn:focus {
    background: linear-gradient(135deg, #00d9f7 0%, #007eb0 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 150, 199, .4);
    color: #fff !important;
    text-decoration: none !important;
}

/* ── [ac_price] price box ─────────────────────────────────────────────────── */

.ac-price-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.ac-price-box__label {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1em;
}

.ac-price-box__amount {
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
}

.ac-price-box__dollar {
    font-size: 4em;
    font-weight: 700;
    line-height: 1;
}

.ac-price-box__whole {
    font-size: 4em;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

.ac-price-box__cents {
    font-size: 1em;
    font-weight: 700;
    align-self: flex-start;
    padding-top: .2em;
}

/* ── [ac_course_type_badge] ───────────────────────────────────────────────── */
.ac-course-type-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: .9375rem;   /* ~15px */
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Live Webinar — matches the Buy Course button gradient */
.ac-course-type-badge--webinar {
    background: linear-gradient(135deg, #00c9e4 0%, #0096c7 100%);
}

/* On-Demand — same palette, slightly deeper to distinguish from webinar */
.ac-course-type-badge--ondemand {
    background: linear-gradient(135deg, #00c9e4 0%, #0096c7 100%);
}

/* ── [ac_course_info_block] ───────────────────────────────────────────────── */
.ac-course-info-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ac-cib__row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.35;
}

.ac-cib__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.ac-cib__icon-svg {
    width: 22px;
    height: 22px;
}

.ac-cib__text {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .3em;
}

.ac-cib__label {
    font-weight: 600;
    color: #fff;
}

.ac-cib__value {
    font-weight: 500;
    color: #fff;
}

/* ── [ac_course_featured_bundle] ──────────────────────────────────────────── */

/* ── Outer wrapper: title + card row stacked ─────────────────────────────── */
.ac-cfb {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Section title: "[State] CLE Bundles" ────────────────────────────────── */
.ac-cfb__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0;
    line-height: 1.2;
}

/* ── Two-card row: 2/3 + 1/3 ────────────────────────────────────────────── */
.ac-cfb__cards {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    align-items: stretch;
}

/* ── Shared card base ────────────────────────────────────────────────────── */
.ac-cfb__bundle-card,
.ac-cfb__browse-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px 22px;
    box-sizing: border-box;
}

/* ── LEFT card (bundle) ──────────────────────────────────────────────────── */
.ac-cfb__bundle-card {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #dde4ed;
    min-width: 0;
}

/* Circular bundle image */
.ac-cfb__bundle-img-wrap { flex-shrink: 0; }
.ac-cfb__bundle-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Text meta column */
.ac-cfb__bundle-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ac-cfb__bundle-state {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #7a8fa6;         /* muted slate — matches screenshot "ALABAMA" label */
    text-transform: uppercase;
}
.ac-cfb__bundle-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2744;         /* dark navy for bundle title */
    line-height: 1.2;
}
.ac-cfb__bundle-credits {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #0096c7;         /* teal — matches "12 CREDITS" in screenshot */
    text-transform: uppercase;
}

/* Price + CTA column */
.ac-cfb__bundle-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid #edf0f5;
}
.ac-cfb__bundle-price .ac-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1a2744;
    line-height: 1;
    white-space: nowrap;
}
.ac-cfb__bundle-price .ac-price__cents {
    font-size: .55em;
    font-weight: 700;
    vertical-align: super;
    line-height: 1;
}
.ac-cfb__view-btn {
    display: inline-block;
    padding: 9px 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #00c9e4 0%, #0096c7 100%);
    color: #fff !important;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 3px 10px rgba(0,150,199,.25);
}
.ac-cfb__view-btn:hover,
.ac-cfb__view-btn:focus {
    background: linear-gradient(135deg, #00d9f7 0%, #007eb0 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0,150,199,.35);
}

/* ── RIGHT card (browse all) ─────────────────────────────────────────────── */
.ac-cfb__browse-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px dashed #c0cfe0;
}
.ac-cfb__browse-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid #c0cfe0;
    color: #2d5986;
}
.ac-cfb__browse-icon-svg {
    width: 36px;
    height: 36px;
}
.ac-cfb__browse-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ac-cfb__browse-heading {
    font-size: .9rem;
    font-weight: 700;
    color: #1a2744;         /* dark navy — matches "Looking for more CLE?" */
    margin: 0;
    line-height: 1.25;
}
.ac-cfb__browse-desc {
    font-size: .78rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
.ac-cfb__browse-btn {
    display: inline-block;
    align-self: flex-start; /* auto width — never stretches to fill flex container */
    margin-top: 8px;
    padding: 7px 13px;
    border-radius: 6px;
    border: 1.5px solid #1a3a5c;
    color: #1a3a5c !important;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.ac-cfb__browse-btn:hover,
.ac-cfb__browse-btn:focus {
    background: #1a3a5c;
    color: #fff !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ac-cfb__cards {
        grid-template-columns: 1fr;
    }
    .ac-cfb__browse-card {
        max-width: 100%;
    }
    .ac-cfb__bundle-cta {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #edf0f5;
        padding-top: 12px;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .ac-cfb__bundle-card {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .ac-cfb__bundle-img { width: 64px; height: 64px; }
    .ac-cfb__bundle-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .ac-cfb__view-btn {
        width: 100%;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   [ac_faq_state_btn] + [ac_faq_state_selector]
   Both reuse .ac-bundle-filter / .ac-bundle-filter__select-wrap / .ac-bundle-filter__select
   so no dropdown CSS is needed here. Only the result-area styles are new.
   ══════════════════════════════════════════════════════════════════════════ */

/* [ac_faq_state_selector] wrapper — override ac-bundle-filter's inline-flex
   so the whole component centers inside whatever column it's placed in. */
.ac-faq-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Prompt text above the dropdown */
.ac-faq-selector__prompt {
    font-size: .95rem;
    color: #555;
    margin: 0 0 10px;
    text-align: center;
}

/* Result area rendered below [ac_faq_state_selector] after an AJAX load.
   The h1 and accordion inside use their own existing styles (ac-faq-h1,
   WPBakery vc_tta_accordion) — no overrides needed here.
   Full width + left-aligned so the accordion content reads naturally. */
.ac-faq-selector__result {
    margin-top: 28px;
    width: 100%;
    text-align: left;
}

/* "View full page" link appended after the accordion */
.ac-faq-result__more {
    margin-top: 20px;
}

.ac-faq-result__link {
    display: inline-block;
    color: #2563ae;
    font-weight: 600;
    text-decoration: underline;
    font-size: .9rem;
}

.ac-faq-result__link:hover {
    color: #1a3a5c;
}

.ac-faq-result__error {
    color: #c0392b;
    font-size: .9rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM BUNDLE SELECTOR  [ac_custom_bundle_selector]
   ══════════════════════════════════════════════════════════════════════════ */

.ac-custom-bundle-selector {
    font-family: inherit;
}

/* Dropdowns row */
.acb-dropdowns {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.acb-dropdown-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acb-label {
    font-weight: 700;
    font-size: .875rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Wrapper provides the visible box — clips any theme border bleeding from the <select> */
.acb-select-wrap {
    position: relative;
    display: block;
    background: #fff;
    border: 1.5px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
    cursor: pointer;
}

/* Chevron via pseudo-element on the wrapper */
.acb-select-wrap::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
}

.acb-select-wrap:focus-within {
    border-color: #00b4d8;
    box-shadow: 0 0 0 3px rgba(0,180,216,.18);
}

/* The select itself — transparent, fills the wrapper */
.acb-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    width: 100%;
    padding: .65em 2.8em .65em 1em;
    font-size: 1rem;
    color: #222;
    cursor: pointer;
    line-height: 1.4;
    display: block;
    margin: 0 !important;
}

.acb-select option {
    background-color: #fff;
    color: #1a2940;
}

.acb-select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Bundle card */
.acb-card-wrap {
    perspective: 800px;
}

.acb-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0d1f35;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* Blueprint-style background layer */
.acb-card__bg {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg,   transparent, transparent 39px, rgba(255,255,255,.07) 40px),
        repeating-linear-gradient(90deg,  transparent, transparent 39px, rgba(255,255,255,.07) 40px),
        radial-gradient(ellipse at 60% 40%, #0d3060 0%, #0d1f35 70%);
    opacity: .9;
}

.acb-card__body {
    position: relative;
    z-index: 1;
    padding: 32px 36px;
    text-align: center;
}

.acb-card__credits-num {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.acb-card__credits-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255,255,255,.7);
    margin-bottom: 4px;
}

.acb-card__state-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    margin-bottom: 24px;
}

.acb-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Buttons */
.acb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .7em 1em;
    border-radius: 8px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    transition: background .2s, transform .15s, box-shadow .2s, color .15s, border-color .15s;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.acb-btn--buy {
    background: linear-gradient(135deg, #00c9e4 0%, #0096c7 100%);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(0,150,199,.3);
    margin-bottom: 10px;
}

.acb-btn--buy:hover {
    background: linear-gradient(135deg, #00d9f7 0%, #007eb0 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,150,199,.4);
    color: #fff !important;
}

.acb-btn--lw {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255,255,255,.65);
    margin-bottom: 10px;
}

.acb-btn--lw:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff !important;
}

.acb-btn--trial {
    background: #c0392b;
    color: #fff !important;
    border-color: #c0392b;
    font-size: .88rem;
    margin-bottom: 10px;
}

.acb-btn--trial:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff !important;
}

.acb-btn--details {
    background: transparent;
    color: rgba(255,255,255,.75) !important;
    border-color: rgba(255,255,255,.4);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
}

.acb-btn--details:hover {
    background: rgba(255,255,255,.1);
    color: #fff !important;
    border-color: rgba(255,255,255,.7);
    transform: none;
}

/* LW free-trial disclaimer (shown only when trial button is visible) */
.acb-lw-trial-notice {
    margin: 0 0 10px;
    font-size: .78rem;
    color: rgba(255,255,255,.65);
    text-align: center;
    line-height: 1.4;
}

/* Modal overlay */
.acb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.acb-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    position: relative;
}

.acb-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #777;
    line-height: 1;
    padding: 4px 8px;
}

.acb-modal__close:hover { color: #1a2940; }

.acb-modal__header {
    background: #0d1f35;
    color: #fff;
    padding: 28px 32px 20px;
    border-radius: 12px 12px 0 0;
}

.acb-modal__title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.acb-modal__subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.7);
    font-weight: 500;
}

.acb-modal__body {
    padding: 24px 32px;
}

.acb-modal__media-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: .9rem;
    color: #555;
}

.acb-modal__media-label { font-weight: 700; color: #1a2940; }

.acb-modal__description {
    font-size: .95rem;
    line-height: 1.65;
    color: #333;
    margin-bottom: 20px;
}

.acb-modal__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.acb-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.acb-badge--approved {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

.acb-badge--cert {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}

.acb-badge--pace {
    background: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}

.acb-modal__footer {
    padding: 0 32px 28px;
}

.acb-modal__footer .acb-btn--buy {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 13px 24px;
    border-radius: 8px;
}

/* Mobile */
@media (max-width: 600px) {
    .acb-dropdowns { flex-direction: column; }
    .acb-card__body { padding: 24px 20px; }
    .acb-card__credits-num { font-size: 3.5rem; }
    .acb-card__actions { flex-direction: column; align-items: stretch; }
    .acb-btn { justify-content: center; }
    .acb-modal__header, .acb-modal__body, .acb-modal__footer { padding-left: 20px; padding-right: 20px; }
}

.ac-custom-bundle-selector__empty {
    color: #777;
    font-style: italic;
}

/* ── FAQ preview ([ac_faq_preview]) ──────────────────────────────────── */
.ac-faq-preview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}
.ac-faq-preview__item {
    border-bottom: 1px solid #e0e4ea;
}
.ac-faq-preview__item:first-child {
    border-top: 1px solid #e0e4ea;
}
.ac-faq-preview__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    cursor: pointer;
    list-style: none;
    font-size: .95rem;
    font-weight: 600;
    color: #12395f;
}
.ac-faq-preview__question::-webkit-details-marker { display: none; }
.ac-faq-preview__q-text { flex: 1; }
.ac-faq-preview__arrow {
    font-size: 1.3rem;
    line-height: 1;
    color: #2979b4;
    transition: transform .2s ease;
    flex-shrink: 0;
}
details.ac-faq-preview__item[open] .ac-faq-preview__arrow {
    transform: rotate(90deg);
}
.ac-faq-preview__answer {
    padding: 0 4px 14px;
    font-size: .9rem;
    color: #555;
}
.ac-faq-preview__answer p:last-child { margin-bottom: 0; }
.ac-faq-preview__footer {
    margin-top: 32px;
    text-align: center;
}
@media (max-width: 768px) {
    .ac-faq-preview__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ac-faq-preview__col + .ac-faq-preview__col .ac-faq-preview__item:first-child {
        border-top: none;
    }
}

/* ── Trust badge ─────────────────────────────────────────────────────── */
.ac-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.ac-trust-badge__icon {
    font-weight: 700;
    font-size: 1em;
    flex-shrink: 0;
}
.ac-trust-badge__text {
    font-size: 1em;
    line-height: 1.4;
}

/* ── State bundle/course buttons – mobile stacking ─────────────────── */
@media (max-width: 600px) {
    .aci-state-btn {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
        box-sizing: border-box;
        text-align: center;
    }
}

/* ── Feature blocks – force WP Bakery grid to single column on mobile ─ */
/* The via_grid CSS grid doesn't stack at 768px when one column is too
   narrow. Target any grid row that hosts feature blocks and override it. */
@media (max-width: 768px) {
    .g-cols.via_grid:has(.ac-feature-block) {
        grid-template-columns: 1fr !important;
    }
}
