/* ============================================================================
   NolaPro Support — "Direction 4 Final" customer theme (Header B, Layered Navy)
   Loaded from head.txt AFTER app(.min).css on every customer template.
   Design source: Claude Design handoff bundle, v4.jsx / v4-final.jsx / v4-tickets.jsx
   ========================================================================== */

/* ---- Self-hosted Nunito Sans (variable, 200-1000) ---- */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/nunito-sans-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 1000;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/nunito-sans-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design tokens ---- */
:root {
    --np-bg: #F5F8FB;
    --np-text: #27384A;
    --np-heading: #143A58;
    --np-navy: #175684;
    --np-navy-dark: #0E3A5C;
    --np-orange: #EE8A1F;
    --np-orange-text: #D97A12;
    --np-muted: #647A8E;
    --np-muted-2: #7E93A5;
    --np-border: #E5ECF3;
    --np-border-2: #DCE6EF;
    --np-divider: #EDF2F7;
    --np-card-shadow: 0 3px 10px rgba(23, 86, 132, .08);
    --np-cta-shadow: 0 4px 12px rgba(238, 138, 31, .3);
    --np-link: #15679F;
}

/* ============================================================ Base */
body.cust-help {
    font-family: 'Nunito Sans', Arial, sans-serif;
    background: var(--np-bg);
    color: var(--np-text);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* full-bleed band uses 50vw margins; clip (not hidden) keeps position:sticky working */
    /* app.css gives body height:100vh (flex column) — that caps the sticky range of .np-hd
       at one viewport and lets the header flex-shrink; grow with content instead */
    height: auto;
    min-height: 100vh;
}
body.cust-help .wrapper { color: var(--np-text); }
body.cust-help a { color: var(--np-link); }
body.cust-help .main { background: var(--np-bg); }
/* app.css assigns Lato to elements directly, so inheritance never kicks in */
body.cust-help, body.cust-help * { font-family: 'Nunito Sans', Arial, sans-serif; }
body.cust-help pre, body.cust-help code, body.cust-help kbd, body.cust-help samp, body.cust-help tt,
body.cust-help pre *, body.cust-help code * { font-family: 'Courier New', Courier, monospace; }

/* ============================================================ New navy header (header.txt) */
.np-hd {
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0; /* body is a flex column */
    width: 100%;
    box-sizing: border-box;
    background: var(--np-navy-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
    height: 78px;
}
.np-hd .np-hd__logo { display: flex; align-items: center; }
.np-hd .np-hd__logo img { height: 38px; display: block; }
.np-hd nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 16px;
    font-weight: 700;
}
.np-hd nav a {
    color: #B9D3E6;
    white-space: nowrap;
    text-decoration: none;
    transition: color 100ms ease;
}
.np-hd nav a:hover { color: #fff; }
.np-hd nav a.np-cta {
    color: #fff;
    background: var(--np-orange);
    padding: 11px 24px;
    border-radius: 999px;
    box-shadow: var(--np-cta-shadow);
}
.np-hd nav a.np-cta:hover { background: #F79A35; color: #fff; }

/* Hide the old white in-template header (logo text only; lang selector disabled) */
body.cust-help .main > .header { display: none; }

/* ============================================================ Breadcrumbs -> design .crumb */
body.cust-help .breadcrumbs {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 12px 0;   /* symmetric so the trail centers vertically in the strip */
}
/* home page: "Home > NolaPro Support" alone says nothing — hide it (.search__title only exists on home) */
body.cust-help .main:has(.search__title) .breadcrumbs { display: none; }
body.cust-help .breadcrumbs .breadcrumbs__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 12px;
    font-size: 14.5px;
    color: var(--np-muted-2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
body.cust-help .breadcrumbs a { color: var(--np-link); }
body.cust-help .breadcrumbs .last { color: var(--np-muted-2); }
body.cust-help .breadcrumbs .icon-chevron-right { fill: #B9CBDA; color: #B9CBDA; }

/* ============================================================ Buttons */
body.cust-help .btn.btn-full {
    background: var(--np-orange);
    color: #fff;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    box-shadow: var(--np-cta-shadow);
}
body.cust-help .btn.btn-full:hover { background: #F79A35; }
body.cust-help .btn.btn--blue-border {
    border: 1.5px solid var(--np-navy);
    color: var(--np-navy);
    background: transparent;
    font-weight: 800;
    border-radius: 999px;
}
body.cust-help .btn.btn--blue-border:hover { background: #E9F1F8; }

/* ============================================================ Hero band (.help-search) */
body.cust-help .help-search {
    background: var(--np-navy);
    color: #fff;
    text-align: center;
    margin: 0 calc(50% - 50vw);
    padding: 26px 48px 36px;  /* slim variant (article/category/search pages) */
}
body.cust-help .help-search:has(.search__title) {
    padding: 54px 48px 66px;  /* home variant */
}
body.cust-help .help-search .search__title {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
body.cust-help .help-search .search__title em {
    font-style: normal;
    color: #FFB75E;
}
body.cust-help .help-search .band-sub {
    color: #AECDE4;
    font-size: 18px;
    margin: 0 0 30px;
}

/* Search pill */
body.cust-help .help-search .search__form {
    background: transparent;
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    padding: 0;
}
body.cust-help .help-search .search__form .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: none;
    border-radius: 999px;
    height: 64px;
    padding: 0 10px 0 24px;
    box-shadow: 0 18px 40px rgba(8, 42, 68, .32);
    margin: 0;
    max-width: none;
    width: auto;
}
body.cust-help .help-search .btn.search__submit {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    min-width: 0;
    height: auto;
    position: static;   /* app.css absolutely positions it at the pill's top */
    align-self: center;
    color: #8298A8;
    display: flex;
    align-items: center;
}
body.cust-help .help-search .btn.search__submit svg { display: block; }
body.cust-help .help-search .search__submit .icon { fill: #8298A8; color: #8298A8; width: 21px; height: 21px; }
body.cust-help .help-search #kb_search {
    flex: 1 1 auto;
    width: auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 17.5px;
    font-family: inherit;
    color: var(--np-text);
    height: 100%;
    padding: 0;
}
body.cust-help .help-search #kb_search::placeholder { color: #8298A8; }
body.cust-help .help-search #search-button {
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto;
    background: var(--np-orange);
    color: #fff;
    font-weight: 800;
    font-size: 15.5px;
    border-radius: 999px;
    padding: 11px 26px;
    border: none;
    box-shadow: none;
}
body.cust-help .help-search #search-button:hover { background: #F79A35; }

/* Live-suggestions dropdown as a white card */
body.cust-help .help-search .kb-suggestions {
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(8, 42, 68, .28);
    color: var(--np-text);
    text-align: left;
    z-index: 300;
    margin-top: 10px;
}
body.cust-help .kb-suggestions h6 { color: var(--np-muted-2); }
body.cust-help .kb-suggestions .suggest-preview__title { color: var(--np-heading); font-weight: 700; }

/* ============================================================ Action cards (.nav .navlink) */
body.cust-help .main__content .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 820px;
    margin: 36px auto 0;
}
body.cust-help .main__content .nav .navlink {
    background: #fff;
    border: none;
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--np-card-shadow);
    margin: 0;
    width: auto;
    max-width: none;
    transition: box-shadow 120ms ease, transform 120ms ease;
}
body.cust-help .main__content .nav .navlink:hover {
    box-shadow: 0 8px 20px rgba(23, 86, 132, .14);
    border: none;
}
body.cust-help .main__content .nav .navlink .icon-in-circle {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #E1EEF7;
    color: var(--np-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
    margin: 0;
}
body.cust-help .main__content .nav .navlink .icon-in-circle .icon {
    fill: var(--np-navy);
    color: var(--np-navy);
    width: 25px;
    height: 25px;
}
/* Home page: first card (Submit a ticket) gets the orange chip */
body.cust-help .main__content .nav:not(.all_support_container) > .navlink:first-child .icon-in-circle {
    background: #FCEEDC;
    color: var(--np-orange-text);
}
body.cust-help .main__content .nav:not(.all_support_container) > .navlink:first-child .icon-in-circle .icon {
    fill: var(--np-orange-text);
    color: var(--np-orange-text);
}
body.cust-help .navlink__title {
    margin: 0 0 2px;
    font-size: 18.5px;
    font-weight: 800;
    color: var(--np-heading);
}
body.cust-help .navlink__descr {
    margin: 0;
    font-size: 15px;
    color: var(--np-muted);
}

/* ============================================================ Top articles (home) */
body.cust-help .main__content > .contr > .article {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 880px;
    margin: 56px auto 0;
}
body.cust-help .article .article__heading {
    font-size: 24px;
    font-weight: 800;
    color: var(--np-heading);
    margin: 0 0 4px;
    text-align: left;
}
body.cust-help .article .article__heading a {
    color: var(--np-heading);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
body.cust-help .article .article__heading .icon-in-circle { display: none; }
/* orange deco bar under the heading */
body.cust-help .article .article__heading::after {
    content: '';
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--np-orange);
    margin: 10px 0 6px;
}

/* Popular / Latest tabs as quiet pills */
body.cust-help .tabbed__head { border: none; margin: 8px 0 18px; }
body.cust-help .tabbed__head_tabs {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}
body.cust-help .tabbed__head_tabs li {
    background: #fff;
    border: 1px solid var(--np-border-2);
    color: #44586C;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    margin: 0;
}
body.cust-help .tabbed__head_tabs li::after, body.cust-help .tabbed__head_tabs li::before { display: none; }
body.cust-help .tabbed__head_tabs li.current {
    background: var(--np-navy);
    border-color: var(--np-navy);
    color: #fff;
}

/* Article preview rows -> .trow cards */
body.cust-help .preview {
    background: #fff;
    border: none;
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    gap: 18px;
    box-shadow: var(--np-card-shadow);
    margin: 0 0 16px;
    color: var(--np-text);
    transition: box-shadow 120ms ease;
}
body.cust-help .preview:hover {
    box-shadow: 0 8px 20px rgba(23, 86, 132, .14);
}
body.cust-help .preview .icon-in-circle {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #E1EEF7;
    color: var(--np-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
}
body.cust-help .preview .icon-in-circle .icon { fill: var(--np-navy); color: var(--np-navy); width: 22px; height: 22px; }
body.cust-help .preview__text { flex: 1; min-width: 0; }
body.cust-help .preview__title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    color: var(--np-heading);
}
/* category line under the title */
body.cust-help .preview__text > p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--np-orange-text);
    text-transform: uppercase;
    letter-spacing: .05em;
}
body.cust-help .preview__text > p .lightgrey { color: var(--np-orange-text); }
body.cust-help .preview__text > p.navlink__descr {
    margin: 8px 0 0;
    font-size: 15.5px;
    font-weight: 400;
    color: var(--np-muted);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.55;
}
body.cust-help .preview .rate { color: var(--np-muted-2); }
body.cust-help .article__footer { text-align: center; margin-top: 8px; }

/* ============================================================ Article page */
body.cust-help .ticket.ticket--article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
    max-width: 1180px;
    margin: 18px auto 0;
}
/* The old fixed-position heading hack is gone; this duplicate heading isn't in the design */
body.cust-help .ticket--article > .article__heading { display: none; }
body.cust-help .ticket--article .ticket__body { min-width: 0; }
body.cust-help .ticket--article .ticket__body_block.naked {
    background: #fff;
    border: none;
    border-radius: 14px;
    padding: 46px 50px;
    box-shadow: var(--np-card-shadow);
    min-width: 0 !important;
}
body.cust-help .ticket--article .ticket__body_block.naked > h1 {
    font-size: 34px;
    font-weight: 800;
    color: var(--np-heading);
    margin: 0 0 22px;
    letter-spacing: -.01em;
    text-align: left;   /* the article block justifies text; a justified headline reads broken */
}
/* NOTE: .block--description (article content) is intentionally untouched */
/* ticket.php conversation: messages read left-aligned, not justified
   (app.css sets .ticket__body_block { text-align: justify }; KB articles use .naked and keep theirs) */
body.cust-help .ticket__body_block:not(.naked) { text-align: left; }
body.cust-help .ticket__block-footer {
    color: var(--np-muted);
    border-top: 1px solid var(--np-divider);
    margin-top: 26px;
    padding-top: 16px;
}

/* Sidebar cards (article details / related articles / view-ticket params) */
body.cust-help .ticket__params { min-width: 0; }
body.cust-help .params--block {
    background: #fff;
    border: none;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: var(--np-card-shadow);
    margin: 0 0 20px;
}
body.cust-help .params--block .accordion-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--np-muted-2);
    border: none;
    background: transparent;
    padding: 0;
}
body.cust-help .params--block .accordion-body { padding: 0; }
body.cust-help .params--block .row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 15.5px;
    padding: 9px 0;
    margin: 0;
    border-bottom: 1px solid var(--np-divider);
}
body.cust-help .params--block .row:last-of-type { border-bottom: none; }
body.cust-help .params--block .row .title { color: var(--np-muted); flex: 0 0 auto; }
body.cust-help .params--block .row .value {
    text-align: right;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}
body.cust-help .params--block .list { margin: 0; padding: 0; list-style: none; }
body.cust-help .params--block .list li::before,
body.cust-help .params--block .list li::marker { display: none; content: none; }
body.cust-help .params--block .list li {
    border-bottom: 1px solid var(--np-divider);
    padding: 0;
    margin: 0;
}
body.cust-help .params--block .list li:last-child { border-bottom: none; }
body.cust-help .params--block .list li a {
    display: block;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 600;
}
/* go-back link, orange accent */
body.cust-help .params--block a.link {
    color: var(--np-link);
}
body.cust-help .params--block .accordion-body > div[style*="text-align"] a.link {
    color: var(--np-orange-text);
    font-weight: 800;
    font-size: 15.5px;
}
body.cust-help .params--block .icon-back { fill: var(--np-orange-text); color: var(--np-orange-text); }

/* ============================================================ Category picker page */
body.cust-help .select__title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--np-heading);
    margin: 30px 0 0;
    letter-spacing: -.01em;
}
body.cust-help .select__title::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--np-orange);
    margin: 16px auto 0;
}
/* hide the "New Support Ticket" icon heading – the hero title covers it */
body.cust-help .main__content:has(.select__title) .article__heading { display: none; }

/* create-ticket page: restyle the heading as the design's tk-hero (no icon, orange deco) */
body.cust-help .main__content:has(.form-submit-ticket) .article__heading {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    margin: 30px 0 0;
    letter-spacing: -.01em;
}
body.cust-help .main__content:has(.form-submit-ticket) .article__heading a {
    color: var(--np-heading);
    display: inline-block !important;   /* template carries inline height/line-height from the old header hack */
    height: auto !important;
    line-height: 1.25 !important;
    pointer-events: none;
}
body.cust-help .main__content:has(.form-submit-ticket) .article__heading .icon-in-circle { display: none; }
body.cust-help .main__content:has(.form-submit-ticket) .article__heading span {
    position: static !important;
    top: 0 !important;
}
body.cust-help .main__content:has(.form-submit-ticket) .article__heading::after {
    content: '';
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--np-orange);
    margin: 16px auto 0;
}

/* Name / Email row above the categories */
body.cust-help .form-groups {
    max-width: 880px;
    margin: 18px auto 0;
}
body.cust-help .form-groups .form-group {
    background: transparent;
    padding: 0 16px;
    margin: 16px;
}
/* span/label only — .dropdown-select has an internal div.label that must keep app.css styling */
body.cust-help label.label, body.cust-help span.label {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--np-heading);
    margin: 0 0 8px;
}
body.cust-help .label.required::after, body.cust-help label.required::after {
    color: #C24A3D;
    /* app.css pins the star absolutely to the right edge; keep it next to the label text */
    position: static !important;
    display: inline !important;
    margin-left: 4px;
}
body.cust-help .form-control {
    border: 1px solid #C9D8E5;
    border-radius: 10px;
    background: #fff;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 16px;
    color: var(--np-text);
    box-shadow: none;
}
body.cust-help .form-control::placeholder { color: #8FA9BE; }
body.cust-help .form-control:focus {
    outline: 2px solid var(--np-navy);
    outline-offset: -1px;
    border-color: var(--np-navy);
}

/* Category cards: navy circle chevron */
body.cust-help .nav.all_support_container {
    max-width: 880px;
    margin: 24px auto 0;
    padding-bottom: 40px;
}
body.cust-help .nav.all_support_container > .navlink .icon-in-circle {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--np-navy);
    color: #fff;
}
body.cust-help .nav.all_support_container > .navlink .icon-in-circle .icon {
    fill: #fff;
    color: #fff;
    width: 20px;
    height: 20px;
}
body.cust-help .nav.all_support_container > .navlink .navlink__title { margin: 0; }
body.cust-help div.nav > .navlink:hover { border: none; }
body.cust-help div.unpaid_support_container .catLinkPaidSupportRequired .icon-in-circle {
    background-color: #9FB8CC !important;
}

/* ============================================================ Create-ticket form */
body.cust-help #form1.form-submit-ticket {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--np-card-shadow);
    max-width: 920px;
    margin: 26px auto 70px;
    padding: 44px 56px 48px;
}
body.cust-help #form1.form-submit-ticket > *,
body.cust-help #form1.form-submit-ticket .form-group {
    max-width: none !important;
}
body.cust-help .article-heading-tip {
    text-align: center;
    color: var(--np-muted);
    font-size: 15.5px;
    margin-top: 14px;
}
body.cust-help .form-submit-ticket .divider { background: transparent; border: none; height: 10px; }
body.cust-help .form-submit-ticket .param .label,
body.cust-help .form-submit-ticket .form-group .label { font-size: 15px; font-weight: 800; color: var(--np-heading); }
body.cust-help .form-submit-ticket .dropdown-select {
    border: 1px solid #C9D8E5;
    border-radius: 10px;
    background: #fff;
}
body.cust-help .form-submit-ticket .dropdown-select .label {
    font-weight: 700;
    color: var(--np-text);
    padding: 10px 16px;   /* design .tk-prio chip; stock chip hugs the priority icon against the border */
}
/* attachments: the dashed box is the inner dropzone, not the whole section */
body.cust-help .param--attach .attach {
    border: none;
    background: transparent;
    padding: 0;
}
body.cust-help .param--attach .attach .dropzone {
    border: 1.5px dashed #B9CBDA;
    border-radius: 10px;
    background: #F9FBFD;
    color: var(--np-muted);
    font-weight: 600;
    padding: 26px;
    text-align: center;
}
body.cust-help .param--attach .attach .btn.fileinput-button {
    display: inline-flex;
    width: auto;
    align-items: center;
    background: #fff;
    border: 1px solid #C9D8E5;
    color: var(--np-navy);
    font-weight: 800;
    border-radius: 10px;
    padding: 10px 22px;
    margin-top: 12px;
    box-shadow: none;
}
body.cust-help .param--attach .attach .btn.fileinput-button:hover { background: #E9F1F8; }
body.cust-help .param--attach .attach-tooltype {
    display: inline-block;
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 700;
}
body.cust-help .form-submit-ticket .captcha-block {
    background: var(--np-bg);
    border: 1px solid var(--np-border);
    border-radius: 12px;
    padding: 18px 22px;
}
body.cust-help .form-submit-ticket .captcha-block img#secimg,
body.cust-help .form-submit-ticket img[name="secimg"] {
    border-radius: 8px;
    border: none;
}
body.cust-help .form-footer .btn.btn-full {
    width: auto !important;
    display: inline-block;
    padding: 15px 64px;
    font-size: 17px;
    box-shadow: 0 6px 16px rgba(238, 138, 31, .35);
}
body.cust-help .form-footer { text-align: center; }
/* view-existing-ticket login: center the fields inside the card */
body.cust-help .form-submit-ticket .form-groups.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.cust-help .form-submit-ticket .form-groups.centered .form-group {
    width: 100%;
    max-width: 480px;
}

/* Alerts on forms (before-submit notices) */
body.cust-help .alert {
    background: #E9F1F8;
    border: 1px solid #CCDFEE;
    color: #27506F;
    border-radius: 12px;
}
/* hesk_show_notice banners */
body.cust-help .main__content.notice-flash { background: transparent; border: none; }
body.cust-help .notification {
    background: #E9F1F8;
    border: 1px solid #CCDFEE;
    border-radius: 12px;
    box-shadow: none;
    color: #27506F;
}
body.cust-help .notification::before, body.cust-help .notification::after { display: none; }
body.cust-help .notification.orange { background: #FDF6EC; border-color: #F0D9A8; color: #9A6A1B; }
body.cust-help .notification.green { background: #EAF5EF; border-color: #D8EAE0; color: #1F7A4D; }
body.cust-help .notification.red { background: #FCEFED; border-color: #EFC5C0; color: #A8453B; }

/* ============================================================ View-ticket (customer) */
/* duplicate icon heading inside the first thread card (was absorbed by the old fixed-header hack) */
body.cust-help .ticket:not(.ticket--article) .article__heading { display: none; }
body.cust-help .ticket:not(.ticket--article) .ticket__body_block {
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: var(--np-card-shadow);
    padding: 26px 30px;
    margin-bottom: 18px;
}
/* original message (no .response) = orange edge; staff replies = green tint */
body.cust-help .ticket:not(.ticket--article) .ticket__body_block:not(.response) {
    border-left: 4px solid var(--np-orange);
}
body.cust-help .ticket:not(.ticket--article) .ticket__body_block.response {
    border-left: none;
    background: #F4F9F6;
    box-shadow: inset 0 0 0 1px #D8EAE0, 0 3px 10px rgba(23, 86, 132, .06);
}

/* ============================================================ Misc */
body.cust-help .divider { background: transparent; }
body.cust-help .footer > p.text-center a,
body.cust-help .footer > p.text-center {
    color: rgba(0, 0, 0, 0.16);
    outline: none !important;
    border: none !important;
    user-select: none !important;
    pointer-events: none;
}

/* ============================================================ Responsive */
@media (max-width: 900px) {
    body.cust-help .ticket.ticket--article { grid-template-columns: 1fr; }
    body.cust-help .help-search .search__title { font-size: 30px; }
    body.cust-help .ticket--article .ticket__body_block.naked { padding: 28px 24px; }
}
@media (max-width: 760px) {
    body.cust-help .main__content .nav { grid-template-columns: 1fr; }
    .np-hd { padding: 0 18px; }
    .np-hd nav { gap: 18px; }
}
@media (max-width: 640px) {
    .np-hd { height: 64px; }
    .np-hd .np-hd__logo img { height: 30px; }
    .np-hd nav { gap: 12px; font-size: 14px; }
    .np-hd nav a.np-cta { padding: 9px 16px; }
    body.cust-help .help-search { padding-left: 20px; padding-right: 20px; }
    body.cust-help .help-search .search__form .form-group { height: 54px; padding-left: 18px; }
    body.cust-help #form1.form-submit-ticket { padding: 26px 20px; }
}