/*
 * Brand tokens — www2.glds.com.
 *
 * Sampled from the site's own Elementor CSS rather than guessed: #2366C5 is the
 * brand blue (19 uses across the header/nav/buttons), #4391FF its light variant,
 * #1F2234 the dark navy. The Elementor kit's global palette is still Elementor's
 * defaults (#6EC1E4 / #61CE70 / Roboto), so it is not a reliable source.
 *
 * Replaces the previous palette, which was inherited from the themify build on
 * www.glds.com: #3c5b78 slate blue and the #8d7150 / #997b57 browns.
 *
 * Contrast was checked, not assumed. White text sits on --primary (5.4:1) and
 * --primary-dark (7.4:1), both AA for body text. --accent (#4391FF) is only
 * 3.4:1 on white, so it is used for focus rings and decoration only, never for
 * text or as a background behind white text.
 *
 * No font-family is declared anywhere in this file, so the portal already
 * inherits the site's Roboto / Roboto Slab.
 */
.client-blocks-v2 {
    --glds-primary: #2366C5;
    --glds-primary-dark: #1B4F9C;
    --glds-accent: #4391FF;
    --glds-ink: #1F2234;
    --glds-muted: #7A7A7A;
    --glds-border: #E3E3E3;
    --glds-surface: #FAFBFD;

    /* Geometry sampled from the site: 8px controls, ~14px cards, and a wide
       low-opacity shadow rather than a tight dark one. */
    --glds-radius: 8px;
    --glds-radius-card: 14px;
    --glds-shadow: 0 1px 2px rgba(31, 34, 52, 0.04), 0 10px 30px rgba(31, 34, 52, 0.06);

    /* Matches the site. Elementor's default is 0.3s ease and the theme uses it
       throughout - .elementor-button computes to `0.3s ease all`, and
       `color 0.3s`, `fill 0.3s`, `transform 0.3s` and bare `0.3s` recur across
       reset.css, frontend.min.css, widget-nav-menu.css and the page CSS. The
       portal was on .15s ease-in-out, twice as fast as everything around it, so
       hovers felt clipped next to the site header. */
    --glds-transition: 0.3s ease;
}

/*
 * GLDS support portal (login-sas).
 *
 * Widths track the Elementor kit's --container-max-width (1140 / 1024 / 767) so
 * the portal lines up with the site header above it. The portal renders as a
 * classic WordPress page inside hello-elementor's .page-content, which applies
 * no max-width of its own.
 */

.client-blocks-v2 {
    padding: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 1rem;
    /*
     * No overflow-x here on purpose.
     *
     * It used to be `auto`, which made this the clipping ancestor for everything
     * inside. The first navigation button sits flush with this element's left
     * edge, so its focus ring - 2px wide at a 2px offset, drawn OUTSIDE the box -
     * was sliced off on the left when focused.
     *
     * It was also redundant: the wide case table scrolls in its own
     * .table-responsive wrapper, which is the correct place for it. Scrolling a
     * whole screen because one table is wide would be the wrong behaviour anyway.
     */
    /* Containing block for the loading overlay. The overlay is position:absolute
       and this element had no position, so it resolved against a far ancestor and
       spilled up over the site header. */
    position: relative;
}

@media (max-width: 1200px) {
    .client-blocks-v2 {
        max-width: 1024px;
        /* Match the header's gutter once the container shrinks, so the portal
           does not touch the viewport edge. */
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 1024px) {
    .client-blocks-v2 {
        max-width: 767px;
    }
}

/* ===========================================================================
 * Sticky footer for the portal page.
 *
 * The login screen is short, so the footer rode up directly beneath it and left
 * the bottom half of the window empty.
 *
 * Done in CSS rather than JavaScript on purpose. A script would have to measure
 * the header and footer and set a height, then repeat that on resize, on zoom, on
 * orientation change and after webfonts load - and you would see the wrong layout
 * for a frame before it corrected. Flexbox expresses the intent directly ("main
 * takes the leftover space") and the browser recomputes it for free, including at
 * widths where the footer wraps to a different height.
 *
 * The body class comes from glds_sas_body_class(), so this touches no other page.
 * 100dvh, with a 100vh fallback, so mobile browser chrome does not cause a jump.
 * ======================================================================== */
body.glds-portal-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* main absorbs the slack; header and footer keep their natural height. Without
   flex: 0 0 auto they could be shrunk when content is tall. */
body.glds-portal-page > header,
body.glds-portal-page > footer {
    flex: 0 0 auto;
}

body.glds-portal-page > main {
    flex: 1 0 auto;
}

/* ===========================================================================
 * Focus, once, for everything focusable in the portal.
 *
 * Individual components were each given their own :focus-visible ring, which left
 * gaps - sort links in table headers, sp-link, the logo link, checkboxes, file
 * inputs - and anything missed fell back to the browser's (and WordPress's)
 * dotted outline. That is the dotted rectangle that kept appearing, and it lingers
 * after a click because the element keeps focus.
 *
 * :focus is cleared and :focus-visible carries the ring, so pointer clicks show
 * nothing while keyboard focus is clearly visible. Clearing :focus WITHOUT
 * restoring :focus-visible is the common version of this mistake and makes the
 * portal unusable by keyboard.
 *
 * Outline follows each element's own border-radius, so no radius is set here.
 * ======================================================================== */
.client-blocks-v2 a:focus,
.client-blocks-v2 button:focus,
.client-blocks-v2 [role="button"]:focus,
.client-blocks-v2 input:focus,
.client-blocks-v2 select:focus,
.client-blocks-v2 textarea:focus {
    outline: none;
}

.client-blocks-v2 a:focus-visible,
.client-blocks-v2 button:focus-visible,
.client-blocks-v2 [role="button"]:focus-visible,
.client-blocks-v2 input:focus-visible,
.client-blocks-v2 select:focus-visible,
.client-blocks-v2 textarea:focus-visible {
    outline: 2px solid var(--glds-accent);
    outline-offset: 2px;
}

/*
 * Links ease their colour, the way the site does.
 *
 * The theme and Elementor transition links by default (`.e-con a` computes to
 * `all`, and the page CSS ships `color 0.3s` repeatedly). In the portal the tabs,
 * buttons and pagination had explicit transitions but plain links - Profile,
 * Logout, "Details", sort headers, sp-link, the portal logo - had none, so they
 * snapped while everything around them eased.
 *
 * Deliberately not !important and deliberately early in the file: the component
 * rules below are more specific and still win. The rule this replaces was
 * `a { transition: none !important }`, which is why nothing eased at all.
 */
.client-blocks-v2 a {
    transition: color var(--glds-transition),
                background-color var(--glds-transition),
                border-color var(--glds-transition);
}

.client-blocks-v2 .links { width: 100%; display: inline-block; vertical-align: middle; text-align: left;}
.client-blocks-v2 .links a { display: inline-block; vertical-align: middle;background: var(--glds-primary); padding: 8px 15px; font-size: 14px; color: #fff; text-decoration: none; line-height: normal; border: 1px solid var(--glds-primary); border-radius: var(--glds-radius); margin: 3px }
.client-blocks-v2 .links a:hover { background: var(--glds-primary-dark);}
.client-blocks-v2 .links a.live-msg { background: none; border:none; padding: 0;}
.client-blocks-v2 .links a.linked-in { padding: 0;}
.client-blocks-v2 .links a.linked-in img{  float: left;}

.client-blocks-v2 .links .welcome { float: right; color: var(--glds-ink); font-weight: 600; margin: 10px 0 0;}

/* Was 96%, sized for themify's wider column. Inside the 1200px container that
   4% is wasted on both sides of an already narrow table. */
.client-blocks-v2 .row_inner {
    max-width: 100% !important;
}
.client-blocks-v2 .client-header {
    margin-top: 1rem;
}

.client-blocks-v2 .client-header .bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.client-blocks-v2 .client-header .bar .profile .user-links {
    padding-top: 5px;
    color: var(--glds-ink);
    font-weight: bold;
    text-align: right;
}

/*
 * Profile / Logout were ink, bold and undecorated - identical to the "Welcome
 * <name>" text beside them, so nothing signalled they were clickable.
 *
 * They are underlined as well as coloured on purpose: WCAG 1.4.1 (Use of Colour)
 * requires a non-colour cue, so colour alone would not be enough even in brand
 * blue. Underline is the cue; the colour is secondary.
 */
.client-blocks-v2 .client-header .bar .profile .user-links .user-link {
    color: var(--glds-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.client-blocks-v2 .client-header .bar .profile .user-links .user-link.active {
    color: var(--glds-ink);
    text-decoration: underline;
}

.client-blocks-v2 .client-header .bar .profile .user-links .user-link:hover {
    color: var(--glds-primary-dark);
    text-decoration: underline;
}

.client-blocks-v2 .client-header .bar .profile .user-links .user-link:focus-visible {
    outline: 2px solid var(--glds-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The "|" between the two links is decoration; it is hidden from screen readers
   in the markup, and given breathing room here. */
.client-blocks-v2 .client-header .bar .profile .user-links .user-link-sep {
    color: var(--glds-muted);
    padding: 0 6px;
    font-weight: normal;
}

.client-blocks-v2 .client-header .bar .profile .welcome {
    color: var(--glds-ink);
    font-weight: bold;
    font-size: 18px;
}

.client-blocks-v2 .client-header .logo-link {
    color: var(--glds-primary);
    font-size: 28px;
    text-align: left;
    font-weight: bold;
    text-decoration: none;
}
.client-blocks-v2 .client-header .logo-link:focus,
.client-blocks-v2 .client-header .logo-link:hover {
    text-decoration: none;
    color: var(--glds-primary-dark);
}

@media (max-width: 950px) {
    .client-blocks-v2 .client-header .bar {
        flex-direction: column;
        text-align: center;
    }
    .client-blocks-v2 .client-header .bar .profile .user-links {
        display: inline-block;
    }
}

.client-blocks-v2 .navigation-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.client-blocks-v2 .navigation-bar .items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/*
 * Primary navigation.
 *
 * Two earlier attempts were both wrong. All-blue tabs made the selected one
 * invisible (only a shade apart, and hover used the selected shade). Recessing
 * the unselected ones onto a grey surface fixed selection but drained the bar of
 * prominence, so the main navigation of the plugin stopped looking like
 * navigation at all.
 *
 * This mirrors the site's own button pair - solid "Book a Demo" beside outlined
 * "Explore the Platform": outlined blue means available, filled blue means you
 * are here. Selection is a difference in KIND (filled vs outlined), which also
 * satisfies WCAG 1.4.1, while blue on every item keeps the bar unmistakably
 * interactive.
 *
 * The buttons are detached from the panel now, so they read as a navigation row
 * rather than as filing-cabinet tabs.
 */
.client-blocks-v2 .navigation-bar .items .item-link {
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--glds-primary);
    text-decoration: none;
    line-height: normal;
    border: 1px solid var(--glds-primary);
    border-radius: var(--glds-radius);
    margin-right: 0;
    transition: background-color var(--glds-transition), color var(--glds-transition), border-color var(--glds-transition);
}

.client-blocks-v2 .navigation-bar .items .item-link:hover {
    background-color: var(--glds-surface);
    border-color: var(--glds-primary-dark);
    color: var(--glds-primary-dark);
}

/*
 * Selected: filled, like the site's primary button.
 *
 * No `cursor: default` here, deliberately. The selected tab marks the SECTION you
 * are in, not a dead end - on a case detail screen "My Cases" is highlighted and
 * clicking it is the natural way back to the list. Making it look inert removed
 * the only obvious way up and left the bottom-of-page link as the sole route.
 */
.client-blocks-v2 .navigation-bar .items .item-link.active {
    background-color: var(--glds-primary);
    border-color: var(--glds-primary);
    color: #fff;
}

.client-blocks-v2 .navigation-bar .items .item-link.active:hover {
    background-color: var(--glds-primary-dark);
    border-color: var(--glds-primary-dark);
    color: #fff;
}

/* Focus ring: was 2px dotted grey, plus a border override that shifted the tab
   by 1px on focus. A solid accent ring with an offset stays visible against both
   the tab and the page, and does not move anything. --accent is 3.4:1 on white,
   which is the 3:1 minimum for a non-text UI indicator. */
.client-blocks-v2 .navigation-bar .items .item-link:focus,
.client-blocks-v2 .navigation-bar .items .item-link:focus-visible {
    outline: 2px solid var(--glds-accent);
    outline-offset: 2px;
}

/*
 * Text for screen readers only.
 *
 * Defined here because nothing else defines it: the plugin's CSS had no such
 * helper, and hello-elementor does not ship .screen-reader-text either - so
 * borrowing WordPress's usual class name would have rendered the text visibly on
 * the page. (It works in wp-admin only because core's admin CSS styles it.)
 *
 * The clip-rect recipe rather than display:none or visibility:hidden - both of
 * those remove the text from the accessibility tree as well, which is the exact
 * opposite of what this is for. white-space:nowrap stops a long string collapsing
 * to one character per line inside the 1px box.
 */
.client-blocks-v2 .glds-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * External-link arrow on Community and Wish List, which open Aha.io in a new tab,
 * and on the Roadmap tab's "Open the roadmap" button, which does the same.
 *
 * aria-hidden in the markup, so this is purely visual and the announcement comes
 * from the .glds-sr-only text instead - a pseudo-element or a bare glyph can be
 * read out as "north east arrow" by some screen readers, which is noise on top of
 * the words that already say it.
 *
 * font-weight 400 against the label's 600: the arrow is an annotation, not part of
 * the name, and at 600 it read as punctuation belonging to the word.
 *
 * Selector is on the class alone rather than nested under .navigation-bar, so the
 * arrow means the same thing wherever it appears instead of being styled once per
 * component - the mistake the focus rules made before they were unified.
 */
.client-blocks-v2 .glds-ext-icon {
    margin-left: 6px;
    font-size: 0.9em;
    font-weight: 400;
}

/*
 * The roadmap password (ticket 20258), which the visitor reads off this page and
 * types into Aha's prompt.
 *
 * Monospace is not decoration here: in the body face I/l and O/0 are close enough
 * to mistype, and a password that fails silently on a third-party site with no
 * "wrong password" context is a support call. The box and letter-spacing say
 * "this is a literal string, spaces and case included".
 */
.client-blocks-v2 .glds-roadmap-password {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.6rem;
    background: var(--glds-surface);
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    /* The one thing on the page meant to be selected with the mouse. */
    user-select: all;
}

.client-blocks-v2 .glds-roadmap-actions {
    /* .sp-btn is already inline-block at its natural width, so nothing to undo -
       .sp-btn-block is what would have stretched it edge to edge, and this screen
       has one action rather than a form submit. */
    margin: 1rem 0 0;
}

@media (max-width: 950px) {
    .client-blocks-v2 .navigation-bar {
        display: flex;
        flex-direction: column;
    }
    .client-blocks-v2 .navigation-bar .items {
        flex-direction: column;
    }
    .client-blocks-v2 .navigation-bar .items .item-link {
        display: block;
        width: 100%;
        text-align: center;
    }
    .client-blocks-v2 .navigation-bar .items {
        margin-bottom: 1rem;
    }
    .client-blocks-v2 .navigation-bar .glds-pagination {
        margin-bottom: 1rem;
    }
}

.client-blocks-v2 .navigation-bar .glds-pagination {
    align-self: center;
    justify-content: center!important;
    display: flex;
    flex-wrap: wrap;
    /* gap replaces margin-left on each item, so there is no stray leading gap */
    gap: 6px;
}

/*
 * Pagination.
 *
 * Square-ish equal-size targets rather than text-width boxes: 36px is also the
 * comfortable minimum for a tap target, and the numbers no longer jitter in width
 * between 1 and 10.
 */
.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--glds-primary);
    text-decoration: none;
    background-color: #FFF;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    transition: color var(--glds-transition), background-color var(--glds-transition), border-color var(--glds-transition);
    margin-left: 0;
    line-height: 1;
}

.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers:hover {
    background-color: var(--glds-surface);
    border-color: var(--glds-primary);
    color: var(--glds-primary-dark);
}

/*
 * Clicking a page used to leave a dotted rectangle behind: nothing here styled
 * :focus, so the browser's (and the theme's) default dotted outline showed, and
 * it persisted after the click because the link keeps focus.
 *
 * :focus-visible is the fix rather than `outline: none` - removing the indicator
 * outright would break keyboard navigation. Mouse clicks now show nothing,
 * keyboard focus shows a solid accent ring.
 */
.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers:focus {
    outline: none;
}

.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers:focus-visible {
    outline: 2px solid var(--glds-accent);
    outline-offset: 2px;
}

.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers.current {
    background-color: var(--glds-primary);
    border-color: var(--glds-primary);
    color: #FFF;
}

/* paginate_links() emits the gap as <span class="page-numbers dots">, which
   would otherwise render as an empty clickable box. */
.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers.dots,
.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers.dots:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--glds-primary-dark);
    cursor: default;
}

/* Prev/Next carry the words "Previous"/"Next", so they are far wider than the
   numbers - stop them breaking mid-word. */
.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers.prev,
.client-blocks-v2 .navigation-bar .glds-pagination .page-numbers.next {
    white-space: nowrap;
}

.client-blocks-v2 .min-80 {
    min-width: 80px;
}

.client-blocks-v2 .min-100 {
    min-width: 100px;
}

.client-blocks-v2 .min-120 {
    min-width: 120px;
}

.client-blocks-v2 .min-200 {
    min-width: 200px;
}

/*
 * The rounded surface lives on the WRAPPER, not on the table.
 *
 * A border-radius on <table> does not clip its cells: the header row's grey
 * background painted straight over the top corners and the rounding looked
 * broken. overflow on a table element is ignored too, so overflow:hidden there
 * did nothing. This div is where clipping works, and overflow-x:auto already
 * establishes it - the radius now actually rounds, and horizontal scrolling for
 * the wide case table still works.
 */
.client-blocks-v2 .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* No border or radius here: the .tab-pane above provides the rounded
       surface, and two nested frames were the original problem. */
    margin-bottom: 0;
}

.client-blocks-v2 .table {
    width: 100%;
    margin-bottom: 0;
    vertical-align: top;
    /* Site data panels use horizontal rules inside a bordered surface, not a
       full grid of boxed cells. The surface itself is the wrapper above. */
    border: 0;
    border-collapse: collapse;
}

/* Vertical rules removed - rows read better with horizontal separation only. */

.client-blocks-v2 .table th {
    background: var(--glds-surface);
}

.client-blocks-v2 .table th,
.client-blocks-v2 .table td {
    /* border: 0 first, then only the bottom rule. hello-elementor's reset.css
       sets `table td, table th { border: 1px solid rgba(128,128,128,.5) }` as a
       shorthand, so declaring border-bottom alone left its left and right edges
       in place and the full grid still showed. */
    border: 0;
    border-bottom: 1px solid var(--glds-border);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
}

.client-blocks-v2 .table tr:last-child td {
    border-bottom: 0;
}

.client-blocks-v2 .table tbody tr:hover td {
    background-color: var(--glds-surface);
}

.client-blocks-v2 .table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--glds-muted);
}

.client-blocks-v2 .table th a {
    color: var(--glds-ink);
    text-decoration: none;
    font-size: 14px;
    position: relative;
}

/* The "Details" links carry class js-tech-support-link, so the a:not([class])
   rule above does not reach them and they inherited the theme's #CC3366 pink.
   Scoped to table cells rather than to js-tech-support-link, because that class
   is also on the nav tabs, where the text must stay white on blue. */
.client-blocks-v2 .table td a {
    color: var(--glds-primary);
    text-decoration: none;
}

.client-blocks-v2 .table td a:hover,
.client-blocks-v2 .table th a:hover {
    color: var(--glds-primary-dark);
    text-decoration: underline;
}

.client-blocks-v2 .table th a.asc:before,
.client-blocks-v2 .table th a.desc:before {
    display: block;
    content: " ";
    position: absolute;
    z-index: 1;
    width: 16px;
    height: 16px;
    top: 2px;
    right: -20px;
    background-repeat: no-repeat;
    background-size: auto auto;
}
.client-blocks-v2 .table th a.asc:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjUuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZD0iTTIzMy40IDEwNS40YzEyLjUtMTIuNSAzMi44LTEyLjUgNDUuMyAwbDE5MiAxOTJjMTIuNSAxMi41IDEyLjUgMzIuOCAwIDQ1LjNzLTMyLjggMTIuNS00NS4zIDBMMjU2IDE3My4zIDg2LjYgMzQyLjZjLTEyLjUgMTIuNS0zMi44IDEyLjUtNDUuMyAwcy0xMi41LTMyLjggMC00NS4zbDE5Mi0xOTJ6Ii8+PC9zdmc+)
}
.client-blocks-v2 .table th a.desc:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjUuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHBhdGggZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+PC9zdmc+);
}

.client-blocks-v2 .table td:last-child {
    border-right: 1px solid var(--glds-border);
}

/*
 * The tab panel IS the surface.
 *
 * It used to be a 1px dark-navy square box with 1rem of padding, wrapping a
 * table that had its own border and radius - two nested frames, one square and
 * one rounded, which is what made the rounding look wrong. Now the panel is the
 * single rounded card and the table sits flush inside it.
 *
 * Top-left stays square so the first tab meets the panel edge; the tabs carry
 * the rounding on that corner.
 */
.client-blocks-v2 .tab-pane {
    /* Bottom only. The top stays flush so the case table still meets the rounded
       top corners and headings sit tight to the panel edge - they carry their own
       margin. The bottom padding is what stops "Back to My Cases" and the last
       form row being jammed against the border. */
    padding: 0 0 1rem;
    background: #fff;
    border: 1px solid var(--glds-border);
    /* All four corners: the navigation is a detached button row now, so nothing
       meets the top-left corner. */
    border-radius: var(--glds-radius);
    overflow: hidden;
    margin-top: 10px;
}

/*
 * Message containers are rendered on every screen whether or not there is a
 * message, and they carry 1rem margins top and bottom - so an empty one reserved
 * 32px of blank space on each page. Collapsing them when empty is also what makes
 * the pane padding above predictable, since an empty div still counts as a child
 * for layout purposes.
 */
.client-blocks-v2 .error_msg:empty,
.client-blocks-v2 .sucess_msg:empty,
.client-blocks-v2 #js-messages:empty,
.client-blocks-v2 #js-error-message:empty {
    display: none;
}

/*
 * Knowledge base iframe.
 *
 * It had no border reset, so browsers drew their default 2px inset frame - the
 * ugly border. display:block also removes the few stray pixels under an iframe,
 * which is inline by default and so sits on the text baseline.
 *
 * Height is viewport-relative rather than the old fixed height="900": the pane
 * clips to its own radius via overflow:hidden, so the frame ends up flush with
 * the rounded surface.
 */
/*
 * min-height, not height: TechSupport.listenForKbHeight() sets an inline height
 * from the message kb.glds.com posts, so the frame grows to its content and
 * stops scrolling inside itself. This floor is what a KB page shorter than the
 * viewport falls back to, and what an un-updated KB (no message) keeps.
 */
.client-blocks-v2 .glds-kb-frame {
    display: block;
    width: 100%;
    border: 0;
    min-height: 75vh;
    background: #fff;
}

/*
 * Knowledge base loading state.
 *
 * kb.glds.com validates the session id before it renders anything, so the frame
 * stays blank for as long as that takes. The overlay is markup-visible by
 * default and removed by the iframe's own onload - no JS file, and no risk of a
 * spinner that never appears because a script had not loaded yet.
 *
 * Opaque #fff, not the portal overlay's translucent wash: there is nothing
 * underneath worth showing through, and the frame itself paints white before it
 * has a document.
 *
 * No border-radius needed - .tab-pane above is overflow:hidden, so it clips this
 * to the panel's corners already.
 */
.client-blocks-v2 .glds-kb-pane {
    position: relative;
}

/*
 * The overlay only ever top-aligns its contents; .glds-kb-loading-inner owns how
 * the ring and caption sit relative to each other. Two elements rather than one
 * because a single flex box cannot do both jobs: switching the indicator to a row
 * on short screens flips which axis align-items governs, so an align-items:center
 * that meant "put the caption on the ring's centre line" silently turns into
 * "centre the whole thing vertically in a 444px pane" - which put the spinner
 * 688px down a 568px viewport, worse than the bug being fixed.
 *
 * Near the top of the pane, NOT centred in it. Centring is what you reach for
 * first and it is wrong here: the pane is min-height:75vh, and on a narrow screen
 * the portal header plus the wrapped five-item navigation take ~385px before the
 * pane even starts - so a centred spinner measured 699px down a 664px viewport.
 * It was below the fold, and the mobile visitor saw a blank white panel and had
 * to scroll to discover anything was happening: exactly what the spinner exists
 * to prevent.
 *
 * clamp()'s vh term shrinks the offset on the short screens where headroom below
 * the pane is scarce; the 72px ceiling stops it drifting into the middle of a
 * tall desktop pane.
 */
.client-blocks-v2 .glds-kb-loading {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: clamp(20px, 5vh, 72px);
    background: #fff;
}

.client-blocks-v2 .glds-kb-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
 * Short viewports: ring and caption side by side.
 *
 * Stacked they are ~70px tall, and on a 360x568 phone only ~93px of the pane sits
 * above the fold - enough for the ring but it cropped the caption. Tightening the
 * padding would have bought those 5px against a theme-header height that is only
 * an estimate, so that margin is imaginary. In a row the whole indicator is
 * ring-height, ~38px: it fits, and it keeps fitting if the header above it grows.
 */
@media (max-height: 640px) {
    .client-blocks-v2 .glds-kb-loading {
        padding-top: 20px;
    }

    .client-blocks-v2 .glds-kb-loading-inner {
        flex-direction: row;
        gap: 12px;
    }

    /* margin-top belongs to the stacked layout; in a row it just pushes the
       caption off the ring's centre line. gap above handles the spacing. */
    .client-blocks-v2 .glds-kb-loading-inner .js-loader-text {
        margin-top: 0;
    }
}

.client-blocks-v2 .glds-kb-pane.is-loaded .glds-kb-loading {
    display: none;
}

/*
 * Panes that hold prose rather than a full-bleed table still need padding.
 *
 * .glds-kb-loading is excluded for the same reason iframe is. Side margins on an
 * inset:0 absolute box do not get ignored - they shrink it - so the overlay would
 * have stopped 1rem short on each side and left two strips of unloaded iframe
 * showing down the edges. This selector outweighs the overlay's own rule (it
 * carries an extra type selector), so the exclusion has to happen here.
 */
.client-blocks-v2 .tab-pane > *:not(.table-responsive):not(iframe):not(.glds-kb-loading) {
    margin-left: 1rem;
    margin-right: 1rem;
}

/*
 * Detail-screen heading row: title left, upward navigation right, one baseline.
 *
 * A standalone back link stacked above the heading looked bolted on. Sharing the
 * heading's row uses space that was already empty and reads as part of the page
 * furniture. align-items: baseline rather than center so the link sits on the
 * heading's text baseline instead of floating against its cap height.
 */
.client-blocks-v2 .sp-pane-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    /* Takes over the heading's own bottom margin, which is zeroed below - otherwise
       the row would sit flush against the content beneath it. */
    margin-bottom: 15px;
}

.client-blocks-v2 .sp-pane-head .tab-pane-title {
    margin-bottom: 0;
}

.client-blocks-v2 .sp-back-link {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--glds-primary);
    text-decoration: none;
}

.client-blocks-v2 .sp-back-link:hover {
    color: var(--glds-primary-dark);
    text-decoration: underline;
}

@media (max-width: 600px) {
    /* Stack rather than squeeze: at this width the two would collide. */
    .client-blocks-v2 .sp-pane-head {
        justify-content: flex-start;
    }
}

.client-blocks-v2 .tab-pane-title {
    font-weight: 700;
    font-size: 20px;
    color: var(--glds-ink);
    line-height: 1.25;
    border-bottom: 0;
    margin-bottom: 15px;
}

.client-blocks-v2 .sucess_msg {
    color: #0f5132;
    background-color: #d1e7dd;
    margin-top: 1rem;
    border-radius: var(--glds-radius);
    position: relative;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #badbcc;
    border-left: 4px solid #0f5132;
    font-size: 1rem;
}
.client-blocks-v2 .error_msg {
    color: #842029;
    background-color: #f8d7da;
    border-left: 4px solid #842029;
    margin-top: 1rem;
    border-radius: 0.25rem;
    position: relative;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #f5c2c7;
    font-size: 1rem;
}



/*
 * Removed two blanket link rules that were fighting everything else:
 *
 *   a { transition: none !important }
 *       killed the hover transitions declared on the tabs, buttons and pagination
 *       - they are all <a> - so state changes snapped instead of easing.
 *
 *   a:focus { border: inherit !important; outline: 2px dotted rgba(89,89,89,.7) }
 *       re-added a dotted focus ring to EVERY link, and being later in the file it
 *       overrode the single focus treatment near the top. This is what kept
 *       reappearing after each component-level fix. The `border: inherit` also
 *       reset button borders on focus, so outlined tabs lost their edge.
 *
 * Focus is handled once, at the top of this file.
 */

.client-blocks-v2 .js-loader-overlay {
    display: none;
    position: absolute;
    /*
     * Negative inset, not 0.
     *
     * Focus rings are painted OUTSIDE their element (2px wide at a 2px offset), and
     * the first navigation button sits flush with the portal's left edge - so a ring
     * reaches 4px beyond the container. An overlay at inset:0 stopped exactly at the
     * container edge and left that sliver of ring showing through while loading.
     *
     * -4px matches the ring's reach on every side. Also replaces the original
     * top/left + 100% width/height, which could overshoot a padded container.
     */
    inset: -4px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* +4px to stay concentric with the panel now that the overlay is inset -4px. */
    border-radius: calc(var(--glds-radius) + 4px);
    /* Was 1000. The site header sits above the page content, so a high z-index
       here used to punch through it; the overlay is scoped to the portal now, but
       keeping this modest avoids fighting the theme's own layers. */
    z-index: 5;
}

/*
 * Spinner: was a 50px ring with an 8px band in dark navy on near-white - heavy,
 * and the wrong colour for the brand. A thin brand-blue arc on a light track is
 * the current convention and reads as motion rather than as a thick donut.
 */
.client-blocks-v2 .js-loader {
    border: 3px solid var(--glds-border);
    border-top-color: var(--glds-primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    animation: spin 0.8s linear infinite;
}

.client-blocks-v2 .js-loader-text {
    font-size: 14px;
    color: var(--glds-muted);
    margin-top: 12px;
    font-weight: 600;
}

/*
 * Respect a reduced-motion preference: a continuous spin is exactly the kind of
 * animation that triggers discomfort for some people. The indicator stays - it
 * just pulses gently instead of rotating, so "something is happening" is still
 * conveyed without constant motion.
 */
@media (prefers-reduced-motion: reduce) {
    .client-blocks-v2 .js-loader {
        animation: glds-loader-pulse 1.6s ease-in-out infinite;
        border-top-color: var(--glds-primary);
    }
}

@keyframes glds-loader-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.client-blocks-v2 .js-loader-overlay.show {
    display: flex;
    justify-content: center!important;
    align-items: center!important;
    flex-direction: column!important;
}

.client-blocks-v2 .sp-container {

}

.client-blocks-v2 .sp-row {
    display: flex;
}

.client-blocks-v2 .sp-center-box .sp-row {
    justify-content: center!important;
    margin: 1rem;
}

.client-blocks-v2 .sp-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /* Site cards are a hairline border plus a wide, very soft shadow - the
       rgba(0,0,0,.125) border and tight 0.25rem shadow read as a 2010 panel. */
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius-card);
    margin-bottom: 1rem;
    max-width: 650px;
    width: 100%;
    box-shadow: var(--glds-shadow);
}

.client-blocks-v2 .sp-card-body {
    padding: 1.75rem;
}

.client-blocks-v2 .sp-card-text {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.client-blocks-v2 .sp-card-title {
    /* Site headings are near-black and heavy; a blue heading plus an underline
       rule made the card look like a dialog rather than a page section. */
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--glds-ink);
    font-weight: 700;
    line-height: 1.25;
    padding-bottom: 0;
    border-bottom: 0;
}

.client-blocks-v2 {
    color: var(--glds-ink);
}

.client-blocks-v2 .sp-form-group {
    /* Must stay clearly larger than the 6px label gap inside the group, or the
       label/field pairing stops reading. */
    margin-bottom: 1.25rem;
}
.client-blocks-v2 .sp-form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--glds-ink);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    transition: border-color var(--glds-transition);
}

/* The border colour shifts on focus; the ring itself comes from the single
   focus-visible rule at the top of the file. The old box-shadow glow is gone -
   with the shared outline it produced two stacked rings on keyboard focus. */
.client-blocks-v2 .sp-form-control:focus {
    color: var(--glds-ink);
    background-color: #fff;
    border-color: var(--glds-accent);
}

.client-blocks-v2 .sp-form-control-file {
    display: block;
    width: 100%;
}

/*
 * Label spacing.
 *
 * The label sat 2px above its field (margin-bottom: 0, line-height clamped to
 * 16px) while form groups were 16px apart - so a label was nearly as close to the
 * field above it as to its own, and the pairing was ambiguous. Proximity has to be
 * unmistakable: 6px inside a group against 20px between them.
 *
 * display:block so the label owns its own line rather than sharing the baseline
 * with the required-field asterisk.
 */
.client-blocks-v2 .sp-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
}

.client-blocks-v2 .example-required::after,
.client-blocks-v2 .sp-form-group label.required::after {
    content: " * ";
    color: #dc3545;
    font-style: normal;
}

.client-blocks-v2 .legends {
    margin-bottom: 1rem;
    font-size: 80%;
    font-style: italic;
}


.client-blocks-v2 .sp-form-text{
    display: block;
    margin-top: 0.25rem;
}
.client-blocks-v2 .sp-small {
    font-size: 80%;
}
.client-blocks-v2 .sp-text-muted {
    color: var(--glds-muted)!important;
}
.client-blocks-v2 .sp-link {
    color: var(--glds-primary);
    text-decoration: none;
    background-color: transparent;
}
.client-blocks-v2 .sp-link:hover {
    color: var(--glds-ink);
    text-decoration: underline;
}

.client-blocks-v2 .sp-btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.client-blocks-v2 .sp-btn-block + .sp-btn-block{
    margin-top: 1rem;
}

/*
 * Buttons.
 *
 * .sp-btn and .sp-btn-primary were never styled by this plugin - only the
 * -outline- variant was - so the Login button fell through to the theme and
 * rendered as pink text on a transparent background (#CC3366), which matched
 * nothing on the site. Both variants are defined here now, sharing one geometry,
 * and mirror the site's own pair: solid blue primary, white outlined secondary.
 */
/*
 * Plain links the plugin does not class - the "email" mailto in the login
 * footer, for one - inherited the theme's #CC3366 pink, the same colour that was
 * hitting the unstyled buttons.
 *
 * :not([class]) is deliberate: it touches only anchors the plugin left unclassed,
 * so it cannot fight .sp-btn, .sp-link, .item-link or .page-numbers.
 */
.client-blocks-v2 a:not([class]) {
    color: var(--glds-primary);
}

.client-blocks-v2 a:not([class]):hover {
    color: var(--glds-primary-dark);
}

.client-blocks-v2 .sp-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--glds-radius);
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--glds-transition), border-color var(--glds-transition), color var(--glds-transition);
}

.client-blocks-v2 .sp-btn:focus-visible {
    outline: 2px solid var(--glds-accent);
    outline-offset: 2px;
}

.client-blocks-v2 .sp-btn-primary {
    background: var(--glds-primary);
    border-color: var(--glds-primary);
    color: #FFF;
}

.client-blocks-v2 .sp-btn-primary:hover,
.client-blocks-v2 .sp-btn-primary:focus {
    background: var(--glds-primary-dark);
    border-color: var(--glds-primary-dark);
    color: #FFF;
}

.client-blocks-v2 .sp-btn-outline-primary {
    background: #ffffff;
    color: var(--glds-primary);
    border: 1px solid var(--glds-primary);
    padding: 10px 22px;
    cursor: pointer;
    border-radius: var(--glds-radius);
}

.client-blocks-v2 .sp-btn-outline-primary:hover {
    background: var(--glds-primary);
    color: #FFF;
}

.client-blocks-v2 .sp-link-black {
    display: block;
    text-align: center;
    width: 100%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.client-blocks-v2 .sp-field .name {
    font-weight: 600;
}

/* The Modal (background) */
.client-blocks-v2 .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 2147483647;
}

/* Modal Content/Box */
.client-blocks-v2  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid var(--glds-muted);
    position: relative;
    width: 95%;
    max-width: 800px;
}

.sp-error-icon {
    width: 70px;
    margin: 0 auto;
    fill: rgba(195, 0, 18, 0.67);
}

.client-blocks-v2 .modal .error_msg {
    background-color: #FFF;
    border: 0;
    text-align: center;
    padding: 0;
}

/* The Close Button */
.client-blocks-v2 .close {
    color: var(--glds-muted);
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px 5px 10px;
}

.client-blocks-v2 .close:hover,
.client-blocks-v2 .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}