/*
 * v2-overrides.css — Phase 3+ targeted overrides where legacy CSS assumptions
 * don't hold in v2 yet. Loaded AFTER legacy CSS files in _Layout.cshtml so
 * the cascade picks v2 rules.
 *
 * Treat this file as scaffolding during the port — once v2 page content is
 * complete enough that the legacy layout math works, individual overrides
 * should be removed.
 */

/*
 * Smooth in-page anchor scrolling (site-wide). Legacy smooth-scrolled the
 * register-prompt "Get Access Now" CTA down to the `#purchase` ExamRegisterFooter
 * on the same page; v2 has no smooth-scroll anywhere. `scroll-behavior` must live
 * on the scroll container (root), so this is global — it makes ALL in-page anchor
 * jumps ease instead of snap. Standard, benign enhancement; `prefers-reduced-motion`
 * users get the instant jump automatically.
 */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/*
 * Phase 3.9.1 — font-family alignment with Typekit kit zba6dlu.
 *
 * The v2 legacy CSS (global.css, responsive.css, content.css) still references
 * MyFonts family names ('Trade Gothic W01 Light', 'TradeGothicW01-BoldCn20
 * 675334', etc.) because those CSS files were captured pre-Typekit-migration.
 * Prod clone now serves CSS that uses Typekit family names directly
 * (trade-gothic-next-condensed, trade-gothic-next, tgn-soft-round-comp).
 *
 * Mapping (sampled from prod clone computed styles):
 *   body / headings / nav / btns          → "trade-gothic-next-condensed"
 *   p / utility-link / testimonial text   → "trade-gothic-next"
 *   GSP table rows                        → "tgn-soft-round-comp"
 *   h2 (only)                             → keeps "TradeGothicW01-BoldCn20 675334" (self-hosted)
 *
 * Override here using higher specificity / wider selectors so v2 inherits the
 * Typekit names without rewriting the legacy CSS files. The full CSS-source
 * port (deferred to Phase 7+ SASS migration) will inline these properly.
 */
body,
input,
textarea,
select,
button {
    font-family: "trade-gothic-next-condensed", "Helvetica Neue", Arial, sans-serif;
}

p,
.secondary-nav-link,
.amri-link,
.amri-clients-feedback-list-item-text,
.amri-clients-feedback-list-item-text p,
.amri-search-results-list a {
    font-family: "trade-gothic-next", "Helvetica Neue", Arial, sans-serif;
}

h1,
h3,
h4,
h5,
h6,
.heading1,
.heading2,
.heading3,
.amri-page-heading,
.amri-header-nav-label,
.amri-btn,
.amri-hero-features-description,
.amri-gsp-table-header > div,
.amri-modal-header h1,
.amri-clients-feedback-subtitle {
    font-family: "trade-gothic-next-condensed", "Helvetica Neue", Arial, sans-serif;
}

.amri-gsp-table-row > div {
    font-family: "tgn-soft-round-comp", "Helvetica Neue", Arial, sans-serif;
}

/*
 * Phase 3.9.1 — testimonials subtitle max-width. Prod-clone CSS bundle
 * caps `.amri-clients-feedback-subtitle` at `max-width: 1000px; margin: auto`
 * so the "Since 1983…" copy doesn't stretch the full 1110px container at
 * desktop. v2's legacy main.css doesn't have this cap.
 */
.amri-clients-feedback .amri-clients-feedback-subtitle {
    max-width: 1000px;
    margin: 0 auto;
}

/*
 * Phase 3.9.1 — drop the legacy negative-margin sticky-footer trick.
 * Prod-clone audit confirms the live legacy no longer uses this trick — its
 * footer flows naturally after content (footer.top = content end). With the
 * pre-Typekit-era v2 home being 2500px tall, the legacy global.css:279
 * `margin-top:-323px` rule pulled the footer over the bottom of the GSP
 * section. Override to 0 across all breakpoints.
 */
.page-footer {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .page-footer {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .page-footer {
        margin-top: 0;
    }
}

/*
 * Phase 3.9.1 companion — the sticky-footer trick had TWO halves and only the
 * footer half was dropped above. The other half is `.content-wrapper {
 * padding-bottom }`: responsive.css:301/609 reserve 426px/547px at the
 * tablet/mobile breakpoints to make room for the footer that USED to be pulled
 * up by `margin-top:-427px`. With the negative margin neutralized, that reserved
 * padding is pure dead space — a ~426px white gap after content on every page at
 * <=768px, and DOUBLED (~900px) on sidebar-layout pages, whose SidebarPage.cshtml
 * template nests a SECOND `.content-wrapper` inside the layout's one (both match
 * the rule; only the layout-level one was ever notionally cancellable). Zero it
 * so the footer flows naturally right after content, matching the prod-clone
 * (whose footer.top = content end). This base rule beats the media-query rules
 * in responsive.css via source order — v2-overrides.css loads last, and wrapping
 * a rule in @media adds no specificity.
 */
.content-wrapper {
    padding-bottom: 0;
}

/*
 * Phase 3.9.1 — kill the legacy `body { min-width: 998px }` from global.css:3.
 * That rule forces a horizontal scrollbar at any viewport <998px instead of
 * letting the @media (max-width:1024px) and (max-width:768px) breakpoints in
 * main.css / responsive.css fire. With min-width gone, the desktop header
 * disappears and the mobile header (with burger + mobile login bar) shows up
 * naturally below 1024.
 */
html,
body,
.page {
    min-width: 0;
}

/*
 * Phase 3.9.1 — rating row layout (4.9 pill + bars + Overall Rating + 98% +
 * ShopperApproved badge). Legacy renders this as a flex row with space-between
 * (the seal anchors to the right). v2's local CSS doesn't include the rule,
 * so the container defaulted to display:block and the badge wrapped below.
 *
 * The `#review_header` div is populated by the external Shopper Approved
 * script (see _ShopperApprovedStatistics.cshtml). Force it to expand to fill
 * the space LEFT of the seal so its injected children (4.9 pill / bars /
 * Overall Rating / 98% / 17K+ Reviews) spread out instead of clumping.
 */
.shopper-approved-statistics {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.shopper-approved-statistics .shopperlink {
    margin-right: 30px;
    margin-top: -5px;
}

.shopper-approved-statistics #review_header {
    display: flex;
    justify-content: space-between;
    flex-basis: 70%;
    /* Kill the 1px gray bottom border that the external ShopperApproved
       <style> block injects on `#review_header` — prod-clone neutralizes it
       the same way via its CSS bundle. Without this, a horizontal line
       appears between the rating row and the testimonials. */
    border-bottom: none;
}

/* Equalize the four content blocks (overall / graph / stars / percentage)
   to 25% of #review_header each so they spread across the row. Without this
   they collapse to their inline width:100px / 135px / 134px declarations
   from the injected ShopperApproved <style>. */
.shopper-approved-statistics #review_header > :nth-child(-n+4) {
    flex: 0 0 25%;
    box-sizing: border-box;
}

/* Responsive cascade — matches prod-clone CSS bundle exactly. At narrower
   widths the seal stacks below the rating row so #review_header gets the
   full container width to spread the 4 blocks (otherwise the 98% column
   gets crammed when the seal eats 200px+ of the row). */
@media screen and (max-width: 1024px) {
    .shopper-approved-statistics {
        flex-direction: column;
    }

    .shopper-approved-statistics #review_header {
        padding: 0 0 30px;
        width: 90%;
    }

    .shopper-approved-statistics #review_header .overall {
        padding: revert;
    }

    .shopper-approved-statistics .shopperlink {
        margin: 10px 0 0;
    }
}

@media only screen and (max-width: 768px) {
    .shopper-approved-statistics #review_header {
        flex-wrap: wrap;
        justify-content: center;
        width: 65%;
        padding: 0;
    }

    .shopper-approved-statistics #review_header > :nth-child(-n+4) {
        flex: 0 0 auto;
    }

    .shopper-approved-statistics #review_header .percentage {
        min-width: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .shopper-approved-statistics .shopperlink {
        margin: 20px 0;
    }

    .shopper-approved-statistics #review_header {
        width: 100%;
    }

    .shopper-approved-statistics #review_header > :nth-child(-n+4) {
        margin-top: 15px;
    }

    .shopper-approved-statistics #review_header .overall {
        margin-bottom: 15px;
    }
}

/*
 * Phase 3.9.1 — footer layout (matches prod-clone, not legacy BetterCMS).
 *
 * Prod-clone uses three different footer layouts depending on viewport:
 *   >=1150  : desktop 3-col grid — col-1 (Contact) | col-2 (Register +
 *             Resources) | col-2-1 (Newsletter), with col-3 (Legal +
 *             social/trust badges) as a full-width row below.
 *   768-1149: tablet 2-col grid — left = Contact + Newsletter,
 *             right = Register/Resources + Legal/Social/Badges.
 *   <768    : mobile stack — every section 100% width in source order.
 *
 * Legacy BetterCMS CSS fights us on three fronts and we override each:
 *   - global.css:5 `.page-frame { width: 984px }` loads AFTER responsive.css
 *     so the @media override never wins. Force `.page-footer .page-frame`
 *     responsive width with !important.
 *   - global.css:279 `.page-footer { height: 270px }` clips overflow when
 *     the sticky-footer trick is neutralized — override to height: auto.
 *   - responsive.css:122/310/567 set !important widths on footer-col-1 and
 *     footer-col-2 at <=900 / <=768 / <=600 that fight the grid placement
 *     — beat them with !important on width/float/clear.
 */
.page-footer {
    height: auto;
}

.page-footer .page-frame {
    width: auto !important;
    max-width: 1150px;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: visible;
}

/* Desktop 3-col grid (>=1150) — matches prod col widths exactly. */
.page-footer .footer-col-1 {
    width: 375px;
}

.page-footer .footer-col-2 {
    width: 195px;
}

.page-footer .footer-col-2-1 {
    width: 285px;
}

.page-footer .footer-col-3 {
    clear: both;
    width: 100%;
    padding-top: 24px;
}

/* Tablet 2-col grid (769-1149) — matches prod's "Contact+Newsletter | Register+Legal" layout. */
@media (min-width: 769px) and (max-width: 1149px) {
    .page-footer .page-frame {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "contactH   register"
            "contact    register"
            "newsletter legal"
            "secondary  secondary";
        column-gap: 40px;
        row-gap: 0;
    }

    .page-footer .page-frame > h3:first-of-type {
        grid-area: contactH;
        margin-bottom: 12px;
    }

    .page-footer .footer-col-1 {
        grid-area: contact;
        float: none !important;
        clear: none !important;
        width: auto !important;
        max-width: 100%;
        margin-right: 0 !important;
    }

    .page-footer .footer-col-2 {
        grid-area: register;
        float: none !important;
        clear: none !important;
        width: auto !important;
        max-width: 100%;
    }

    .page-footer .footer-col-2-1 {
        grid-area: newsletter;
        float: none !important;
        clear: none !important;
        width: auto !important;
        max-width: 100%;
        padding-top: 24px;
    }

    .page-footer .footer-col-3 {
        grid-area: legal;
        float: none !important;
        clear: none !important;
        width: auto !important;
        max-width: 100%;
        padding-top: 24px;
    }

    .page-footer .footer-secondary {
        grid-area: secondary;
    }
}

/* Mobile stack (<=768) — every section full width. */
@media (max-width: 768px) {
    .page-footer .footer-col-1,
    .page-footer .footer-col-2,
    .page-footer .footer-col-2-1,
    .page-footer .footer-col-3 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        margin-right: 0 !important;
        padding-top: 16px;
    }

    .page-footer .footer-col-1 {
        padding-top: 0;
    }
}

/*
 * Phase 3.9.1 — footer Contact Us icon list at narrow widths (≤600px).
 *
 * Legacy responsive.css:608-617 floats the <dt> as a 42x32 icon-only box
 * (text hidden via text-indent:-200px + overflow:hidden) so the icon sits
 * to the LEFT of the matching <dd>. Without enough vertical room on the
 * floated <dt>, the <dd> content wraps around the float for only ~32px
 * (one line) and the rest reflows flush-left — the "Unit C / Crystal Lake"
 * split the user reported.
 *
 * Prod's custom-style.css adds extra margin-bottom on the <dt>s so each
 * float is tall enough to hold its <dd> content side-by-side. Also hides
 * the phone <dt>'s inline <span> text (which leaks out because
 * text-indent doesn't propagate into descendants the same way overflow
 * does). custom-style.css full port is deferred; lift the 3 rules here.
 */
@media only screen and (max-width: 600px) {
    .page-footer .footer-col-1 dt {
        margin-bottom: 60px;
    }

    .page-footer .footer-col-1 dt.resp-icn-phone {
        margin-bottom: 90px;
    }

    .page-footer .footer-col-1 dt.resp-icn-phone span {
        display: none;
    }

    /* Replace the legacy `icns-footer.png` sprite reference with inline
       SVG data URIs so the icons render regardless of whether the static
       asset is cached or served. The legacy sprite IS shipped at
       wwwroot/Content/Styles/images/icns-footer.png — but a browser that
       cached the 404 from before the file was copied will keep showing
       plain red dots until a hard reload. Inline data URIs sidestep that
       entirely. The icons are 24×24 white-on-transparent (envelope, phone)
       centered inside the 32×32 red circle. */
    .page-footer .resp-icn-email::after {
        background: #b61b29 no-repeat center center;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23fff'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>");
        background-size: 18px 18px;
    }

    .page-footer .resp-icn-phone::after {
        background: #b61b29 no-repeat center center;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23fff'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/></svg>");
        background-size: 18px 18px;
    }
}

/*
 * Phase 3.9.1 — footer-col-3 internal layout (legal links + social icons +
 * trust badges). Prod-clone renders legal links on one row, then the icons
 * + badges as a flex row below; v2 default lets them stack vertically.
 */
.page-footer .footer-col-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.page-footer .footer-col-3 .footer-icons-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}

.page-footer .footer-col-3 .footer-icons-container .social-links-container {
    display: inline-flex;
    align-items: center;
}

.page-footer .footer-col-3 .footer-icons-container .social-links {
    display: inline-flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* Trust badge sizes — prod renders them at consistent ~45-65px height; v2
 * was showing the Shopper Approved milestone at full natural size (~140px)
 * which dwarfed the BBB / ASCA badges next to it. */
.page-footer .footer-icons-container img.asca-logo {
    height: 50px;
    width: auto;
}

.page-footer .footer-icons-container .shopperlink {
    display: inline-block;
}

.page-footer .footer-icons-container .shopper-approved-milestone {
    height: 65px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .page-footer .footer-col-3 {
        align-items: flex-start;
    }

    .page-footer .footer-col-3 .footer-icons-container {
        justify-content: flex-start;
    }
}

/*
 * Phase 3.9.1 — remove .content padding-top/bottom that pushed the hero
 * 30px below the masthead. Legacy prod serves the hero as a direct
 * <body> child (no .page > .content-wrapper > .content wrapper), so the
 * hero butts directly against the masthead. v2 keeps the wrapper for
 * structural reasons but neutralizes the padding.
 */
.content {
    padding-top: 0;
    padding-bottom: 0;
}

/*
 * Phase 3.9.1 — testimonial card layout. Prod-clone uses 4 cards that
 * flex-distribute evenly across the 1110px list width with a 20px gap
 * (giving 262.5px per card). v2's legacy CSS doesn't set the gap so cards
 * went edge-to-edge. Add the gap and let flex distribute — don't pin a
 * fixed width (hardcoding 250px left visible side gutters because 4×250 +
 * 3×20 = 1060 < 1110).
 */
.amri-clients-feedback .amri-clients-feedback-list {
    gap: 20px;
}

.amri-clients-feedback .amri-clients-feedback-list .amri-clients-feedback-list-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
}

/*
 * Phase 3.9.1 — testimonial quote glyph above text (not beside).
 *
 * Legacy main.css:2333 puts the `:before` quote inside a flex-row card, so it
 * sits to the LEFT of the text-holder. Prod-clone has reworked the cards to
 * stack quote-above-text (4 cards wide, narrow column layout). Override the
 * `:before` to render as a block above and let the text-holder claim full
 * width without the inherited left border / left padding (which only makes
 * sense in the side-by-side layout).
 */
.amri-clients-feedback .amri-clients-feedback-list .amri-clients-feedback-list-item:before {
    display: block;
    padding-right: 0;
    line-height: 0.8;
    margin-bottom: 12px;
}

.amri-clients-feedback .amri-clients-feedback-list .amri-clients-feedback-list-item .amri-clients-feedback-list-item-text .text-holder {
    border-left: none;
    padding-left: 0;
}

/*
 * Phase 3.9.1 — testimonials at narrow widths. Prod-clone uses two states:
 *
 *   >1024 : 4-col flex row (cards 260px wide, gap 15)
 *   <=1024: 1-col stack — legacy responsive.css already sets
 *           `.amri-clients-feedback-list { display: block; max-width: 570px;
 *           margin: 0 auto }` so the cards center as a single column.
 *
 * Below 1024 we let the legacy rule win — just neutralize the desktop
 * `flex-direction: column` / fixed-width overrides so legacy block layout
 * applies cleanly.
 */
@media (max-width: 1024px) {
    .amri-clients-feedback .amri-clients-feedback-list .amri-clients-feedback-list-item {
        width: 100%;
        flex: 0 0 auto;
    }
}

/*
 * Hero background positioning:
 *
 * Legacy `custom-style.css` line 384 absolutely positions the
 * `<picture class="hero-background">` inside `.amri-hero` (which has
 * `position: relative` per main.css line 1857). Without it, the picture
 * lays out as a regular block-level image above the hero content and the
 * dark-red background never shows up behind the text.
 *
 * The full custom-style.css port is deferred per `planning/deferred.md`
 * (Phase 3 theme work). Lifting the one rule here unblocks the
 * `landingCoursesSection` hero block without dragging in the rest.
 */
picture.hero-background img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/*
 * LandingCourses carousel + accordion stubs REMOVED in Phase 3.8 — the
 * TS bundle (`wwwroot/Scripts/amri-home.js`, source under
 * `src/Aclsonline.Web/Scripts/home/`) now owns visibility:
 *   - desktop carousel: click `.slider-thumbnails li` → show matching card
 *   - mobile accordion: click `.amri-accordion-toggler` → toggle active +
 *     show matching `.amri-accordion-content-container`
 * First-paint state matches legacy (ACLS active by default; other cards
 * hidden via inline `style="display:none"` set by JS on init).
 */

/*
 * Phase 3.9 polish — anchor link color + display strip the underline that
 * legacy main.css implicitly relied on but our flatter cascade doesn't.
 */
.amri-header .main-menu a,
.amri-header .main-menu a:visited,
.amri-header .main-menu a:hover {
    text-decoration: none;
}

/*
 * Phase 4 PR H2 — Exam Prep dropdown items need the legacy 17px font (not
 * the 24px the root-level `.amri-header-nav-label` defines) + allow long
 * labels like "DIAGNOSTIC SKILLS CHALLENGE" to wrap to 2 lines instead of
 * overflowing the 200px-wide dropdown panel.
 *
 * v2's `_NavigationMenu.cshtml` wraps every link text in
 * `<span class="amri-header-nav-label">`, so the legacy CSS that targeted
 * `.amri-header .bottom .main-menu .header-dropdown ul li a { font-size: 17px }`
 * doesn't reach the text — the span's own 24px declaration takes precedence.
 * Override the span size + whitespace rule specifically inside the dropdown.
 */
.amri-header .main-menu .header-dropdown ul .amri-header-nav-label {
    font-size: 17px;
    line-height: 21px;
    white-space: normal;
}

/*
 * Header masthead CTA casing — parity fix (auth/login-form deviation, 2026-08-12).
 * Legacy renders the "Log in" / "My account" / "Log out" masthead buttons in
 * SENTENCE case ("Log in", not "LOG IN"); a prior Phase 3.9 "polish" wrongly
 * added `text-transform: uppercase` here. Force sentence case to match legacy
 * (`LoginActionBar.cshtml` renders literal "Log in" with no uppercasing CSS).
 */
.amri-header .center-right-side .amri-btn[data-size="small"] {
    text-transform: none;
}

/*
 * Phase 3.9 deviation — keep the cart icon visible on mobile.
 * Legacy hid `.amri-header .icon-btn` at `(max-width: 768px)` (see
 * main.css:600–602); legacy also had no cart in MobileLoginActionBar or the
 * drawer at all, so the cart was unreachable below 1024px. v2 surfaces it
 * in both the mobile masthead and drawer utility row so checkout is reachable
 * on small screens. Phase 6 wires the real count; today it's hardcoded 0.
 */
@media (max-width: 768px) {
    .amri-header-mobile .icon-btn,
    .amri-mobile-drawer .icon-btn {
        display: flex;
    }
}

/*
 * Parity fix (auth/login-form deviations #2 + #3, 2026-08-12). The mobile
 * masthead (.amri-header-mobile, shown ≤1024px) login button must match legacy,
 * verified live vs the prod-clone at 1024 / 768 / 375:
 *   #2 — at 769–1024px it renders as an OUTLINE/ghost button (white bg, red
 *        border + text), like legacy's
 *        `.amri-btn-mobile-header[data-variant='secondary']`, NOT the solid-red
 *        desktop fill v2 was showing.
 *   #3 — at ≤768px it is HIDDEN (legacy `@media (max-width:768px)` hide);
 *        anonymous visitors reach login via the slide-out drawer, which renders
 *        its own "Log in" CTA.
 * Scoped to the logged-OUT login button only — the logged-in `.amri-user-menu`
 * ("My account") + "Log out" stay in the masthead because the drawer account-
 * dropdown port is still deferred (hiding them would drop account access on
 * mobile). Revisit once the drawer account-dropdown lands.
 */
.amri-header-mobile .center-right-side .amri-btn[data-modal-toggle="login"] {
    background-color: #fff;
    color: #bd1e2b;
    border: 2px solid #bd1e2b;
}

@media (max-width: 768px) {
    .amri-header-mobile .center-right-side .amri-btn[data-modal-toggle="login"] {
        display: none;
    }
}

/*
 * Phone masthead (≤768) account access (2026-08-12) — the full "My account"
 * pill (.amri-user-menu) is hidden at ≤768, which used to drop account access
 * entirely on phones. Surface a compact person-icon circle (mirrors the cart
 * `.icon-btn`) linking to the dashboard. Hidden by default so it never shows
 * on desktop / tablet (the pill covers those) nor in the drawer (its own
 * My-account accordion); revealed only in the phone masthead.
 */
.amri-account-icon {
    display: none;
}

.amri-account-icon .material-icons {
    font-size: 20px;
    color: #bd1e2b;
    line-height: 1;
}

/* Never show it inside the drawer, even though the drawer re-shows `.icon-btn`
   at ≤768 for the cart (more specific than that rule so it wins). */
.amri-mobile-drawer .amri-mobile-drawer-account-row .amri-account-icon {
    display: none;
}

@media (max-width: 768px) {
    .amri-header-mobile .center-right-side .amri-account-icon {
        display: flex;
    }

    /* Phone masthead is crowded once the person icon joins Log out + cart +
       burger. Tighten the (25–27px) inter-item margins and keep the smaller
       logo so everything fits on one line without Log out wrapping. */
    .amri-header-mobile .center-right-side .amri-btn,
    .amri-header-mobile .center-right-side .icon-btn {
        margin-right: 10px;
    }

    /* Match the person + cart circles to the Log out pill height (34px) — the
       default 44px `.icon-btn` made them taller than the button. */
    .amri-header-mobile .center-right-side .icon-btn {
        width: 34px;
        height: 34px;
    }

    .amri-header-mobile .center-right-side .icon-btn img {
        height: 18px;
    }

    .amri-header-mobile .center-right-side .amri-btn[href*="logout"] {
        white-space: nowrap;
    }

    .amri-header-mobile .logo-holder {
        width: 150px;
    }
}

/*
 * Phase 3.9 polish — Footer newsletter form layout. The legacy column gives
 * the input a fixed width and stacks the success/error message below.
 */
.footer-newsletter-form .form-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.footer-newsletter-form input[type="email"] {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.footer-newsletter-status {
    margin-top: 8px;
    font-size: 13px;
}

.footer-newsletter-success { color: #2a7a2a; }
.footer-newsletter-error   { color: #bd1e2c; }

/*
 * Phase 3.9 — modal close button hover affordance.
 */
.amri-modal-close { cursor: pointer; }

/* Canonical form-level message styling — the ONE global style for every form's
   success confirmation / error summary, rendered by Shared/Forms/_FormMessage
   (and set directly by referralForm.cshtml's AJAX handler). Used by Contact Us,
   the auth modals (register / forgot-password), referral, … Do NOT invent
   per-form banner classes. */
.amri-form-error   { color: #bd1e2c; margin-bottom: 12px; font-weight: 600; }
.amri-form-success { color: #0a7c34; margin-bottom: 12px; font-weight: 600; }

/*
 * Phase 3.13 — breadcrumb rules lifted from legacy `custom-style.css`
 * lines 262-272 + media-query overrides (455-456, 497). The full
 * custom-style.css port still defers to Phase 7 SASS migration
 * (deferred row #75); this is just the breadcrumb subset needed by
 * `_Breadcrumb.cshtml`.
 */
/* Self-contained breadcrumb chrome — explicit font + size matching legacy
   prodclone (trade-gothic-next-condensed at 16px). The blog detail page
   wraps the breadcrumb inside `.amri-container.narrow.typography`, and the
   `.typography ul` / `.typography ul li` rules in main.css:543-556 inject
   font-size 15.7px + trade-gothic-next (non-condensed) + line-height 30px
   + 40px padding-left. Those make the breadcrumb look indented + tall on
   the detail page only. The overrides below win at equal specificity (last
   match) so the breadcrumb is consistent on every page. */
.breadcrumb-container {
    padding: 12px 0;
    font-family: 'trade-gothic-next-condensed', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3;
}
.breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Match container font properties so the `.typography ul` cascade
       (font-size + family + line-height) is overridden on the detail page. */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.breadcrumb ul li {
    display: inline;
    /* Defeat global.css:140 `ul > li { background: url(<bullet.png>) ... }` —
       legacy paints an orange disc bitmap as background on every li.
       The breadcrumb is inline + separator-driven; the orphan bullet
       leaks before each segment otherwise. */
    background: none;
    padding: 0;
    margin: 0;
    /* `.typography ul li` sets `line-height: 30px` on the detail page,
       making each crumb sit on a thicker line. Re-inherit so the
       container's 1.3 line-height wins. */
    line-height: inherit;
    font-size: inherit;
}
.breadcrumb ul li + li::before { content: " \00BB "; padding: 0 6px; color: #999; }
.breadcrumb ul li a { color: #bd1e2b; text-decoration: none; }
.breadcrumb ul li a:hover { color: #ec6371; text-decoration: underline; }
@media (max-width: 1024px) {
    .breadcrumb-container { padding: 10px 0; }
}
@media (max-width: 768px) {
    .breadcrumb-container { padding: 8px 0; }
}
/* Phase 3.12 — visible disabled state for .amri-btn. Legacy CSS only styles
   the enabled state; without this, `<button disabled>` looks identical to
   enabled because the explicit background-color + cursor:pointer override
   the browser default UA disabled rendering. Used by the reset-password
   mismatch check (this PR) and the register modal's reCAPTCHA-gated submit
   (Phase 3.11). */
.amri-btn[disabled],
.amri-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/*
 * Phase 3.9 — top search form layout (masthead).
 * Legacy renders the magnifier icon INSIDE the input on the right; v2 mirrors
 * that with a relatively-positioned form + absolutely-positioned button.
 */
.amri-header .header-search {
    /* was min-width: 240px — that floor, plus the fixed 97px nav indent + nowrap
       nav labels, overflowed the masthead row between 1025-1200px and forced a
       horizontal scrollbar. Let the search shrink instead. */
    min-width: 0;
    display: flex;
    /* Top-align (not centre) so the input lines up with the nav labels rather
       than floating in the middle of the tall dropdown-padding row. */
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 4px;
}

.amri-top-search-form {
    position: relative;
    display: block;
    width: 100%;
    max-width: 240px;
}

.amri-top-search-form input[type="search"] {
    width: 100%;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #fff;
    padding: 6px 32px 6px 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.amri-top-search-form input[type="search"]:focus {
    outline: none;
    border-color: #bd1e2c;
}

.amri-top-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    color: #6d6d6d;
}

.amri-top-search-btn .material-icons {
    font-size: 20px;
}

/*
 * Phase 3.9 — mobile drawer + search overlay full-viewport panels.
 */
.amri-mobile-drawer,
.amri-mobile-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.amri-mobile-drawer-cover,
.amri-mobile-search-overlay-cover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.amri-mobile-drawer-panel,
.amri-mobile-search-overlay-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 360px;
    height: 100vh;
    background: #fff;
    padding: 24px;
    overflow-y: auto;
}

/* Phones: full-width panel (legacy's mobile menu is 100% wide). Tablets keep
   the narrower slide-over panel above — full width isn't needed there. */
@media (max-width: 768px) {
    .amri-mobile-drawer-panel,
    .amri-mobile-search-overlay-panel {
        width: 100vw;
        max-width: none;
    }
}

.amri-mobile-drawer-close,
.amri-mobile-search-overlay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
}

/*
 * Parity fix (auth deviation #5, 2026-08-12) — the drawer's utility row
 * (About Us / Contact Us / login-or-account CTA / cart, from _MobileDrawer →
 * .amri-mobile-drawer-utility) had NO layout rule, so its children flowed
 * inline and crammed/overlapped instead of stacking. Legacy lays the mobile
 * menu utilities out as a clean vertical list. Stack them with spacing,
 * separated from the nav above by a divider.
 */
.amri-mobile-drawer-utility {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    /* Utility strip now renders ABOVE the nav — divider sits below it. */
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

/* My account + Log out + cart on ONE centered row. */
.amri-mobile-drawer-account-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* Match the "Log out" pill to the "My account" button (font 18 / line 23 /
   padding 7·13·9) — the base `data-size="small"` renders it smaller, so the
   logged-in pair looked mismatched. The drawer always shows the larger pair
   (drawer only exists ≤1024). */
.amri-mobile-drawer-account-row a.amri-btn[href*="logout"] {
    font-size: 18px;
    line-height: 23px;
    padding: 7px 13px 9px;
    letter-spacing: 0.88px;
    text-transform: none;
}

/* Masthead: ONLY at 769–1024px does the "My account" pill render at the larger
   size next to Log out, so only there does Log out need bumping to match. On
   desktop (>1024) both are `data-size="small"` and already match; at ≤768 the
   pill is replaced by the person-icon circle, so Log out stays small there (else
   the enlarged pill wraps to two lines in the crowded phone masthead). */
@media (min-width: 769px) and (max-width: 1024px) {
    .amri-header .center-right-side a.amri-btn[href*="logout"] {
        font-size: 18px;
        line-height: 23px;
        padding: 7px 13px 9px;
        letter-spacing: 0.88px;
        text-transform: none;
    }
}

/* Secondary links — own section at the bottom, below the nav, centered. */
.amri-mobile-drawer-secondary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

/*
 * My Account access on mobile (2026-08-12) — `.amri-user-menu` is the desktop
 * hover-dropdown that legacy force-hides at ≤768px (`display:none`) and only
 * reveals on hover (dead on touch), so the mobile drawer had NO route to
 * Dashboard / Notifications / User profile / Exam prep / Group admin. Force it
 * visible in the drawer and convert the absolute hover-popover into an inline
 * tap-to-expand accordion (toggles `.is-open`; see chrome/mobile-drawer.ts).
 */
.amri-mobile-drawer .amri-user-menu {
    display: block;
    /* Shrink-to-content so it shares the account row with Log out + cart
       instead of taking the full width and forcing them onto the next line. */
    width: auto;
    position: static;
}

.amri-mobile-drawer .amri-user-menu > button[data-variant='secondary'].amri-btn {
    cursor: pointer;
}

.amri-mobile-drawer .amri-user-menu ul {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    min-width: 190px;
    display: none;
    box-shadow: none;
    border-radius: 8px;
    margin: 8px 0 0;
    text-align: left;
}

.amri-mobile-drawer .amri-user-menu.is-open ul {
    display: block;
}

/* Drop the popover arrow pseudo-elements — meaningless once inline. */
.amri-mobile-drawer .amri-user-menu ul::before,
.amri-mobile-drawer .amri-user-menu ul::after {
    display: none;
}

/* Logged-in user's name at the top of the drawer utilities — legacy surfaces
   the signed-in name (bold red) next to Log Out on mobile. */
.amri-mobile-drawer-user {
    font-family: 'trade-gothic-next-condensed', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #bd1e2b;
}

/*
 * Parity fix (auth deviation — drawer NAV, 2026-08-12) — the drawer embeds the
 * desktop `_NavigationMenu` <ul>, whose layout + show/hide rules are all scoped
 * to `.amri-header .bottom .main-menu` and never reach the drawer. Result: the
 * nav rendered as a raw browser-default bulleted list, left-aligned, with EVERY
 * dropdown's children pre-expanded. Legacy's dedicated mobile nav
 * (`.amri-header-primary-nav-list`) is instead a CENTERED, bullet-less ACCORDION:
 * top-level items only; each dropdown's children collapsed until the parent
 * label is tapped (toggles `.is-open` — see chrome/mobile-drawer.ts). Port that
 * behaviour onto v2's markup classes (`.header-dropdown` /
 * `.header-dropdown-toggler` / `.primary-nav__children`).
 */
.amri-mobile-drawer-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.amri-mobile-drawer-nav > ul {
    text-align: center;
}

.amri-mobile-drawer-nav > ul > li {
    background: none;
    padding: 0;
    margin: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Top-level labels + dropdown togglers — centered block rows. */
.amri-mobile-drawer-nav .amri-header-nav-label {
    display: block;
    font-size: 20px;
    line-height: 1;
    padding: 20px 0;
    color: #262626;
}

/* Uniform dark top-level labels (legacy) — override the site's default red link
   colour so plain-link items (FAQ / Groups / Articles) match the dropdown
   togglers (Get Certified / Why AMRI / Exam Prep). */
.amri-mobile-drawer-nav a {
    text-decoration: none;
    color: #262626;
}

.amri-mobile-drawer-nav .header-dropdown-toggler {
    cursor: pointer;
}

/* Active top-level item — legacy reds it. */
.amri-mobile-drawer-nav > ul > li.is-active > a .amri-header-nav-label {
    color: #bd1e2b;
}

/* Active DESKTOP top-nav item — same #bd1e2b highlight as the mobile drawer.
   The nav template renders `is-active`, but the ported main.css highlight rule
   still targets legacy's renamed `.active-nav-item` class, so it never matched
   and the active item (e.g. FAQ on /faqs/) showed no highlight — Raminta QA
   86bbdgcmz. Re-point the legacy highlight at the v2 `is-active` class. */
.amri-header .bottom .main-menu > ul > li.is-active .amri-header-nav-label {
    color: #bd1e2b;
}

/* Dropdown children — collapsed by default; the accordion open-state reveals
   them (parent li gets `.is-open` from the toggler tap handler). */
.amri-mobile-drawer-nav .header-dropdown > .primary-nav__children {
    display: none;
}

.amri-mobile-drawer-nav .header-dropdown.is-open {
    background-color: #fff;
    border-top: 1px solid #fbd9a6;
    border-bottom: 1px solid #fbd9a6;
}

/* Legacy reds the WHOLE open group — the toggler AND its child labels — not
   just the toggler. Descendant selector so it beats the muted-grey child rule
   below when the dropdown is open. */
.amri-mobile-drawer-nav .header-dropdown.is-open .amri-header-nav-label {
    color: #ec6371;
}

.amri-mobile-drawer-nav .header-dropdown.is-open > .primary-nav__children {
    display: block;
}

/* Child links — legacy renders them uppercase, smaller, muted, hairline-divided.
   `background: none` clears the global legacy `li` data-URI bullet image (the
   top-level reset only covered `> ul > li`, not these nested children). */
.amri-mobile-drawer-nav .primary-nav__children > li {
    background: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #efefef;
}

.amri-mobile-drawer-nav .primary-nav__children > li a .amri-header-nav-label {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 56px;
    padding: 0;
    color: #656565;
}

body.amri-drawer-open,
body.amri-modal-open {
    overflow: hidden;
}

/* Phase 3.17c-i — cart-line horizontal separator. The legacy stylesheet
   has `.amri-checkout section { border-bottom: 1px solid #bfbfbf; ... }`
   but that descendant selector requires a `.amri-checkout` ancestor that
   v2 doesn't render. Apply the same visual to the v2 wrapper class. */
.amri-checkout--cart .amri-checkout--item {
    border-bottom: 1px solid #bfbfbf;
    padding-bottom: 32px;
    margin-bottom: 40px;
}

.amri-checkout--cart .amri-checkout--item:last-of-type {
    border-bottom: none;
}

@media (max-width: 768px) {
    .amri-checkout--cart .amri-checkout--item {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
}

/* Phase 3.17c-i — BundleOffer upsell row: legacy click target was a
   <label> wrapping a checkbox; v2 wraps the same visual in a <form> that
   posts to AddToCart / RemoveProductFromCart on click. Strip the default
   button chrome so only the .form-item-checkbox span (the 18×18 square)
   is visible. */
.amri-bundle-toggle-form {
    margin: 0;
    padding: 0;
    display: block;
}

.amri-bundle-toggle-form button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.amri-bundle-toggle-form button:focus-visible {
    outline: 2px solid #2c7ffd;
    outline-offset: 2px;
}

/* In-cart row: render the square as checked (blue background, white check).
   The .amri-bundle-checked span sits next to the (absent) input, so we
   target it directly with the same colours that .form-item-checkbox uses
   for input:checked + span. */
.amri-bundle-checked {
    border-color: #2c7ffd !important;
    background: #2c7ffd !important;
}

/* Phase 3.17c-i — title bar splits the heading (left) and the "get N% off"
   banner (right) with flex space-between. Legacy custom-style.css had
   `.amri-checkout--certification-title { display: flex; justify-content:
   space-between }` but v2 main.css shipped without the rule. */
.amri-checkout--certification-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 768px) {
    .amri-checkout--certification-title {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Bundle-offer banner inside the title bar — smaller, lighter, right-aligned. */
.amri-checkout--certification-title .bundle-offer {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    font-weight: normal;
}

.amri-checkout--certification-title .bundle-offer-text {
    text-align: right;
    font-size: 16px;
    line-height: 20px;
}

.amri-checkout--certification-title .bundle-offer-details {
    font-size: 12px;
    line-height: 1;
    font-weight: normal;
}

@media (max-width: 768px) {
    .amri-checkout--certification-title .bundle-offer {
        justify-content: flex-start;
    }
    .amri-checkout--certification-title .bundle-offer-text {
        text-align: left;
        font-size: 13px;
    }
}

/* Phase 3.17c-i — keep .prices on one line; legacy main.css declares
   .amri-checkout--certification .prices { display: flex }, but the v2 main.css
   port omitted that rule. Restore it here to avoid the price + (save $X)
   text wrapping to multiple vertical lines. */
.amri-checkout--certification .prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.amri-checkout--certification .original-price {
    margin-right: 8px;
}

/* Strike the original price when a bundle-discounted price is shown next to it
   — parity with legacy (amri.checkout.js line-throughs `.original-price` when the
   bundle offer is active). The `.is-discounted` class is set server-side in
   _BundleOffer.cshtml only on rows that render a discounted price. */
.amri-checkout--certification .original-price.is-discounted {
    text-decoration: line-through;
}

.amri-checkout--certification .discounted-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-weight: normal;
    font-size: 16px;
}

.amri-checkout--certification.acls-block .discounted-price { color: #bd1e2b; }
.amri-checkout--certification.pals-block .discounted-price { color: #7160AF; }
.amri-checkout--certification.bls-block .discounted-price { color: #34558C; }

/* Phase 3.17c-i step-progress: legacy markup pattern
   (.amri-checkout--header > .amri-container > .amri-checkout--steps > h1 +
    nav > ul > li > a[data-step]) is already styled by main.css —
    .amri-checkout--steps nav ul a::before uses `content: attr(data-step)`
    to render the numbered circles, with `.current` and `.complete`
    overrides for state colours. No additional CSS needed here. */

.amri-checkout--suggested {
    margin-top: 32px;
}

.amri-checkout--suggested-item .amri-suggested-form {
    display: contents;
}

.amri-checkout--suggested-item input[type="checkbox"]:disabled + span {
    opacity: 0.45;
    cursor: not-allowed;
}

.amri-checkout--suggested-item-content {
    display: block;
}

.amri-checkout--suggested-item-content[hidden] {
    display: none;
}

.amri-checkout--suggested-item-content .promotion-block {
    padding: 6px 10px;
    border: 1px solid #fbd9a6;
    background: #fffef7;
    font-size: 13px;
}

/* Phase 3.17b-i — shipping form wraps two columns (address fields + order
   summary) inside .amri-checkout--container's flex layout. Without
   display: contents the form is a single flex child and the columns
   stack vertically instead of side-by-side. */
.amri-checkout--shipping-form,
.amri-checkout--payment-form {
    display: contents;
}

/* Phase 3.18g — payment-type tabs above the form. Legacy `main.css:3906`
   uses `justify-content: space-between` + `width: 32%` for the 3-tab
   layout (CC / E-Check / PayPal). v2 currently ships 2 tabs (PayPal
   deferred via 3.18c). Override `space-between` (which pushes the two
   tabs to opposite edges with a 36% gap in the middle) with a left-
   aligned layout + fixed 2% gap, keeping each tab at the legacy 32%
   width so the row visually matches prod's tab sizing. The PayPal slot
   stays empty on the right until 3.18c lights it up. */
.amri-checkout--payment-tabs {
    justify-content: flex-start;
    gap: 2%;
}

.amri-checkout--payment-tabs li a {
    cursor: pointer;
}

/* Phase 3.18h — billing-address override panel. Mirrors legacy
   BillingAddressPanel chrome (title + same-as-mailing toggle row + the
   collapsible address fields underneath). */
.amri-checkout--billing-panel {
    border: 0;
    padding: 0;
    margin: 24px 0 0;
}

.amri-checkout--billing-panel > legend {
    font-family: "trade-gothic-next-condensed", "trade-gothic-next", sans-serif;
    font-size: 22px;
    line-height: 26px;
    color: #bd1e2b;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 0;
}

.amri-checkout--billing-toggle {
    margin-bottom: 12px;
}

.amri-checkout--billing-preview {
    margin-bottom: 12px;
    line-height: 1.6;
}

.amri-checkout--billing-fields {
    margin-top: 8px;
}

/* Phase 3.17b-i — address-field labels render inline by default in v2
   main.css (only `.form-item.form-item-input input` has full-width
   styling). The address partial uses plain `.form-item` wrappers, so
   labels and inputs collapse to a single inline row. These rules give
   the shipping/billing address fields the stacked layout legacy uses. */
.amri-checkout--address .form-item {
    display: block;
    margin-bottom: 12px;
}

.amri-checkout--address .form-item > label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
}

.amri-checkout--address .form-item > label .required {
    color: #bd1e2b;
    margin-left: 2px;
}

.amri-checkout--address .form-item input[type="text"],
.amri-checkout--address .form-item select {
    width: 100%;
    border: 1px solid #adadad;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    line-height: 20px;
    padding: 6px 12px 8px;
    outline: none;
    font-family: "trade-gothic-next", sans-serif;
    color: #000;
}

.amri-checkout--address .form-item input[type="text"]:focus,
.amri-checkout--address .form-item select:focus {
    box-shadow: 0 0 6px #faaf4080;
    border-color: #faaf40;
}

/* Phase 3.18i — single source of truth for form-field validation rendering
   in any `.amri-form` context (shipping, account, credit-card, e-check,
   billing panel, anywhere a future form lands). One rule replaces four
   per-fieldset overrides.

   Legacy `global.css:1082` (`span.field-validation-error { position:absolute;
   top:45px; right:10px; width:13px; height:11px }`) ships a tooltip-icon
   BetterCms pattern v2 doesn't use — it renders any `<span>` emitted by
   `Html.ValidationMessage` as a tiny 13px-wide absolutely-positioned box,
   which makes the message text wrap one-word-per-line and overflow the
   column. The rules below reset that *anywhere* a validation span lives
   inside an `.amri-form`. The `.amri-form` ancestor lifts specificity
   (0,2,1) above the legacy rule (0,1,1). */
.amri-form .form-item.has-error input[type="text"],
.amri-form .form-item.has-error input[type="email"],
.amri-form .form-item.has-error input[type="password"],
.amri-form .form-item.has-error input[type="tel"],
.amri-form .form-item.has-error textarea,
.amri-form .form-item.has-error select {
    border-color: #bd1e2b;
    background-color: #fdf4f4;
}

.amri-form span.amri-field-error,
.amri-form span.field-validation-error {
    position: static;
    display: block;
    width: auto;
    height: auto;
    top: auto;
    right: auto;
    background: none;
    margin-top: 4px;
    padding: 0;
    color: #bd1e2b;
    font-size: 13px;
    line-height: 18px;
}

.amri-form span.field-validation-valid {
    display: none;
}

/* Expires row pairs each select with its inline validation message inside
   `.amri-form--date-col` so the per-field error appears directly under the
   offending dropdown. Column is `display: flex; flex-direction: column` so
   the error stacks below its select; the parent `.form-item-wrapper` keeps
   its `display: flex` (legacy main.css:3478) and lays the two columns +
   separator side-by-side. */
.amri-form .form-item-select-date .amri-form--date-col {
    display: flex;
    flex-direction: column;
}

/* Keep the MM / YYYY dropdowns readable when a validation error renders below
   the Expires row. The error text is a flex item in one column and, with no
   floor on the selects, it lets that column grow and squeezes the other (the
   month) down to just its chevron. A min-width on the selects stops either
   dropdown from collapsing (QA: month dropdown disappears on an expiration
   error). */
.amri-form .form-item-select-date .amri-form--date-col select {
    min-width: 72px;
}

/* Cancellation Policy link below the Complete-purchase button: centered +
   larger so it reads as a deliberate action (opens in a new tab — see
   Review.cshtml — so it never drops the customer out of checkout). */
.amri-checkout--cancellation-policy {
    margin-top: 16px;
    text-align: center;
}

.amri-checkout--cancellation-policy .amri-link {
    font-size: 18px;
}

/* QA 86bb1fg8h: the CVV + Expires row (`.amri-form .form-group`) uses
   `align-items: flex-end`. When the CVV field shows an inline "CVV is required."
   error, its column grows downward and flex-end shifts the CVV input UP out of
   line with the Expires dropdowns (~22px). Top-align just this row (scoped via
   the CVV column) so an inline error under one field never moves the inputs;
   with no error both columns are equal height so this is visually identical. */
.amri-form .form-group:has(> .form-item.col-cvv) {
    align-items: flex-start;
}

/* Form-level summary (only model-level errors remain here — field-level
   messages are inline next to each input). */
.amri-form-errors {
    background: #fdf4f4;
    border: 1px solid #bd1e2b;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #89212c;
    font-size: 14px;
}

.amri-form-errors p {
    margin: 0;
}

.amri-form-errors ul {
    /* QA 86bb1ffxf: no list bullet — the disc marker stacked with the list
       bullet to render a doubled "• •". The checkout summaries now render as
       <p> (see Account/Shipping/Payment .cshtml); this guards any other
       `.amri-form-errors ul` from the same doubling. */
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}


/* Phase 3.17b-ii — Order-summary title row variant that hosts the
   "Cancel order" link on shipping / account / payment pages. Title stays
   left-aligned and the link floats to the right with material-icon prefix. */
.amri-checkout-title--with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.amri-checkout-title--with-actions .amri-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #bd1e2b;
    /* Kill the anchor's own underline: it propagates across the rotated
       add_circle icon and — because the icon is transform:rotate(45deg) — the
       underline segment under it is painted at an angle, showing as a stray
       diagonal line next to the cancel icon. A child's text-decoration:none
       can't cancel an ancestor's underline, so it must be removed here; the
       label keeps its underline via `.amri-link > span` below. */
    text-decoration: none;
}

.amri-checkout-title--with-actions .amri-link > span {
    text-decoration: underline;
}

/* The icon sits inline inside .amri-link; the link's underline would
   otherwise draw a line across the glyph and read as a "weird underscore".
   Scope the underline to the text span instead. The 45deg rotation turns
   add_circle into a cancel-X glyph. */
.amri-checkout-title--with-actions .amri-link .material-icons {
    font-size: 16px;
    text-decoration: none;
    transform: rotate(45deg);
}

/* Phase 3.17b-i — Country/City and State/Zip render side-by-side on
   desktop (legacy mailing-address layout). Stack on mobile. */
.amri-checkout--address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .amri-checkout--address-row {
        grid-template-columns: 1fr;
    }
}

/* Phase 3.17b-i — "+ Add address line" toggle that reveals optional
   Organization + Street Address 2 fields. Matches the legacy mailing-
   address layout where extras default hidden to keep the form short. */
.amri-checkout--address-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0 0 16px;
    background: none;
    border: none;
    color: #bd1e2b;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.amri-checkout--address-toggle:hover {
    color: #89212c;
}

/* Scope the underline to the text span; the icon glyph stays clean. */
.amri-checkout--address-toggle > span {
    text-decoration: underline;
}

.amri-checkout--address-toggle i.material-icons {
    font-size: 18px;
    text-decoration: none;
}

.amri-checkout--address-extras[hidden] {
    display: none;
}

/* Phase 3.18d — Account step (/checkout/account). Inputs/select sizing
   inherits from the shipping address rules above via the same `.form-item`
   wrapper pattern; only the account-specific layout chrome lives here. */
.amri-checkout--account .form-item {
    display: block;
    margin-bottom: 12px;
}

.amri-checkout--account .form-item[hidden] {
    /* Class-scoped rule wins over the global `[hidden] { display: none }`,
       which `.amri-checkout--account .form-item { display: block }` above
       silently overrides. Restore the hide-when-hidden contract. */
    display: none;
}

.amri-checkout--account .form-item > label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
}

.amri-checkout--account .form-item > label .required {
    color: #bd1e2b;
    margin-left: 2px;
}

.amri-checkout--account .form-item input[type="text"],
.amri-checkout--account .form-item input[type="email"],
.amri-checkout--account .form-item input[type="password"],
.amri-checkout--account .form-item select {
    width: 100%;
    border: 1px solid #adadad;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    line-height: 20px;
    padding: 6px 12px 8px;
    outline: none;
    font-family: "trade-gothic-next", sans-serif;
    color: #000;
}

.amri-checkout--account .form-item input:focus,
.amri-checkout--account .form-item select:focus {
    box-shadow: 0 0 6px #faaf4080;
    border-color: #faaf40;
}

.amri-checkout--account .form-item.has-error input,
.amri-checkout--account .form-item.has-error select {
    border-color: #bd1e2b;
    background-color: #fdf4f4;
}

.amri-checkout--account .form-item > span.amri-field-error,
.amri-checkout--account .form-item > span.field-validation-error {
    position: static;
    display: block;
    width: auto;
    height: auto;
    top: auto;
    right: auto;
    background: none;
    margin-top: 4px;
    padding: 0;
    color: #bd1e2b;
    font-size: 13px;
    line-height: 18px;
}

.amri-checkout--account .form-item > span.field-validation-valid {
    display: none;
}

.amri-checkout--account .form-item-checkbox {
    display: flex;
    align-items: center;
    margin: 8px 0 16px;
}

.amri-checkout--account .form-item-checkbox em {
    margin-left: 10px;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    color: #464646;
}

.amri-checkout--account-helpers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
}

.amri-checkout--account-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* "Or" divider — matches legacy `.amri-checkout--or`. Centered text with
   horizontal rules on either side. */
.amri-checkout--account-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: #656565;
    font-size: 14px;
    line-height: 20px;
}

.amri-checkout--account-or::before,
.amri-checkout--account-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid #d0d0d0;
}

/* Phase 3.17b-i — shipping-speed radio options also have no v2 main.css
   rule; without this each option's `<label>` renders inline so all six
   options flow as one paragraph. Stack them block-level. */
.amri-checkout--shipping-types .form-item-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.amri-checkout--shipping-types .form-item-radio + .form-item-radio {
    border-top: 1px solid #e6e6e6;
}

.amri-checkout--shipping-types .form-item-radio input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────
 * Phase 3.21a — Profile Dashboard layout. 1:1 port of legacy
 * /Profile/Dashboard.cshtml visual shape.
 * ───────────────────────────────────────────────────────────────────── */

/* Profile sub-nav — 4 tabs horizontally across the top. */
/* Match legacy `.amri-submenu` (main.css line 2711). */
.amri-profile-subnav {
    background-color: #89212c;
    color: #ffffff;
}

.amri-profile-subnav-list {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}

.amri-profile-subnav-item {
    flex: 1 1 0;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    /* Defeat legacy global.css `ul > li { padding-left: 23px; background: url(bullet.png) }`
       — bullets come from a bitmap on `background`, not `list-style`. */
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    list-style: none;
}

.amri-profile-subnav-item::before,
.amri-profile-subnav-item::marker {
    content: none;
}

.amri-profile-subnav-item:last-child {
    border-right: none;
}

/* Match legacy `.amri-submenu nav ul > li a` (main.css line 2730). */
.amri-profile-subnav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 27px 40px 26px;
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    line-height: 27px;
    text-transform: uppercase;
    transition: 0.2s color;
}

@media (max-width: 1024px) {
    .amri-profile-subnav-item a {
        font-size: 15px;
        line-height: 19px;
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {
    .amri-profile-subnav-item a {
        flex-direction: column;
        padding: 12px 9px;
        font-size: 10px;
        line-height: 12px;
        gap: 4px;
    }
}

.amri-profile-subnav-item a:hover,
.amri-profile-subnav-item.active a {
    color: #faaf40;
    text-decoration: none;
}

/* Match legacy `.amri-submenu nav ul [class^='icon-']` (line 2756). */
.amri-profile-subnav-item .material-icons {
    font-size: 22px;
    opacity: 0.4;
    vertical-align: middle;
}

.amri-profile-subnav-item a:hover .material-icons,
.amri-profile-subnav-item.active a .material-icons {
    opacity: 1;
}

/* Dashboard page chrome. */
.amri-profile-dashboard,
.amri-profile-groupaccounts {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

.amri-profile-dashboard .amri-page-title,
.amri-profile-groupaccounts .amri-page-title {
    color: #bd1e2b;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px;
}

/* Phase 3.21d.2 — /profile/groupaccounts view-only prepaid-code grid.
   Empty state, toolbar, table chrome, status badges. Action buttons
   in the rightmost column render as disabled `.amri-btn` until 3.21d.3
   wires the assign/cancel/resend workflows. */
.amri-profile-empty {
    background: #fff;
    border: 1px solid #e8e2d8;
    border-radius: 4px;
    padding: 32px;
    text-align: center;
    color: #464646;
    line-height: 1.5;
}

.amri-profile-empty p {
    margin: 0 0 16px;
}

.amri-profile-empty p:last-child {
    margin: 0;
}

/* Two-column layout: main (codes) + right rail (FAQs sidebar). Collapses
   to single column under 1024px so the sidebar drops below the main flow. */
.amri-profile-groupaccounts--columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .amri-profile-groupaccounts--columns {
        grid-template-columns: 1fr;
    }
}

.amri-profile-groupaccounts--main {
    min-width: 0;
}

/* Type sizes below are pulled from legacy /profile/groupaccounts measured
   via getComputedStyle (see commit body / finding for the table). Legacy
   uses 20px for headings + card labels, 16px for body / links / questions,
   `rgb(152, 38, 50)` (#982632) for the heading red, and
   `rgb(236, 99, 113)` (#ec6371) for the orange-red action-link color. */
.amri-profile-groupaccounts--section-title {
    color: #982632;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 8px;
}

.amri-profile-groupaccounts--prepaid-section {
    margin-bottom: 40px;
}

/* Phase 3.21d.3 — search + "Show only assigned" filter bar above the table.
   Pure client-side filter (vanilla JS in the view) until 3.21d.4 adds the
   server-side autocomplete + paged grid. Layout mirrors the legacy
   filter-search block: label / input / toggle stacked on the same row on
   desktop, wrapping to two rows on mobile. */
.amri-profile-groupaccounts--filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 16px;
}

.amri-profile-groupaccounts--search-label {
    color: #4b4b4b;
    font-weight: 700;
    font-size: 14px;
}

.amri-profile-groupaccounts--search-input {
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 360px;
    padding: 8px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    font-size: 14px;
    line-height: 20px;
    color: #4b4b4b;
}

.amri-profile-groupaccounts--search-input:focus {
    outline: 2px solid #982632;
    outline-offset: 1px;
    border-color: #982632;
}

.amri-profile-groupaccounts--filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4b4b4b;
    font-size: 14px;
    cursor: pointer;
}

.amri-profile-groupaccounts--filter-empty {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: #6d6d6d;
    font-size: 14px;
    font-style: italic;
}

/* Phase 3.21d.3 — Recent Purchases panel reuses the Dashboard partial; this
   wrapper gives it the same top-spacing it has on the Dashboard layout when
   it lands under the two-column body. */
.amri-profile-groupaccounts--bottom {
    margin-top: 40px;
}

/* Unassigned-codes section — 6 cards stacked vertically with a top + bottom
   red rule, mirroring the legacy SidebarLayout main column. */
.amri-profile-groupaccounts--unassigned-section {
    margin-bottom: 32px;
}

.amri-profile-groupaccounts--unassigned-help {
    color: #6d6d6d;
    font-size: 16px;
    line-height: 21px;
    margin: 0 0 12px;
}

.amri-profile-groupaccounts--unassigned-list {
    border-top: 2px solid #982632;
    border-bottom: 2px solid #982632;
}

.amri-profile-unassigned-card {
    background: #faf6ef;
    border-bottom: 1px solid #efe7d6;
}

.amri-profile-unassigned-card:last-child {
    border-bottom: none;
}

.amri-profile-unassigned-card--header {
    padding: 14px 30px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title row: exam-type label (left) + Assign button (right) on one line. */
.amri-profile-unassigned-card--titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.amri-profile-unassigned-card--label {
    color: #982632;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 20px;
    line-height: 26px;
}

/* Keep the button from shrinking + give it breathing room from the label. */
.amri-profile-unassigned-card--assign {
    flex-shrink: 0;
    margin-left: 16px;
}

.amri-profile-unassigned-card--count {
    color: #6d6d6d;
    font-size: 16px;
    line-height: 26px;
}

.amri-profile-unassigned-card--order {
    color: #ec6371;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    text-decoration: none;
}

.amri-profile-unassigned-card--order:hover,
.amri-profile-unassigned-card--order:focus {
    color: #bd1e2b;
    text-decoration: underline;
}

/* FAQs sidebar — compact, right-rail variant of the home-page GroupFaqs
   block. Reuses IGroupFaqQuery so editorial content stays single-sourced.
   Sizes pulled from legacy: 20px heading, 16px question + View All link. */
.amri-profile-faqs-sidebar {
    background: transparent;
}

.amri-profile-faqs-sidebar--header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 8px;
}

.amri-profile-faqs-sidebar--title {
    color: #982632;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
}

.amri-profile-faqs-sidebar--view-all {
    color: #ec6371;
    font-size: 16px;
    line-height: 26px;
    text-decoration: none;
}

.amri-profile-faqs-sidebar--view-all:hover {
    text-decoration: underline;
}

.amri-profile-faqs-sidebar--list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.amri-profile-faqs-sidebar--item {
    border-bottom: 1px solid #efe7d6;
    /* Override legacy global.css `li { background: url(orange-dot.png) ...;
       padding-left: 23px }` — list-style:none on the parent kills the marker
       but not the background-image-as-bullet pattern. */
    background: none;
    padding-left: 0;
}

.amri-profile-faqs-sidebar--item:last-child {
    border-bottom: none;
}

.amri-profile-faqs-sidebar--toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 14px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
}

.amri-profile-faqs-sidebar--question {
    color: #bd1e2c;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
}

/* Generic collapsible chevron — orange circle + white down-arrow that
   rotates 180° when its `.js-collapsible` ancestor is expanded (i.e. lacks
   `.collapsed`). Reusable on ANY accordion that uses the existing
   `Scripts/chrome/faq-accordion.ts` JS contract. Lives outside the
   `.amri-profile-*` scope so future GroupFAQ home-block port, account
   modals, exam-step accordions, etc. share the same affordance. */
.amri-collapsible-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #faaf40;
    color: #fff;
    font-size: 18px;
    flex: 0 0 24px;
    transition: transform 180ms ease-in-out;
    transform: rotate(0deg);
}

.js-collapsible:not(.collapsed) .amri-collapsible-chevron {
    transform: rotate(180deg);
}

.amri-profile-faqs-sidebar--answer {
    padding: 0 0 16px;
    color: #6d6d6d;
    font-size: 16px;
    line-height: 21px;
}

.amri-profile-groupaccounts--toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.amri-profile-groupaccounts--count {
    color: #5b5b5b;
    font-size: 14px;
}

.amri-profile-groupaccounts--table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e8e2d8;
    border-radius: 4px;
}

.amri-profile-groupaccounts--table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.amri-profile-groupaccounts--table th,
.amri-profile-groupaccounts--table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e8e2d8;
    vertical-align: middle;
}

.amri-profile-groupaccounts--table thead th {
    background: #f8f3f0;
    font-weight: 700;
    color: #464646;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.amri-profile-groupaccounts--table tbody tr:last-child td {
    border-bottom: none;
}

.amri-profile-groupaccounts--table tbody tr:hover {
    background: #fdfaf6;
}

.amri-profile-groupaccounts--code {
    background: #f1f2f3;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: "Menlo", "Consolas", monospace;
    font-size: 13px;
    color: #000;
    white-space: nowrap;
}

/* Code-details popup trigger (legacy's `>` link), appended to the Card Earned
   cell. Small chevron button — no button chrome. */
.amri-profile-groupaccounts--details-link {
    margin-left: 8px;
    padding: 0 4px;
    border: none;
    background: none;
    color: #982632;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.amri-profile-groupaccounts--details-link:hover,
.amri-profile-groupaccounts--details-link:focus {
    color: #bd1e2b;
}

.amri-profile-groupaccounts--actions-col {
    text-align: right;
    white-space: nowrap;
}

.amri-profile-groupaccounts--actions-col .amri-btn {
    margin-left: 4px;
    font-size: 12px;
    padding: 4px 12px;
}

.amri-profile-groupaccounts--actions-empty {
    color: #adadad;
}

/* Status badges — colour matches the legacy CSS palette so the visual
   carries over to the eventual 3.21d.3 PR without re-tuning. */
.amri-profile-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amri-profile-badge--free {
    background: #e1eef9;
    color: #1a5490;
}

.amri-profile-badge--pending {
    background: #fcf2dc;
    color: #8a5a04;
}

.amri-profile-badge--redeemed {
    background: #e1f3df;
    color: #2a6b1c;
}

/* Assigned-codes grid (legacy 7-column parity: Code ID / Purchase Date /
   Exam Type / Name / Status / Card Earned / Credits Earned). Short columns
   nowrap so the date/status/card/credits stay on their own tidy lines; Exam
   Type + Name take the remaining slack. The table-wrap keeps overflow-x:auto
   as the narrow-viewport fallback. */
.amri-profile-groupaccounts--date-cell {
    white-space: nowrap;
}

.amri-profile-groupaccounts--date-time {
    display: block;
    font-size: 12px;
    color: #767676;
}

.amri-profile-groupaccounts--status-note {
    display: block;
    font-size: 12px;
    color: #767676;
    margin-top: 2px;
}

.amri-profile-groupaccounts--status-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.amri-profile-groupaccounts--card-cell,
.amri-profile-groupaccounts--credits-cell {
    white-space: nowrap;
    text-align: center;
}

/* CME count bubble — reuses the redeemed-badge palette; rendered as a link
   to the CME certificate PDF. */
.amri-profile-badge--credits {
    min-width: 24px;
    text-align: center;
    text-decoration: none;
    background: #e1f3df;
    color: #2a6b1c;
}

.amri-profile-badge--credits:hover {
    background: #cfe9cc;
}

@media (max-width: 768px) {
    .amri-profile-groupaccounts--table {
        font-size: 13px;
    }

    .amri-profile-groupaccounts--table th,
    .amri-profile-groupaccounts--table td {
        padding: 8px 10px;
    }
}

/* 3-column cert blocks. */
.amri-profile--certifications {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.amri-profile-cert-block {
    border: 1px solid #e6e6e6;
    background: #ffffff;
}

/* Match legacy `.amri-dashboard--item-title` (main.css line 2932). */
.amri-profile-cert-block-header {
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    padding: 8px 20px 12px;
    letter-spacing: 0;
}

/* Match legacy `.amri-dashboard--item-content` (main.css line 2909) +
   inherited `.amri-dashboard--item` body sizing (21px / 28px). */
.amri-profile-cert-block-body {
    padding: 28px 35px 30px;
    font-size: 21px;
    line-height: 28px;
}

.amri-profile-cert-block-state {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
    /* font-size inherited from body (21px) — matches legacy `NOT CERTIFIED` heading */
}

.amri-profile-cert-block-status {
    color: #464646;
    margin: 0 0 20px;
    /* font-size inherited (21px) */
}

.amri-profile-cert-block-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.amri-profile-cert-block-actions .amri-btn {
    display: block;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.amri-profile-cert-block-actions .amri-btn:hover {
    opacity: 0.9;
    text-decoration: none;
}

/* Phase 6 cert-gen — "More actions" collapsible in the Certified state.
   Uses native <details>/<summary> so it works without JS. Style the
   summary to look like the legacy `amri-dashboard--item-more-actions-title`
   chevron + label row. */
.amri-profile-cert-block-more-actions {
    margin-top: 20px;
    border-top: 1px solid #e6e6e6;
}

.amri-profile-cert-block-more-actions-title {
    cursor: pointer;
    padding: 12px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #464646;
    list-style: none;
    user-select: none;
}

/* Remove the default disclosure triangle in webkit browsers; we render
   our own chevron via the Material Icons keyboard_arrow_down glyph. */
.amri-profile-cert-block-more-actions-title::-webkit-details-marker {
    display: none;
}

/* Rotate the chevron when the `<details>` is open. Matches the visual
   pattern editors expect (down arrow closed, up arrow open). */
.amri-profile-cert-block-more-actions[open] .amri-profile-cert-block-more-actions-title i.material-icons {
    transform: rotate(180deg);
}

.amri-profile-cert-block-more-actions-title i.material-icons {
    transition: transform 0.15s ease;
    font-size: 20px;
}

.amri-profile-cert-block-more-actions-body {
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Two-column layout matching the legacy download-row shape:
   left column carries the artifact label, right column carries the
   inline "Download" link with the file-download icon. */
.amri-profile-cert-block-download-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #464646;
    padding: 2px 0;
}

.amri-profile-cert-block-download-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #bd1e2b;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.amri-profile-cert-block-download-link:hover {
    text-decoration: underline;
}

.amri-profile-cert-block-download-link i.material-icons {
    font-size: 18px;
}

/* Phase 6 parity-close PR 2 — Form-CTA rows inside More actions
   (Submit Credits Earned / Complete Clinical Skills Documentation /
   Download Instructions & Skills Form). Single-column: a full-width
   inline link with icon + label. Distinct visually from the two-column
   download-row shape so users read them as "actions to take" rather
   than "artifacts to grab". */
.amri-profile-cert-block-action-row {
    padding: 2px 0;
}

.amri-profile-cert-block-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #bd1e2b;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.amri-profile-cert-block-action-link:hover {
    text-decoration: underline;
}

.amri-profile-cert-block-action-link i.material-icons {
    font-size: 18px;
}

/* Phase 6 parity-close PR 1 — Exam History accordion below More
   actions. Same native <details> + rotated-chevron pattern as
   More actions; only the inner content differs (table instead of
   download rows). */
.amri-profile-cert-block-exam-history {
    margin-top: 6px;
    border-top: 1px solid #e6e6e6;
}

.amri-profile-cert-block-exam-history-title {
    cursor: pointer;
    padding: 12px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #464646;
    list-style: none;
    user-select: none;
}

.amri-profile-cert-block-exam-history-title::-webkit-details-marker {
    display: none;
}

.amri-profile-cert-block-exam-history[open] .amri-profile-cert-block-exam-history-title i.material-icons {
    transform: rotate(180deg);
}

.amri-profile-cert-block-exam-history-title i.material-icons {
    transition: transform 0.15s ease;
    font-size: 20px;
}

.amri-profile-cert-block-exam-history-body {
    padding: 4px 0 8px;
}

.amri-table-exam-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.amri-table-exam-history th,
.amri-table-exam-history td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.amri-table-exam-history thead th {
    background: #f4f4f4;
    color: #4b4b4b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 12px;
    font-weight: 700;
}

/* Shared exam grade indicator (legacy parity with CertificationType.cshtml
   `icn-grade`): a green checkmark for a passed exam, a red X for a failed one —
   rendered as a ::before glyph so the same element works whether it's a static
   <span> or the clickable <a> that opens the answers review. Not scoped to the
   exam-history table so it can be reused anywhere a completed-exam grade shows. */
.amri-exam-grade-indicator {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    color: #d1d1d1;
}

.amri-exam-grade-indicator[data-amri-grade="passed"] {
    color: #4caf50;
}

.amri-exam-grade-indicator[data-amri-grade="passed"]::before {
    content: "\2713"; /* ✓ */
}

.amri-exam-grade-indicator[data-amri-grade="failed"] {
    color: #bd1e2b;
}

.amri-exam-grade-indicator[data-amri-grade="failed"]::before {
    content: "\2717"; /* ✗ */
}

/* Clickable variant (the <a> that links to the answers review) — hover/focus
   cue so users can tell the icon is interactive: a rounded-corner box with a
   soft background fill behind the glyph. (Earlier this was a `border-radius:50%`
   ring, which rendered as an awkward oval on the non-square glyph.) The padding
   is present at rest — transparent background, so no layout shift on hover — and
   also widens the click/tap target. The static <span> variant gets none of this. */
a.amri-exam-grade-indicator {
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 5px;
    transition: background-color 0.12s ease-in-out;
}

a.amri-exam-grade-indicator:hover,
a.amri-exam-grade-indicator:focus-visible {
    background-color: #ececec;
    outline: none;
}

/* Phase 6 parity-close PR 1 — Recent Purchases drilldown handler.
   The toggle button lives inside the Date cell (inline with the date
   text). The expandable row spans all 6 columns via colspan; when
   hidden, native `hidden` attribute drops it from layout entirely. */
.amri-recent-purchases__toggle {
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin-right: 4px;
    cursor: pointer;
    color: #464646;
    vertical-align: middle;
}

.amri-recent-purchases__toggle:hover {
    color: #bd1e2b;
}

.amri-recent-purchases__toggle i.material-icons {
    font-size: 18px;
    vertical-align: middle;
}

.amri-table-purchases__details-cell {
    background: #fafafa;
    padding: 16px 24px !important; /* override .amri-table-purchases td padding for the drilldown cell only */
}

.amri-order-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    color: #333;
}

.amri-order-details__header {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.amri-order-details__label {
    font-size: 12px;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.amri-order-details__value {
    font-weight: 500;
}

.amri-order-details__address .amri-order-details__value {
    font-weight: normal;
    line-height: 1.4;
}

.amri-order-details__lines {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin-top: 4px;
}

.amri-order-details__lines th,
.amri-order-details__lines td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.amri-order-details__lines thead th {
    background: #f4f4f4;
    color: #4b4b4b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 12px;
    font-weight: 700;
}

.amri-order-details__summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-end;
    min-width: 220px;
    padding-top: 8px;
}

.amri-order-details__summary > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.amri-order-details__summary-total {
    font-weight: 700;
    border-top: 1px solid #b2b2b2;
    padding-top: 4px;
    margin-top: 4px;
}

.amri-order-details__loading,
.amri-order-details__error {
    padding: 12px;
    color: #6a6a6a;
    font-style: italic;
    text-align: center;
}

.amri-order-details__error {
    color: #bd1e2b;
}

/* Match legacy `.amri-dashboard--bundle` shape (main.css line 3107) —
   two equal-width panes, orange left + cream right. */
.amri-profile-bundle-and-save {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 50px 0 32px;
    border: 1px solid #b2b2b2;
}

.amri-profile-bundle-and-save-banner {
    background: #faaf40;
    color: #ffffff;
    padding: 40px 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
}

.amri-profile-bundle-and-save-banner h2 {
    margin: 0;
    font-size: 50px;
    line-height: 62px;
    font-weight: 700;
    letter-spacing: 0;
}

.amri-profile-bundle-and-save-banner p {
    margin: 8px 0 0;
    font-size: 22px;
    line-height: 27px;
    letter-spacing: 0;
}

/* Match legacy `.amri-dashboard--bundle > *:last-child` (main.css line 3172). */
.amri-profile-bundle-and-save-actions {
    padding: 40px 95px;
    background: #fffef7;
    color: #606060;
    font-weight: 700;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
    justify-content: center;
}

.amri-profile-bundle-and-save-tagline {
    margin: 0;
    font-size: 23px;
    line-height: 31px;
    letter-spacing: -0.25px;
    text-align: center;
}

.amri-profile-bundle-and-save-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
}

/* `.amri-badge` styling intentionally inherited from legacy main.css —
   re-declaring here would clobber the rounded-rectangle shape + F135a9
   check glyph the legacy `::before` provides. */

/* Doubled-class selector (.foo.foo) beats legacy `.amri-btn.amri-btn` (main.css)
   on specificity (2 vs 2 — and later rule wins). Color matches the orange
   banner per legacy `.amri-dashboard--bundle > *:last-child a`. */
.amri-btn-bundle-filled.amri-btn-bundle-filled {
    background-color: #faaf40;
    color: #ffffff;
    border: 2px solid #faaf40;
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.amri-btn-bundle-outline.amri-btn-bundle-outline {
    background-color: #ffffff;
    color: #faaf40;
    border: 2px solid #faaf40;
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.amri-btn-bundle-filled.amri-btn-bundle-filled:hover {
    background-color: rgba(250, 175, 64, 0.8);
    border-color: transparent;
    color: #ffffff;
    text-decoration: none;
}

.amri-btn-bundle-outline.amri-btn-bundle-outline:hover {
    border-color: rgba(250, 175, 64, 0.8);
    color: rgba(250, 175, 64, 0.8);
    text-decoration: none;
}

/* Recent purchases table. */
.amri-profile--recent-purchases {
    margin-top: 8px;
}

.amri-profile--recent-purchases .amri-section-title {
    color: #bd1e2b;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

.amri-table-purchases {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.amri-table-purchases thead {
    background: #bd1e2b;
}

.amri-table-purchases th,
.amri-table-purchases td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e6e6e6;
}

/* `color` set on `th` directly so we beat legacy `global.css` `th { color: #982632 }`
   on selector specificity (.cls + element > element alone). */
.amri-table-purchases thead th {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amri-table-purchases .amri-table-numeric {
    text-align: right;
}

/* Phase 3.21d.3 — Items cell now lists actual product names instead of just
   "N items". The count prefix is rendered as a subtle muted label so the
   eye lands on the product names; the list itself can wrap freely. */
.amri-table-purchases__items {
    max-width: 320px;
}

.amri-table-purchases__items-count {
    color: #6d6d6d;
    font-size: 12px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.amri-table-purchases__items-list {
    color: #4b4b4b;
}

/* Phase 6 cert-gen — Recent Purchases got a 6th column (Print Receipt).
   At <= ~600px the table exceeds the viewport width; wrap it in a scroll
   region so mobile users can still reach the Receipt column. Standard
   responsive-table pattern preferred over hiding a column: every column
   is meaningful (Date / Order ID / Status / Items / Total / Receipt). */
.amri-table-purchases-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force the button to a single line so mobile widths don't stack it
   into two rows ("Print" / "Receipt") — the fixed anchor width plays
   nicely with the scroll wrapper above. */
.amri-table-purchases__receipt .amri-btn {
    white-space: nowrap;
}

.amri-empty-state {
    color: #6a6a6a;
    font-style: italic;
    padding: 16px 0;
}

/* Phase 3.21c — masthead "My account" dropdown items.
   Legacy uses tinted-pink SVG glyphs (#de8f95) — match the color on our
   material-icons so the menu reads visually consistent with legacy at
   1440 desktop. Dropdown CHROME (red bg, white text, hover-to-show) is
   inherited from legacy `main.css .amri-user-menu ul` already. */
.amri-user-menu ul li a .material-icons {
    color: #de8f95;
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Phase 3.21b — UserProfile edit page.
   --------------------------------------------------------------------- */

.amri-profile-userprofile {
    padding-bottom: 48px;
}

.amri-profile-userprofile--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

@media (max-width: 900px) {
    .amri-profile-userprofile--grid {
        grid-template-columns: 1fr;
    }
}

.amri-profile-userprofile--col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Panel chrome — red header bar + cream/white body. Mirrors the legacy
   `.box` shape from the profile page. */
.amri-profile-panel {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
}

.amri-profile-panel--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fffef7;
    border-bottom: 1px solid #e6e6e6;
}

.amri-profile-panel--title {
    margin: 0;
    color: #bd1e2b;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amri-profile-panel--edit,
.amri-profile-panel--edit-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #faaf40;
    text-decoration: none;
    border-radius: 50%;
    border: 1px solid #faaf40;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.amri-profile-panel--edit:hover {
    background-color: #faaf40;
    color: #ffffff;
    text-decoration: none;
}

.amri-profile-panel--edit-disabled {
    cursor: not-allowed;
    color: #c2c2c2;
    border-color: #c2c2c2;
}

.amri-profile-panel--edit .material-icons,
.amri-profile-panel--edit-disabled .material-icons {
    font-size: 16px;
}

.amri-profile-panel--body,
.amri-profile-panel--form {
    padding: 16px 20px 20px;
}

/* Read-only field list — DT label / DD value. Legacy uses a 2-column
   table; we use a definition list semantically (same visual shape). */
.amri-profile-panel--fields {
    margin: 0;
    display: grid;
    grid-template-columns: 175px 1fr;
    row-gap: 8px;
    column-gap: 12px;
    font-size: 15px;
    line-height: 22px;
}

.amri-profile-panel--fields dt {
    color: #292829;
    font-weight: 700;
    padding-right: 10px;
}

.amri-profile-panel--fields dd {
    margin: 0;
    color: #6d6d6d;
    word-break: break-word;
}

.amri-profile-panel--empty {
    margin: 0;
    font-style: italic;
    color: #6d6d6d;
}

.amri-profile-panel--field-note {
    margin: -4px 0 0;
    font-size: 12px;
    color: #6d6d6d;
    font-style: italic;
}

.amri-profile-panel--actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.amri-profile-panel--radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
}

.amri-profile-panel--radio-row legend {
    width: 100%;
    font-weight: 600;
    margin-bottom: 6px;
}

.amri-profile-panel--radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Success / error banner above the panel grid. */
.amri-profile-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
}

.amri-profile-banner--success {
    background: #e6f4ea;
    color: #1e7a35;
    border: 1px solid #b6e0c2;
}

.amri-profile-banner--error {
    background: #fcebeb;
    color: #a4191b;
    border: 1px solid #f0c2c2;
}

.amri-profile-banner .material-icons {
    font-size: 20px;
}

/* PayFlow LIVE-endpoint safety banner — shown on the Payment view when the
   running env is non-Production AND any configured PayPal endpoint is the
   live host. See findings/2026-06-02-paypal-prod-endpoints-leak-real-charges.md. */
.amri-payflow-live-warning {
    background: #b00020;
    color: #ffffff;
    border: 3px solid #800000;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 22px;
}

.amri-payflow-live-warning strong {
    display: block;
    font-size: 20px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.amri-payflow-live-warning p {
    margin: 0;
}

.amri-payflow-live-warning code {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}

/* Responsive: stack the 3-column grid on tablet and mobile. */
@media (max-width: 900px) {
    .amri-profile--certifications {
        grid-template-columns: 1fr;
    }

    .amri-profile-bundle-and-save {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    /* Phase 3.21d.3-followup-1 — keep the subnav horizontal at mobile widths
       to match the legacy `aclsprodclone` rendering: 4 icon+label items in a
       single row even at 375px. The prior `flex-direction: column` override
       stacked items vertically, taking ~5 viewport heights before the page
       content started. Legacy fits all 4 items in one row by tightening the
       per-item label + relying on the row's flex distribution. */
    .amri-profile-subnav-item a {
        padding-left: 6px;
        padding-right: 6px;
    }

    .amri-profile-subnav-item a span:not(.material-icons) {
        font-size: 11px;
        line-height: 13px;
        letter-spacing: 0.2px;
    }
}

/* Shared radio-group styling for the `_FormRadioGroup` partial (exam
   Professional Information + Clinical Skills forms). The markup is
   `<fieldset class="amri-form"><legend class="amri-form--legend">…
   <label class="amri-form--radio"><input type="radio"><span>…`, and it
   had NO rules — so it fell through to the browser default: the radio sat
   jammed against its label text and every option ran together inline (the
   cramped Professional Information step). Legacy parity with
   `.checkbox-radio-block` (aclsonline global.css:962-966): stacked labels
   with a small gutter + ~0.3em vertical rhythm, and an `.inline` variant
   that floats short options (past-cert Yes / No) onto one row. */
.amri-form--legend {
    display: block;
    margin-bottom: 8px;
    color: #6d6d6d;
    font-weight: 400;
}
.amri-form--radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.3em 0;
    color: #6d6d6d;
    font-weight: 400;
    cursor: pointer;
}
.amri-form--radio input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}
/* `.inline` parity — options side by side (past-certification Yes / No). */
.amri-form--radios-inline .amri-form--radio {
    display: inline-flex;
    margin-right: 24px;
}

/* Phase 3.21d.1-followup — single source of truth for `.amri-form` text
   inputs + selects across every form on the site (shipping, account,
   payment, profile-personal, profile-address, profile-professional,
   profile-group, newsletter). The legacy `.amri-checkout--address` and
   `.amri-checkout--account` rules only normalised those two contexts,
   so profile-* and any future form fell through to the browser-default
   `<select>` chrome (visible native arrow PLUS the password-manager
   autofill icon = the "doubled arrow" reported on the mailing-address
   panel). Locking everything to the same height + an inline SVG chevron
   means: same look in Chrome / Safari / Firefox, no second arrow when
   1Password / LastPass / browser autofill overlays an icon, no row-
   layout drift between text inputs and selects. */
.amri-form .form-item input[type="text"],
.amri-form .form-item input[type="email"],
.amri-form .form-item input[type="password"],
.amri-form .form-item input[type="tel"],
.amri-form .form-item input[type="number"],
.amri-form .form-item input[type="date"],
.amri-form .form-item select {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #adadad;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    line-height: 22px;
    font-family: "trade-gothic-next", "Helvetica Neue", Arial, sans-serif;
    color: #000;
    outline: none;
}

.amri-form .form-item input[type="text"]:focus,
.amri-form .form-item input[type="email"]:focus,
.amri-form .form-item input[type="password"]:focus,
.amri-form .form-item input[type="tel"]:focus,
.amri-form .form-item input[type="number"]:focus,
.amri-form .form-item input[type="date"]:focus,
.amri-form .form-item select:focus {
    border-color: #faaf40;
    box-shadow: 0 0 6px #faaf4080;
}

.amri-form .form-item input[type="text"]:disabled,
.amri-form .form-item input[type="email"]:disabled,
.amri-form .form-item select:disabled {
    background-color: #f1f2f3;
    color: #5b5b5b;
    cursor: not-allowed;
}

/* Suppress the native `<select>` chrome on every engine and draw our own
   chevron. Background-image is inline-SVG (no extra HTTP request, no
   image-asset path coupling). 32px of right padding keeps the selected
   option text from overlapping the chevron. */
.amri-form .form-item select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8' fill='none' stroke='%23464646' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

/* IE 10/11 dropdown arrow — irrelevant on modern Chrome/Safari/Firefox
   but harmless to leave in for any embedded IE renderers (Outlook
   preview pane etc. that might surface this page). */
.amri-form .form-item select::-ms-expand {
    display: none;
}

/* When a select is in error state the error-state border-color comes
   from the existing `.amri-form .form-item.has-error select` rule above
   (line ~1042). The chevron stays the same colour — error state is
   conveyed by the field outline + the helper text. */

/* ---- Phase 3.21d.3 — Assign Code modal (group accounts) ---------------- */
/* Lightweight modal that lives inside the grid action-cell, hidden by
   default via the [hidden] attribute + .is-open trigger. No backdrop — the
   modal slides in below the row so the admin doesn't lose grid context. */
/* Phase 3.21d.3-followup-1 — centered overlay with backdrop. The prior
   `position: absolute; margin-top: 8px` rendered the modal inline next to
   its containing row, overflowing off the right edge of the page at every
   width (caught visually after the cancel/resend smoke walk). A proper
   centered overlay matches the legacy popup UX and contains long-content
   bodies (the Resend modal's "Re-send to <email>?" paragraph is the main
   offender — the email is a single unbreakable token + wider than the
   prior 420px max-width). */
.amri-profile-assign-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
}
.amri-profile-assign-modal[hidden] { display: none; }
.amri-profile-assign-modal.is-open { display: flex; }
.amri-profile-assign-modal--form {
    width: 100%;
    max-width: 480px;
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Override the inherited `white-space: nowrap` from the parent table cell
       `.amri-profile-groupaccounts--actions-col` (which keeps Assign/Resend/
       Cancel buttons on a single line). The modal partials are rendered
       inside that cell — position: fixed escapes the layout but inheritance
       still applies to descendants. */
    white-space: normal;
    text-align: left;
}
.amri-profile-assign-modal--body {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    color: #4b4b4b;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}
.amri-profile-assign-modal--title {
    font-size: 16px;
    line-height: 20px;
    margin: 0 0 12px;
    color: #982632;
}
.amri-profile-assign-modal--form .form-item { margin-bottom: 12px; }
.amri-profile-assign-modal--form .form-item--label {
    display: block;
    font-size: 14px;
    color: #464646;
    margin-bottom: 4px;
}
.amri-profile-assign-modal--form .form-item input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    box-sizing: border-box;
}
.amri-profile-assign-modal--exam-choices {
    border: 0;
    margin: 0 0 12px;
    padding: 0;
}
.amri-profile-assign-modal--exam-choices legend {
    font-size: 14px;
    color: #464646;
    margin-bottom: 8px;
}
.amri-profile-assign-modal--exam-choices .form-item-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    font-size: 14px;
}
.amri-profile-assign-modal--exam-fixed {
    font-size: 14px;
    color: #6d6d6d;
    margin: 0 0 12px;
}
.amri-profile-assign-modal--actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* ---- Phase 3.21d.3 — PayFlow MOCK banner (dev only) ------------------- */
.amri-dev-mock-banner {
    background: #ffeb3b;
    color: #5a4500;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    border-bottom: 2px solid #e0a800;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.amri-dev-mock-banner strong {
    color: #6c4500;
    margin-right: 6px;
    letter-spacing: 0.2px;
}
.amri-dev-mock-banner code {
    background: rgba(255, 255, 255, 0.6);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Phase 4 PR A — pending-prepaid-codes banner on the dashboard. One CTA card
   per assigned-but-unredeemed PrepaidCode. Click POSTs to /profile/redeemprepaidcode
   which creates the Registration and redirects to /education/examinstructions/{id}.
   Visually the banner reads as a single emphasised callout above the certification
   blocks; multiple codes stack as separate items inside the same outer card. */
.amri-profile-redeemable-banner {
    margin: 16px 0 32px;
    padding: 20px 24px;
    background: #fff9e6;
    border: 1px solid #f3cd5e;
    border-radius: 6px;
}

.amri-profile-redeemable-banner-title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 24px;
    color: #6c4500;
}

.amri-profile-redeemable-banner-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.amri-profile-redeemable-banner-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #f3cd5e;
    /* Reset legacy `ul > li` bullet (orange-dot background-image set in main.css). */
    background: none;
}

.amri-profile-redeemable-banner-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.amri-profile-redeemable-banner-text {
    margin: 0;
    flex: 1 1 240px;
    font-size: 15px;
    line-height: 22px;
}

.amri-profile-redeemable-banner-form {
    margin: 0;
    flex: 0 0 auto;
}

/* Phase 4 PR A — ExamInstructions placeholder landing. The full instructions
   page (legal statement + mailing-address verify + Start Exam wiring) ships
   in PR B; for now this is a one-card success state. */
.amri-education-instructions--placeholder {
    margin: 16px 0;
    padding: 24px;
    background: #f4f8f4;
    border: 1px solid #c7e0c9;
    border-radius: 6px;
    max-width: 720px;
}

.amri-education-instructions--placeholder p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 22px;
}

.amri-education-instructions--placeholder p:last-child {
    margin-bottom: 0;
    margin-top: 16px;
}

.amri-education-instructions--placeholder code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

/* Phase 4 PR B — full ExamInstructions entry page. Three vertically-stacked
   sections (intro / mailing-address / legal-statement) inside the canonical
   amri-container + amri-profile-page wrapper. Single-column up to ~720px;
   the form widgets re-use the shared `amri-form` + `_AddressFields` /
   `_FormInput` partials so all input styling lives in main.css. */
.amri-education-instructions .amri-education-instructions--intro,
.amri-education-instructions .amri-education-instructions--address,
.amri-education-instructions .amri-education-instructions--legal,
.amri-education-instructions .amri-education-clinical-skills--profession {
    max-width: 720px;
    margin: 24px 0;
}

.amri-education-instructions--section-title {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 26px;
    color: #2b2b2b;
}

.amri-education-instructions--intro p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.amri-education-instructions--intro ol {
    margin: 12px 0 0;
    padding-left: 22px;
}

.amri-education-instructions--intro li {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 22px;
}

/* Dedicated exam-instructions step (ExamInstructionsBegin.cshtml) — the legacy
   "Exam Instructions" page shown right before the exam starts: a centered
   max-width column with a red rule under the title, the instructions list, a
   gray rule, and a single centered "Begin Exam" button. Legacy parity:
   aclsonline/.../Views/Education/ExamInstructions.cshtml (.max-width-580 /
   .hr-red / .hr / .button-block.text-align-center). */
.amri-exam-instructions-page--frame {
    max-width: 582px;
    margin: 0 auto;
}

.amri-exam-instructions-page--title {
    margin-bottom: 0;
    text-align: center;
}

.amri-exam-instructions-page--rule-red {
    clear: both;
    margin: 25px 0 24px;
    border-bottom: 3px solid #bd1e2c;
}

.amri-exam-instructions-page--rule {
    clear: both;
    margin: 22px 0 25px;
    border-bottom: 1px solid #efefef;
}

/* Legacy parity (aclsonline global.css): body is 16px/1.3125, and the
   instructions list inherits it — the legacy page uses no reduced-size class.
   `ol` is `list-style:decimal inside; line-height:1.5` with a 15px block
   margin; paragraphs are 16px/1.3125 with the same 15px bottom margin. */
.amri-exam-instructions-page--body p {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 1.3125;
}

.amri-exam-instructions-page--body ol {
    margin: 0 0 15px;
    padding: 0;
    list-style: decimal inside;
    line-height: 1.5;
}

.amri-exam-instructions-page--body li {
    font-size: 16px;
}

.amri-exam-instructions-page--actions {
    margin: 24px 0 0;
    text-align: center;
}

.amri-exam-instructions-page--begin {
    min-width: 220px;
}

@media (max-width: 600px) {
    .amri-exam-instructions-page--begin {
        width: 100%;
        box-sizing: border-box;
    }
}

.amri-education-instructions--address {
    padding: 20px 24px;
    background: #f4f8fb;
    border: 1px solid #cfdfe8;
    border-radius: 6px;
}

.amri-education-instructions--address-intro {
    margin: 0 0 12px;
    font-size: 15px;
}

.amri-education-instructions--address-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 12px;
}

.amri-education-instructions--address-summary dt {
    font-weight: 600;
    color: #6c6c6c;
}

.amri-education-instructions--address-summary dd {
    margin: 0;
}

.amri-education-instructions--address-edit-hint {
    margin: 0;
    font-size: 14px;
    color: #6c6c6c;
}

.amri-education-instructions--legal {
    padding: 20px 24px;
    background: #fffbf4;
    border: 1px solid #f3dfa8;
    border-radius: 6px;
}

.amri-education-instructions--legal-copy p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 22px;
}

.amri-education-instructions--legal-copy p:last-child {
    margin-bottom: 16px;
}

.amri-education-instructions--actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.amri-education-instructions--blocked-note {
    margin: 0;
    font-size: 14px;
    color: #8f2820;
}

/* Phase 4 PR B — Exam stub page (PR C-handoff target). Same shape as
   ExamInstructions placeholder; minor copy + a distinct background so QA can
   tell the two pages apart during smoke walks. */
.amri-education-exam--placeholder {
    margin: 16px 0;
    padding: 24px;
    background: #f0f4f8;
    border: 1px solid #c5d2dd;
    border-radius: 6px;
    max-width: 720px;
}

.amri-education-exam--placeholder p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 22px;
}

.amri-education-exam--placeholder p:last-child {
    margin-bottom: 0;
    margin-top: 16px;
}

.amri-education-exam--placeholder code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

/* Phase 4 PR B — green-success variant for the dashboard cert-block's
   first-time "Take Exam" CTA (Registered status). Matches legacy
   `.amri-btn.color-green` on the `Profile/Partial/CertificationType.cshtml`
   panel. Used via `class="amri-btn amri-btn--success"` (or with
   `data-variant="success"` for symmetry with other modifier-via-attribute
   buttons in the codebase). Hover/focus shades match the AMRI brand-red
   primary's depth so it reads as the same weight, just green. */
.amri-btn.amri-btn--success,
.amri-btn[data-variant="success"] {
    background-color: #28a828;
    border-color: #28a828;
    color: #ffffff;
}

.amri-btn.amri-btn--success:hover,
.amri-btn[data-variant="success"]:hover,
.amri-btn.amri-btn--success:focus,
.amri-btn[data-variant="success"]:focus {
    background-color: #1f8a1f;
    border-color: #1f8a1f;
    color: #ffffff;
}

/* ============================================================
   Phase 4 PR C — paginated exam-taking UI
   ============================================================ */

.amri-education-exam--header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 16px 0 24px;
}

.amri-education-exam--header .amri-page-title {
    margin: 0;
    flex: 1 1 240px;
}

.amri-education-exam--status {
    margin: 0;
    color: #6c6c6c;
    font-size: 14px;
}

.amri-education-exam--body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.amri-education-exam--no-case-studies .amri-education-exam--body,
.amri-education-exam-hidden-grid .amri-education-exam--body {
    grid-template-columns: minmax(0, 1fr);
}

body.amri-education-exam--case-studies-hidden .amri-education-exam--case-studies {
    display: none;
}

body.amri-education-exam--case-studies-hidden .amri-education-exam--body {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .amri-education-exam--body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.amri-education-exam--case-studies {
    padding: 20px 24px;
    background: #f4f8fb;
    border: 1px solid #cfdfe8;
    border-radius: 6px;
}

.amri-education-exam--case-study {
    margin: 0 0 24px;
    padding-bottom: 24px;
    /* PR E follow-up — legacy parity: `<div class="hr-gray">` divider between adjacent case studies. */
    border-bottom: 1px solid #d9d9d9;
}

.amri-education-exam--case-study:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.amri-education-exam--case-study-title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 24px;
    color: #2b2b2b;
}

.amri-education-exam--case-study-empty {
    margin: 0;
    color: #6c6c6c;
    font-style: italic;
    font-size: 14px;
}

.amri-education-exam--questions-panel {
    min-width: 0;
}

.amri-education-exam--questions {
    list-style: decimal;
    list-style-position: outside;
    padding-left: 24px;
    margin: 0;
}

/* PR E follow-up — legacy parity: question cards render plain on white
   (no yellow background, no orange border). Legacy uses `<li class="question">`
   with no chrome — just spacing between numbered items + a `.hr-gray`
   divider between adjacent questions. */
.amri-education-exam--question {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid #d9d9d9;
}

.amri-education-exam--question:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.amri-education-exam--question::marker {
    font-weight: 600;
    color: #2b2b2b;
}

.amri-education-exam--question-prompt {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #2b2b2b;
}

/* PR E follow-up — Help link in the actions row, sits alongside Exit / Finish.
   Renders as a text link, not a button — matches legacy `<a href>Help</a>`. */
.amri-education-exam--help-link {
    margin-left: auto;
    color: #bd1e2b;
    text-decoration: underline;
    font-size: 14px;
}

.amri-education-exam--case-study-jump {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    color: #bd1e2b;
    text-decoration: underline;
}

.amri-education-exam--answers {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amri-education-exam--answers-legend {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

/* PR E follow-up — legacy parity: answer rows render plain (no boxed
   cards, no per-row borders). Legacy uses bare `<label><input type="radio">
   …</label>` with default radio chrome. */
.amri-education-exam--answer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.amri-education-exam--answer:hover {
    background: transparent;
}

.amri-education-exam--answer:has(input:checked) {
    background: transparent;
}

.amri-education-exam--answer input[type="radio"] {
    margin-top: 4px;
    accent-color: #bd1e2b;
}

.amri-education-exam--answer-text {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 22px;
}

.amri-education-exam--save-status {
    margin: 8px 0 0;
    font-size: 13px;
    color: #6c6c6c;
    min-height: 18px;
}

.amri-education-exam--save-status--ok {
    color: #1f6f33;
}

.amri-education-exam--save-status--error {
    color: #8f2820;
}

/* PR E follow-up — shared `.amri-pager` partial (Views/Shared/Forms/_NumberedPager.cshtml).
   Legacy-parity styling: numbered pages render as compact text links
   (NOT square buttons), current page is a small red text marker (NOT a
   filled box), Back/Next are compact peach `btn-2`-style pills. Matches
   the legacy `<p class='pager text-align-center'>` output. */
.amri-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    font-size: 14px;
}

.amri-pager--prev,
.amri-pager--next {
    flex: 0 0 auto;
    /* Legacy `btn-2`: peach-pink filled pill, COMPACT padding (matches
       legacy main.css small-size buttons — 5px/13px padding, 11px font). */
    padding: 5px 16px 7px;
    border-radius: 999px;
    background: #faaf40;
    border: 1px solid #faaf40;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 16px;
}

.amri-pager--prev:hover,
.amri-pager--next:hover {
    background: #e89c2c;
    border-color: #e89c2c;
    color: #ffffff;
    text-decoration: none;
}

.amri-pager [aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

.amri-pager--page {
    display: inline-block;
    padding: 4px 2px;
    color: #6c6c6c;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    min-width: 18px;
    text-align: center;
    background: transparent;
}

.amri-pager--page:hover,
.amri-pager--page:focus-visible {
    background: transparent;
    color: #bd1e2b;
    text-decoration: underline;
}

.amri-pager--current {
    color: #bd1e2b;
    font-weight: 700;
    background: transparent;
    cursor: default;
}

.amri-pager--current:hover,
.amri-pager--current:focus-visible {
    background: transparent;
    color: #bd1e2b;
    text-decoration: none;
}

.amri-pager--ellipsis {
    padding: 4px 2px;
    color: #6c6c6c;
    user-select: none;
}

/* PR E follow-up — legacy parity: actions row is centered with a top
   divider, FINISH before EXIT (per legacy `<a class="btn-1 js-finish-exam">`
   placement), Help link sits on the right edge. Buttons get the legacy
   double-border outer-glow effect via box-shadow. */
.amri-education-exam--actions {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    column-gap: 40px;
    align-items: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
}

.amri-education-exam--actions > [data-amri-finish-exam] {
    grid-column: 2;
    justify-self: end;
    margin-right: 8px;
}

.amri-education-exam--actions > [data-amri-exit-exam] {
    grid-column: 3;
    justify-self: start;
    margin-left: 8px;
}

.amri-education-exam--actions > .amri-education-exam--help-link {
    grid-column: 4;
    justify-self: end;
    margin-left: 0;
}

.amri-education-exam--actions [data-amri-finish-exam],
.amri-education-exam--actions [data-amri-exit-exam] {
    /* Legacy `.btn-1` outer-glow effect: a transparent ring around the
       button via box-shadow inset + outer for the soft pinkish halo. */
    box-shadow: 0 0 0 4px rgba(189, 30, 43, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .amri-education-exam--actions {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .amri-education-exam--actions > [data-amri-finish-exam],
    .amri-education-exam--actions > [data-amri-exit-exam],
    .amri-education-exam--actions > .amri-education-exam--help-link {
        grid-column: 1;
        justify-self: center;
    }
}


/* Case-study photos are floated by the stored CKEditor `style="float: right"`
   (the sanitizer keeps it — see HtmlContentSanitizer). Legacy rendered them in
   a 555px full-width column where each photo cleared the one above; v2's panel
   is a narrower grid column, so without `clear` a second photo floats up BESIDE
   the first. Force the legacy stacking. */
.amri-education-exam--case-studies img[style*="float"] {
    clear: right;
    max-width: 100%;
    height: auto;
}

/* ≤600px: a 210-300px photo floated in a ~300px column leaves a few words per
   line. Legacy had no mobile rule for these (the page carried min-width 998px);
   drop the float and centre the photo as a block — deliberate mobile-only
   deviation, desktop stays 1:1. */
@media (max-width: 600px) {
    .amri-education-exam--case-studies img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 auto 1em;
    }
}

/* Legacy parity (responsive.css:623, ≤600px):
   `h1 .btn-switch { float:none; margin:15px 0 20px; width:100%; }` — the
   Show/Hide Case Studies toggle drops under the title as a full-width block.
   Without this the 34px small button rides the h1's shorter line box at 375px
   and its top edge is clipped (tester report 2026-09-08). */
@media (max-width: 600px) {
    .amri-education-exam--header {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .amri-education-exam--header .amri-page-title {
        flex: none;
    }
    .amri-education-exam--header [data-amri-case-studies-toggle] {
        width: 100%;
        margin: 15px 0 20px;
    }
}


/* Exit-exam modal — simple overlay; reuses no shared modal framework
   because PR C is small enough to wire its own. PR D will likely
   consolidate the v2 modal styling into a shared partial. */
.amri-modal[data-amri-modal] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The shell also matches main.css `.amri-modal { overflow:hidden }`; keep
       that explicit here — the DIALOG is the scroll container (below), so a
       taller-than-viewport body scrolls inside it, never the page behind. */
    overflow: hidden;
}

.amri-modal[data-amri-modal][hidden] {
    display: none;
}

.amri-modal--backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.amri-modal--dialog {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 6px;
    padding: 24px;
    max-width: 480px;
    width: calc(100% - 32px);
    /* Never taller than the viewport (16px breathing room top + bottom) and
       scroll internally when content overflows — otherwise a tall dialog (e.g.
       the finish-exam list of ~50 unanswered question numbers on a short
       screen) pushes the action buttons off-screen with no way to reach them.
       dvh accounts for mobile browser chrome; vh is the fallback. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Legacy parity (responsive.css:1003-1005, ≤480px): the modal goes
   full-screen with its own `overflow:auto` so "Submit Exam" is always
   reachable on a phone (tester report 2026-09-08). */
@media (max-width: 480px) {
    .amri-modal--dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

.amri-education-exam--exit-dialog-title {
    margin: 0 0 12px;
    font-size: 20px;
}

.amri-education-exam--exit-dialog-actions,
.amri-education-exam--finish-dialog-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.amri-education-exam--finish-dialog-title {
    margin: 0 0 12px;
    font-size: 20px;
}

.amri-education-exam--finish-dialog[data-unanswered-count]:not([data-unanswered-count="0"]) .amri-education-exam--finish-dialog-title {
    color: #b35900;
}

/* Legacy-parity list of unanswered question numbers ("#2 #3 … #50"). The
   inline run wraps across the dialog width; a little line-height + word-spacing
   keeps the ~50-number worst case readable. */
.amri-education-exam--finish-dialog-unanswered {
    margin: 0 0 12px;
    line-height: 1.8;
    word-spacing: 4px;
    color: #b35900;
}

.amri-education-exam--finish-dialog-error {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: #fff4f4;
    border: 1px solid #e0a8a8;
    border-radius: 4px;
    color: #8a1f1f;
    font-size: 14px;
}

/* Phase 4 PR D — exam result page */
.amri-education-exam-result {
    padding-bottom: 48px;
}

/* PR E follow-up — legacy parity: result page CONTAINER is centered
   on the page (max-width + margin auto). Text inside is NOT
   text-align-centered. Headline renders plain (no gradient banner /
   no border / no padding). The visual cue comes from the success-icn
   / error-icn glyph + the headline text color (green for passed,
   brand red for failed). */
.amri-education-exam-result {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.amri-education-exam-result--banner {
    margin: 24px 0 16px;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 16px;
}

.amri-education-exam-result--banner[data-grade="passed"] {
    color: #a6c93d;
}

/* Legacy `.msg-icn` glyphs — reusable across the site (result page H1,
   _ProfileMessagesBanner, etc.).
   .success-icn = green-filled circle with white check mark.
   .error-icn   = red-filled circle with white "X". */
.msg-icn {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.msg-icn.success-icn {
    background: #4caf50;
}

.msg-icn.success-icn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 20px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

.msg-icn.error-icn {
    background: #bd1e2b;
}

.msg-icn.error-icn::before,
.msg-icn.error-icn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 26px;
    background: #fff;
}

.msg-icn.error-icn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.msg-icn.error-icn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.msg-icn.warning-icn {
    background: #faaf40;
}

.msg-icn.warning-icn::before {
    /* Single "!" glyph centered inside the amber circle. Same centering
       technique as the success/error variants — translate from 50%/50%
       so the rotation pivots from the visual center. */
    content: "!";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    /* Legacy main.css `.msg-icn` still hides sprite text with
       text-indent:-500px + overflow:hidden; the glyph must opt back out. */
    text-indent: 0;
    color: #fff;
    font-family: "trade-gothic-next-condensed", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
}

.amri-education-exam-result--summary {
    margin: 0 0 4px;
    color: #444;
}

.amri-education-exam-result--score {
    margin: 12px 0 4px;
    font-size: 18px;
}

.amri-education-exam-result--score strong {
    font-size: 26px;
}

.amri-education-exam-result--threshold {
    color: #6c6c6c;
    font-size: 14px;
    margin-left: 8px;
}

.amri-education-exam-result--counts {
    margin: 4px 0 0;
    color: #555;
    font-size: 14px;
}

.amri-education-exam-result--next-steps {
    margin-top: 16px;
}

.amri-education-exam-result--actions {
    margin: 16px 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* PR E follow-up — legacy parity: CME credits form renders inline
   ("Credits Earned: [10]  Submit") rather than as a stacked form with
   chunky label + input. Narrow the input + suppress label chrome. */
.amri-education-exam-result--credits-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.amri-education-exam-result--credits-form .form-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.amri-education-exam-result--credits-form .form-item label {
    margin: 0;
    font-size: 14px;
    color: #2b2b2b;
    white-space: nowrap;
}

.amri-education-exam-result--credits-form .form-item-wrapper {
    flex: 0 0 auto;
}

.amri-education-exam-result--credits-form input[type="number"] {
    width: 60px;
    text-align: center;
}

.amri-education-exam-result--credits-static {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 14px;
    color: #2b2b2b;
}

.amri-education-exam-result--credits-value {
    display: inline-block;
    min-width: 40px;
    padding: 4px 12px;
    border: 1px solid #cfdfe8;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    font-weight: 600;
}

.amri-education-exam-result--placeholder {
    margin: 16px 0;
    padding: 16px;
    border: 1px dashed #c8c8c8;
    border-radius: 6px;
    background: #fafafa;
}

.amri-education-exam-result--placeholder h2 {
    margin: 0 0 8px;
    font-size: 16px;
}

.amri-education-exam-result--placeholder-note {
    margin: 8px 0 0;
    color: #6c6c6c;
    font-size: 13px;
}

@media (max-width: 600px) {
    .amri-education-exam-result--banner {
        padding: 16px;
    }

    .amri-education-exam-result--score strong {
        font-size: 22px;
    }
}

/* Phase 4 PR D — exam answer review page */
.amri-education-exam-answers--grade {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.amri-education-exam-answers--grade[data-grade="passed"] {
    color: #2e7d3a;
}

.amri-education-exam-answers--grade[data-grade="failed"] {
    color: #b04a00;
}

/* PR E follow-up — legacy parity: ExamAnswers row layout.
   Markers (✓ / ✗) render BEFORE the radio (legacy `.icn-check`/.icn-cross
   spans). Correct row highlighted with a light gray background (legacy
   `.answer-highlight`). Incorrect picked row gets a subtle warning
   background to match legacy. Radios stay enabled (not `disabled`) so
   the user's selection renders bold/filled with standard radio chrome;
   `onclick=return false` keeps the read-only behavior. */
.amri-education-exam-answers--answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    /* Review-mode rows are read-only: block all click/focus interaction
       so the radios can't be toggled by clicking either the input or
       its enclosing label. */
    pointer-events: none;
    cursor: default;
}

.amri-education-exam-answers--answer input[type="radio"] {
    opacity: 1;
    cursor: default;
    accent-color: #bd1e2b;
    margin: 0;
    pointer-events: none;
}

.amri-education-exam-answers--correct {
    background: #f5f5f5;
}

.amri-education-exam-answers--incorrect {
    background: transparent;
}

.amri-education-exam-answers--marker {
    flex: 0 0 auto;
    width: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

.amri-education-exam-answers--marker-spacer {
    visibility: hidden;
}

.amri-education-exam-answers--marker-check {
    color: #2e7d3a;
}

.amri-education-exam-answers--marker-cross {
    color: #b04a00;
}

/* PR E follow-up — legacy parity: explanation renders plain ("The
   best answer is: X" bold caption + plain paragraph) — no boxed panel,
   no left border, no background. */
.amri-education-exam-answers--explanation {
    margin-top: 12px;
    padding: 0;
    background: transparent;
    border-left: 0;
    border-radius: 0;
}

.amri-education-exam-answers--explanation .amri-education-exam-answers--best-answer {
    margin: 0 0 6px;
    font-size: 15px;
    color: #2b2b2b;
}

.amri-education-exam-answers--explanation .amri-education-exam-answers--best-answer strong {
    font-weight: 700;
}

.amri-education-exam-answers--explanation p {
    margin: 0;
    line-height: 22px;
}

/* PR E follow-up — legacy parity: ExamAnswers does NOT render a left
   border stripe per question. The correctness signal lives in the
   per-answer-row check/X markers + the inline highlight row only. */
.amri-education-exam-answers--question-correct,
.amri-education-exam-answers--question-incorrect {
    border-left: 0;
}

/* Phase 4 PR E — ExamResult inline CME credits form + Clinical Skills link */
.amri-education-exam-result--credits,
.amri-education-exam-result--clinical-skills {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    background: #fafafa;
}

.amri-education-exam-result--credits h2,
.amri-education-exam-result--clinical-skills h2 {
    margin: 0 0 8px;
    font-size: 16px;
}

.amri-education-exam-result--credits-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 12px;
}

.amri-education-exam-result--credits-form .amri-input {
    max-width: 100px;
}

/* Phase 4 PR E — Clinical Skills page */
.amri-education-clinical-skills {
    padding-bottom: 48px;
}

.amri-education-clinical-skills--header {
    margin-bottom: 24px;
}

.amri-education-clinical-skills--subtitle {
    margin: 0 0 8px;
    color: #444;
}

.amri-education-clinical-skills--form fieldset.amri-form {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
}

.amri-education-clinical-skills--checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}

.amri-education-clinical-skills--checkboxes .amri-form--legend {
    grid-column: 1 / -1;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .amri-education-clinical-skills--checkboxes {
        grid-template-columns: 1fr;
    }
}

.amri-education-clinical-skills--supervisor .amri-form--field {
    margin: 12px 0;
}

/* Full-width textareas inside the form-item shell (no styling
   in main.css for `.form-item-textarea`; default browser sizing
   produces a tiny ~200x60 box). Border + padding + font match
   the `.form-item-input` rules from main.css. */
.form-item.form-item-textarea textarea {
    width: 100%;
    border: 1px solid #656565;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 12px;
    outline: none;
    font-family: 'trade-gothic-next';
    color: #000;
    resize: vertical;
    min-height: 96px;
}

.amri-education-clinical-skills--profession {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #f7f9fc;
}

.amri-education-clinical-skills--profession h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.amri-education-clinical-skills--profession-summary {
    margin: 0;
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 4px;
    color: #444;
}

.amri-education-clinical-skills--actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    justify-content: flex-end;
}

/* Phase 4 PR E — RecertificationCompleted page */
.amri-education-recert-completed {
    padding-bottom: 48px;
}

.amri-education-recert-completed--banner {
    margin: 16px 0 24px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #b2dfc1;
    background: linear-gradient(135deg, #e7f7ec 0%, #f7fcf9 100%);
}

.amri-education-recert-completed--summary {
    margin: 0 0 8px;
    color: #444;
}

.amri-education-recert-completed--actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* PR F — RetakeExamConfirmation page. Mirrors the ExamResult layout
   shape (centered container, plain banner with .msg-icn glyph, button
   row) but with the amber warning headline tone. */
.amri-education-retake-confirm {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.amri-education-retake-confirm--banner {
    margin: 24px 0 16px;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 16px;
}

.amri-education-retake-confirm--banner[data-grade="warning"] {
    color: #d68f1c;
}

.amri-education-retake-confirm--actions {
    margin: 24px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.amri-education-retake-confirm--retake-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Non-admin state of /profile/groupaccounts — legacy
   Views/Profile/Partial/CreateGroup.cshtml (`.page-frame > .max-width-400`,
   `h1.warning` #faaf40 amber with the .msg-icn glyph floated left). Reuses
   the ported `.msg-icn.warning-icn` glyph; the name row + Register button
   ride the native [hidden] attribute for the checkbox reveal. */
.amri-profile-groupadmin-only--form {
    max-width: 400px;
    margin: 24px 0 48px;
}

.amri-profile-groupadmin-only--title {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #faaf40;
}

.amri-profile-groupadmin-only--intro {
    margin: 0 0 20px;
}

.amri-profile-groupadmin-only--checkbox-row {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.amri-profile-groupadmin-only--checkbox-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.amri-profile-groupadmin-only--actions {
    margin: 16px 0 0;
}

/* The shared `.form-group` display rule outranks the UA `[hidden]` default,
   so restate the reveal contract explicitly for both toggled rows. */
.amri-profile-groupadmin-only--name-row[hidden],
.amri-profile-groupadmin-only--actions[hidden] {
    display: none;
}

/* PR G — public case-study funnel. Two-column grid (case-study scenario
   sidebar + questions panel) matching the Exam.cshtml shape so the visual
   convention stays consistent across the education area. */
.amri-education-case-study {
    padding-bottom: 48px;
}

.amri-education-case-study--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.amri-education-case-study--body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.amri-education-case-study--no-case-studies .amri-education-case-study--body {
    grid-template-columns: minmax(0, 1fr);
}

body.amri-education-case-study--case-studies-hidden .amri-education-case-study--case-studies {
    display: none;
}

body.amri-education-case-study--case-studies-hidden .amri-education-case-study--body {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .amri-education-case-study--body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.amri-education-case-study--case-studies {
    padding: 20px 24px;
    background: #f4f8fb;
    border: 1px solid #cfdfe8;
    border-radius: 6px;
}

.amri-education-case-study--case-study {
    margin: 0 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d9d9d9;
}

.amri-education-case-study--case-study:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.amri-education-case-study--case-study-title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 24px;
    color: #2b2b2b;
}

.amri-education-case-study--questions-panel {
    min-width: 0;
}

.amri-education-case-study--questions-heading {
    margin: 0 0 16px;
    font-size: 20px;
}

.amri-education-case-study--questions {
    list-style: decimal;
    padding-left: 24px;
    margin: 0;
}

.amri-education-case-study--question {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d9d9d9;
}

.amri-education-case-study--question:last-child {
    border-bottom: 0;
}

.amri-education-case-study--question-prompt {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.amri-education-case-study--answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
}

.amri-education-case-study--answer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
}

.amri-education-case-study--answer input[type="radio"] {
    accent-color: #bd1e2b;
    margin: 0;
}

.amri-education-case-study--actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.amri-education-case-study--status {
    font-size: 14px;
    color: #2b2b2b;
}

.amri-education-case-study--status--error {
    color: #bd1e2b;
}

/* Phase 4 PR G + H1-A — reusable per-radio answer-status markers.
   The spans sit next to each radio (pre-rendered in the question-list
   partial); the TS handler adds `--correct` or `--incorrect` when the
   user submits (case-study) or clicks Show Answer (practice). */
.amri-education-answer-status {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

.amri-education-answer-status--correct {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='none' stroke='%2367b329' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 9.5l3.5 3.5 7.5-8'/></svg>");
}

.amri-education-answer-status--incorrect {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='none' stroke='%23bd1e2b' stroke-width='2.5' stroke-linecap='round' d='M4 4l10 10M14 4L4 14'/></svg>");
}

/* Phase 4 PR G follow-up — post-submit completion panel. */
.amri-education-case-study--completion {
    margin-top: 32px;
    padding: 24px 0;
    border-top: 1px solid #efefef;
    text-align: center;
}

.amri-education-case-study--completion-percent {
    margin: 0 0 8px 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #67b329;
}

.amri-education-case-study--completion-prompt {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: #2b2b2b;
}

.amri-education-case-study--completion-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.amri-education-case-study--completion-actions .amri-btn {
    min-width: 260px;
}

/* Phase 4 PR G follow-up — /education/casestudies landing page.
   1:1 port of legacy `.grid-list.grid-case-studies` + `.case-study-card-container`
   + `.box` + `.btn-2` shapes. */
.amri-education-case-studies-landing {
    padding-top: 30px;
    padding-bottom: 30px;
}

.amri-education-case-studies-landing--header {
    max-width: 580px;
    margin: 0 0 24px 0;
}

.amri-education-case-studies-landing--intro p {
    margin: 0 0 14px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #2b2b2b;
}

.amri-education-case-studies-landing--divider {
    clear: both;
    margin: 25px 0 24px 0;
    border: none;
    border-bottom: 3px solid #bf1e2e;
}

.amri-education-case-studies-landing--banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 3px 12px 3px;
}

@media (max-width: 600px) {
    .amri-education-case-studies-landing--banner {
        flex-direction: column;
        align-items: stretch;
    }
}

.amri-education-case-studies-landing--banner-text {
    flex: 1;
}

.amri-education-case-studies-landing--banner-title {
    margin: 0 0 4px 0;
    font-size: 16px;
    line-height: 1.3;
    color: #2b2b2b;
}

.amri-education-case-studies-landing--banner-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #6d6d6d;
}

.amri-education-case-studies-landing--banner-cta {
    flex-shrink: 0;
}

.amri-education-case-studies-landing--tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 600px) {
    .amri-education-case-studies-landing--tiles {
        grid-template-columns: 1fr;
    }
}

.amri-education-case-studies-landing--tile {
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    background: #fffdf7;
    border: 1px solid #fdeace;
    border-radius: 3px;
    color: #2b2b2b;
    text-decoration: none;
    transition: border-color 0.1s ease-in, box-shadow 0.1s ease-in;
}

.amri-education-case-studies-landing--tile:hover,
.amri-education-case-studies-landing--tile:focus {
    border-color: #faaf40;
    box-shadow: 0 1px 6px rgba(250, 175, 64, 0.15);
    text-decoration: none;
    outline: none;
}

.amri-education-case-studies-landing--tile-title {
    margin: 0 0 12px 0;
    font-size: 20px;
    line-height: 1.2;
    color: #bd1e2c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amri-education-case-studies-landing--tile-description {
    flex: 1;
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.45;
    color: #6d6d6d;
}

.amri-education-case-studies-landing--tile-cta {
    display: inline-block;
    align-self: flex-start;
    padding: 0 16px;
    background: #faaf40;
    border-radius: 19px;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.1s ease-in;
}

.amri-education-case-studies-landing--tile:hover .amri-education-case-studies-landing--tile-cta,
.amri-education-case-studies-landing--tile:focus .amri-education-case-studies-landing--tile-cta {
    background: #f8b95c;
}

/* Phase 4 PR G follow-up — /education/casestudylist (paid-user browse). */
.amri-education-case-study-list {
    padding: 30px 0 60px 0;
}

.amri-education-case-study-list--header {
    margin-bottom: 24px;
}

.amri-education-case-study-list--empty {
    margin: 32px 0;
    color: #6d6d6d;
    font-size: 16px;
}

.amri-education-case-study-list--table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px 0;
}

.amri-education-case-study-list--table th,
.amri-education-case-study-list--table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #efefef;
    vertical-align: middle;
}

.amri-education-case-study-list--table th {
    background: #fffdf7;
    border-bottom: 2px solid #fdeace;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2b2b2b;
}

.amri-education-case-study-list--table tbody tr:hover {
    background: #fffdf7;
}

.amri-education-case-study-list--sort-link {
    color: inherit;
    text-decoration: none;
}

.amri-education-case-study-list--sort-link:hover,
.amri-education-case-study-list--sort-link:focus {
    color: #bd1e2c;
    text-decoration: underline;
}

.amri-education-case-study-list--view-col {
    width: 80px;
    text-align: center;
}

.amri-education-case-study-list--view-link {
    display: inline-block;
    padding: 6px 14px;
    background: #bd1e2c;
    border-radius: 14px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.1s ease-in;
}

.amri-education-case-study-list--view-link:hover,
.amri-education-case-study-list--view-link:focus {
    background: #a51b27;
    color: #fff;
    text-decoration: none;
}

.amri-education-case-study-list--pager {
    margin: 24px 0;
    display: flex;
    justify-content: center;
}

/* Phase 4 PR G follow-up — shared "Ready To Register" CTA partial.
   Mirrors legacy `.exams` + `.card-container` + `.card` + `.card--purple`
   + `.card--gold` block from custom-style.css + NewLandingLayout.css. */
.amri-exam-register-footer {
    padding: 48px 0 48px 0;
    background-color: #f4f4f4;
    /* Full-bleed: the "Ready To Register" band spans edge-to-edge like legacy,
       even when it renders as a block inside the constrained .page-frame (984px).
       Negative viewport margins break it out of the content column; the cards
       stay centered via their own max-width:1260px + margin:auto. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.amri-exam-register-footer--title {
    margin: 0 0 32px 0;
    font-size: 32px;
    line-height: 1.2;
    color: #bd1e2c;
    text-align: center;
}

.amri-exam-register-footer--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 900px) {
    .amri-exam-register-footer--cards {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

.amri-exam-register-footer--card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.amri-exam-register-footer--card-header {
    padding: 24px 16px;
    background: #bd1e2c;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.amri-exam-register-footer--card--pals .amri-exam-register-footer--card-header {
    background: #7160af;
}

.amri-exam-register-footer--card--bundle .amri-exam-register-footer--card-header {
    background: #faaf40;
}

.amri-exam-register-footer--card-body {
    flex: 1;
    padding: 24px 28px;
}

.amri-exam-register-footer--card-subtitle {
    margin: 0 0 12px 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #2b2b2b;
}

.amri-exam-register-footer--card-list {
    margin: 0;
    padding-left: 22px;
    color: #2b2b2b;
    font-size: 16px;
    line-height: 1.55;
}

.amri-exam-register-footer--card-list li {
    margin-bottom: 4px;
}

.amri-exam-register-footer--card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 28px 28px 28px;
}

.amri-exam-register-footer--cta {
    width: 100%;
    background: #bd1e2c;
    border-color: #bd1e2c;
}

.amri-exam-register-footer--cta:hover,
.amri-exam-register-footer--cta:focus {
    background: #a51b27;
    border-color: #a51b27;
}

.amri-exam-register-footer--card--pals .amri-exam-register-footer--cta {
    background: #7160af;
    border-color: #7160af;
}

.amri-exam-register-footer--card--pals .amri-exam-register-footer--cta:hover,
.amri-exam-register-footer--card--pals .amri-exam-register-footer--cta:focus {
    background: #5e509b;
    border-color: #5e509b;
}

.amri-exam-register-footer--card--bundle .amri-exam-register-footer--cta {
    background: #faaf40;
    border-color: #faaf40;
}

.amri-exam-register-footer--card--bundle .amri-exam-register-footer--cta:hover,
.amri-exam-register-footer--card--bundle .amri-exam-register-footer--cta:focus {
    background: #f49e1f;
    border-color: #f49e1f;
}

/* ===== Phase 4 PR H1-A — public practice-questions catalog (prodclone parity) ===== */

.amri-education-practice {
    padding-block: 32px;
}

.amri-education-practice--header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.amri-education-practice--title {
    margin: 0;
    color: #ae3032;
}

.amri-education-practice--intro {
    color: #555;
    margin-top: 8px;
    max-width: 720px;
}

.amri-education-practice--view-all-link {
    margin-left: 8px;
    color: #ae3032;
    text-decoration: underline;
}

/* Three-way segmented tab control — top right of header on desktop,
   full-width row on mobile. Matches legacy .btn-threeway-switch. */
.amri-education-practice--exam-switch {
    display: inline-flex;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
}

.amri-education-practice--exam-switch-button {
    appearance: none;
    border: none;
    background: #fff;
    color: #333;
    font-weight: 600;
    padding: 8px 24px;
    cursor: pointer;
    border-right: 1px solid #d0d0d0;
    transition: background 120ms, color 120ms;
}

.amri-education-practice--exam-switch-button:last-child {
    border-right: none;
}

.amri-education-practice--exam-switch-button:hover {
    background: #f4f4f4;
}

.amri-education-practice--exam-switch-button--active {
    background: #ae3032;
    color: #fff;
}

.amri-education-practice--exam-switch-button--active:hover {
    background: #ae3032;
}

@media (max-width: 640px) {
    .amri-education-practice--exam-switch {
        display: flex;
        width: 100%;
    }

    .amri-education-practice--exam-switch-button {
        flex: 1;
    }
}

.amri-education-practice--exam {
    /* Two-column question grid down to 768px (matches legacy);
       single column at narrower widths. */
}

.amri-education-practice--empty {
    color: #888;
    font-style: italic;
}

/* ===== Phase 4 PR H1-A — reusable Question + Answer list ===== */

.amri-education-question-list {
    list-style: decimal outside;
    padding: 0;
    margin: 0;
    /* Two-column grid at desktop / tablet; single column on phone. */
    column-count: 1;
    column-gap: 40px;
}

@media (min-width: 768px) {
    .amri-education-question-list {
        column-count: 2;
    }
}

.amri-education-question {
    margin: 0 0 24px 24px;
    padding: 0;
    /* Keep each question intact within its column (no orphaned questions
       splitting across columns). */
    break-inside: avoid;
    page-break-inside: avoid;
}

.amri-education-question--prompt {
    margin: 0 0 8px;
    font-weight: 400;
}

.amri-education-question--answers {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amri-education-question--answer {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
}

.amri-education-question--answer input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

.amri-education-question--answer .amri-education-question--answer-text {
    line-height: 1.4;
}

/* Correct-answer highlight — applied to <label> when Show Answer is clicked
   (PracticeStaticReveal mode). Matches legacy `.answer-highlight` pale
   yellow/cream background. */
.amri-education-question--answer-highlight {
    background-color: #fbf2d8;
    padding: 4px 8px;
    border-radius: 3px;
}

.amri-education-question--answer-toggle-wrapper {
    margin: 8px 0 0;
}

.amri-education-question--answer-toggle {
    color: #ae3032;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
}

.amri-education-question--answer-toggle:hover,
.amri-education-question--answer-toggle:focus {
    text-decoration: none;
}

.amri-education-question--answer-best {
    margin: 12px 0 0;
}

.amri-education-question--answer-best-text {
    margin: 0 0 8px;
}

.amri-education-question--answer-best-text strong {
    color: #ae3032;
    font-weight: 700;
}

.amri-education-question--answer-best-explanation {
    font-size: 0.95rem;
    color: #444;
}


/* ===== Phase 4 PR H1 — Help (in-exam instructions reference) ===== */

.amri-education-help {
    padding-block: 32px;
}

.amri-education-help--body {
    max-width: 720px;
    margin: 0 auto;
}

.amri-education-help--intro {
    color: #555;
    margin: 8px 0 16px;
}

.amri-education-help--rule {
    border: none;
    border-top: 2px solid #ae3032;
    margin: 16px 0;
}

.amri-education-help--instructions {
    line-height: 1.6;
}

.amri-education-help--actions {
    margin-top: 24px;
    text-align: center;
}

/*
 * Phase 5 PR 2b — Collapsed-state CSS for .collapsible / .js-collapsible accordions.
 *
 * Legacy markup carries inline style="display: none;" on .collapsible-content
 * for the initial collapsed state. That works for static Razor views
 * (groupFaqsSection.cshtml emits it directly), but fails for content produced
 * by IWidgetMarkerRenderer because the HtmlContentSanitizer strips all inline
 * style attributes (XSS hardening). Without this rule, the AllFaqs widget
 * renders with every answer expanded at first paint.
 *
 * Bridges the gap: the .collapsed class controls visibility via CSS; the
 * chrome/faq-accordion.ts click handler toggles the class + inline display
 * for the slide animation (the JS-set inline display wins over this rule
 * exactly when the user clicks, which is what we want).
 */
.collapsible.collapsed > .collapsible-content {
    display: none;
}

/*
 * Phase 5 PR 2b — Chevron icons for .btn-toggle accordion control.
 *
 * Legacy CSS (global.css:650) referenced a sprite PNG (Content/Styles/images/icns-arrows.png)
 * that was never copied into v2's wwwroot. Result: v2 rendered the .btn-toggle as a blank
 * yellow circle. Replacing with an inline-SVG data URI so v2 owns the icon source and there's
 * one less raster asset to track. Chevron rotates 180deg on expand for the up/down visual swap
 * — matches the legacy two-state arrow without needing a second image.
 */
.collapsible > h3 > .btn-toggle,
.collapsible > h2 > .btn-toggle {
    background-image: 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' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13px 13px;
    transition: transform 200ms ease;
}

.collapsible.collapsed > h3 > .btn-toggle,
.collapsible.collapsed > h2 > .btn-toggle {
    background-image: 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' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13px 13px;
}

.collapsible:not(.collapsed) > h3 > .btn-toggle,
.collapsible:not(.collapsed) > h2 > .btn-toggle {
    transform: rotate(180deg);
}

/*
 * Hide the "Default Style" / "Media query: Max NNNNpx" debug badge that
 * `responsive.css:12` injects via `.page:after`. Legacy carries the same
 * rule but the deployed prod-clone doesn't show the badge — likely
 * removed in a build step / prod-only stylesheet the v2 port doesn't have.
 * Easiest fix: suppress via override.
 */
.page::after {
    display: none !important;
}

/*
 * Profile → Notifications page (Phase 6 parity). Actionable notification
 * cards in a responsive grid. New BEM CSS (`.block__element`) per the
 * project convention for net-new styles.
 */
.amri-profile-notifications--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.amri-profile-notifications--empty {
    margin-top: 20px;
    color: #555;
}

.amri-notification-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.amri-notification-card__message {
    margin: 0;
    line-height: 1.4;
}

.amri-notification-card__actions {
    margin: 0;
}

/* Diagnostic Skills Challenge — "Show Diagnosis" reveal. Native <details>
   disclosure (no JS) matching the legacy interactive self-test: the answer
   (WPW diagnosis + accessory-pathway table) stays hidden until the reader
   clicks. Summary is styled as the legacy gold pill button. */
.amri-diagnosis-reveal {
    margin: 24px 0;
}

.amri-diagnosis-reveal__toggle {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    background: #faaf40;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 12px 30px;
    border-radius: 22px;
}

.amri-diagnosis-reveal__toggle::-webkit-details-marker {
    display: none;
}

.amri-diagnosis-reveal[open] .amri-diagnosis-reveal__toggle {
    margin-bottom: 18px;
}

.amri-diagnosis-reveal__body {
    max-width: 500px;
}

/* Diagnostic Challenge page layout — case text on the left, ECG image floated
   to the right (matches legacy /c_education/diagnosticskills). */
.amri-diagnostic {
    padding: 40px 0 10px;
}

.amri-diagnostic__intro {
    font-size: 16px;
    margin: 0 0 24px;
}

.amri-diagnostic__case {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.amri-diagnostic__case-text {
    flex: 1 1 55%;
    min-width: 280px;
}

.amri-diagnostic__case-image {
    flex: 1 1 35%;
    min-width: 280px;
    order: 2;
}

.amri-diagnostic__case-image img {
    max-width: 100%;
    height: auto;
}

.amri-diagnostic__prompt {
    font-weight: 700;
    margin: 28px 0 16px;
}

@media (max-width: 767px) {
    .amri-diagnostic__case {
        flex-direction: column;
    }
}

/* Standout callout variant for the generic `contentSection` block (used by the
   SidebarPage / Page content sections). Mirrors the legacy Webflow
   `.mini-cta-container` register-prompt: light background + red left-accent bar.
   New BEM CSS (the legacy Webflow classes weren't ported); toggled per-block by
   the contentSection "Callout" setting. */
.amri-content-section--callout {
    background: #f7f7f7;
    border-left: 4px solid #bd1e2c;
    padding: 22px 26px;
    margin: 22px 0 25px;
}
.amri-content-section--callout .heading1 {
    margin-top: 0;
}
.amri-content-section--callout .btn-wrapper {
    margin-bottom: 0;
}

/* The dynamic Practice Questions sidebar widget reuses _QuestionAnswerList,
   whose list goes two-column (column-count:2) on the WIDE practice-questions
   page. In the narrow sidebar that splits the single question into a half-width
   column with dead space on the right — force one full-width column here. */
.sidebar-layout .sidebar .amri-education-question-list {
    column-count: 1;
}

/* Same reason on CaseStudyFull: it renders _QuestionAnswerList inside the
   narrow right-hand column of the case-study grid
   (.amri-education-case-study--body is 1.4fr / 1fr), where the wide
   practice-questions page's two-column list would halve each question again. */
.amri-education-case-study--questions-panel .amri-education-question-list {
    column-count: 1;
}

/* A SidebarPage node with NO sidebar content shouldn't leave its main column
   pinned to the 58% two-column width — that stranded the content in the left
   ~58% with an empty ~32% gutter and an orphaned vertical divider on the right.
   SidebarPage.cshtml adds the `.no-sidebar` modifier when `sidebarContent` is
   empty; the content then takes the full page-frame width and the divider drops.
   Scoped modifier — the two-column (with-sidebar) case keeps the global 58/32
   split untouched. */
.sidebar-layout.no-sidebar .content {
    float: none;
    width: 100%;
}
.sidebar-layout.no-sidebar .sidebar-shadow-helper::after {
    display: none;
}

/* Legacy renders the featured diagnostic case title bold + red (plain text, not
   a link). The authored teaser wraps it in <strong>; colour it the AMRI red to
   match, scoped to sidebar content-section bodies. */
.sidebar-layout .sidebar .amri-content-section .body-text strong {
    color: #bd1e2c;
}

/* ShopperApproved rotating-reviews widget in the checkout order-summary sidebar
   (~350px). The vendor's `sa-medium-style` adds 45px horizontal arrow-gutter
   padding + 20px per-slide padding, crushing the review text to ~146px in the
   narrow column ("margin too big, can't see the text"). Scope the overrides to
   our `.rotating-reviews` wrapper: shrink the arrow gutters + arrows to match,
   anchor the right arrow to the right edge, and trim the slide padding so the
   review text fills the sidebar. `!important` is needed to beat the widget's
   injected inline/style-tag rules. */
.rotating-reviews .sa-slider-container-main {
    padding-left: 26px !important;
    padding-right: 26px !important;
}
.rotating-reviews .sa-slider-container-main .arrow {
    width: 26px !important;
}
.rotating-reviews .sa-slider-container-main .arrow.right.next {
    left: auto !important;
    /* QA #11 (86bb1f8y4): NOT 0. `.sa-slider-container-main` has
       `overflow-x: hidden` (it clips the sliding carousel track), so anchoring
       the next-arrow flush to the container's right edge (`right: 0`) clips the
       right half of the chevron glyph at every breakpoint. Inset it a few px so
       the whole chevron sits inside the overflow boundary. */
    right: 8px !important;
}
.rotating-reviews .sa-slide {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* `.content` — the uniform wrapper that holds every template's rendered body
   inside `_Layout`. It must NOT add bottom padding: most layouts (ContentPage,
   ExamLanding, SidebarPage) end in a full-bleed band (register footer, landing,
   sidebar-layout) that has to butt flush against the site footer — any bottom
   padding here shows as a white gap below the band (Raminta QA, all layouts).
   Bottom breathing room for plain text pages belongs on the inner text container
   (below), not on `.content`, so it never separates a full-bleed band from the
   footer. (Supersedes the earlier Phase 2 `padding-bottom: 54px`, which created
   the gap uniformly.) */
.content {
    padding-bottom: 0;
}

/* Breathing room before the footer for the constrained text column ONLY — the
   inner content containers, which full-bleed bands break OUT of, so this can't
   reintroduce the band→footer gap. Covers the Page / ContentPage / SidebarPage
   text wrappers. */
.content > .page-frame:last-child,
.content > .amri-container:last-child {
    margin-bottom: 40px;
}

/* Checkout Order Summary discount field — reuse the canonical `.amri-field-error`
   inline-error style (the `.amri-form` wrapper enables it). The message renders as
   a BLOCK below the input+button row (no longer a squeezed third flex child) and
   collapses while empty; the input gets the red error border on `.has-error`, so
   an invalid discount code looks identical to a payment/account field error.
   See findings/2026-08-05-shipping-selector-step1-port.md + the form-input
   consistency plan. */
.amri-checkout--discount-field span.amri-field-error {
    padding: 4px 20px 0;
}
.amri-checkout--discount-field span.amri-field-error:empty {
    display: none;
}
.amri-checkout--discount input.has-error[type='text'],
.amri-checkout--discount input.has-error[type='text']:focus {
    border-color: #bd1e2b;
    background-color: #fdf4f4;
    box-shadow: none;
}
@media (max-width: 768px) {
    .amri-checkout--discount-field span.amri-field-error {
        padding: 4px 15px 0;
    }
}

/* Checkout Suggested Materials — the expandable description panel
   (.amri-checkout--suggested-item-content) is the last child of the
   `display:flex` row, so when shown it laid out as a column to the RIGHT of the
   title/price/controls. Legacy renders it as a full-width block BELOW the row
   (content.css .materials-block). Make the flex row wrap and force the panel
   onto its own 100%-width line so it opens underneath, matching legacy.
   Row border-top / :hover / :first-child styling is untouched. */
.amri-checkout--suggested-item {
    flex-wrap: wrap;
}
.amri-checkout--suggested-item-content {
    flex-basis: 100%;
    width: 100%;
}
/* QA #15 (86bb22p59) — the `flex-wrap: wrap` above (needed so the description
   panel drops onto its own line below) ALSO lets the stepper + checkbox wrap to
   a 2nd line on long-title rows (e.g. "Handbook of Emergency Cardiovascular
   Care") once the section is narrower than ~620px — a narrow two-column band
   (~1025–1090px) hits this in BOTH Chromium and WebKit (it was reported in
   Safari QA, but it is NOT WebKit-specific). Give the title `flex-basis: 0` +
   `min-width: 0` so it absorbs the shrink and wraps its own TEXT, keeping the
   price + controls on the row (`min-width: 0` alone does not — the title must
   also start from a 0 basis). Desktop only: the ≤768px layout sizes the title
   via `width: calc(100% - 40px)` and must not get `flex-basis: 0`. */
@media (min-width: 769px) {
    .amri-checkout--suggested-item-title {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* QA feedback (86bb1fdza) — cart.ts `refreshCartPage()` re-fetches + swaps the
   cart on every mutation (add/remove line, qty change, suggested-material
   toggle). It was silent, so the change felt like nothing happened ("confusing
   when no loading icon is displayed", most noticeable adding a suggested
   material on mobile). Show a fixed, viewport-centred spinner + faint backdrop
   for the duration — rendered only while the container carries `.is-refreshing`
   (set/cleared in refreshCartPage). No image, no layout shift. */
.amri-checkout--container.is-refreshing::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    z-index: 1000;
}
.amri-checkout--container.is-refreshing::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #bd1e2b;
    border-radius: 50%;
    z-index: 1001;
    animation: amri-cart-refresh-spin 0.7s linear infinite;
}
@keyframes amri-cart-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Order Confirmation (receipt / final) page ─────────────────────────────
   Standalone page matching legacy OrderConfirmation.cshtml: a narrow centered
   column, heading with Print top-right, and one bordered "Order Summary" card
   (order lines + totals + shipping + payment as stacked sub-blocks) between two
   red dividers. No checkout wizard chrome here. */
.amri-checkout--order-confirm {
    max-width: 640px;
    margin: 40px auto 60px;
    padding: 0 20px;
}
.amri-checkout--receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.amri-checkout--receipt-head .amri-checkout-title {
    margin: 0;
}
/* Red rule above + below the summary card — legacy `.hr-red`. */
.amri-checkout--receipt-divider {
    clear: both;
    margin: 24px 0;
    border-bottom: 3px solid #bd1e2b;
}
/* The single bordered card wrapping the three sub-blocks. */
.amri-checkout--receipt-summary {
    background: #fffef7;
    border: 1px solid #d8d8d8;
    padding: 8px 4px 16px;
}
.amri-checkout--receipt-block {
    padding: 12px 16px 0;
    margin-bottom: 20px;
}
.amri-checkout--receipt-block:last-child {
    margin-bottom: 0;
}
/* The order-summary sub-block reuses the shared item/summary rows; keep the
   totals flush with the card padding (they carry their own left/right padding
   on the cart page, which is too wide inside this narrower card). */
.amri-checkout--receipt-summary .amri-checkout--summary-content-info,
.amri-checkout--receipt-summary .amri-checkout--summary-content-total {
    padding-left: 0;
    padding-right: 0;
}

/* Heading is title-case on the receipt (legacy "Order Confirmation"), not the
   uppercase used by the in-flow checkout step titles. */
.amri-checkout--receipt-head .amri-checkout-title {
    text-transform: none;
}

/* Line items: legacy compact rows — red bold name (left), qty, price (right),
   each product its own row, no borders/box. */
.amri-checkout--receipt-items {
    border: none;
    margin-top: 8px;
}
.amri-checkout--receipt-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-family: "trade-gothic-next";
}
.amri-checkout--receipt-item-name {
    flex: 1 1 auto;
    color: #bd1e2b;
    font-weight: bold;
}
.amri-checkout--receipt-item-qty {
    flex: 0 0 auto;
    color: #3e3e3e;
    min-width: 24px;
    text-align: right;
}
.amri-checkout--receipt-item-price {
    flex: 0 0 auto;
    color: #3e3e3e;
    min-width: 72px;
    text-align: right;
}

/* Totals: legacy renders a right-aligned compact "Label: value" block with NO
   border box (v2's cart summary wraps it in a bordered card — remove that here). */
.amri-checkout--receipt-totals {
    border: none !important;
    background: none;
    max-width: 300px;
    margin-left: auto;
    padding: 0;
}
.amri-checkout--receipt-totals .amri-checkout--summary-content-info,
.amri-checkout--receipt-totals .amri-checkout--summary-content-total {
    padding: 4px 0 0;
    border: none;
    margin: 0;
}
.amri-checkout--receipt-totals .amri-checkout--summary-content-total {
    text-transform: none;
    margin-top: 6px;
}

/* Payment Info: two columns (Billing Address | Payment Type), matching legacy. */
.amri-checkout--receipt-payment {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.amri-checkout--receipt-payment-col {
    flex: 1 1 45%;
    min-width: 200px;
}
.amri-checkout--receipt-subhead {
    color: #bd1e2b;
}
.amri-checkout--receipt-payment .card-logo {
    height: 26px;
    vertical-align: middle;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .amri-checkout--order-confirm {
        margin: 24px auto 40px;
        padding: 0 15px;
    }
    .amri-checkout--receipt-totals {
        max-width: none;
    }
}

/* ============================================================
   /certification/ ("How to Get Certified") and
   /certification/about-our-programs/ ("Convenient Online Programs")
   — the two-column step panels.

   These pages import a legacy `.js-column-toggle` widget: a
   Recertification / Initial-Certification switch that reveals one
   column at a time on small screens (the JS added `.show-second`
   to the container). That JavaScript was never ported to v2, so on
   ≤768px the switch was a dead button and the second column
   ("Initial Certification" steps + the $275 pricing block) was
   permanently hidden and unreachable (QA 86bbfwxcx #3 + #4).

   Fix: drop the toggle and just STACK the two columns on small
   screens — both always visible. Scoped to `.js-column-toggle-container`,
   a class only these two pages carry, so it can't touch other
   `.two-column` / `.slide-two-column` layouts (login, quiz, etc.).
   ============================================================ */

/* The switch is backed by no JS — never show it. */
.js-column-toggle-container .switch-wrapper { display: none !important; }

/* These pages render a full-bleed `.landing` inside the template's
   `.max-width-660` prose column (Page.cshtml wraps bodyText there). The 663px
   prose cap is right for text pages but squeezes this landing: above 1044px
   the top slide's own `.page-frame` breaks out to 984px while the bottom
   pricing row stays trapped at 663px (cramped left, empty right — the
   "phantom 3rd column"), and at ≤1044px the whole landing is stuck at 663px
   with dead space on the right instead of resizing to fill the page. Lift the
   cap when the column holds a `.landing` so the content fills the full page
   width and resizes fluidly at every breakpoint. Scoped via :has(.landing) to
   exactly these two pages — no other page puts a `.landing` inside
   `.max-width-660` (the ExamLanding / WebflowLanding / CaseStudies templates
   are full-width and don't use the prose wrapper; the redeem CTA is
   `.landing-secondary`, a different class). */
.max-width-660:has(.landing),
.max-width-660:has(.landing) > article,
.max-width-660:has(.landing) > article > .body-text {
    max-width: none;
    width: auto;
}

/* 769–1044px: columns sit side by side but the page-frame is fluid, so the
   boxes are at their narrowest and step 5 ("Stay Current") wraps to three
   lines. The box's bottom white `:after` cap (up to 32px tall) then overlaps
   that last line, cutting off "…recertification will be easy." (QA 86bbfwxcx
   #3 — a v2-only regression; legacy's font renders a hair shorter and fits).
   Add bottom padding so the last line always clears the cap. Above 1044px the
   frame is a fixed 984px, the boxes are wide and step 5 fits in two lines. */
@media only screen and (min-width: 769px) and (max-width: 1044px) {
    .convenient-programs .slide-two-column .col-content { padding-bottom: 42px; }
}

/* ≤768px: stack both columns instead of the dead toggle. responsive.css
   here hides the 2nd column and shows the switch; override to reveal both,
   full width, stacked, each under its own restored title. */
@media only screen and (max-width: 768px) {
    .js-column-toggle-container > .col,
    .js-column-toggle-container > .col + .col,
    .js-column-toggle-container.show-second > .col,
    .js-column-toggle-container.show-second > .col + .col {
        display: block;
        float: none;
        width: auto;
    }
    /* The toggle design hid the per-column headings (the switch labels
       stood in for them); with the switch gone they must return. */
    .slide-two-column .col-title { display: block; }
    /* Separate the stacked panels. */
    .js-column-toggle-container > .col + .col { margin-top: 32px; }
}

/* ─── Hero (.bloghero) — bounded box, QA 86bbdgcpa ───────────────────────────
   Shared by ArticlePost (blog posts) and ContentPage (rhythms / drugs / other
   educational content). Legacy was INCONSISTENT here — the blog/rhythms layout
   rendered a short 1100×200 contain band (svt-vs-vt), while the drug layout let
   the image render at natural size (epinephrine 1100×674, a large banner). v2's
   unported main.css base (`img { width:auto }`, no cap) rendered everything at
   full natural height ("top picture too big" — Raminta), and a fixed 200px band
   over-shrank large diagrams (epinephrine → an unreadable sliver).

   Instead of chasing legacy's per-page inconsistency, give the hero ONE bounded
   box for control: cap the image at max-width 100% (of the ≤1100 container) AND
   max-height 400px, scaling to fit while preserving aspect ratio and centering.
   Wide banners and tall diagrams both land in a predictable, readable size.
   Layers on main.css (`background:#bd1e2b`, `font-size:0`, img `display:block`);
   v2-overrides loads after it so these win. */
.bloghero {
    /* Shrink the band to the (bounded) image so the red background hugs it
       instead of showing as side-bars around a narrower image; capped at the
       viewport so a wide image can't overflow on small screens. Centered. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.bloghero img {
    display: block;
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
}

/* ---- Front-end "Edit this page" pill (backoffice users only) --------------
   Rendered by Views/Shared/_BackOfficeEditPill.cshtml, which emits nothing at
   all for anonymous visitors — so none of this can affect the public site.

   New BEM CSS (`.block__element`) per the project convention for net-new styles.

   z-index 900 is deliberate: it must sit ABOVE ordinary page content but BELOW
   every overlay, so the pill can never cover an open dialog. Existing layers are
   `.modal-context` 9999 (global.css), `.preloader` 99999-1000000, and the mobile
   `.order-details` sheet 1000.

   Bottom-RIGHT is safe: the only other fixed bottom element is
   `.footer-secondary > table` (bottom-LEFT, global.css), and the `.page::after`
   breakpoint debug badge that would otherwise sit here is suppressed earlier in
   this file. */
.amri-bo-edit-pill {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #1b264f;
    color: #fff;
    font: 600 14px/1.2 'Oswald', 'Arial', sans-serif;
    letter-spacing: 0.3px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    opacity: 0.92;
}

.amri-bo-edit-pill:hover,
.amri-bo-edit-pill:focus {
    background: #2b3a70;
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

/* Keyboard users must get a visible focus ring — WCAG 2.1 AA is the project
   floor and the pill's own hover colour is not a sufficient focus indicator. */
.amri-bo-edit-pill:focus-visible {
    outline: 3px solid #faaf40;
    outline-offset: 2px;
}

.amri-bo-edit-pill__icon {
    font-size: 15px;
    line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .amri-bo-edit-pill {
        transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
    }
}

/* Narrow screens: drop the text and show a compact round button so the pill
   can't cover the footer CTA or the mobile nav drawer toggle. */
@media only screen and (max-width: 600px) {
    .amri-bo-edit-pill {
        right: 12px;
        bottom: 12px;
        padding: 11px;
        border-radius: 50%;
    }

    .amri-bo-edit-pill__label {
        /* Visually hidden, still announced to screen readers. */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/*
 * External (social) login buttons — Google + Microsoft.
 * Rendered by Views/Shared/Auth/_SocialLoginButtons.cshtml on the login modal +
 * checkout Account step. Brand logo is an inline SVG inside each button. Buttons
 * share one row on wider screens and stack below 480px. Each button is its own
 * POST <form>, so the flex container is the group of forms.
 */
.amri-social-actions {
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
    margin-top: 12px;
}

.amri-social-form {
    /* Grow to share the row; wrap to stack when two no longer fit (~180px each). */
    flex: 1 1 180px;
    margin: 0;
}

/* Breathing room before a "Back to login" / "New user?" row that follows the
 * social buttons (register + login modals). */
.amri-social-actions + .amri-actions {
    margin-top: 16px;
}

.amri-social-form .amri-social-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
}

/* Shared brand mark (Google/Microsoft) — sign-in buttons AND the profile
 * Linked-accounts panel. See Views/Shared/Auth/_ProviderLogo.cshtml. */
.amri-provider-logo {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* Narrow screens: always stack, full width. */
@media (max-width: 480px) {
    .amri-social-actions {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .amri-social-form {
        flex: 1 1 auto;
    }
}

/*
 * Profile → Linked accounts panel. Provider name gets its brand logo to the
 * left; the Link/Unlink buttons are a compact size (the base .amri-btn min-width
 * makes even data-size="small" render as a wide pill — this trims it).
 */
.amri-linked-account--provider {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Stack the email over its Link/Unlink button with breathing room, left-aligned
 * so the button hugs its content rather than stretching. */
.amri-linked-account {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.amri-linked-account--btn.amri-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 3px 12px 5px;
    font-size: 12px;
}

/* "Link <provider>" buttons (when a provider isn't linked yet) — stack with a
 * gap so the rows don't touch, spaced from the text/list above. */
.amri-linked-account--add {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
}

.amri-linked-account--add .amri-linked-account--form {
    margin: 0;
}