/* ==========================================================================
   Courier Portal — customer site theme
   The admin's design system (courierportal.thinkappy.com), applied on top of
   the five Metronic 7 layouts customers can be given. Everything shared lives
   in the first half; each layout then keeps its own arrangement in a section
   scoped to its body class (.cp-l1, .cp-l2, .cp-l6, .cp-l9, .cp-l12).

   Loaded after each layout's style.bundle.css. Metronic ships most rules at
   two or three classes deep, so selectors here are prefixed with .cp-theme to
   win on specificity rather than on !important; !important is kept for the
   places where Metronic or general.js already use it.
   ========================================================================== */

:root {
    /* Ink */
    --cp-ink: #12193a;
    --cp-ink-90: #1b2450;
    --cp-ink-60: #4c5578;
    --cp-ink-45: #6b7490;

    /* The dark band behind the page title (layout 2's hero, layout 12's
       title bar). Separate from --cp-ink, which is also the text colour. */
    --cp-subheader: #5f6169;

    /* Accent */
    --cp-yellow: #fbe202;
    --cp-yellow-deep: #e8d100;
    --cp-yellow-soft: #fffce2;
    --cp-yellow-ink: #7a6300;

    /* Surface */
    --cp-paper: #ffffff;
    --cp-mist: #f5f7fb;
    --cp-rail: #f7f9fd;
    --cp-sky: #eaeeff;
    --cp-blue: #3a4fd6;
    --cp-green-soft: #e8f6ef;
    --cp-green: #12805c;
    --cp-red-soft: #fdecec;
    --cp-red: #c0392b;
    --cp-line: #e5e9f2;
    --cp-line-strong: #d4dae8;

    /* Type */
    --cp-display: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --cp-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Depth */
    --cp-shadow-sm: 0 1px 2px rgba(18, 25, 58, .06), 0 4px 12px rgba(18, 25, 58, .05);
    --cp-shadow-md: 0 2px 4px rgba(18, 25, 58, .05), 0 12px 32px rgba(18, 25, 58, .09);
    --cp-shadow-lg: 0 4px 8px rgba(18, 25, 58, .05), 0 32px 72px rgba(18, 25, 58, .16);

    /* Radius */
    --cp-r-card: 16px;
    --cp-r-field: 10px;
    --cp-r-pill: 999px;

    /* Themeable — set per company by views/layout/cp-theme.ejs. --cp-on-brand
       is white or ink, whichever reads on the company's colour. */
    --cp-brand: #12193a;
    --cp-on-brand: #ffffff;
    --cp-brand-text: #12193a;

    /* Derived from the brand colour. The translucent layers are drawn in the
       on-brand colour, so they lighten a dark brand and darken a pale one. */
    --cp-brand-soft: color-mix(in srgb, var(--cp-brand) 9%, #fff);
    --cp-brand-line: color-mix(in srgb, var(--cp-brand) 22%, #fff);
    --cp-on-brand-12: color-mix(in srgb, var(--cp-on-brand) 12%, transparent);
    --cp-on-brand-20: color-mix(in srgb, var(--cp-on-brand) 20%, transparent);
    --cp-on-brand-70: color-mix(in srgb, var(--cp-on-brand) 72%, transparent);
}

/* ------------------------------------------------------------------ base - */

/* Metronic sets the root size to 13px (12px on a phone), and every size in
   this theme is in rem, so it rendered noticeably smaller than the admin.
   The root is raised instead of each size, so the whole scale moves together.
   :has() lifts it only on pages that load this theme. */
html:has(body.cp-theme),
html:has(body.cp-theme) body.cp-theme { font-size: 16px !important; }

@media (max-width: 1199.98px) {
    html:has(body.cp-theme),
    html:has(body.cp-theme) body.cp-theme { font-size: 15.5px !important; }
}

@media (max-width: 991.98px) {
    html:has(body.cp-theme),
    html:has(body.cp-theme) body.cp-theme { font-size: 15px !important; }
}


body.cp-theme {
    font-family: var(--cp-body);
    color: var(--cp-ink);
    background: var(--cp-mist);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cp-theme h1, .cp-theme h2, .cp-theme h3, .cp-theme h4, .cp-theme h5, .cp-theme h6 {
    font-family: var(--cp-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp-ink);
}

.cp-theme .text-muted { color: var(--cp-ink-45) !important; }
.cp-theme .text-dark { color: var(--cp-ink) !important; }
.cp-theme .text-dark-75 { color: var(--cp-ink-60) !important; }
.cp-theme a { color: var(--cp-brand-text); }
.cp-theme a:hover { color: var(--cp-ink); }
.cp-theme ::selection { background: var(--cp-yellow); color: var(--cp-ink); }
.cp-mono { font-family: var(--cp-mono); }

.cp-theme a:focus-visible,
.cp-theme button:focus-visible,
.cp-theme .btn:focus-visible,
.cp-theme .form-control:focus-visible {
    outline: 3px solid rgba(18, 25, 58, .35);
    outline-offset: 2px;
}

.cp-eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
    margin: 0 0 .3125rem;
}

.cp-link-quiet {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--cp-ink-60) !important;
    padding: .25rem .75rem;
    border-radius: var(--cp-r-pill);
    white-space: nowrap;
}

.cp-link-quiet:hover { background: var(--cp-mist); color: var(--cp-ink) !important; text-decoration: none; }

/* Metronic's page loader never clears when a page script throws before
   KTApp.init; the content should show regardless. */
.cp-theme.page-loading .page-loader { display: none; }

/* ---------------------------------------------------------------- logo - */

/* Company logos are drawn for a light background, so wherever one sits on
   a brand-coloured surface it gets a white tile. */
.cp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: .375rem .625rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 25, 58, .12);
}

.cp-logo img {
    display: block;
    max-height: 34px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
}

.cp-logo--sm { padding: .25rem .5rem; border-radius: 9px; }
.cp-logo--sm img { max-height: 26px; max-width: 110px; }

/* ------------------------------------------------------ small controls - */

.cp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cp-on-brand-12);
    color: var(--cp-on-brand);
    font-size: .9375rem;
    cursor: pointer;
    transition: background .18s ease;
}

.cp-iconbtn:hover { background: var(--cp-on-brand-20); }

/* Search pill. */
.cp-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    max-width: 100%;
    margin: 0;
}

.cp-search--grow { flex: 1 1 auto; width: auto; max-width: 440px; }

.cp-search__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8125rem;
    color: var(--cp-ink-45);
    pointer-events: none;
}

.cp-theme .cp-search__input {
    width: 100%;
    height: 40px;
    padding: 0 1rem 0 2.5rem;
    border: 1px solid transparent;
    border-radius: var(--cp-r-pill);
    background: var(--cp-mist);
    font-family: var(--cp-body);
    font-size: .8125rem;
    color: var(--cp-ink);
    outline: 0;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cp-search__input::placeholder { color: var(--cp-ink-45); opacity: 1; }

.cp-theme .cp-search__input:focus {
    background: var(--cp-paper);
    border-color: var(--cp-line-strong);
    box-shadow: 0 0 0 3px rgba(18, 25, 58, .08);
}

/* On a brand-coloured bar the pill is a translucent inset instead. */
.cp-search--onbrand .cp-search__icon { color: var(--cp-on-brand-70); }
.cp-theme .cp-search--onbrand .cp-search__input {
    background: var(--cp-on-brand-12);
    color: var(--cp-on-brand);
}
.cp-search--onbrand .cp-search__input::placeholder { color: var(--cp-on-brand-70); }
.cp-theme .cp-search--onbrand .cp-search__input:focus {
    background: var(--cp-paper);
    color: var(--cp-ink);
    border-color: transparent;
}
.cp-search--onbrand:focus-within .cp-search__icon { color: var(--cp-ink-45); }

/* --------------------------------------------------------- user menu - */

.cp-user { flex: 0 0 auto; }

.cp-user__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    padding: 0 .5rem 0 .875rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-pill);
    background: var(--cp-paper);
    color: var(--cp-ink-60);
    font-family: var(--cp-body);
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.cp-user__toggle:hover { border-color: var(--cp-line-strong); background: var(--cp-rail); }
.cp-user__hi b { color: var(--cp-ink); font-weight: 700; }

.cp-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cp-brand);
    color: var(--cp-on-brand);
    font-family: var(--cp-display);
    font-size: .8125rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cp-user__caret { font-size: .625rem; color: var(--cp-ink-45); }

/* The same chip on a brand-coloured bar. */
.cp-user--onbrand .cp-user__toggle {
    border-color: transparent;
    background: var(--cp-on-brand-12);
    color: var(--cp-on-brand-70);
}
.cp-user--onbrand .cp-user__toggle:hover { background: var(--cp-on-brand-20); border-color: transparent; }
.cp-user--onbrand .cp-user__hi b { color: var(--cp-on-brand); }
.cp-user--onbrand .cp-user__caret { color: var(--cp-on-brand-70); }
.cp-user--onbrand .cp-user__avatar { background: var(--cp-paper); color: var(--cp-ink); }

.cp-theme .cp-user__menu {
    min-width: 230px;
    margin-top: .5rem;
    padding: .5rem;
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    box-shadow: var(--cp-shadow-md);
}

.cp-user__head {
    display: flex;
    flex-direction: column;
    padding: .5rem .75rem .75rem;
    margin-bottom: .375rem;
    border-bottom: 1px solid var(--cp-line);
}

.cp-user__name { font-family: var(--cp-display); font-weight: 800; font-size: .9375rem; color: var(--cp-ink); }
.cp-user__mailbox { font-family: var(--cp-mono); font-size: .75rem; color: var(--cp-ink-45); margin-top: .125rem; }

.cp-theme .cp-user__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    border-radius: 9px;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cp-ink-60);
}

.cp-theme .cp-user__menu .dropdown-item i { width: 16px; text-align: center; color: var(--cp-ink-45); }
.cp-theme .cp-user__menu .dropdown-item:hover { background: var(--cp-mist); color: var(--cp-ink); }
.cp-theme .cp-user__menu .dropdown-item:hover i { color: var(--cp-ink); }

@media (max-width: 767.98px) {
    .cp-user__hi, .cp-user__caret { display: none; }
    .cp-user__toggle { padding: 0 .375rem; }
}

/* ----------------------------------------------------- notice strips - */

.cp-notice {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4375rem .875rem .4375rem .5rem;
    margin-bottom: .75rem;
    background: var(--cp-paper);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-pill);
    box-shadow: var(--cp-shadow-sm);
}

.cp-notice__tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 26px;
    padding: 0 .6875rem;
    border-radius: var(--cp-r-pill);
    background: var(--cp-yellow-soft);
    color: var(--cp-yellow-ink);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-notice__tag--quiet { background: var(--cp-sky); color: var(--cp-blue); }
.cp-notice__tag i { font-size: .75rem; }

.cp-notice__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cp-ink-90);
}

.cp-notice__stores { flex: 0 0 auto; display: inline-flex; gap: .5rem; color: var(--cp-ink-45); }

.cp-notice:last-of-type { margin-bottom: 1.5rem; }

@media (max-width: 767px) {
    .cp-notice { border-radius: var(--cp-r-card); align-items: flex-start; }
    .cp-notice__tag span { display: none; }
    .cp-notice__tag { padding: 0 .5rem; }
    .cp-notice__stores { display: none; }
}

/* ---------------------------------------------------- address cards - */

/* A shipping address reads as an address — name, then lines — with the
   mailbox number picked out, and one tap to copy it for a store checkout. */
.cp-addrcard {
    position: relative;
    padding: 1rem 1.125rem 1.125rem;
    background: var(--cp-paper);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-card);
    box-shadow: var(--cp-shadow-sm);
}

.cp-addrcard__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.cp-addrcard__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cp-brand-soft);
    color: var(--cp-brand-text);
    font-size: .75rem;
}

.cp-addrcard__label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
}

.cp-addrcard__tag {
    padding: .125rem .5rem;
    border-radius: var(--cp-r-pill);
    background: var(--cp-mist);
    color: var(--cp-ink-60);
    font-size: .6875rem;
    font-weight: 700;
}

.cp-copy {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    margin-left: auto;
    padding: .25rem .625rem;
    border: 1px solid var(--cp-line-strong);
    border-radius: var(--cp-r-pill);
    background: var(--cp-paper);
    color: var(--cp-ink-60);
    font-family: var(--cp-body);
    font-size: .6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cp-copy:hover { background: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }
.cp-copy.is-done { background: var(--cp-green-soft); border-color: var(--cp-green-soft); color: var(--cp-green); }

.cp-theme .cp-addr {
    margin: 0;
    font-style: normal;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--cp-ink-60);
}

.cp-addr__name { display: block; font-weight: 600; color: var(--cp-ink); text-transform: capitalize; }
.cp-addr__line { display: block; }
.cp-addr b { font-family: var(--cp-mono); font-weight: 700; color: var(--cp-ink); text-transform: none; }

/* On a dark surface (layout 2's hero, the brand columns) the cards stay
   white; they are the thing a customer comes to copy, so they stay loudest. */

/* ------------------------------------------------------------ cards - */

.cp-theme .card,
.cp-theme .card.card-custom {
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-card);
    background: var(--cp-paper);
    box-shadow: var(--cp-shadow-sm);
}

.cp-theme .card .card-body { padding: 1.5rem; }

@media (max-width: 767px) {
    .cp-theme .card .card-body { padding: 1.125rem; }
}

.cp-theme .card .card-title,
.cp-theme .card .card-body .card-title {
    font-family: var(--cp-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.015em;
    color: var(--cp-ink);
    margin-bottom: 1rem;
}

.cp-theme .card.card-custom > .card-header {
    min-height: 0;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--cp-line);
}

.cp-theme .card.card-custom > .card-header.border-0 { border-bottom: 0 !important; padding-bottom: .5rem; }

.cp-theme .card.card-custom > .card-header .card-title { margin: 0; }
.cp-theme .card.card-custom > .card-header .card-title .card-label {
    font-family: var(--cp-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-ink);
}

.cp-theme .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cp-line);
    font-family: var(--cp-display);
    font-weight: 700;
}

.cp-theme .card-footer { background: transparent; border-top: 1px solid var(--cp-line); }
.cp-theme .gutter-b, .cp-theme .grid-margin { margin-bottom: 1.25rem; }

/* Stat tiles (dashboard, package list). */
.cp-stat .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.cp-stat__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
    margin: 0 0 .75rem;
}

.cp-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--cp-brand-soft);
    color: var(--cp-brand-text);
    font-size: .6875rem;
    letter-spacing: 0;
}

.cp-stat__value {
    font-family: var(--cp-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--cp-ink);
    margin: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.cp-stat__value small {
    font-family: var(--cp-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--cp-ink-45);
    margin-left: .25rem;
}

.cp-stat__value--owing { color: var(--cp-red); }

.cp-stat__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    margin-top: auto;
    padding-top: .875rem;
}


@media (max-width: 575.98px) {
    .cp-stat__value { font-size: 1.625rem; letter-spacing: -0.03em; }
}

.cp-pill {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .25rem .6rem;
    border-radius: var(--cp-r-pill);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    background: var(--cp-mist);
    color: var(--cp-ink-60);
}

.cp-pill--up { background: var(--cp-green-soft); color: var(--cp-green); }
.cp-pill--info { background: var(--cp-sky); color: var(--cp-blue); }
.cp-pill--warn { background: var(--cp-yellow-soft); color: var(--cp-yellow-ink); }
.cp-pill--down { background: var(--cp-red-soft); color: var(--cp-red); }

/* ----------------------------------------------------------- buttons - */

.cp-theme .btn {
    font-family: var(--cp-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: -0.005em;
    border-radius: var(--cp-r-pill);
    padding: .5625rem 1.25rem;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cp-theme .btn.btn-sm { padding: .375rem .875rem; font-size: .75rem; }
.cp-theme .btn.btn-lg { padding: .75rem 1.75rem; font-size: .9375rem; }

/* general.js paints .btn-primary with the company colour (with !important);
   the text colour is corrected here for pale brands and the depth added. */
.cp-theme .btn.btn-primary {
    color: var(--cp-on-brand) !important;
    box-shadow: var(--cp-shadow-sm);
}

.cp-theme .btn.btn-primary:hover { filter: brightness(1.1); box-shadow: var(--cp-shadow-md); }
.cp-theme .btn.btn-outline-primary:hover { color: var(--cp-on-brand) !important; }

.cp-theme .btn.btn-secondary,
.cp-theme .btn.btn-light,
.cp-theme .btn.btn-default {
    background-color: var(--cp-paper);
    border-color: var(--cp-line-strong);
    color: var(--cp-ink-60);
}

.cp-theme .btn.btn-secondary:hover,
.cp-theme .btn.btn-light:hover,
.cp-theme .btn.btn-default:hover {
    background-color: var(--cp-mist);
    border-color: var(--cp-line-strong);
    color: var(--cp-ink);
}

.cp-theme .btn.btn-success { background-color: var(--cp-green); border-color: var(--cp-green); color: #fff; }
.cp-theme .btn.btn-success:hover { background-color: #0e6b4d; border-color: #0e6b4d; }
.cp-theme .btn.btn-info { background-color: var(--cp-blue); border-color: var(--cp-blue); color: #fff; }
.cp-theme .btn.btn-danger { background-color: var(--cp-red); border-color: var(--cp-red); color: #fff; }
.cp-theme .btn.btn-warning { background-color: var(--cp-yellow); border-color: var(--cp-yellow); color: var(--cp-ink); }
.cp-theme .btn.btn-dark { background-color: var(--cp-ink); border-color: var(--cp-ink); color: #fff; }
.cp-theme .btn.btn-accent { background-color: var(--cp-yellow); border-color: var(--cp-yellow); color: var(--cp-ink); }
.cp-theme .btn.btn-accent:hover { background-color: var(--cp-yellow-deep); border-color: var(--cp-yellow-deep); }

/* ------------------------------------------------------------- forms - */

.cp-theme .form-group > label,
.cp-theme label.col-form-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
    margin-bottom: .4375rem;
}

.cp-theme .form-control,
.cp-theme .custom-select,
.cp-theme select.form-control {
    border: 1px solid var(--cp-line-strong);
    border-radius: var(--cp-r-field);
    background-color: var(--cp-paper);
    color: var(--cp-ink);
    font-family: var(--cp-body);
    font-size: .875rem;
    padding: .5625rem .875rem;
    height: auto;
    box-shadow: none;
}

.cp-theme .form-control:focus,
.cp-theme .custom-select:focus {
    border-color: var(--cp-ink);
    box-shadow: 0 0 0 3px rgba(18, 25, 58, .1);
    color: var(--cp-ink);
}

.cp-theme .form-control::placeholder { color: var(--cp-ink-45); opacity: 1; }
.cp-theme .form-control:disabled,
.cp-theme .form-control[readonly] { background: var(--cp-mist); color: var(--cp-ink-45); }

.cp-theme .input-group-text {
    background: var(--cp-mist);
    border: 1px solid var(--cp-line-strong);
    color: var(--cp-ink-45);
    border-radius: var(--cp-r-field);
}

.cp-theme .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cp-theme .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ------------------------------------------------------------ tables - */

.cp-theme .table { color: var(--cp-ink-90); font-size: .8125rem; }

.cp-theme .table thead th,
.cp-theme .table.table-head-custom thead th,
.cp-theme .table.table-head-custom thead tr {
    font-family: var(--cp-body);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--cp-ink-45) !important;
    border-top: 0;
    border-bottom: 1px solid var(--cp-line);
    padding: .875rem 1rem;
    white-space: nowrap;
    vertical-align: middle;
}

.cp-theme .table td {
    border-top: 1px solid var(--cp-line);
    padding: .875rem 1rem;
    vertical-align: middle;
}

.cp-theme .table tbody tr { transition: background .14s ease; }
.cp-theme .table tbody tr:hover { background: var(--cp-mist); }
.cp-theme .table-striped tbody tr:nth-of-type(odd) { background: transparent; }

/* DataTables' own stylesheet draws hard borders and grey stripes. */
.cp-theme table.dataTable { border-collapse: collapse !important; }
.cp-theme table.dataTable thead th,
.cp-theme table.dataTable thead td { border-bottom: 1px solid var(--cp-line) !important; }
.cp-theme table.dataTable.no-footer { border-bottom: 1px solid var(--cp-line) !important; }
.cp-theme table.dataTable tbody tr { background: transparent; }
.cp-theme table.dataTable.stripe tbody tr.odd,
.cp-theme table.dataTable.display tbody tr.odd { background: transparent; }
.cp-theme table.dataTable.display tbody tr.odd > .sorting_1,
.cp-theme table.dataTable.display tbody tr.even > .sorting_1 { background: transparent; }

.cp-theme .dataTables_wrapper .dataTables_filter input,
.cp-theme .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--cp-line-strong) !important;
    border-radius: var(--cp-r-field) !important;
    padding: .375rem .75rem !important;
    font-size: .8125rem;
    background: var(--cp-paper);
    color: var(--cp-ink);
    height: 38px;
}

.cp-theme .dataTables_wrapper .dataTables_filter,
.cp-theme .dataTables_wrapper .dataTables_length,
.cp-theme .dataTables_wrapper .dataTables_info {
    font-size: .8125rem;
    color: var(--cp-ink-45);
    margin-bottom: .75rem;
}

.cp-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 0 !important;
    background: transparent !important;
    border-radius: var(--cp-r-field) !important;
    color: var(--cp-ink-60) !important;
    font-size: .8125rem;
    font-weight: 600;
    padding: .375rem .75rem !important;
}

.cp-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--cp-mist) !important; color: var(--cp-ink) !important; }
.cp-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.cp-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--cp-ink) !important; color: #fff !important; }

/* ------------------------------------------------------ badges, labels - */

.cp-theme .badge,
.cp-theme .label.label-inline {
    font-family: var(--cp-body);
    font-size: .6875rem;
    font-weight: 700;
    padding: .3125rem .625rem;
    border-radius: var(--cp-r-pill);
    line-height: 1.4;
    height: auto;
}

.cp-theme .badge-success, .cp-theme .label-light-success, .cp-theme .label-success { background: var(--cp-green-soft) !important; color: var(--cp-green) !important; }
.cp-theme .badge-info, .cp-theme .badge-primary, .cp-theme .label-light-primary, .cp-theme .label-primary { background: var(--cp-sky) !important; color: var(--cp-blue) !important; }
.cp-theme .badge-warning, .cp-theme .label-light-warning, .cp-theme .label-warning { background: var(--cp-yellow-soft) !important; color: var(--cp-yellow-ink) !important; }
.cp-theme .badge-danger, .cp-theme .label-light-danger, .cp-theme .label-danger { background: var(--cp-red-soft) !important; color: var(--cp-red) !important; }
.cp-theme .badge-secondary, .cp-theme .badge-light { background: var(--cp-mist) !important; color: var(--cp-ink-60) !important; }
.cp-theme .badge-dark { background: var(--cp-ink) !important; color: #fff !important; }

/* ------------------------------------------------------------ alerts - */

.cp-theme .alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    border: 1px solid transparent;
    border-radius: var(--cp-r-field);
    font-size: .8125rem;
    font-weight: 500;
    padding: .75rem 1rem;
}

.cp-theme .alert > .float-right { float: none !important; margin-left: auto; }
.cp-theme .alert a { font-weight: 700; }

.cp-theme .alert-success { background: var(--cp-green-soft); border-color: rgba(18, 128, 92, .15); color: var(--cp-green); }
.cp-theme .alert-info, .cp-theme .alert-primary { background: var(--cp-sky); border-color: rgba(58, 79, 214, .15); color: var(--cp-blue); }
.cp-theme .alert-warning { background: var(--cp-yellow-soft); border-color: rgba(122, 99, 0, .15); color: var(--cp-yellow-ink); }
.cp-theme .alert-danger { background: var(--cp-red-soft); border-color: rgba(192, 57, 43, .15); color: var(--cp-red); }
.cp-theme .alert-danger a.text-white { color: var(--cp-red) !important; }
.cp-theme .alert-secondary,
.cp-theme .alert-white,
.cp-theme .alert-light { background: var(--cp-paper); border-color: var(--cp-line); color: var(--cp-ink-60); box-shadow: var(--cp-shadow-sm); }

/* ------------------------------------------------ menus and overlays - */

.cp-theme .dropdown-menu {
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    box-shadow: var(--cp-shadow-md);
    font-size: .8125rem;
}

.cp-theme .dropdown-item { border-radius: 9px; color: var(--cp-ink-60); }
.cp-theme .dropdown-item:hover, .cp-theme .dropdown-item:focus { background: var(--cp-mist); color: var(--cp-ink); }
.cp-theme .dropdown-divider { border-color: var(--cp-line); }

.cp-theme .modal-content { border: 0; border-radius: 20px; box-shadow: var(--cp-shadow-lg); overflow: hidden; }
.cp-theme .modal-header { border-bottom: 1px solid var(--cp-line); padding: 1.25rem 1.5rem; }
.cp-theme .modal-title { font-family: var(--cp-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; }
.cp-theme .modal-body { padding: 1.5rem; }
.cp-theme .modal-footer { border-top: 1px solid var(--cp-line); padding: 1rem 1.5rem; }

.cp-theme .nav-tabs { border-bottom: 1px solid var(--cp-line); }
.cp-theme .nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--cp-ink-45);
    font-weight: 600;
    font-size: .8125rem;
}
.cp-theme .nav-tabs .nav-link:hover { color: var(--cp-ink); border-bottom-color: var(--cp-line-strong); }
.cp-theme .nav-tabs .nav-link.active { color: var(--cp-ink); background: transparent; border-bottom-color: var(--cp-brand); }

.cp-theme #toast-container > div { border-radius: 14px; box-shadow: var(--cp-shadow-md); font-family: var(--cp-body); font-size: .8125rem; opacity: 1; }

/* ------------------------------------------------ page header, trail - */

/* Every page ships the same .content-header: an empty half-width column
   and a right-floated breadcrumb. The page title is already in each
   layout's chrome, so the trail is all this row carries. */
.cp-theme .content-header { padding: 0; }
.cp-theme .content-header > .container-fluid { padding-left: 0; padding-right: 0; }
.cp-theme .content-header .row { align-items: center; margin-left: 0; margin-right: 0; }
.cp-theme .content-header .row.mb-2 { margin-bottom: 1rem !important; }
.cp-theme .content-header .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

.cp-theme .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.cp-theme .breadcrumb.float-sm-right { float: none !important; }

@media (min-width: 576px) {
    .cp-theme .breadcrumb.float-sm-right { justify-content: flex-end; }
}

.cp-theme .breadcrumb-item { display: flex; align-items: center; }
.cp-theme .breadcrumb-item,
.cp-theme .breadcrumb-item a,
.cp-theme .breadcrumb-item a.text-primary { color: var(--cp-ink-45) !important; }
.cp-theme .breadcrumb-item a:hover { color: var(--cp-ink) !important; text-decoration: none; }
.cp-theme .breadcrumb-item.active { color: var(--cp-ink-60) !important; }
.cp-theme .breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.cp-theme .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    width: 4px;
    height: 4px;
    padding: 0;
    margin-right: .5rem;
    border-top: 1.25px solid var(--cp-ink-45);
    border-right: 1.25px solid var(--cp-ink-45);
    transform: rotate(45deg);
    opacity: .6;
}

/* ------------------------------------------------------------ footer - */

.cp-theme .footer.cp-footer {
    background: transparent !important;
    border-top: 1px solid var(--cp-line);
    color: var(--cp-ink-45);
    font-size: .75rem;
}

.cp-theme .footer.cp-footer .text-muted,
.cp-theme .footer.cp-footer a { color: var(--cp-ink-45) !important; font-weight: 500 !important; }
.cp-theme .footer.cp-footer a:hover { color: var(--cp-ink) !important; }

/* ------------------------------------------------ horizontal nav bar - */

/* Layouts 2, 6, 9 and 12 run the menu across the top. On a desktop each
   item is a pill; below lg Metronic turns the same list into a drawer. */
@media (min-width: 992px) {
    .cp-theme .cp-hnav .menu-nav {
        display: flex;
        align-items: center;
        gap: .25rem;
        padding: 0;
    }

    .cp-theme .cp-hnav .menu-nav > .menu-item { padding: 0; margin: 0; }

    .cp-theme .cp-hnav .menu-nav > .menu-item > .menu-link {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .875rem;
        border-radius: var(--cp-r-pill);
        background: transparent;
        transition: background .18s ease, color .18s ease;
    }

    .cp-theme .cp-hnav .menu-nav > .menu-item > .menu-link .menu-icon { display: none; }

    .cp-theme .cp-hnav .menu-nav > .menu-item > .menu-link .menu-text {
        font-family: var(--cp-body);
        font-size: .8125rem;
        font-weight: 600;
        white-space: nowrap;
        transition: color .18s ease;
    }

    /* On a brand-coloured bar. */
    .cp-theme .cp-hnav--onbrand .menu-nav > .menu-item > .menu-link .menu-text { color: var(--cp-on-brand-70) !important; }
    .cp-theme .cp-hnav--onbrand .menu-nav > .menu-item > .menu-link:hover,
    .cp-theme .cp-hnav--onbrand .menu-nav > .menu-item.menu-item-active > .menu-link { background: var(--cp-on-brand-12); }
    .cp-theme .cp-hnav--onbrand .menu-nav > .menu-item > .menu-link:hover .menu-text,
    .cp-theme .cp-hnav--onbrand .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--cp-on-brand) !important; }

    /* On a white bar. */
    .cp-theme .cp-hnav--onpaper .menu-nav > .menu-item > .menu-link .menu-text { color: var(--cp-ink-60) !important; }
    .cp-theme .cp-hnav--onpaper .menu-nav > .menu-item > .menu-link:hover { background: var(--cp-mist); }
    .cp-theme .cp-hnav--onpaper .menu-nav > .menu-item > .menu-link:hover .menu-text { color: var(--cp-ink) !important; }
    .cp-theme .cp-hnav--onpaper .menu-nav > .menu-item.menu-item-active > .menu-link { background: var(--cp-brand); }
    .cp-theme .cp-hnav--onpaper .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--cp-on-brand) !important; }
}

/* The yellow underline the admin uses for the current section. */
@media (min-width: 992px) {
    .cp-theme .cp-hnav--onbrand .menu-nav > .menu-item.menu-item-active > .menu-link { box-shadow: inset 0 -2px 0 var(--cp-yellow); }
}

/* ---------------------------------------------------- mobile drawer - */

/* Below lg the horizontal menu (and layout 1's rail) become Metronic's
   off-canvas drawer: a white panel of icon rows. */
@media (max-width: 991.98px) {
    .cp-theme .header-menu-wrapper {
        background: var(--cp-paper) !important;
        box-shadow: var(--cp-shadow-lg);
    }

    .cp-theme .header-menu-mobile .menu-nav { margin-top: 0; padding: 1rem .75rem; }

    .cp-theme .header-menu-mobile .menu-nav > .menu-item > .menu-link {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .75rem .875rem;
        min-height: 0;
        border-radius: 12px;
    }

    .cp-theme .header-menu-mobile .menu-nav > .menu-item > .menu-link .menu-icon {
        display: inline-flex;
        width: 18px;
        flex: 0 0 18px;
        justify-content: center;
        color: var(--cp-ink-45);
        font-size: .9375rem;
    }

    .cp-theme .header-menu-mobile .menu-nav > .menu-item > .menu-link .menu-text {
        color: var(--cp-ink-60) !important;
        font-size: .875rem;
        font-weight: 600;
    }

    .cp-theme .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-link,
    .cp-theme .header-menu-mobile .menu-nav > .menu-item > .menu-link:hover { background: var(--cp-mist); }

    .cp-theme .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--cp-ink) !important; }
    .cp-theme .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon { color: var(--cp-brand-text); }
}

/* --------------------------------------------------- mobile top bar - */

.cp-theme .header-mobile.cp-mobilebar {
    background: var(--cp-brand) !important;
    box-shadow: none;
    padding: 0 1rem;
}

/* Metronic's account/search panel that drops from the mobile bar. */
@media (max-width: 991.98px) {
    .cp-theme.topbar-mobile-on .topbar {
        background: var(--cp-paper) !important;
        border-bottom: 1px solid var(--cp-line);
        box-shadow: var(--cp-shadow-sm);
        padding: .625rem 1rem;
        gap: .5rem;
    }
}

/* ============================================================ LAYOUT 1 ==
   Side rail. The company colour fills the rail; the working area is white
   bar over a mist page, as in the admin. The addresses sit in a strip at the
   top of every page instead of stretching the header to 170px. */

.cp-l1 .cp-rail.aside,
.cp-l1 .cp-rail .aside-menu,
.cp-l1 .cp-rail .aside-menu-wrapper {
    background: var(--cp-brand) !important;
}

.cp-l1 .cp-rail.aside { border-right: 0; }

.cp-l1 .cp-rail__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.5rem 1.25rem 1.25rem;
    margin: 0 .75rem;
    border-bottom: 1px solid var(--cp-on-brand-12);
}

.cp-l1 .cp-rail__company {
    font-family: var(--cp-display);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: -0.02em;
    color: var(--cp-on-brand);
}

.cp-l1 .cp-railnav .menu-nav { padding: .875rem .75rem; }
.cp-l1 .cp-railnav .menu-nav > .menu-item { margin-bottom: 2px; }

.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item > .menu-link {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: .625rem .875rem;
    border-radius: 12px;
    background: transparent;
    transition: background .18s ease;
}

.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item > .menu-link .menu-icon {
    flex: 0 0 18px;
    width: 18px;
    margin-right: .75rem;
    font-size: .9375rem;
    color: var(--cp-on-brand-70);
    opacity: .75;
    transition: color .18s ease;
}

.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item > .menu-link .menu-text {
    font-family: var(--cp-body);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cp-on-brand-70) !important;
}

.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item > .menu-link:hover,
.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item.menu-item-active > .menu-link {
    background: var(--cp-on-brand-12) !important;
}

.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item > .menu-link:hover .menu-text,
.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: var(--cp-on-brand) !important;
}

/* The admin's signal for the current section: a yellow icon. */
.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item > .menu-link:hover .menu-icon,
.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon {
    color: var(--cp-yellow);
    opacity: 1;
}

.cp-theme.cp-l1 .cp-railnav .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { font-weight: 600; }

.cp-l1 .cp-rail__foot {
    margin: 0 .75rem 1rem;
    padding: .875rem 1.25rem 0;
    border-top: 1px solid var(--cp-on-brand-12);
    display: flex;
    flex-direction: column;
}

.cp-l1 .cp-rail__footlabel {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-on-brand-70);
}

.cp-l1 .cp-rail__mailbox {
    font-family: var(--cp-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-on-brand);
}

.cp-l1 .header.cp-topbar {
    background: var(--cp-paper);
    border-bottom: 1px solid var(--cp-line);
    box-shadow: none;
}

.cp-l1 .cp-topbar > .container-fluid { gap: 1.5rem; padding: 0 1.75rem; }
.cp-l1 .cp-topbar__title { align-items: center; min-width: 0; }

.cp-theme .cp-topbar__h {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-l1 .cp-topbar__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex: 1 1 auto;
}

.cp-l1 .content { background: var(--cp-mist); }

/* Address strip: an intro column, then the air and sea cards side by side. */
.cp-addrstrip {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

.cp-addrstrip__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .125rem;
}

.cp-addrstrip__mailbox {
    margin: 0 0 .375rem;
    font-family: var(--cp-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cp-ink-60);
}

.cp-addrstrip__mailbox b { font-family: var(--cp-mono); font-weight: 800; color: var(--cp-ink); letter-spacing: 0; }
.cp-addrstrip .cp-link-quiet { margin-left: -.75rem; }

.cp-addrstrip__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

/* On a phone the dashboard already lists the addresses. */
@media (max-width: 767.98px) {
    .cp-addrstrip { display: none; }
}

@media (max-width: 1199.98px) {
    .cp-addrstrip { grid-template-columns: minmax(0, 1fr); }
    .cp-addrstrip__intro { flex-direction: row; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
    .cp-addrstrip__mailbox { margin: 0; }
    .cp-addrstrip .cp-link-quiet { margin-left: auto; }
}

/* Metronic greys every icon font glyph (`i[class*="fa-"] { color: #B5B5C3 }`);
   icons inside the theme's own components take their component's colour. */
.cp-theme .cp-addrcard i,
.cp-theme .cp-stat i,
.cp-theme .cp-notice i,
.cp-theme .cp-copy i,
.cp-theme .cp-user i,
.cp-theme .cp-iconbtn i,
.cp-theme .cp-search i,
.cp-theme .menu-link i.menu-icon,
.cp-theme .cp-hero i,
.cp-theme .cp-mailbox i {
    color: inherit;
}

/* --------------------------------------------------- shared furniture - */

.cp-theme .stretch-card { display: flex; }
.cp-theme .stretch-card > .card { flex: 1 1 auto; width: 100%; }

/* Mailbox chip: the one number every customer is asked for. */
.cp-mailbox {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .3125rem .75rem;
    border-radius: var(--cp-r-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .75);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cp-mailbox b { font-family: var(--cp-mono); font-weight: 700; color: #fff; }
.cp-mailbox i { font-size: .75rem; opacity: .8; }

.cp-mailbox--paper {
    background: var(--cp-paper);
    border-color: var(--cp-line);
    color: var(--cp-ink-45);
}

.cp-mailbox--paper b { color: var(--cp-ink); }

/* Brand bar: logo tile, company name, menu, tools. Shared by 2, 9 and 12. */
.cp-theme .cp-brandbar { background: var(--cp-brand) !important; border-bottom: 0; }

.cp-brandbar__id { display: flex; align-items: center; gap: .875rem; margin-right: 1.5rem; }

.cp-brandbar__name {
    font-family: var(--cp-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    color: var(--cp-on-brand);
    white-space: nowrap;
}

.cp-brandbar__tools { display: flex; align-items: center; gap: .625rem; }
.cp-search--compact { width: 200px; }

@media (max-width: 1499.98px) {
    .cp-search--compact { display: none; }
}

/* Title bar under the brand bar (9 and 12). */
.cp-theme .cp-titlebar {
    background: var(--cp-paper);
    border-bottom: 1px solid var(--cp-line);
}

.cp-titlebar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
}

.cp-titlebar__title { display: flex; align-items: center; gap: .875rem; min-width: 0; }

.cp-theme .cp-titlebar--ink { background: var(--cp-subheader); border-bottom: 0; }
.cp-theme .cp-titlebar--ink .cp-topbar__h { color: #fff; }

.cp-search--onink .cp-search__icon { color: rgba(255, 255, 255, .6); }
.cp-theme .cp-search--onink .cp-search__input { background: rgba(255, 255, 255, .1); color: #fff; }
.cp-search--onink .cp-search__input::placeholder { color: rgba(255, 255, 255, .6); }
.cp-theme .cp-search--onink .cp-search__input:focus { background: var(--cp-paper); color: var(--cp-ink); border-color: transparent; }
.cp-search--onink:focus-within .cp-search__icon { color: var(--cp-ink-45); }

/* Address column beside the page (9 on the right, 12 on the left). It
   sticks under the header so the addresses stay in view on long pages. */
.cp-addrcol {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cp-addrcol__head { display: flex; align-items: center; justify-content: space-between; }
.cp-addrcol__head .cp-eyebrow { margin: 0; }
.cp-addrcol .cp-copy span { display: none; }

.cp-theme .cp-main { padding-top: 1.5rem; padding-bottom: 2rem; }

/* ============================================================ LAYOUT 2 ==
   Brand bar with the menu across it, then a dark hero band carrying the
   page title and the customer's addresses. */

.cp-theme.cp-l2 .header.cp-brandbar { height: 76px; }
.cp-theme.cp-l2 .header.cp-brandbar > .container { height: 100%; }
.cp-l2 .cp-brandbar .header-logo { margin-right: 1.5rem; }

@media (min-width: 992px) {
    .cp-theme.cp-l2[data-header-scroll=on] .header.cp-brandbar { background: var(--cp-brand) !important; box-shadow: var(--cp-shadow-md); height: 76px; }
}

.cp-theme .cp-hero {
    display: block;
    padding: 2.5rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 300px at 85% -20%, color-mix(in srgb, var(--cp-brand) 45%, transparent), transparent 70%),
        var(--cp-subheader) !important;
    border: 0;
}

.cp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 2rem;
    align-items: end;
}

.cp-hero__eyebrow { color: rgba(255, 255, 255, .55); }

.cp-theme .cp-hero__title {
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
}

.cp-hero__addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}



@media (max-width: 991.98px) {
    .cp-theme .cp-hero { padding: 1.5rem 0; }
    .cp-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .cp-theme .cp-hero__title { font-size: 1.5rem; }
}

/* On a phone the dashboard already lists the addresses. */
@media (max-width: 767.98px) {
    .cp-hero__addresses { display: none; }
}

/* ============================================================ LAYOUT 6 ==
   The page as a rounded sheet framed by the company colour, with a right
   sidebar on the colour holding search and the addresses. */

.cp-theme.cp-l6 { background: var(--cp-brand) !important; }

@media (min-width: 992px) {
    .cp-theme.cp-l6 .wrapper.cp-sheet {
        margin: 24px 0 24px 24px;
        padding-top: 0;
        border-radius: 24px;
        background: var(--cp-mist);
        overflow: hidden;
        box-shadow: var(--cp-shadow-lg);
    }

    .cp-theme.cp-l6 .cp-sheet .header { height: 72px; background: var(--cp-paper); border-bottom: 1px solid var(--cp-line); }
    .cp-theme.cp-l6 .cp-sheet .header .header-wrapper { background: var(--cp-paper); border-radius: 0; }
    .cp-theme.cp-l6 .cp-sheet .header .container-fluid { padding: 0 1.75rem; }

    .cp-theme.cp-l6[data-header-scroll=on] .header { left: 24px; right: 400px; border-radius: 24px 24px 0 0; }
    .cp-theme.cp-l6[data-header-scroll=on] .wrapper.cp-sheet { padding-top: 72px; }

    .cp-theme.cp-l6 .cp-main { padding: 1.75rem 1.75rem 2rem; }
}

.cp-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cp-theme .cp-pagehead__title { margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; }

.cp-theme.cp-l6 .sidebar.cp-side { background: transparent; }

.cp-side__head { padding: 2rem 1.75rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.cp-side__id { display: flex; align-items: center; gap: .875rem; }

.cp-side__name {
    font-family: var(--cp-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp-on-brand);
}

.cp-side__search { width: 100%; }
.cp-side__body { flex: 1 1 auto; overflow-y: auto; padding: 0 1.75rem 2rem; }

.cp-side__label { display: flex; align-items: center; justify-content: space-between; margin: .5rem 0 .75rem; }
.cp-side__label .cp-eyebrow { margin: 0; color: var(--cp-on-brand-70); }

.cp-theme .cp-side__all { font-size: .75rem; font-weight: 700; color: var(--cp-on-brand) !important; opacity: .85; }
.cp-theme .cp-side__all:hover { opacity: 1; text-decoration: underline; }

.cp-side__cards { display: flex; flex-direction: column; gap: .75rem; }

/* In the mobile drawer the sidebar sits on the brand colour as well. */
@media (max-width: 991.98px) {
    .cp-theme.cp-l6 .sidebar.cp-side { background: var(--cp-brand); }
    .cp-theme.cp-l6 .wrapper.cp-sheet { background: var(--cp-mist); }
    .cp-theme.cp-l6 .cp-main { padding-top: 1.25rem; }
    .cp-side__user { align-self: flex-start; }
}

/* ============================================================ LAYOUT 9 ==
   Brand bar, white title bar, addresses in a right-hand column. */

@media (min-width: 992px) {
    .cp-theme.cp-l9 .header-top.cp-brandbar,
    .cp-theme.cp-l12 .header-top.cp-brandbar { height: 72px; }
}

/* On a phone the brand bar only holds the account panel, opened from the
   mobile bar. */
@media (max-width: 991.98px) {
    /* Collapsed rather than hidden: the menu drawer and the account panel
       live inside it and are positioned on their own. */
    .cp-theme.cp-l9 .header-top.cp-brandbar,
    .cp-theme.cp-l12 .header-top.cp-brandbar { height: 0; min-height: 0; padding: 0; overflow: visible; }
    .cp-theme.cp-l9 #kt_wrapper,
    .cp-theme.cp-l12 #kt_wrapper { padding-top: 55px; }
    .cp-theme.cp-l9 .header-bottom.cp-titlebar,
    .cp-theme.cp-l12 .header-bottom.cp-titlebar { height: auto; padding: .75rem 0; }
}

.cp-l9 .header-top > .container,
.cp-l12 .header-top > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.cp-theme.cp-l9 .header-bottom.cp-titlebar,
.cp-theme.cp-l12 .header-bottom.cp-titlebar { height: 68px; }

@media (min-width: 992px) {
    .cp-theme.cp-l9 .header-menu-wrapper-right,
    .cp-theme.cp-l12 .header-menu-wrapper-right { margin-right: .5rem; }
}

/* ============================================================ LAYOUT 12 =
   As 9, with an ink title bar and the address column on the left. */

.cp-theme.cp-l12 .cp-titlebar--ink .cp-mailbox b { color: #fff; }

/* Metronic pads .content itself; .cp-main carries the page's spacing. */
.cp-theme .content { padding-top: 0; padding-bottom: 0; }

.cp-user__toggle { white-space: nowrap; }

/* Layout 9's skin draws a bracket-shaped divider after each menu item. */
.cp-theme .cp-hnav .menu-nav > .menu-item > .menu-link::before,
.cp-theme .cp-hnav .menu-nav > .menu-item > .menu-link::after,
.cp-theme .cp-hnav .menu-nav > .menu-item::before,
.cp-theme .cp-hnav .menu-nav > .menu-item::after { display: none !important; content: none !important; }

@media (min-width: 992px) {
    .cp-theme .cp-hnav .menu-nav > .menu-item > .menu-link,
    .cp-theme .cp-hnav .menu-nav > .menu-item:first-child > .menu-link { border: 0; padding-left: .875rem; }
}

/* The list pages (packages, pre-alerts, deliveries, express pickups) open
   with count tiles written as a card title over a centred <h5>. They read
   as the same stat tile as the dashboard's without rewriting each page. */
.cp-theme .card .card-body > .card-title:first-child:has(+ h5.text-center) {
    font-family: var(--cp-body);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
    margin-bottom: .5rem;
}

.cp-theme .card .card-body > .card-title + h5.text-center {
    text-align: left !important;
    margin: 0;
    font-family: var(--cp-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--cp-ink);
}

@media (max-width: 575.98px) {
    .cp-theme .card .card-body > .card-title + h5.text-center { font-size: 1.625rem; }
}

/* DataTables' stylesheet sets its own cell font size and padding. */
.cp-theme table.dataTable tbody td,
.cp-theme table.dataTable tbody th {
    font-size: .8125rem;
    padding: .875rem 1rem;
}

.cp-theme table.dataTable thead th { padding: .875rem 1.75rem .875rem 1rem; }

/* List pages nest their own .container inside the layout's; the inner one
   should not add a second gutter. */
.cp-theme .cp-main .container { max-width: none; padding-left: 0; padding-right: 0; }

/* ============================================================== SIGN IN ==
   Login, register and password pages. The form is shared; each layout
   frames it differently, in the same spirit as its inner pages. */

.cp-auth .login.login-1,
.cp-auth .login.login-2 { background: var(--cp-mist) !important; }
.cp-auth .flex-root, .cp-auth .flex-root.bg-white { background: var(--cp-mist) !important; }

.cp-logo--lg { padding: .625rem 1rem; border-radius: 16px; }
.cp-logo--lg img { max-height: 64px; max-width: 220px; }

.cp-logo--round { width: 104px; height: 104px; padding: 1rem; border-radius: 50%; }
.cp-logo--round img { max-height: 100%; max-width: 100%; }

.cp-auth__brand { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 0 auto 1.5rem; width: 100%; max-width: 500px; }
.cp-auth__brand--center { align-items: center; text-align: center; }

.cp-auth__company {
    margin: .5rem 0 0;
    font-family: var(--cp-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--cp-ink);
}

.cp-auth__sub { margin: 0; font-size: .875rem; color: var(--cp-ink-45); }

.cp-auth__brand--onbrand { align-items: center; margin: 2.5rem auto 1.5rem; }
.cp-auth__brand--onbrand .cp-auth__company { color: var(--cp-on-brand); }

/* The brand panel beside the form (2 on the left, 12 on the right). */
.cp-theme .cp-auth__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem !important;
    background:
        radial-gradient(900px 400px at 20% 0%, color-mix(in srgb, var(--cp-on-brand) 10%, transparent), transparent 70%),
        var(--cp-brand) !important;
}

.cp-auth--l2 .cp-auth__panel { width: 520px; }
.cp-auth--l2 .cp-auth__panel > div { padding-top: 0 !important; align-items: center; }

.cp-theme .cp-auth__headline {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--cp-on-brand);
}

.cp-auth__tagline {
    max-width: 360px;
    margin: .75rem auto 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--cp-on-brand-70);
}

.cp-auth--l12 .cp-auth__panel > div { padding-top: 0 !important; }

/* Layout 6: the whole page is the company colour and the form floats on it. */
.cp-theme.cp-auth--l6 { background: var(--cp-brand) !important; }
.cp-theme.cp-auth--l6 .flex-root,
.cp-theme.cp-auth--l6 .login.login-1 { background: transparent !important; }

/* The shared form card. */
.cp-auth .login-content { background: transparent; }

.cp-auth .login-form { width: 100%; }

.cp-auth .w-lg-500px.bg-white.rounded {
    width: 100%;
    max-width: 460px;
    padding: 2.25rem 2rem !important;
    border: 1px solid var(--cp-line);
    border-radius: 20px !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-auth .section-title { text-align: left; padding-bottom: 1.25rem; }
.cp-auth .section-title h2 {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--cp-ink);
    text-transform: none;
}
.cp-auth .section-title h2::before, .cp-auth .section-title h2::after { display: none; }
.cp-auth .section-title p { margin: 0; font-size: .875rem; color: var(--cp-ink-45); }

.cp-auth .input-group { flex-wrap: nowrap; }
.cp-auth .input-group .form-control { height: 46px; }
.cp-auth .btn-block { height: 46px; margin-top: .5rem; }
.cp-auth .login-form a { font-size: .8125rem; font-weight: 600; }
.cp-auth .login-form a[href="/forgetpassword"] { color: var(--cp-ink-60) !important; }

@media (max-width: 991.98px) {
    .cp-auth--l2 .cp-auth__panel { width: 100%; padding: 2rem 1.5rem !important; }
    .cp-theme .cp-auth__headline { font-size: 1.5rem; }
    .cp-auth__tagline { display: none; }
}

/* Metronic stretches the form wrapper to fill the column, which pushed the
   brand block to the top of the page and the card to the middle; the two
   are kept together and centred as one. */
.cp-auth .login-content > .flex-column-fluid { flex: 0 0 auto !important; }
.cp-auth .login-content { justify-content: center !important; min-height: 100vh; }
.cp-auth .login-content > .flex-center + .flex-center,
.cp-auth .login-content ~ .flex-center { padding-top: 1rem !important; }
.cp-auth__brand { max-width: 460px; }

.cp-theme.cp-auth--l6 { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
.cp-theme.cp-auth--l6 .flex-root { flex: 0 0 auto; }
.cp-auth--l6 .cp-auth__brand--onbrand { margin-top: 3rem; margin-bottom: 0; }
.cp-auth--l6 .login-content { min-height: 0; padding-top: 1.5rem !important; }
.cp-theme.cp-auth--l6 .login-content a.text-muted { color: var(--cp-on-brand-70) !important; }

/* The field icons are Boxicons, which the sign-in pages never loaded, so
   they rendered as empty boxes; the fields stand on their own. */
.cp-auth .login-form .input-group-append { display: none; }
.cp-auth .login-form .input-group > .form-control { border-radius: var(--cp-r-field) !important; }

/* Layout 12's brand panel fills its side and centres its content. */
@media (min-width: 992px) {
    .cp-theme.cp-auth--l12 .login.login-2 .content.cp-auth__panel {
        display: flex !important;
        flex: 1 1 auto;
        min-height: 100vh;
    }
    .cp-auth--l12 .cp-auth__panel > div { display: flex !important; flex-direction: column; align-items: center; }
}

/* In layout 12 the brand panel ends up inside the form column (the login
   page's own wrappers close before it), so that column is split in two:
   the form on the left, the brand panel on the right. */
@media (min-width: 992px) {
    .cp-theme.cp-auth--l12 .login.login-2 { flex: 1 1 auto; width: 100%; }
    .cp-theme.cp-auth--l12 .login.login-2 > .login-aside { flex: 1 1 auto; width: 100%; max-width: none; }
    .cp-theme.cp-auth--l12 .login-aside > .login-content { flex: 1 1 50%; max-width: 50%; }
    .cp-theme.cp-auth--l12 .login-aside > .content.cp-auth__panel { flex: 1 1 50%; max-width: 50%; }
}

.cp-mobileaddr { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }

/* Layout 2's brand bar only carries the menu on a desktop; on a phone the
   mobile bar replaces it. */
@media (max-width: 991.98px) {
    .cp-theme.cp-l2 .header.cp-brandbar { height: auto; min-height: 0; }
    .cp-theme.cp-l2:not(.topbar-mobile-on) .header.cp-brandbar .topbar { display: none; }
    .cp-theme.cp-l2 .cp-brandbar__id { display: none; }
}

/* Phone chrome shared by the top-bar layouts (2, 9, 12). The menu drawer
   opens below the mobile bar rather than under it, and the account panel
   (search + user menu) drops down from the bar when its button is tapped. */
@media (max-width: 991.98px) {
    .cp-theme .header-menu-wrapper.header-menu-wrapper-right,
    .cp-theme .header-menu-wrapper.header-menu-wrapper-left { top: 55px !important; }

    .cp-theme.cp-l2 .header.cp-brandbar .topbar,
    .cp-theme.cp-l9 .header-top .topbar,
    .cp-theme.cp-l12 .header-top .topbar {
        position: fixed;
        top: 55px;
        left: 0;
        right: 0;
        z-index: 96;
        display: none;
        align-items: center;
        gap: .5rem;
        padding: .625rem 1rem;
        background: var(--cp-paper) !important;
        border-bottom: 1px solid var(--cp-line);
        box-shadow: var(--cp-shadow-sm);
    }

    /* The drawer is nested inside that panel, so the panel stays rendered
       (just empty-looking) while the drawer is open. */
    .cp-theme.cp-l2 .header.cp-brandbar .topbar:has(.header-menu-wrapper-on),
    .cp-theme.cp-l9 .header-top .topbar:has(.header-menu-wrapper-on),
    .cp-theme.cp-l12 .header-top .topbar:has(.header-menu-wrapper-on) { display: flex; padding: 0; border: 0; box-shadow: none; height: 0; }

    .cp-theme.cp-l2.topbar-mobile-on .header.cp-brandbar .topbar,
    .cp-theme.cp-l9.topbar-mobile-on .header-top .topbar,
    .cp-theme.cp-l12.topbar-mobile-on .header-top .topbar { display: flex; }

    .cp-theme .topbar .cp-search { flex: 1 1 auto; width: auto; }
    .cp-theme .topbar .cp-search--onbrand .cp-search__input { background: var(--cp-mist); color: var(--cp-ink); }
    .cp-theme .topbar .cp-search--onbrand .cp-search__icon { color: var(--cp-ink-45); }
    .cp-theme .topbar .cp-search--onbrand .cp-search__input::placeholder { color: var(--cp-ink-45); }
    .cp-theme .topbar .cp-user--onbrand .cp-user__toggle { background: var(--cp-mist); }
    .cp-theme .topbar .cp-user--onbrand .cp-user__avatar { background: var(--cp-brand); color: var(--cp-on-brand); }
    .cp-theme .topbar .cp-search--compact { display: flex; }
}

/* general.js paints .text-primary (and dropdown text) in the raw company
   colour; a pale brand would vanish on white, so text uses the readable
   variant. */
.cp-theme .text-primary,
.cp-theme a.text-primary,
.cp-theme a.text-primary:hover,
.cp-theme .navi .navi-item .navi-link .navi-text { color: var(--cp-brand-text) !important; }

/* ======================================================== RECORD PAGES ==
   A single record (a package, a pre-alert): a header card that answers
   "what is it and where is it", then the detail cards. Ported from the
   admin's record header. */

.cp-cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cp-theme .cp-cardhead .card-title,
.cp-theme .card .card-body .cp-cardhead .card-title { margin-bottom: .1875rem; }
.cp-cardhead__sub { margin: 0; font-size: .75rem; color: var(--cp-ink-45); }

.cp-profile__top { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

.cp-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-brand-soft);
    color: var(--cp-brand-text);
    font-size: 1.25rem;
}

.cp-profile__id { flex: 1 1 260px; min-width: 0; }

.cp-theme .cp-profile__name {
    font-family: var(--cp-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--cp-ink);
    margin: 0;
}

/* A tracking number is one unbroken token; it may break anywhere rather
   than run off a phone. */
.cp-theme .cp-profile__name--code {
    font-family: var(--cp-mono);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cp-profile__sub { margin: .25rem 0 0; font-size: .875rem; color: var(--cp-ink-60); }
.cp-profile__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: .625rem 0 0; }

.cp-profile__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--cp-line);
}

.cp-fact__label,
.cp-def__label {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
    margin: 0 0 .25rem;
}

.cp-fact__value,
.cp-def__value {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cp-ink);
    word-break: break-word;
}

.cp-fact__value--muted,
.cp-def__value--muted { color: var(--cp-ink-45); font-weight: 400; font-style: italic; }

.cp-fact__hint { display: block; margin-top: .125rem; font-size: .6875rem; font-weight: 500; color: var(--cp-ink-45); }

.cp-def { display: grid; gap: .875rem; margin: 0; }
.cp-def--2 { grid-template-columns: 1fr 1fr; }

/* A note left on the package by the warehouse. */
.cp-note {
    display: flex;
    gap: .625rem;
    margin: 1.25rem 0 0;
    padding: .75rem .875rem;
    border-radius: var(--cp-r-field);
    background: var(--cp-yellow-soft);
    color: var(--cp-yellow-ink);
    font-size: .8125rem;
    line-height: 1.55;
}

.cp-note i { margin-top: .1875rem; color: inherit; }
.cp-note b { display: block; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }

.cp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--cp-line);
}

.cp-actions .btn i { margin-right: .375rem; color: inherit; }

@media (max-width: 575.98px) {
    .cp-actions .btn { flex: 1 1 auto; }
}

/* Where the package is, and where its customer collects from. Each badge
   carries its own label so the two places can't be confused. */
.cp-wheretag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--cp-r-pill);
    font-size: .75rem;
    line-height: 1.3;
}

.cp-theme .cp-wheretag i { font-size: .75rem; opacity: .8; color: inherit; }
.cp-wheretag__label { font-weight: 600; opacity: .72; }
.cp-wheretag__label::after { content: ":"; }
.cp-wheretag__value { font-weight: 700; }
.cp-wheretag--branch { background: var(--cp-sky); border-color: rgba(58, 79, 214, .18); color: var(--cp-blue); }
.cp-wheretag--location { background: var(--cp-green-soft); border-color: rgba(18, 128, 92, .18); color: var(--cp-green); }

/* ------------------------------------------------------------ charges - */

.cp-charges { margin: 0; }
.cp-theme .cp-charges td { vertical-align: middle; }
.cp-charge__title { font-weight: 600; color: var(--cp-ink); }
.cp-charge__amount { font-family: var(--cp-display); font-weight: 700; white-space: nowrap; }
.cp-charge__amount.is-discount { color: var(--cp-green); }

.cp-theme .cp-charges__subtotal td,
.cp-theme .cp-charges__total td {
    border-top: 1px solid var(--cp-line-strong);
    font-weight: 700;
    color: var(--cp-ink);
}

.cp-theme .cp-charges__total td {
    border-top: 2px solid var(--cp-ink);
    font-family: var(--cp-display);
    font-size: 1rem;
    font-weight: 800;
}

.cp-theme .cp-charges tbody tr.cp-charges__subtotal:hover,
.cp-theme .cp-charges tbody tr.cp-charges__total:hover { background: transparent; }

/* --------------------------------------------------------- attachments - */

.cp-attach {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-field);
    background: var(--cp-paper);
    margin-bottom: .5rem;
    transition: border-color .15s ease;
}

.cp-attach:hover { border-color: var(--cp-line-strong); }

.cp-attach__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--cp-mist);
    color: var(--cp-ink-45);
}

.cp-theme .cp-attach__icon i { color: inherit; }
.cp-attach__body { flex: 1 1 auto; min-width: 0; }
.cp-theme a.cp-attach__name { display: block; font-size: .8125rem; font-weight: 600; color: var(--cp-ink); word-break: break-word; }
.cp-theme a.cp-attach__name:hover { color: var(--cp-brand-text); }
.cp-attach__meta { margin: 0; font-size: .6875rem; color: var(--cp-ink-45); }

.cp-attach__del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--cp-ink-45) !important;
}

.cp-attach__del:hover { background: var(--cp-red-soft); color: var(--cp-red) !important; text-decoration: none; }
.cp-theme .cp-attach__del i { color: inherit; }

.cp-attach__empty {
    padding: 1rem;
    margin-bottom: .75rem;
    border: 1px dashed var(--cp-line-strong);
    border-radius: var(--cp-r-field);
    text-align: center;
    font-size: .8125rem;
    color: var(--cp-ink-45);
}

/* Drop zone for uploading a file. The real input is hidden inside the
   label, so the whole zone is the click target. */
.cp-drop {
    position: relative;
    display: block;
    padding: 1.5rem 1.25rem;
    margin: 0;
    border: 2px dashed var(--cp-line-strong);
    border-radius: var(--cp-r-card);
    background: var(--cp-rail);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.cp-drop:hover, .cp-drop.is-over { border-color: var(--cp-ink); background: var(--cp-sky); }
.cp-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cp-theme .cp-drop__icon { font-size: 1.375rem; color: var(--cp-ink-45); }
.cp-drop__title { display: block; font-family: var(--cp-display); font-weight: 700; font-size: .9375rem; margin: .5rem 0 .1875rem; color: var(--cp-ink); }
.cp-drop__hint { display: block; font-size: .75rem; color: var(--cp-ink-45); margin: 0; }
.cp-drop.has-file { border-style: solid; border-color: var(--cp-green); background: var(--cp-green-soft); }
.cp-drop.has-file .cp-drop__title { color: var(--cp-green); }

.cp-upload__foot { display: flex; justify-content: flex-end; margin-top: .75rem; }

/* Linked records in the side column (pre-alert, shop request). */
.cp-linked__empty { margin: 0 0 1rem; font-size: .8125rem; line-height: 1.55; color: var(--cp-ink-45); }
.cp-linked__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.cp-linked__actions .btn { flex: 1 1 auto; }

/* The Inkress pay button keeps Inkress's own styling, sized to sit in
   a row of pill buttons. */
.cp-actions #inkress-btn { margin: 0; }

.cp-theme .cp-avatar i { color: inherit; }

/* Metronic enlarges any icon inside a .btn; in the theme's action rows the
   icon sits at text size. */
.cp-theme .cp-actions .btn i,
.cp-theme .cp-linked__actions .btn i {
    font-size: .8125rem;
    padding: 0;
    line-height: 1;
    vertical-align: -1px;
}

/* Sign-in on a phone: the form sits inside four nested wrappers that each
   add side padding, which left a 233px card on a 390px screen. The wrappers
   give up their gutters and the card keeps one 16px margin a side. */
@media (max-width: 575.98px) {
    /* Metronic's mx-auto makes this column shrink to fit its content. */
    .cp-auth .login-content { width: 100%; padding-left: 1rem !important; padding-right: 1rem !important; }
    .cp-auth .login-content .container,
    .cp-auth .login-content .flex-center { padding-left: 0 !important; padding-right: 0 !important; }
    /* The login page's own <main>/<section> are centred flex items with no
       width, so they shrink to their content unless told to fill the row. */
    .cp-auth .login-content main,
    .cp-auth .login-content main > section { width: 100%; }
    .cp-auth .w-lg-500px.bg-white.rounded {
        width: 100%;
        max-width: none;
        padding: 1.75rem 1.25rem !important;
    }
}

/* A destructive action that sits in a row of quiet buttons: quiet until
   hovered, then plainly red. */
.cp-theme .btn.cp-btn-danger { color: var(--cp-red); }
.cp-theme .btn.cp-btn-danger:hover { background: var(--cp-red-soft); border-color: rgba(192, 57, 43, .3); color: var(--cp-red); }

.cp-theme .cp-pill i { color: inherit; font-size: .75em; }

/* A second line under a charge or item: what it is, in smaller type. */
.cp-charge__sub { display: block; margin-top: .125rem; font-size: .75rem; color: var(--cp-ink-45); }
.cp-theme a.cp-charge__title { color: var(--cp-ink); }
.cp-theme a.cp-charge__title:hover { color: var(--cp-brand-text); }

.cp-avatar--sm { width: 36px; height: 36px; border-radius: 10px; font-size: .875rem; }
.cp-theme .cp-addr { margin-bottom: 0; }

/* ===================================================== STEPPED FORMS ==
   A long form broken into numbered cards (new delivery request). */

.cp-stephead {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    margin-bottom: 1.25rem;
}

.cp-stephead__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cp-ink);
    color: #fff;
    font-family: var(--cp-display);
    font-size: .8125rem;
    font-weight: 800;
}

.cp-theme .cp-stephead .card-title { margin-bottom: .1875rem; }

/* Selectable rows: the whole row is the click target for its checkbox. */
.cp-lines { display: flex; flex-direction: column; gap: .5rem; }

.cp-line {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-field);
    background: var(--cp-paper);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.cp-line:hover { border-color: var(--cp-line-strong); background: var(--cp-rail); }

.cp-line.is-selected {
    border-color: var(--cp-ink);
    background: var(--cp-paper);
    box-shadow: inset 3px 0 0 var(--cp-yellow), var(--cp-shadow-sm);
}

.cp-line__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cp-line__input:focus-visible + .cp-line__check { outline: 3px solid rgba(18, 25, 58, .35); outline-offset: 2px; }

.cp-line__check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--cp-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .6875rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cp-theme .cp-line__check i { color: inherit; }
.cp-line.is-selected .cp-line__check { background: var(--cp-ink); border-color: var(--cp-ink); color: var(--cp-yellow); }

.cp-line__body { flex: 1 1 auto; min-width: 0; }
.cp-line__tracking { display: block; font-family: var(--cp-mono); font-size: .875rem; font-weight: 700; color: var(--cp-ink); overflow-wrap: anywhere; }
.cp-line__meta { display: block; margin-top: .125rem; font-size: .75rem; color: var(--cp-ink-45); }

.cp-line__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.cp-line__weight { font-family: var(--cp-display); font-size: .875rem; font-weight: 700; color: var(--cp-ink); }

.cp-fielderror { margin: .625rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--cp-red); }

/* Radio options with a line of explanation each, as a grid of boxes. */
.cp-payopts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.cp-radioopt {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: .75rem .875rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-field);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

/* delivery.js hides the options an area doesn't take with the `hidden`
   attribute, which a display rule would otherwise override. */
.cp-radioopt[hidden] { display: none !important; }

.cp-radioopt:hover { border-color: var(--cp-line-strong); background: var(--cp-rail); }
.cp-radioopt:has(input:checked) { border-color: var(--cp-ink); box-shadow: inset 3px 0 0 var(--cp-yellow); }
.cp-radioopt.is-disabled { opacity: .5; cursor: not-allowed; }

.cp-theme .cp-radioopt input[type="radio"] {
    flex: 0 0 auto;
    margin-top: .1875rem;
    width: 16px;
    height: 16px;
    accent-color: var(--cp-brand);
}

.cp-radioopt__name { display: block; font-size: .875rem; font-weight: 700; color: var(--cp-ink); text-transform: none; letter-spacing: 0; }
.cp-radioopt__sub { display: block; margin-top: .125rem; font-size: .75rem; line-height: 1.5; color: var(--cp-ink-45); text-transform: none; letter-spacing: 0; }

/* A note that spans its card (area notes, payment notes). */
.cp-note--block { margin-top: 0; }
.cp-note--block div > div > p:last-child { margin-bottom: 0; }

.cp-submitbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cp-line);
}

.cp-submitbar__count { font-size: .8125rem; font-weight: 600; color: var(--cp-ink-60); }

@media (max-width: 575.98px) {
    .cp-submitbar .btn { width: 100%; }
}

.cp-sticky { position: sticky; top: 1.5rem; }

/* Numbered steps with a connecting rule. */
.cp-steps { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: cpstep; }

.cp-step {
    position: relative;
    counter-increment: cpstep;
    padding: 0 0 1.125rem 1.75rem;
    border-left: 2px solid var(--cp-line);
    margin-left: .75rem;
}

.cp-step:last-child { border-left-color: transparent; padding-bottom: 0; }

.cp-step::before {
    content: counter(cpstep);
    position: absolute;
    left: -0.8125rem;
    top: -0.125rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-mist);
    color: var(--cp-ink);
    font-family: var(--cp-display);
    font-size: .6875rem;
    font-weight: 800;
}

.cp-step__text { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--cp-ink-60); }
.cp-step__text strong { color: var(--cp-ink); }

/* jQuery UI's date picker, in the theme's terms rather than its 2010 grey. */
.ui-datepicker {
    padding: .625rem;
    border: 1px solid var(--cp-line) !important;
    border-radius: 14px;
    background: var(--cp-paper) !important;
    box-shadow: var(--cp-shadow-md);
    font-family: var(--cp-body);
    font-size: .8125rem;
    z-index: 1050 !important;
}

.ui-datepicker .ui-datepicker-header { border: 0; background: transparent; color: var(--cp-ink); font-family: var(--cp-display); font-weight: 800; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; }
.ui-datepicker th { font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-ink-45); }
.ui-datepicker td a.ui-state-default {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cp-ink);
    text-align: center;
    font-weight: 600;
    padding: .375rem 0;
}
.ui-datepicker td a.ui-state-default:hover { background: var(--cp-mist); }
.ui-datepicker td a.ui-state-highlight { box-shadow: inset 0 0 0 1px var(--cp-line-strong); }
.ui-datepicker td a.ui-state-active { background: var(--cp-ink); color: #fff; }
.ui-datepicker td.ui-state-disabled span { border: 0; background: transparent; text-align: center; opacity: .35; }

.cp-theme small.form-text,
.cp-theme .form-text { font-size: .75rem; color: var(--cp-ink-45); margin-top: .375rem; }

/* cp-link-quiet is also used on <button>s. */
button.cp-link-quiet { border: 0; background: transparent; cursor: pointer; }

@media (max-width: 575.98px) {
    .cp-line { gap: .625rem; padding: .75rem; }
    .cp-line__tracking { font-size: .8125rem; }
}

/* =========================================================== SHOP FOR ME */

.cp-productimg {
    flex: 0 0 auto;
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 14px;
    border: 1px solid var(--cp-line);
    background: var(--cp-paper);
    overflow: hidden;
}

.cp-productimg img { width: 100%; height: 100%; object-fit: contain; }

.cp-thumb {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--cp-line);
    background: var(--cp-paper);
    overflow: hidden;
}

.cp-thumb img { width: 100%; height: 100%; object-fit: contain; }

.cp-def--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem; }

/* A section label inside a longer form. */
.cp-formsection {
    margin: 1.25rem 0 .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cp-line);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cp-ink);
}

.cp-formsection:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.cp-optional { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cp-ink-45); }

/* A vertical progress list: done steps filled, the rest hollow. */
.cp-track { list-style: none; margin: 0; padding: 0; }

.cp-track__step {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: .75rem;
    padding-bottom: 1.125rem;
}

.cp-track__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--cp-line);
}

.cp-track__step.is-done:not(:last-child)::before { background: var(--cp-green); }

.cp-track__dot {
    grid-row: span 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--cp-line-strong);
    background: var(--cp-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .625rem;
}

.cp-track__step.is-done .cp-track__dot { border-color: var(--cp-green); background: var(--cp-green); color: #fff; }
.cp-theme .cp-track__dot i { color: inherit; }
.cp-track__label { font-size: .875rem; font-weight: 600; color: var(--cp-ink-45); line-height: 24px; }
.cp-track__step.is-done .cp-track__label { color: var(--cp-ink); }
.cp-track__when { font-size: .75rem; color: var(--cp-ink-45); }

/* ========================================================= CALCULATOR */

.cp-quickrate__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.cp-theme .cp-quickrate .card-title { margin-bottom: .1875rem; }

.cp-quickrate__result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: .75rem 1rem;
    border-radius: var(--cp-r-field);
    background: var(--cp-rail);
    border: 1px solid var(--cp-line);
}

.cp-quickrate__label { font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-45); }

.cp-quickrate__value {
    font-family: var(--cp-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--cp-ink);
    transition: opacity .15s ease;
}

.cp-quickrate__value.is-loading,
.cp-calcresult.is-loading { opacity: .45; }

@media (max-width: 767.98px) {
    .cp-quickrate__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .cp-quickrate__grid > div:first-child { grid-column: 1 / -1; }
    .cp-quickrate__value { font-size: 1.375rem; }
}

/* A number field with its unit inside the box. */
.cp-unitfield { position: relative; }
.cp-theme .cp-unitfield .form-control { padding-right: 3.25rem; font-family: var(--cp-display); font-weight: 700; font-size: 1rem; }

.cp-unitfield__unit {
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--cp-ink-45);
    pointer-events: none;
}

.cp-quickrate .cp-unitfield .form-control { height: 52px; font-size: 1.25rem; }

/* A field label that isn't a <label> (it names a group of radios). */
.cp-fieldlabel {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--cp-ink-45);
    margin-bottom: .4375rem;
}

/* Two or three choices as one pill-shaped switch. */
.cp-segment {
    display: flex;
    padding: 3px;
    border-radius: var(--cp-r-pill);
    background: var(--cp-mist);
    border: 1px solid var(--cp-line);
}

.cp-segment__opt { flex: 1 1 0; margin: 0; cursor: pointer; }
.cp-segment__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.cp-segment__opt span {
    display: block;
    padding: .5rem .75rem;
    border-radius: var(--cp-r-pill);
    text-align: center;
    font-family: var(--cp-display);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--cp-ink-45);
    text-transform: none;
    letter-spacing: 0;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.cp-segment__opt input:checked + span { background: var(--cp-paper); color: var(--cp-ink); box-shadow: var(--cp-shadow-sm); }
.cp-segment__opt input:focus-visible + span { outline: 3px solid rgba(18, 25, 58, .35); outline-offset: 1px; }

/* The estimate. */
.cp-calcresult__empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--cp-ink-45);
}

.cp-theme .cp-calcresult__empty i { display: block; margin-bottom: .75rem; font-size: 1.75rem; color: var(--cp-line-strong); }
.cp-calcresult__empty p { margin: 0 auto; max-width: 320px; font-size: .875rem; }
.cp-calcresult__empty[hidden], .cp-calcresult[hidden], .cp-calcresult tr[hidden] { display: none !important; }

.cp-calcresult { transition: opacity .15s ease; }

.cp-calcresult__total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .625rem;
    padding-bottom: 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 2px solid var(--cp-ink);
}

.cp-calcresult__total .cp-eyebrow { flex-basis: 100%; }

.cp-calcresult__amount {
    font-family: var(--cp-display);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--cp-ink);
}

.cp-calcresult__currency { font-size: .875rem; font-weight: 700; color: var(--cp-ink-45); }

.cp-theme .cp-calcresult__table td { padding: .625rem .25rem; }
.cp-theme .cp-calcresult__table tbody tr:hover { background: transparent; }

.cp-theme .cp-calcresult__group th {
    padding: 1.25rem .25rem .375rem;
    border-top: 0;
    border-bottom: 1px solid var(--cp-line-strong);
    color: var(--cp-ink) !important;
}

.cp-calcresult__note { font-size: .8125rem; color: var(--cp-ink-45); font-style: italic; }

@media (max-width: 575.98px) {
    .cp-calcresult__amount { font-size: 2rem; }
}

/* ============================================================= PROFILE */

.cp-avatar--initials {
    border-radius: 50%;
    font-family: var(--cp-display);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    background: var(--cp-brand);
    color: var(--cp-on-brand);
}

.cp-avatar--sm.cp-avatar--initials { font-size: .8125rem; }

.cp-theme a.cp-fact__hint { font-weight: 700; color: var(--cp-brand-text); }

/* Home and delivery address side by side. */
.cp-addrpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

.cp-addrtile {
    padding: 1rem 1.125rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-card);
    background: var(--cp-paper);
}

.cp-addrtile.is-empty { border-style: dashed; border-color: var(--cp-line-strong); background: var(--cp-rail); }
.cp-addrtile__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cp-addrtile__empty { margin: 0; font-size: .8125rem; color: var(--cp-ink-45); font-style: italic; }

/* A person in a list (authorized users). */
.cp-person {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--cp-line);
}

.cp-person:first-of-type { border-top: 0; padding-top: 0; }
.cp-person__body { flex: 1 1 auto; min-width: 0; }
.cp-person__name { display: block; font-size: .875rem; font-weight: 700; color: var(--cp-ink); }
.cp-person__meta { display: block; font-size: .75rem; color: var(--cp-ink-45); overflow-wrap: anywhere; }
button.cp-attach__del { border: 0; background: transparent; cursor: pointer; }

/* The mailbox number, shown large where it's the point of the card. */
.cp-mailboxcard__num {
    margin: 0;
    font-family: var(--cp-mono);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cp-ink);
}

.cp-mailboxcard__hint { margin: .5rem 0 1rem; font-size: .8125rem; line-height: 1.55; color: var(--cp-ink-60); }

/* ========================================================== ADDRESSES */

.cp-addrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.cp-addrgrid .cp-addrcard { box-shadow: none; }

.cp-addrcard__notes {
    margin: .75rem 0 0;
    padding-top: .625rem;
    border-top: 1px dashed var(--cp-line-strong);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--cp-ink-60);
}

.cp-theme .card-title .cp-cardicon { margin-right: .5rem; font-size: .875em; color: var(--cp-brand-text); }

/* ============================================================ CONTACT */

.cp-contactbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

.cp-theme a.cp-contactway {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-card);
    background: var(--cp-paper);
    box-shadow: var(--cp-shadow-sm);
    color: var(--cp-ink);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.cp-theme a.cp-contactway:hover { border-color: var(--cp-ink); transform: translateY(-1px); box-shadow: var(--cp-shadow-md); }

.cp-contactway__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-brand-soft);
    color: var(--cp-brand-text);
    font-size: 1rem;
}

.cp-theme .cp-contactway__icon i { color: inherit; }
.cp-contactway__label { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-ink-45); }
.cp-contactway__value { display: block; font-family: var(--cp-display); font-size: .9375rem; font-weight: 700; color: var(--cp-ink); overflow-wrap: anywhere; }

.cp-officegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.cp-theme .cp-office { margin: 0; }
.cp-office__head { display: flex; align-items: center; gap: .625rem; margin-bottom: .875rem; }

.cp-theme .cp-office__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cp-office__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cp-line); }

/* ============================================================ NOTICES */

.cp-inbox { border: 1px solid var(--cp-line); border-radius: var(--cp-r-field); overflow: hidden; }

.cp-inbox__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .875rem 1rem;
    border: 0;
    border-top: 1px solid var(--cp-line);
    background: var(--cp-paper);
    text-align: left;
    font-family: var(--cp-body);
    cursor: pointer;
    transition: background .14s ease;
}

.cp-inbox__item:first-of-type { border-top: 0; }
.cp-inbox__item:hover { background: var(--cp-mist); }

.cp-inbox__dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.cp-inbox__subject { flex: 1 1 auto; min-width: 0; font-size: .875rem; font-weight: 500; color: var(--cp-ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-inbox__date { flex: 0 0 auto; font-size: .75rem; color: var(--cp-ink-45); }

.cp-inbox__item.is-unread { background: var(--cp-rail); }
.cp-inbox__item.is-unread .cp-inbox__dot { background: var(--cp-blue); }
.cp-inbox__item.is-unread .cp-inbox__subject { font-weight: 700; color: var(--cp-ink); }
.cp-inbox__item.is-unread .cp-inbox__date { font-weight: 600; color: var(--cp-ink-60); }

.cp-noticebody { font-size: .9375rem; line-height: 1.65; color: var(--cp-ink-90); }
.cp-noticebody img { max-width: 100%; height: auto; }
.cp-noticebody p:last-child { margin-bottom: 0; }

/* Metronic sizes any icon inside a .btn at 1.3rem with trailing padding;
   Font Awesome 6 icons in buttons sit at text size instead. */
.cp-theme .btn > i[class*="fa-"] { font-size: .875em; padding-right: 0; line-height: 1; vertical-align: -1px; }
.cp-theme .cp-copy i { font-size: .75rem; }

/* A heading that introduces a group of cards rather than sitting in one. */
.cp-theme .cp-sectiontitle { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }

/* In a grid of address cards the copy button keeps to the icon. */
.cp-addrgrid .cp-copy span { display: none; }

.cp-theme .cp-addrtile i,
.cp-theme .cp-person i { color: inherit; }

/* ============================================================ MODALS */

/* A smaller drop zone, for two side by side in a form. */
.cp-drop--compact { padding: 1rem .875rem; }
.cp-theme .cp-drop--compact .cp-drop__icon { font-size: 1.125rem; }
.cp-drop--compact .cp-drop__title { font-size: .875rem; margin-top: .375rem; }

/* profile.js writes its password checks into these; empty until it does. */
.cp-pwdmsg:empty { display: none; }
.cp-pwdmsg {
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: var(--cp-r-field);
    background: var(--cp-mist);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cp-ink-60);
}

/* Multiple-choice tags as pill checkboxes. */
.cp-typebox { display: flex; flex-wrap: wrap; gap: .5rem; }

.cp-typeopt {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    padding: .375rem .75rem;
    border: 1px solid var(--cp-line-strong);
    border-radius: var(--cp-r-pill);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cp-ink-60);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.cp-typeopt:hover { border-color: var(--cp-ink); color: var(--cp-ink); }
.cp-typeopt:has(input:checked) { border-color: var(--cp-ink); background: var(--cp-sky); color: var(--cp-ink); }
.cp-theme .cp-typeopt input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--cp-brand); }

/* Modal headers carry a title and one line of context. */
.cp-theme .modal-header { align-items: flex-start; }
.cp-theme .modal-header .cp-cardhead__sub { margin-top: .25rem; }
[data-cp-parish][hidden], [data-cp-statetext][hidden] { display: none !important; }

/* Metronic's .modal .modal-header .modal-title outranks the theme's title rule. */
.cp-theme .modal .modal-header .modal-title {
    font-family: var(--cp-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp-ink);
}

.cp-theme .cp-typebox .cp-typeopt,
.cp-theme .cp-typebox .cp-typeopt span { font-size: .8125rem; font-weight: 600; }

/* ============================================================ SUPPORT */

.cp-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }

.cp-msg {
    padding: 1rem 1.125rem;
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-r-card);
    background: var(--cp-paper);
}

/* Replies from the company read as theirs: tinted, with a brand rule. */
.cp-msg--staff {
    background: var(--cp-rail);
    border-color: var(--cp-line);
    box-shadow: inset 3px 0 0 var(--cp-brand);
}

.cp-msg__head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.cp-msg__who { font-family: var(--cp-display); font-size: .875rem; font-weight: 800; color: var(--cp-ink); }
.cp-msg__badge { padding: .125rem .5rem; font-size: .625rem; }
.cp-msg__when { font-size: .75rem; color: var(--cp-ink-45); }

.cp-msg__delete {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cp-ink-45);
    cursor: pointer;
}

.cp-msg__delete:hover { background: var(--cp-red-soft); color: var(--cp-red); }
.cp-theme .cp-msg__delete i { color: inherit; }

.cp-msg__body { font-size: .875rem; line-height: 1.65; color: var(--cp-ink-90); overflow-wrap: anywhere; }
.cp-msg__body p:last-child { margin-bottom: 0; }
.cp-msg__body img { max-width: 100%; height: auto; }

/* Attachments as chips. */
.cp-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }

.cp-file {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cp-line-strong);
    border-radius: var(--cp-r-pill);
    background: var(--cp-paper);
    overflow: hidden;
}

.cp-theme a.cp-file__link {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .375rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--cp-ink);
}

.cp-theme a.cp-file__link:hover { background: var(--cp-mist); text-decoration: none; }
.cp-theme .cp-file__link i { color: var(--cp-brand-text); }
.cp-file__ext { font-size: .625rem; font-weight: 700; letter-spacing: .04em; color: var(--cp-ink-45); }

.cp-file__remove {
    align-self: stretch;
    padding: 0 .625rem;
    border: 0;
    border-left: 1px solid var(--cp-line);
    background: transparent;
    color: var(--cp-ink-45);
    cursor: pointer;
}

.cp-file__remove:hover { background: var(--cp-red-soft); color: var(--cp-red); }
.cp-theme .cp-file__remove i { color: inherit; }

.cp-closed {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
    padding: .875rem 1rem;
    border-radius: var(--cp-r-field);
    background: var(--cp-green-soft);
    color: var(--cp-green);
    font-size: .8125rem;
    line-height: 1.55;
}

.cp-theme .cp-closed i { margin-top: .1875rem; color: inherit; }
.cp-closed b { display: block; }

/* Summernote, the rich-text editor on the ticket forms. */
.cp-theme .note-editor.note-frame {
    border: 1px solid var(--cp-line-strong);
    border-radius: var(--cp-r-field);
    overflow: hidden;
}

.cp-theme .note-editor.note-frame .note-toolbar {
    background: var(--cp-rail);
    border-bottom: 1px solid var(--cp-line);
    padding: .375rem .5rem;
}

.cp-theme .note-editor .note-btn {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cp-ink-60);
    padding: .25rem .5rem;
}

.cp-theme .note-editor .note-btn:hover,
.cp-theme .note-editor .note-btn.active { background: var(--cp-paper); color: var(--cp-ink); }
.cp-theme .note-editor .note-editing-area .note-editable { font-family: var(--cp-body); font-size: .875rem; color: var(--cp-ink); padding: .875rem 1rem; }
.cp-theme .note-editor .note-placeholder { padding: .875rem 1rem; color: var(--cp-ink-45); }
.cp-theme .note-editor .note-statusbar { background: var(--cp-rail); border-top: 1px solid var(--cp-line); }
.cp-theme .note-editor.note-frame.focus { border-color: var(--cp-ink); box-shadow: 0 0 0 3px rgba(18, 25, 58, .1); }
.cp-upload__foot .btn i { margin-right: .375rem; }

/* ======================================================= VERIFY EMAIL */

/* Placeholder tiles behind the verification pop-up; no data in them. */
.cp-gate { filter: blur(2px); opacity: .6; pointer-events: none; user-select: none; }
.cp-gate__tile .card-body { display: flex; flex-direction: column; gap: .75rem; min-height: 140px; }
.cp-gate__tile--tall .card-body { min-height: 260px; }
.cp-gate__tile span { display: block; height: 14px; border-radius: 7px; background: var(--cp-line); }
.cp-gate__tile span:first-child { width: 40%; }
.cp-gate__tile span:nth-child(2) { width: 25%; height: 28px; }
.cp-gate__tile span:nth-child(3) { width: 70%; }

.cp-verify .modal-body { padding: 2.25rem 2rem 1.75rem; text-align: center; }

.cp-verify__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--cp-brand-soft);
    color: var(--cp-brand-text);
    font-size: 1.625rem;
}

.cp-theme .cp-verify__icon i { color: inherit; }

.cp-theme .cp-verify__title { margin: 0 0 .5rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; }
.cp-verify__text { margin: 0 auto 1.5rem; max-width: 360px; font-size: .9375rem; line-height: 1.6; color: var(--cp-ink-60); }
.cp-verify__text b { color: var(--cp-ink); overflow-wrap: anywhere; }

.cp-verify__actions { display: grid; gap: .5rem; }
.cp-verify__actions .btn i { margin-right: .5rem; }

.cp-verify__status:empty { display: none; }
.cp-verify__status { margin: .875rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--cp-ink-60); }
.cp-verify__status.is-ok { color: var(--cp-green); }
.cp-verify__status.is-error { color: var(--cp-red); }

.cp-verify__foot { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--cp-line); font-size: .8125rem; line-height: 1.7; color: var(--cp-ink-45); }

/* The verification pop-up hides the page completely: a heavy blur and
   greyscale under a dark tint, so nothing behind it can be read. Scoped to
   the page that carries #verifyModal; other modals keep their normal dimming. */
body:has(#verifyModal) .modal-backdrop,
body:has(#verifyModal) .modal-backdrop.show {
    opacity: 1;
    background: rgba(18, 25, 58, .72);
    -webkit-backdrop-filter: blur(18px) grayscale(1);
    backdrop-filter: blur(18px) grayscale(1);
}

/* Browsers without backdrop-filter get a near-solid cover instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body:has(#verifyModal) .modal-backdrop,
    body:has(#verifyModal) .modal-backdrop.show { background: rgba(18, 25, 58, .96); }
}