/* =========================================================================
   cabinet.css
   ---------------------------------------------------------------------
   The client cabinet's own stylesheet, matching the visual language of
   the www.3axid.com landing page (Webflow export, see
   assets/landing.webflow.css). This file is loaded LAST, after the
   handful of small class-namespaced legacy files (footable,
   common_admin*.css, pickup/address-point, notifications, redirect-ue -
   see page_header.tpl) and assets/landing.webflow.css, so its rules win
   the cascade on equal-specificity collisions.

   Cabinet content is Bootstrap 5 vocabulary. Stock, unmodified
   Bootstrap 5.3.8 loads first (assets/bootstrap-5.3.8/, see its README);
   this file is the SKIN over it. There is no build step and no
   #frontendr-body container. Theming goes through Bootstrap's runtime
   --bs-* custom properties wherever the component exposes them
   (section 1c) rather than by restating stock declarations.

   Markup still speaks Bootstrap 3 in places, and must keep doing so:
   themes/frontendr (the mobile-app webview) renders the same PHP-emitted
   markup against its own real Bootstrap 3, so PHP may never be
   re-vocabularised for 3axid's benefit. Section 26 is the BS3-compat
   shim that makes that legacy vocabulary render correctly here.

   IMPORTANT collision notes:
   - The 11 landing classes that collided with Bootstrap (btn, card,
     container, dropdown, hide, input, link, nav, navbar-brand, section,
     small) carry a "wf-" prefix in landing.webflow.css, in the chrome
     templates and in the chrome rules below - see
     doc/tools/wf_prefix_rename.py. A bare .btn/.card/.container here
     therefore means BOOTSTRAP, and .wf-btn/.wf-card/.wf-container means
     the landing design. Do not reintroduce a bare collision token for
     chrome.
   - landing.webflow.css still defines generic ELEMENT selectors (body,
     h1-h6, a, input, button, ul, p). Those load after Bootstrap's Reboot
     and deliberately win it, so the cabinet reads as the landing rather
     than as stock Bootstrap; where a component needs a Reboot value
     back, re-pin it here (this file loads last).
   - Everything rendered inside .cabinet-content is styled here using
     selectors prefixed with that class (e.g. ".cabinet-content .btn",
     ".cabinet-content .form-control") - a class-prefixed selector at
     equal specificity still wins by loading last, but the prefix also
     keeps these rules from leaking onto the landing header/footer
     outside .cabinet-content. The one exception is inherited properties
     (font-size/font-family/color on body cascade down through
     inheritance, not selector matching) - this file pins those back
     explicitly on .cabinet-content.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
    --blue--brand: #2d42aa;
    --brand--orange: #ed6b38;
    --text--body: #3b475a;
    --text--heading: #1c2333;
    --border--input: #8b94a5;
    --hover--blue: #0050bd;
    --btn--hover-blue: #3550c8;
    --btn--grey-bg: #e9edf4;
    --btn--grey-bg-hover: #cfd6e3;
    --card--shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    --section--grey-bg: #eef1f5;
    --footer--bg: #1c2333;
    --font-heading: 'Montserrat', Arial, sans-serif;
    --font-body: 'Inter', Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   1c. Bootstrap 5 runtime-variable bridge
   ---------------------------------------------------------------------
   Maps the design tokens above onto Bootstrap's own custom properties, so
   stock components come out in the landing's colours/typography WITHOUT
   restating Bootstrap's declarations and without a Sass build.

   Scoped to .cabinet-content on purpose: only cabinet CONTENT renders
   Bootstrap components. The chrome is Webflow (wf-*) and must never be
   reached by these. Custom properties inherit, so everything inside the
   scope - including markup Bootstrap generates at runtime inside it -
   picks these up.

   Two things Bootstrap 5.3 does NOT expose as component variables, so
   they are set as plain declarations elsewhere in this file, not here:
     - .form-control / .form-select: no --bs-form-control-* namespace
       exists; inputs read the GLOBAL --bs-body-bg / --bs-border-width /
       --bs-border-radius (see section 7).
     - .progress: no variables at all in 5.3.8.
   ------------------------------------------------------------------------- */
.cabinet-content {
    /* global */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text--body);
    --bs-body-bg: #fff;
    --bs-emphasis-color: var(--text--heading);
    --bs-secondary-color: #7a8fa4;
    --bs-primary: var(--blue--brand);
    --bs-primary-rgb: 45, 66, 170;
    --bs-link-color: var(--blue--brand);
    --bs-link-color-rgb: 45, 66, 170;
    --bs-link-hover-color: var(--hover--blue);
    --bs-border-color: #dfe4ec;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 16px;
}

/* Buttons - the landing recipe, expressed as Bootstrap's own variables.
   Only the bits stock Bootstrap cannot express as a variable
   (text-transform, transition) stay as declarations. */
.cabinet-content .btn {
    --bs-btn-font-family: var(--font-heading);
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: 12px;
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 10px;
    --bs-btn-border-width: 0;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 8px;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(45, 66, 170, .18);
    --bs-btn-disabled-opacity: .55;
    text-transform: uppercase;
    transition: all .55s;
}

.cabinet-content .btn-primary {
    --bs-btn-bg: var(--blue--brand);
    --bs-btn-border-color: var(--blue--brand);
    --bs-btn-hover-bg: var(--btn--hover-blue);
    --bs-btn-hover-border-color: var(--btn--hover-blue);
    --bs-btn-active-bg: var(--btn--hover-blue);
    --bs-btn-active-border-color: var(--btn--hover-blue);
    --bs-btn-disabled-bg: var(--blue--brand);
    --bs-btn-disabled-border-color: var(--blue--brand);
}

/* .btn-secondary is BS5's name for what BS3 called .btn-default; both
   resolve to the landing's grey chip (see section 26 for .btn-default). */
.cabinet-content .btn-secondary {
    --bs-btn-color: var(--blue--brand);
    --bs-btn-bg: var(--btn--grey-bg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--blue--brand);
    --bs-btn-hover-bg: var(--btn--grey-bg-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--blue--brand);
    --bs-btn-active-bg: var(--btn--grey-bg-hover);
    --bs-btn-active-border-color: transparent;
}

.cabinet-content .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand--orange);
    --bs-btn-border-color: var(--brand--orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d55a29;
    --bs-btn-hover-border-color: #d55a29;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d55a29;
}

.cabinet-content .btn-link {
    --bs-btn-color: var(--blue--brand);
    --bs-btn-hover-color: var(--hover--blue);
    --bs-btn-font-weight: 700;
}

/* Cards - the landing's white panel: no border, soft shadow, 16px radius */
.cabinet-content .card {
    --bs-card-bg: #fff;
    --bs-card-color: var(--text--body);
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 16px;
    --bs-card-box-shadow: var(--card--shadow);
    --bs-card-spacer-x: 24px;
    --bs-card-spacer-y: 20px;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--text--heading);
    --bs-card-title-color: var(--text--heading);
}

/* Badges (BS5's name for BS3's .label - see section 26) */
.cabinet-content .badge {
    --bs-badge-font-weight: 700;
    --bs-badge-font-size: 11px;
    --bs-badge-border-radius: 6px;
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .4em;
}

.cabinet-content .dropdown-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: var(--text--body);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-link-color: var(--text--body);
    --bs-dropdown-link-hover-bg: var(--section--grey-bg);
    --bs-dropdown-link-active-bg: var(--blue--brand);
    --bs-dropdown-link-active-color: #fff;
}

.cabinet-content .nav-tabs {
    --bs-nav-tabs-border-color: #dfe4ec;
    --bs-nav-tabs-border-radius: 10px 10px 0 0;
    --bs-nav-tabs-link-active-color: var(--blue--brand);
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: #dfe4ec #dfe4ec #fff;
}

.cabinet-content .pagination {
    --bs-pagination-color: var(--text--body);
    --bs-pagination-border-color: #dfe4ec;
    --bs-pagination-border-radius: 8px;
    --bs-pagination-hover-bg: var(--section--grey-bg);
    --bs-pagination-active-bg: var(--blue--brand);
    --bs-pagination-active-border-color: var(--blue--brand);
    --bs-pagination-font-size: 14px;
}

.cabinet-content .table {
    --bs-table-color: var(--text--body);
    --bs-table-border-color: #dfe4ec;
}

/* -------------------------------------------------------------------------
   2. Base typography
   ------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--text--body);
    font-size: 1.111vw;
    line-height: 140%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text--heading);
    text-transform: uppercase;
    font-weight: 700;
}

h1 { font-size: 2.917vw; font-weight: 900; line-height: 110%; letter-spacing: -.1vw; }
h2 { font-size: 2.5vw; font-weight: 800; line-height: 110%; letter-spacing: -.05vw; }
h3 { font-size: 1.667vw; line-height: 130%; }
h4 { font-size: 1.25vw; }
h5 { font-size: 1.05vw; }
h6 { font-size: .95vw; }

a { transition: color .55s; }

/* -------------------------------------------------------------------------
   3. Legacy admin area (.cabinet-content) typography guard
   ---------------------------------------------------------------------
   The dense admin tables/forms/modals rendered inside .cabinet-content
   must not inherit the fluid vw-based body font-size (it grows
   unreasonably large on wide monitors and shrinks unreadably on small
   ones outside the landing's own mobile breakpoint). Pin it to a fixed,
   readable rem-based value while keeping the landing font family/colors.
   ------------------------------------------------------------------------- */
.cabinet-content {
    font-size: 16px;
    line-height: 1.5;
    font-family: var(--font-body);
    color: var(--text--body);
    /* the footer is a separate dark <section class="wf-section footer">
       outside this container, and its band started at exactly the last
       content block's bottom edge (measured 0px gap). Space it off using the
       landing's own 40px step - the same "_40" token its footer wraps use. */
    padding-bottom: 40px;
}

.cabinet-content h1,
.cabinet-content h2,
.cabinet-content h3,
.cabinet-content h4,
.cabinet-content h5,
.cabinet-content h6 {
    font-family: var(--font-heading);
    color: var(--text--heading);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: normal;
}

/* the old (deleted) theme.css hardcodes "PF Agora Slab Pro" on these cabinet-visible
   titles with .cabinet-content-scoped selectors that outrank the plain
   element rules above; re-pin them to the landing heading font. */
.cabinet-content .page-header > h1,
.cabinet-content .page-header > h2,
.cabinet-content .main-panel__title,
.cabinet-content .calculator__title,
.cabinet-content .carousel-index .carousel-caption-title,
.cabinet-content .clockbox__city {
    font-family: var(--font-heading);
    color: var(--text--heading);
}

/* -------------------------------------------------------------------------
   Sign-in panel (signin.html): legacy orange box -> landing white card.
   Legacy rules live in the old (deleted) theme.css at .cabinet-content .login ... specificity,
   so overrides here use the same or higher-specificity selectors.
   ------------------------------------------------------------------------- */
.cabinet-content .main-panel.login {
    background-color: #fff;
    background-image: none;
    border-radius: 16px;
    box-shadow: var(--card--shadow);
    height: auto;
    padding: 32px;
}

.cabinet-content .login .form-login .control-label {
    font-family: var(--font-body);
    color: var(--text--body) !important;
    font-weight: 400 !important;
}

.cabinet-content .login .form-login .form-control {
    background-color: #fff;
    border: 1px solid var(--border--input);
    border-radius: 12px;
    height: 44px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text--body);
    box-shadow: none;
}

.cabinet-content .login .form-login .form-control:focus {
    outline: none;
    border-color: var(--hover--blue);
}

/* the old (deleted) theme.css:13059 forces border-radius:0!important on text inputs */
.cabinet-content .login .form-login input[type="text"] {
    border-radius: 12px !important;
}

.cabinet-content .login .form-login .btn,
.cabinet-content .clientarea .login .form-login .btn {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    padding: 0 28px 0 20px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: #fff;
    background-color: var(--blue--brand);
    border: none;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .login .form-login .btn:hover {
    background-color: var(--btn--hover-blue);
    color: #fff;
}

.cabinet-content .login a {
    color: var(--blue--brand);
}

/* clientarea.tpl view-login. Was a Bootstrap ".row > .col-md-6 >
   .col-sm-12.col-md-6.clientarea" nest that reserved the row's right
   half for an optional Google-login block; with Google disabled (this
   instance) the card landed in a col-md-6 inside a col-md-6 - a
   quarter-width box stuck top-left - and needed a ":has()" hack to
   recentre it. themes/3axid now owns clientarea.tpl, so the nest is
   plain flex instead: one ".login-col" centres itself, two sit side by
   side, and no rule has to reason about which columns are present. */
.cabinet-content .login-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

.cabinet-content .login-col {
    flex: 1 1 320px;
    display: flex;
    justify-content: center;
}

.cabinet-content .login-col > .clientarea {
    width: 100%;
    max-width: 480px;
}

/* clientarea.tpl register mode. Was Bootstrap ".form-group" rows of
   "col-md-N col-sm-M" columns, each holding an icon + a "col-md-3"
   label + a "col-md-9" control. themes/3axid had no clientarea.tpl, so
   this fell through to themes/default's Bootstrap copy and collapsed
   into one narrow stacked column once bootstrap3-scoped.css was
   deleted - icons orphaned above their labels, every field full-width.
   Rebuilt as equally-flexible label-above-field columns, the same
   recipe as .addtrack-row. Scoped to .form_register so the generic
   .form-group-wrapper / .form-control-wrapper names (which the inline
   has-error script at the bottom of clientarea.tpl targets, and which
   other forms also use) don't pick up this layout elsewhere. */
.cabinet-content .form_register .reg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
    margin-bottom: 14px;
}

.cabinet-content .form_register .reg-row--gap {
    margin-bottom: 22px;
}

.cabinet-content .form_register .reg-col {
    flex: 1 1 220px;
    min-width: 0;
}

.cabinet-content .form_register .reg-col--full {
    flex-basis: 100%;
}

/* icon and label share the first line, control spans beneath, optional
   help text below that - an empty "icon" cell just collapses for the
   fields that have no <i> (the captcha row) */
.cabinet-content .form_register .form-group-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon label"
        "control control"
        "help help";
    align-items: center;
    gap: 4px 8px;
}

.cabinet-content .form_register .form-group-wrapper > .icon {
    grid-area: icon;
    color: var(--text--body);
    line-height: 1;
}

.cabinet-content .form_register .form-group-wrapper > .control-label {
    grid-area: label;
    justify-self: start;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text--heading);
}

.cabinet-content .form_register .form-group-wrapper > .reg-control {
    grid-area: control;
}

.cabinet-content .form_register .form-group-wrapper > .reg-help {
    grid-area: help;
}

.cabinet-content .form_register .form-control {
    width: 100%;
}

/* the phone row's wrapper is a direct .reg-row child (it never had a
   column of its own), so it has to flex like one */
.cabinet-content .form_register .reg-row > .form-group-wrapper {
    flex: 1 1 100%;
}

@media (max-width: 767px) {
    .cabinet-content .form_register .reg-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cabinet-content .form_register .reg-col {
        flex-basis: auto;
    }
}

/* in-content secondary buttons: legacy orange outline -> landing grey.
   Bootstrap sizing/padding from the old (deleted) theme.css is kept on purpose; only the
   color language changes. */
.cabinet-content .btn-transparent-orange {
    border: 1px solid transparent;
    background-color: var(--btn--grey-bg);
    color: var(--blue--brand);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
}

.cabinet-content .btn-transparent-orange:hover,
.cabinet-content .btn-transparent-orange:focus,
.cabinet-content .btn-transparent-orange:active {
    border-color: transparent;
    background-color: var(--btn--grey-bg-hover);
    color: var(--blue--brand);
}

/* dashboard quick-search panels (clientarea_quickfind): legacy grey
   gradient bars -> landing white cards.
   ".qf-row"/".qf-col" replace the Bootstrap "row" + "col-md-6 col-sm-6
   col-xs-12" pair the two panels used to sit in. themes/3axid has no
   clientarea_quickfind.tpl of its own until now, so index.tpl's
   {include} fell through to themes/default's still-Bootstrap copy and
   the panels stacked full-width once bootstrap3-scoped.css was deleted;
   equal flex basis restores the 50/50 split, stacking under 767px the
   same way .trk-row/.addtrack-row do. */
.cabinet-content .qf-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.cabinet-content .qf-col {
    flex: 1 1 50%;
    min-width: 0;
}

/* the panels are the flex items' only children - stretch them so both
   cards match height regardless of which label wraps */
.cabinet-content .qf-col > div {
    height: 100%;
}

@media (max-width: 767px) {
    .cabinet-content .qf-row {
        flex-direction: column;
    }

    .cabinet-content .qf-col {
        flex-basis: auto;
    }
}

.cabinet-content .treckingcode .treckingcode_left,
.cabinet-content .treckingcode .treckingcode_right {
    background: #fff;
    height: auto;
    border-radius: 16px;
    box-shadow: var(--card--shadow);
}

.cabinet-content .treckingcode .treckingcode_wrapper {
    background: none;
    height: auto;
    padding: 24px 28px;
    text-shadow: none;
}

.cabinet-content .treckingcode h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--text--heading);
    font-size: 15px;
    margin: 0 0 16px;
}

.cabinet-content .treckingcode label {
    color: var(--text--body);
    font-style: normal;
    padding-top: 12px;
}

.cabinet-content .treckingcode .trackinginput #parsel_code {
    border: 1px solid var(--border--input);
    border-radius: 12px !important;
    height: 40px;
    padding: 8px 14px;
    font-family: var(--font-body);
    color: var(--text--body);
}

.cabinet-content .treckingcode #parsel_code_button {
    background: var(--blue--brand);
    color: #fff;
    border: none;
    height: 40px;
    padding: 0 28px 0 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: none;
    margin-top: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .treckingcode #parsel_code_button:hover {
    background: var(--btn--hover-blue);
}

/* registration selector: legacy yellow outline pills -> landing buttons */
.cabinet-content .yellowbutton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin: 8px 0 0;
    padding: 0 28px 0 20px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: #fff;
    border: none;
    background: var(--blue--brand);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .yellowbutton:hover {
    background: var(--btn--hover-blue);
    color: #fff;
}

/* section dividers on registration/cabinet pages */
.cabinet-content h3.ca-title,
.cabinet-content .h3ca-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--text--heading);
}

.cabinet-content h3.ca-title:before,
.cabinet-content .h3ca-title:before {
    background: var(--border--input);
}

/* legacy decorations that clash with the landing look */
.cabinet-content .login:before {
    content: none;
}

.cabinet-content .login .form-login .form-control::placeholder {
    color: #9aa4b2;
    font-style: normal;
    font-family: var(--font-body);
}

.cabinet-content .login .form-login .control-label {
    padding-right: 10px;
}

@media (max-width: 767px) {
    /* the old (deleted) theme.css paints a #9eb0c2 band behind the mobile page title */
    .cabinet-content .page-header {
        background-color: transparent;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.cabinet-content h1 { font-size: 28px; line-height: 1.2; }
.cabinet-content h2 { font-size: 24px; line-height: 1.2; }
.cabinet-content h3 { font-size: 20px; line-height: 1.25; }
.cabinet-content h4 { font-size: 17px; line-height: 1.3; }
.cabinet-content h5 { font-size: 15px; line-height: 1.3; }
.cabinet-content h6 { font-size: 14px; line-height: 1.3; }

/* -------------------------------------------------------------------------
   4. Collision fix: .container / .container-lg / .container-md / .container-sm
   ---------------------------------------------------------------------
   landing.webflow.css redefines bare ".container" with
   "max-width:none; padding-left/right:10.694vw" (and 4.444vw on mobile),
   intended for full-bleed Webflow sections. The cabinet uses the same
   class name for header/footer/main content wrapping and expects a
   fixed max-width with modest gutters. Restore that here at every
   breakpoint landing.webflow.css touches, so nothing inherits the huge
   fluid padding.
   ------------------------------------------------------------------------- */
.wf-container, .container-lg, .container-md, .container-sm {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.container-lg { max-width: 1080px; }
.container-md { max-width: 900px; }
.container-sm { max-width: 685px; }

@media (max-width: 991px) {
    .wf-container, .container-lg, .container-md, .container-sm {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    .wf-container, .container-lg, .container-md, .container-sm {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 479px) {
    .wf-container, .container-lg, .container-md, .container-sm {
        padding-left: 12px;
        padding-right: 12px;
    }

    body { font-size: 4.444vw; }
}

/* -------------------------------------------------------------------------
   5. Header chrome
   ------------------------------------------------------------------------- */
header {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.header-container {
    padding-top: 1.25vw;
    padding-bottom: 1.25vw;
}

.header-logo-company strong {
    color: var(--text--heading);
}

/* landing logo (navbar-brand is 2.222vw tall on the landing) */
.header-logo-company .logo-company__img {
    height: 2.222vw;
    min-height: 24px;
    width: auto;
    display: block;
}

.footer-logo-company .logo-company__img {
    height: 26px;
    width: auto;
    display: block;
}

/* mobile burger lines: keep JS behaviour, restyle color */
.toggle-btn span {
    background-color: var(--text--heading);
}

/* mobile dropdown panel background -> plain white card look */
.toggle__content {
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.toggle__inner h2 {
    color: var(--text--heading);
}

.header-nav a,
.toggle-inner .reset-link {
    font-family: var(--font-heading);
    color: var(--text--heading);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: normal;
    transition: color .55s;
}

.header-nav a:hover,
.toggle-inner .reset-link:hover {
    color: var(--hover--blue);
}

.header-lang a,
.footer-lang a {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text--heading);
    transition: color .55s;
}

.header-lang a.active,
.footer-lang a.active {
    color: var(--blue--brand);
}

.header-lang a:not(.active):hover,
.footer-lang a:not(.active):hover {
    color: var(--hover--blue);
}

.currency-rate-info {
    font-family: var(--font-body);
    color: var(--text--body);
}

/* notification badge/dot stay visible on the new light header */
.notification-dot {
    background-color: var(--brand--orange);
    border: 1px solid #fff;
}

/* counter badge (top-nav Parcels button's sortation-terminal count,
   dashboard Parcels tile): previously had no layout rules anywhere,
   so it rendered as plain inline text - shaped into a proper pill */
.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background-color: var(--brand--orange);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.notification-badge-orange {
    background-color: var(--brand--orange) !important;
    color: #fff !important;
}

.notification-badge-blue {
    background-color: var(--blue--brand) !important;
}

.notification-badge-gray {
    background-color: var(--section--grey-bg) !important;
}

/* division switcher trigger button */
.cab-divs-selector .toggle-trigger {
    border: 1px solid var(--border--input);
}

.cab-divs-menu {
    background: #fff;
    box-shadow: var(--card--shadow);
    border-radius: 1.111vw;
}

.cab-divs-menu-item {
    color: var(--text--heading);
    font-family: var(--font-body);
}

.cab-divs-menu-item:hover {
    color: var(--hover--blue);
}

/* -------------------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------------
   Map cabinet button variants onto the landing button look. This
   overrides the bare ".btn" base to match landing.webflow.css exactly
   (kept in sync here rather than relying purely on load order, so the
   mapping below - variant colors - composes predictably on top of it).
   Legacy admin buttons inside .cabinet-content are unaffected: the old (deleted) theme.css
   styles them via ".cabinet-content .btn", an id-anchored selector that
   always outranks this bare ".btn" rule regardless of source order.
   ------------------------------------------------------------------------- */
.wf-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 3.333vw;
    padding: 0 1vw 0 0.4vw;
    font-family: var(--font-heading);
    font-size: .972vw;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: normal;
    border: none;
    /* landing .btn is square; 0 also neutralizes the legacy 40px pill
       radius from .btn-style-4 in assets/style.css (equal specificity,
       this file loads later) */
    border-radius: 0;
    color: #fff;
    background-color: var(--blue--brand);
    transition: all .55s;
}

.wf-btn:hover {
    color: #fff;
    background-color: var(--btn--hover-blue);
}

.wf-btn:active {
    background-color: #43464d;
}

/* Landing signature arrow-shaped right edge. Defined in the landing
   page's inline <style> block (Webflow custom code), not in its CSS
   file, hence replicated here. Reset inside the legacy admin area and
   on circular buttons where clipping would look broken. */
.wf-btn {
    clip-path: polygon(0 0, calc(100% - 1.04vw) 0, 100% 50%, calc(100% - 1.04vw) 100%, 0 100%);
}

.cabinet-content .btn,
.btn-rounded {
    clip-path: none;
    padding-right: 0.4vw;
}

/* brand-blue primary variants */
.btn-info,
.btn-primary,
.btn-style-1 {
    color: #fff;
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
}

.btn-info:hover,
.btn-primary:hover,
.btn-style-1:hover {
    color: #fff;
    background-color: var(--btn--hover-blue);
    border-color: var(--btn--hover-blue);
}

/* grey/outline secondary variants -> landing ".btn.grey" look */
.btn-default,
.btn-style-2,
.btn-transparent-orange,
.btn-info-2 {
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg);
    border-color: transparent;
}

.btn-default:hover,
.btn-style-2:hover,
.btn-transparent-orange:hover,
.btn-info-2:hover {
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg-hover);
    border-color: transparent;
}

/* orange-accent variants */
.btn-info-3,
.btn-info-4,
.btn-info-5 {
    color: #fff;
    background: var(--brand--orange);
    border-color: var(--brand--orange);
    box-shadow: none;
}

.btn-info-3:hover,
.btn-info-4:hover,
.btn-info-5:hover {
    background: #d55a29;
    border-color: #d55a29;
}

/* Active menu pill. Templates mark the active item by adding
   btn-style-3 + btn-style-9; their old look (bold + 2px border) is
   overridden by the bare .btn rule above, so restore a visible active
   state that works on any variant background. */
.wf-btn.btn-style-9 {
    box-shadow: inset 0 0 0 2px currentColor;
}

.btn-rounded {
    height: auto;
    width: 2.5vw;
    padding: 0;
    border-radius: 50%;
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg);
}

.btn-rounded:hover {
    background-color: var(--btn--grey-bg-hover);
}

/* landing ".btn.small" height for the compact header/footer buttons */
.header-bl .wf-btn,
.footer-bl .wf-btn {
    height: 2.5vw;
}

@media (max-width: 479px) {
    .wf-btn {
        width: 100%;
        height: 13.333vw;
        font-size: 3.889vw;
        clip-path: polygon(0 0, calc(100% - 4vw) 0, 100% 50%, calc(100% - 4vw) 100%, 0 100%);
    }

    .cabinet-content .btn,
    .btn-rounded {
        clip-path: none;
        padding-right: 0.4vw;
    }

    .header-bl .wf-btn,
    .footer-bl .wf-btn {
        height: 10vw;
        width: auto;
    }

    .btn-rounded {
        width: 10vw;
        height: 10vw;
    }
}

/* Multi-button rows (top-section quick-access chips, mobile drawer
   action row): only the last/rightmost button keeps the landing arrow
   notch, matching the plain flat look of nav items like the landing's
   own "Trekinh" tracking link. Earlier siblings become flat rectangles.
   Higher specificity than the plain ".btn" rule above (incl. its
   <=479px redefinition), so this wins at every viewport without
   duplicating the rule inside the media query. */
.top-section__nav .wf-btn:not(:last-child),
.wrap.mb._8 .wf-btn:not(:last-child) {
    clip-path: none;
    padding-right: 0.4vw;
}

/* neutralize the landing's own overlapping "grey left" interlock
   (negative margin + z-index trick) inside these rows - we want a
   plain flat-edged sequence of buttons, not overlapping ones */
.top-section__nav .wf-btn.grey.left,
.wrap.mb._8 .wf-btn.grey.left {
    margin-left: 0;
    padding-left: 1.4vw;
    z-index: 1;
    position: relative;
}

@media (max-width: 479px) {
    .top-section__nav .wf-btn.grey.left,
    .wrap.mb._8 .wf-btn.grey.left {
        padding-left: 4vw;
    }
}

/* -------------------------------------------------------------------------
   7. Forms: inputs, selects, textareas, choices.js widgets
   ---------------------------------------------------------------------
   Applied broadly (public-facing forms outside .cabinet-content: the
   homepage calculator, sign-in/registration, login panel). Admin forms
   inside .cabinet-content keep their Bootstrap look because
   ".cabinet-content .form-control" (id-anchored) always outranks these
   bare selectors.
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select,
.form-control,
.wf-input {
    border: 1px solid var(--border--input);
    border-radius: 1.111vw;
    height: 3.889vw;
    padding: 1.111vw 1.667vw;
    font-family: var(--font-body);
    font-size: .972vw;
    color: var(--text--body);
    background-color: #fff;
    transition: border-color .55s;
}

textarea {
    height: auto;
    min-height: 8vw;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.wf-input:focus {
    outline: none;
    border-color: var(--hover--blue);
}

/* choices.js widget */
.choices__inner {
    border: 1px solid var(--border--input) !important;
    border-radius: 1.111vw !important;
    min-height: 3.889vw;
    padding: .5vw 1.667vw !important;
    background-color: #fff !important;
    font-family: var(--font-body);
}

.choices.is-open .choices__inner,
.choices.is-focused .choices__inner {
    border-color: var(--hover--blue) !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    border: 1px solid var(--border--input) !important;
    border-radius: .556vw !important;
    font-family: var(--font-body);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--section--grey-bg) !important;
    color: var(--text--heading) !important;
}

.generic-style-select-wrapper .choices__inner {
    border: 1px solid var(--border--input);
    border-radius: 1.111vw;
}

.generic-style-select-wrapper .choices__inner:hover,
.generic-style-select-wrapper .is-focused.is-open .choices__inner {
    border-color: var(--hover--blue);
}

@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    .form-control,
    .wf-input,
    .choices__inner {
        font-size: 1.9vw;
    }
}

@media (max-width: 479px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select,
    .form-control,
    .wf-input {
        border-radius: 2.222vw;
        height: 11.111vw;
        padding: 2.222vw 3.333vw;
        font-size: 3.889vw;
    }

    .choices__inner {
        border-radius: 2.222vw !important;
        min-height: 11.111vw;
    }
}

/* -------------------------------------------------------------------------
   8. Cards / blocks / modals / clientarea panels
   ---------------------------------------------------------------------
   The block wrapper (block_begin.tpl/block_end.tpl) emits either
   "div#block{index}body.centerpanelbody" or a "td#block{index}body"
   depending on panel type; target both without touching the (cp1251)
   templates via an attribute selector on the shared id pattern.
   ------------------------------------------------------------------------- */
.centerpanelbody,
[id^="block"][id$="body"] {
    background-color: #fff;
    border-radius: 1.111vw;
    box-shadow: var(--card--shadow);
    padding: 1.667vw;
}

.centerpaneltitle {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text--heading);
}

/* Bootstrap modal dialog -> landing card look */
.cabinet-content .modal-content {
    border: none;
    border-radius: 1.111vw;
    box-shadow: var(--card--shadow);
}

.cabinet-content .modal-header {
    border-bottom: 1px solid var(--border--input);
}

.cabinet-content .modal-footer {
    border-top: 1px solid var(--border--input);
}

/* clientarea trackings/parcels list wrapper */
.cabinet-content .ca-list {
    background-color: #fff;
    border-radius: 1.111vw;
    box-shadow: var(--card--shadow);
}

.cabinet-content .ca-list__row {
    border-color: var(--border--input);
}

/* generic bare ".card"/".section" utility (unused by any current cabinet
   template, kept so a future template can opt in directly) */
.wf-card {
    background-color: #fff;
    padding: 1.667vw;
    box-shadow: var(--card--shadow);
    border-radius: 1.111vw;
}

.wf-section {
    padding-top: 5.556vw;
    padding-bottom: 5.556vw;
}

.wf-section.grey {
    background-color: var(--section--grey-bg);
}

@media (max-width: 479px) {
    .centerpanelbody,
    [id^="block"][id$="body"] {
        border-radius: 2.222vw;
        padding: 4.444vw;
    }

    .wf-card { padding: 4.444vw; }

    .wf-section {
        padding-top: 11.111vw;
        padding-bottom: 11.111vw;
    }
}

/* -------------------------------------------------------------------------
   9. Tables: common_admintable + trackings/parcels lists
   ------------------------------------------------------------------------- */

/* invoices/transactions markup wraps the table in
   ".centerpanelbody.table-wrapper", but the old (deleted) theme.css's own
   ".cabinet-content .centerpanelbody" rule sets "display:table" (an equal-
   height/layout trick used elsewhere) - a display:table box's auto-layout
   algorithm sizes to fit its content (like the bootstrap-select
   display:table bug fixed earlier in section 18), so it silently grows
   past its own "width:100%" instead of ever overflowing ITSELF, leaving
   plain overflow-x:auto with nothing to clip and the oversized box
   spilling into its parent/the page instead. Overriding display back to
   block (chaining both classes for 1,2,0 specificity, beating the base
   ".centerpanelbody" rule's 1,1,0 regardless of load order) lets the box
   actually hold to 100% of its parent so the table scrolls inside it. */
.cabinet-content .centerpanelbody.table-wrapper {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* section 8's own ".centerpanelbody, [id^=block][id$=body]" card
       treatment (background/shadow/radius/padding) does not reach this
       element live (confirmed via computed style - some other rule this
       specificity trace didn't turn up wins on the un-prefixed selector
       in section 8), so this already-winning, id-prefixed selector
       re-declares the card look directly rather than chasing that. */
    background-color: #fff;
    border-radius: 1.111vw;
    box-shadow: var(--card--shadow);
    padding: 1.667vw;
}

@media (max-width: 767px) {
    .cabinet-content .centerpanelbody.table-wrapper {
        border-radius: 3.5vw;
        padding: 16px;
    }
}

/* considered wiring up the dormant "data-breakpoints=xs" hint several
   TGrid pages already emit (myinvoices, cashback, m15, support,
   vehicles, certificates, customerdocs, receivers, transactions...),
   written for a footable.js responsive-table setup that's present in
   the theme but never actually loaded on any cabinet page - reverted:
   $t->SetColumnHeaderAttr() only puts the attribute on the <th>, not
   on each row's <td> for that column (confirmed live), so hiding by
   that attribute hides the header cell but leaves the data cell,
   producing a header/data column-count mismatch that reads as more
   broken than the plain horizontal-scroll fallback below. Fixing this
   properly needs a PHP-side per-cell attr, out of scope for a CSS-only
   pass - mobile still gets the horizontal-scroll fallback from
   ".centerpanelbody.table-wrapper" above. */

/* status text emitted inline by TGrid-based pages (e.g. myinvoices'
   "<span class='good'>Paid</span>"/"<span class='error'>Not paid</span>")
   reuses the same StatusColorTag-driven classes as the trackings/
   parcels lists' pill badges - extend that same pill treatment here
   instead of leaving it as plain colored text, scoped to table cells
   generally rather than just ".ca-list" so every TGrid page picks
   it up for free. */
.cabinet-content .admintable td .good,
.cabinet-content .admintable td .error,
.cabinet-content .admintable td .gray,
.cabinet-content .admintable td .yelow,
.cabinet-content .admintable td .yellow-warning {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.cabinet-content .admintable td .good {
    background-color: rgba(31, 122, 70, .1);
}

.cabinet-content .admintable td .error {
    background-color: rgba(192, 57, 43, .1);
}

.cabinet-content .admintable td .gray {
    background-color: var(--section--grey-bg);
}

.cabinet-content .admintable td .yelow {
    color: var(--blue--brand);
    background-color: rgba(45, 66, 170, .1);
}

.cabinet-content .admintable td .yellow-warning {
    color: var(--brand--orange);
    background-color: rgba(237, 107, 56, .1);
}

.cabinet-content .admintable > thead > tr > th {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--text--heading);
}

.cabinet-content .admintable > thead > tr:first-child > th:after {
    background-color: var(--border--input);
}

.cabinet-content .admintable > tbody > tr:not(:last-child) > td {
    border-bottom: 1px solid var(--border--input);
    color: var(--text--body);
}

.cabinet-content .admintable > tbody > tr:hover > td {
    background-color: var(--section--grey-bg);
}

.cabinet-content table.table,
.cabinet-content table.table th,
.cabinet-content table.table td {
    font-family: var(--font-body);
    color: var(--text--body);
}

.cabinet-content table.table thead th {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    color: var(--text--heading);
    border-bottom: 1px solid var(--border--input);
}

.cabinet-content table.table tbody tr:hover {
    background-color: var(--section--grey-bg);
}

/* -------------------------------------------------------------------------
   10. Breadcrumbs (path.tpl) and pagebar (pagebar.tpl)
   ---------------------------------------------------------------------
   Ported verbatim from the landing's own breadcrumb markup/CSS
   (any page, e.g. /services/delivery-of-parcels-from-private-individuals):
     <div class="wrap _8 center bread">
       <a class="text_14 full">Home</a>
       <img class="icon_16" src=".../chevron.svg">
       <a class="text_14 full">...</a>
       <img class="icon_16" ...>
       <a aria-current="page" class="text_14 full w--current">Current</a>
     </div>
   path.tpl now emits this same flat link+icon structure (no <ol>/<li>);
   the chevron icon is the landing's own SVG, self-hosted at
   assets/img/icon-breadcrumb-chevron.svg. Landing source values used
   here: a{color:#3b475a} (== --text--body), .text_14{font-size:.972vw
   desktop / 3.889vw <=479px}, .icon_16{width/height:1.111vw desktop /
   4.444vw <=479px}, a.w--current{color:brand-orange} +
   .text_14.w--current{opacity:.8} (both apply on the landing; combined
   here into one declaration since our current-page element is a span).
   ------------------------------------------------------------------------- */
.cabinet-content .ca-breadcrumbs .bread {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .556vw;
    margin: 2px 0 20px;
}

.cabinet-content .ca-breadcrumbs .text_14 {
    font-family: var(--font-body);
    font-size: .972vw;
    line-height: 120%;
    color: var(--text--body);
    text-decoration: none;
    transition: color .55s;
}

.cabinet-content .ca-breadcrumbs a.text_14:hover {
    color: var(--hover--blue);
}

.cabinet-content .ca-breadcrumbs .text_14.w--current {
    color: var(--brand--orange);
    opacity: .8;
    font-weight: 600;
}

.cabinet-content .ca-breadcrumbs .icon_16 {
    width: 1.111vw;
    height: 1.111vw;
    flex: 0 0 auto;
}

@media (max-width: 479px) {
    .cabinet-content .ca-breadcrumbs .text_14 {
        font-size: 3.889vw;
    }

    .cabinet-content .ca-breadcrumbs .icon_16 {
        width: 4.444vw;
        height: 4.444vw;
    }
}

/* review fix: the old (deleted) theme.css's own ".pagebar a"/".pagebar strong" (padding:5px,
   font-size:10px/15px, line-height:25px) were never overridden below, so
   the page-number links rendered as tiny cramped boxes whose borders
   touched each other (no gap between the bare inline <a>/<strong> tags in
   pagebar.tpl's markup) - reading as "overlapping" and "too small" next
   to the new grid cards. Flex + explicit sizing here replaces the old (deleted) theme.css's
   recipe outright; margin-top separates the bar from whatever card
   (.ca-list etc.) precedes it, since none of those cards
   carry their own margin-bottom. */
.cabinet-content .pagebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: var(--font-heading);
}

.cabinet-content .pagebar a,
.cabinet-content .pagebar strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.cabinet-content .pagebar a {
    color: var(--text--body);
    background-color: #fff;
    border: 1px solid var(--border--input);
    border-radius: 8px;
    text-decoration: none;
    transition: all .55s;
}

.cabinet-content .pagebar a:hover {
    color: #fff;
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
}

.cabinet-content .pagebar strong {
    color: #fff;
    background-color: var(--blue--brand);
    border: 1px solid var(--blue--brand);
    border-radius: 8px;
}

/* -------------------------------------------------------------------------
   11. Alerts
   ---------------------------------------------------------------------
   Modeled directly on the landing's note card (www.3axid.com/conditions,
   the "Customs rules of Ukraine" block: <section class="section grey"><div
   class="card large">...<img class="icon_32" alt="information icon">
   <h3>...</h3>...<div class="text_18">...</div></div></section>) -
   white card, box-shadow, generous padding, a leading icon + text.
   Since these alerts are plain PHP-emitted
   <div class="alert alert-X">text</div> with no icon/title markup
   available to edit, the icon badge is drawn with a ::before pseudo
   element so no template changes are needed; alert-title/h4 support is
   kept for the cases that do pass a heading.
   Every rule below also carries ".aui-message"/".aui-message-X" - a
   second, separate notification-banner class family (Atlassian-UI-
   derived naming) emitted by TGenericInterface::NotificationError/
   Warning/Info/Success() in includes/admininterface.php (used by
   faq.php, parcel-note.php, notifications-settings.php and others) -
   same shape (a bare div, no icon/title markup), so it gets the exact
   same card treatment rather than a separate near-duplicate component.
   ------------------------------------------------------------------------- */
.cabinet-content .alert,
.cabinet-content .aui-message {
    position: relative;
    display: block;
    width: auto;
    /* landing .wf-card look: white, soft shadow, SQUARE corners (the
       .wf-card has no border-radius). Border kept as a subtle type-tinted
       hairline (set per-type below) so the card still reads on the cabinet's
       light content area, where the plain wf-card shadow alone is faint. */
    border: 1px solid var(--section--grey-bg);
    border-radius: 0;
    background-color: #fff;
    box-shadow: var(--card--shadow);
    color: var(--text--body);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    padding: 24px 28px;
    text-shadow: none;
}

/* contain the floated icon below */
.cabinet-content .alert::after,
.cabinet-content .aui-message::after {
    content: "";
    display: block;
    clear: both;
}

/* icon leads as a float (not absolute/flex) so it matches the landing
   alert layout: the heading sits beside the icon on the first line and the
   body copy wraps to full width below it, while plain-text alerts (no
   heading) simply flow their text beside then under the icon. */
.cabinet-content .alert::before,
.cabinet-content .aui-message::before {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 1px 14px 4px 0;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--blue--brand);
    content: "i";
}

.cabinet-content .alert h3,
.cabinet-content .alert h4,
.cabinet-content .alert .alert-title,
.cabinet-content .aui-message h3,
.cabinet-content .aui-message h4 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    text-transform: none;
    color: var(--text--heading);
    margin: 0 0 12px;
}

/* body paragraphs get comfortable spacing (matches the landing alert's
   stacked .text_18 blocks); the leading icon's height clears above them */
.cabinet-content .alert p,
.cabinet-content .aui-message p {
    margin: 0 0 10px;
}

.cabinet-content .alert p:last-child,
.cabinet-content .aui-message p:last-child {
    margin-bottom: 0;
}

.cabinet-content .alert a,
.cabinet-content .aui-message a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* action button bar some alerts embed (e.g. the social-media promo
   alert's <div class="adminbuttons text-right"> with Instagram/
   Facebook/dismiss buttons): a block-level child of .alert always
   lands on its own line below the text now, i.e. "at the bottom". The
   existing .text-right utility class keeps them right-aligned; flex
   just adds consistent gap/wrapping on narrow alerts. */
.cabinet-content .alert .adminbuttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
    white-space: normal;
}

/* .label badges used as links inside alerts (e.g. a demo/test message
   linking out with a "label label-info" pill) must not inherit the
   generic .alert a underline/weight - they're pills, not text links */
.cabinet-content .alert a.label {
    text-decoration: none;
    font-weight: 700;
}

/* type colors: icon badge + link/heading tint carry the semantics; card
   stays white so every alert reads as the same landing component */
.cabinet-content .alert-danger,
.cabinet-content .alert-error,
.cabinet-content .aui-message-error {
    color: #7e2a20;
    border-color: #e3b2a8;
}

.cabinet-content .alert-danger::before,
.cabinet-content .alert-error::before,
.cabinet-content .aui-message-error::before {
    background-color: #c0392b;
    content: "!";
}

.cabinet-content .alert-danger h4,
.cabinet-content .alert-error h4,
.cabinet-content .alert-danger a,
.cabinet-content .alert-error a,
.cabinet-content .aui-message-error a {
    color: #a53125;
}

.cabinet-content .alert-success,
.cabinet-content .aui-message-success {
    color: #1d5636;
    border-color: #a7d3ba;
}

.cabinet-content .alert-success::before,
.cabinet-content .aui-message-success::before {
    background-color: #1f7a46;
    content: "\2713";
}

.cabinet-content .alert-success h4,
.cabinet-content .alert-success a,
.cabinet-content .aui-message-success a {
    color: #17603a;
}

.cabinet-content .alert-warning,
.cabinet-content .aui-message-warning {
    color: #8a4a22;
    border-color: #edc9a8;
}

.cabinet-content .alert-warning::before,
.cabinet-content .aui-message-warning::before {
    background-color: var(--brand--orange);
    content: "!";
}

.cabinet-content .alert-warning h4,
.cabinet-content .alert-warning a,
.cabinet-content .aui-message-warning a {
    color: #c2551f;
}

.cabinet-content .alert-info,
.cabinet-content .aui-message-info {
    color: var(--text--body);
    border-color: #b7c2ea;
}

.cabinet-content .alert-info::before,
.cabinet-content .aui-message-info::before {
    background-color: var(--blue--brand);
    content: "i";
}

.cabinet-content .alert-info h4,
.cabinet-content .alert-info a,
.cabinet-content .aui-message-info a {
    color: var(--blue--brand);
}

@media (max-width: 479px) {
    .cabinet-content .alert,
    .cabinet-content .aui-message {
        /* square corners like the landing .wf-card (desktop rule above) */
        border-radius: 0;
        /* no left-padding reservation anymore - the icon is now an
           in-flow sticky element (see ::before below), not an absolute
           overlay sitting in reserved padding */
        padding: 16px 18px;
    }

    /* switched from "position:absolute" (fixed to .alert's padding box,
       which scrolls away with the rest of the content once .alert
       becomes a horizontal scroll container below) to "position:sticky"
       so the icon stays pinned to the left edge of the scrollport while
       the long text scrolls underneath it - the classic "sticky first
       column" technique, just on the horizontal axis. Needs to be
       in-flow (inline-flex, not absolute) for sticky to have any effect,
       so it's now a real leading inline box with its own right margin
       instead of overlapping reserved padding. */
    .cabinet-content .alert::before,
    .cabinet-content .aui-message::before {
        /* reset the desktop float - mobile pins the icon with sticky instead */
        float: none;
        position: sticky;
        left: 0;
        top: auto;
        display: inline-flex;
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        font-size: 13px;
        margin: 0 10px 0 0;
        vertical-align: middle;
    }

    /* the redesigned alert is a wf-card with real heading + paragraph
       content, so its copy wraps normally (the old nowrap + horizontal-
       scroll treatment, meant for loose single-line text, clipped the
       .text_18/paragraph body). Long unbreakable tokens break instead. */
    .cabinet-content .alert,
    .cabinet-content .aui-message {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .cabinet-content .alert .adminbuttons {
        justify-content: stretch;
    }

    .cabinet-content .alert .adminbuttons .ab-button {
        flex: 1 1 auto;
    }
}

/* -------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------- */
footer {
    background-color: var(--footer--bg);
    color: #fff;
    padding-top: 2.778vw;
    /* landing footer is square; kill the legacy 100px rounded top */
    border-radius: 0;
}

.footer-container {
    color: #fff;
}

footer h3,
.footer-middle h3 {
    color: #fff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
}

.footer-list a,
.footer-contacts,
.footer-contacts a,
.footer-copyright,
.footer-terms-privacy-policy a {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, .8);
    transition: color .55s;
}

.footer-list a:hover,
.footer-contacts a:hover,
.footer-terms-privacy-policy a:hover {
    color: #fff;
}

.footer-lang a {
    color: rgba(255, 255, 255, .8);
}

.footer-lang a.active {
    color: #fff;
}

.footer-lang a:not(.active):hover {
    color: #fff;
}

.footer-bottom,
.footer-middle {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-user-btn {
    color: var(--footer--bg);
    background-color: #fff;
}

.footer-user-btn:hover {
    background-color: var(--section--grey-bg);
}

@media (max-width: 479px) {
    footer {
        padding-top: 11.111vw;
    }
}

/* -------------------------------------------------------------------------
   13. Top section (public dashboard top bar with quick-links + currency)
   ------------------------------------------------------------------------- */
/* review fix: match the navbar's white background instead of the grey
   section tint, so the chip row reads as part of the header chrome
   rather than a separate grey band */
.top-section {
    background: #fff;
    border-radius: 0;
    margin-bottom: 2vw;
    padding-bottom: 1vw;
}

/* quick-link pills row (index.tpl .top-section__nav wrap) */
.top-section {
    padding-top: 1.111vw;
}

/* review fix: center the chip row as a group instead of leaving it
   flush left */
.top-section__nav {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* review fix: the element is actually class="wrap _8 top-section__nav" -
   landing.webflow.css's own ".wrap._8" (2 classes) sets its own ~8px
   gap and, loading after this file, was beating the single-class
   ".top-section__nav" rule above regardless of what "gap" it declared.
   The 3-class chain here outranks ".wrap._8" so this actually wins.
   Per request: 5px between buttons on desktop, 2px on mobile (media
   query override below) - same split as the icon-to-label gap above. */
.wrap._8.top-section__nav {
    gap: 5px;
}

.top-section .wf-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    /* per request: icon-to-label spacing, 5px desktop / 2px mobile
       (mobile override below) */
    gap: 5px;
}

/* icon before the label, one per destination (matched by URL since the
   menu is PHP-generated with no icon field of its own) - drawn as
   inline-SVG masks so a single background-color (white, matching the
   existing button text) recolors the whole icon. Shared by desktop
   (icon + full label) and the mobile icon-only/icon+amount treatment
   further down, so it only needs to be defined once. */
.top-section .wf-btn.wf-small:before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* package (Parcels) */
.top-section .wf-btn.wf-small[href*="d=myparcels"]:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/%3E%3Cpath d='M12 12v9M12 12l8-4.5M12 12L4 7.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/%3E%3Cpath d='M12 12v9M12 12l8-4.5M12 12L4 7.5'/%3E%3C/svg%3E");
}

/* pin (Tracking Numbers) */
.top-section .wf-btn.wf-small[href*="d=mytrackings"]:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.7-7-11.5a7 7 0 1 1 14 0C19 14.3 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.7-7-11.5a7 7 0 1 1 14 0C19 14.3 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

/* house (Addresses) */
.top-section .wf-btn.wf-small[href*="forwarding-address"]:before,
.top-section .wf-btn.wf-small[href*="deliveryaddress"]:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5L12 4l8 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5L12 4l8 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3C/svg%3E");
}

/* document (Invoices) */
.top-section .wf-btn.wf-small[href*="d=myinvoices"]:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h8l4 4v14h-12z'/%3E%3Cpath d='M9 11h6M9 14.5h6M9 18h3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h8l4 4v14h-12z'/%3E%3Cpath d='M9 11h6M9 14.5h6M9 18h3.5'/%3E%3C/svg%3E");
}

/* wallet (Balance) */
.top-section .wf-btn.wf-small[href*="d=transactions"]:before,
.top-section .wf-btn.wf-small[href*="d=selectpaymenttype"]:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2.5h-4.2a2.7 2.7 0 0 0 0 5.4h4.2v2.6a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2v-8.5z'/%3E%3Ccircle cx='16.3' cy='12.7' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2.5h-4.2a2.7 2.7 0 0 0 0 5.4h4.2v2.6a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2v-8.5z'/%3E%3Ccircle cx='16.3' cy='12.7' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* gift (Bonuses) */
.top-section .wf-btn.wf-small[href*="bonuses"]:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='3.5'/%3E%3Cpath d='M12 8.5V21M4.5 12v9h15v-9'/%3E%3Cpath d='M12 8.5c-1.4-4-6.2-3.6-6.2-1 0 1.3 1.6 1 6.2 1zM12 8.5c1.4-4 6.2-3.6 6.2-1 0 1.3-1.6 1-6.2 1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8.5' width='17' height='3.5'/%3E%3Cpath d='M12 8.5V21M4.5 12v9h15v-9'/%3E%3Cpath d='M12 8.5c-1.4-4-6.2-3.6-6.2-1 0 1.3 1.6 1 6.2 1zM12 8.5c1.4-4 6.2-3.6 6.2-1 0 1.3-1.6 1-6.2 1z'/%3E%3C/svg%3E");
}

.top-section .currency-rate-info {
    margin-top: .8vw;
    color: var(--text--body);
}

.top-section-container h2 {
    color: var(--text--heading);
}

/* -------------------------------------------------------------------------
   14. Webflow-navbar cabinet additions (page_header.tpl / index.tpl)
   ------------------------------------------------------------------------- */
/* orange accent buttons: default quick-access links + unpaid-invoices */
.wf-btn.orange,
.wf-btn.btn-warning {
    background-color: var(--brand--orange);
    color: #fff;
}

.wf-btn.orange:hover,
.wf-btn.btn-warning:hover {
    background-color: #d55a29;
    color: #fff;
}

/* active page marker on quick-access buttons */
.wf-btn.current {
    box-shadow: inset 0 0 0 2px currentColor;
}

/* counters embedded in generated menu captions (menu_generator_3axid.php) */
.menu-badge {
    display: inline-block;
    background-color: var(--brand--orange);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

/* notification dot inside the cabinet dropdown label and mobile burger */
.wf-nav-link .notification-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: super;
    background-color: var(--brand--orange);
    border: 1px solid #fff;
}

.menu-button {
    position: relative;
}

.menu-button .notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand--orange);
    border: 1px solid #fff;
}

/* flexbox guards: never let the brand logo or icon toggles get squeezed
   to zero width when the nav row runs tight */
.wf-navbar-brand {
    flex: 0 0 auto;
}

.wf-navbar-brand img {
    width: auto;
    max-width: none;
    height: 100%;
}

.nav-menu-two > li {
    flex-shrink: 0;
}

.nav-menu-two .icon_24 {
    min-width: 24px;
}

/* round icon links in the navbar (header_top_r items with btn-rounded hint) */
.icon_40.ca-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text--heading);
    text-decoration: none;
    transition: color .55s;
}

.icon_40.ca-icon-link:hover {
    color: var(--hover--blue);
}

.icon_40.ca-icon-link .hidden-desktop {
    display: none;
}

/* flags inside the division dropdown */
.w-dropdown-list .wf-nav-link.wf-small .icon_24 {
    vertical-align: middle;
    margin-right: 6px;
}

/* navbar bottom info line: client name [code] + currency rate.
   Lives inside the fixed .navbar-container, so the .navbar-logo-left
   spacer below is enlarged to keep page content clear of it. */
.navbar-info-line {
    background-color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 16px;
    color: var(--text--body);
    padding: 4px 0;
}

.navbar-info-line__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1vw;
}

.navbar-info-line__client {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text--heading);
}

/* add only the info line's own height (24px = 4px+16px+4px) on top of
   the landing's original navbar-logo-left height, instead of the
   inflated fixed heights this used before */
.navbar-logo-left.with-info-line {
    height: calc(5.625vw + 24px);
}

/* division flags row in the mobile drawer */
.ca-divisions-row {
    flex-wrap: wrap;
    align-items: center;
}

.ca-division-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    border: 2px solid transparent;
    line-height: 0;
}

.ca-division-flag.w--current {
    border-color: var(--blue--brand);
}

/* mobile top-bar division dropdown (page_header.tpl ".wf-card.divisions"):
   the ".w-country-item" flex items shrink-wrap narrower than one line of
   flag + title, so the title wrapped under the flag - pin each item to a
   single non-wrapping row (the card's shrink-to-fit width then grows to
   fit the widest row). Scoped to ".divisions" so the desktop division
   dropdown (".wf-card._32.full._2") keeps its own layout. */
.wf-card.divisions .wf-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.wf-card.divisions .wf-nav-link img {
    flex: none;
}

/* the same mobile top-bar dropdowns (language + division) are absolutely
   positioned under their 40px icon toggles, which sit near the right
   viewport edge - a card wider than the space to the right of its toggle
   (long division/language titles) ran past the viewport. Re-anchor them
   to the header instead: with the ".w-dropdown" wrapper made static, the
   card's containing block becomes ".navbar-container.w-nav" (relative,
   from Webflow), so left/right pin it to the full header width - always
   on-screen regardless of which toggle opened it. The z-index replaces
   the stacking the (now static) ".w-dropdown"'s own z-index:900 no
   longer provides; the margin-left:0 neutralizes the landing's
   ".wf-card.languages.w--open{margin-left:-90%}" shift hack, which is
   pointless once the card is header-anchored. Scoped to ".grid_3.mb_show"
   so the desktop nav's dropdowns (same card classes, different
   container) keep their toggle-anchored layout. */
.grid_3.mb_show .w-dropdown {
    position: static;
}

.grid_3.mb_show .wf-card.languages,
.grid_3.mb_show .wf-card.divisions {
    left: 12px;
    right: 12px;
    min-width: 0;
    z-index: 901;
}

.grid_3.mb_show .wf-card.languages.w--open {
    margin-left: 0;
}

/* keep the mobile drawer inside the viewport */
.w-nav-overlay {
    max-width: 100vw;
}

.w-nav-overlay .wf-card.mb_show,
.wf-card.mb_show {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.wf-card.mb_show .wrap.mb._8 {
    flex-wrap: wrap;
}

.wf-card.mb_show .wf-btn {
    max-width: 100%;
}

@media (max-width: 479px) {
    .navbar-logo-left.with-info-line {
        height: calc(15.556vw + 24px);
    }
}

@media (max-width: 479px) {
    .top-section {
        padding-top: 3vw;
        padding-bottom: 3vw;
    }

    /* per request: 2px between buttons on mobile (5px desktop default
       above) */
    .wrap._8.top-section__nav {
        gap: 2px;
    }

    /* the diagonal chevron notch on the last chip (section 6) only reads
       well on a single wide desktop row - on mobile the row wraps into
       compact icon-only chips and the clipped corner just looks broken */
    .top-section__nav .wf-btn:last-child,
    .wrap.mb._8 .wf-btn:last-child {
        clip-path: none;
        padding-right: 0.4vw;
    }

    /* review fix: "width:100%" forced each quick-access chip (Parcels/
       Tracking Numbers/Addresses/Invoices/Balance/Bonuses) onto its own
       full-width row, so 6 items cost ~6 x 10vw of vertical space before
       any real page content. Compact, icon-led, auto-width chips let
       .top-section__nav's existing flex-wrap pack 2-3 per row instead.
       The icon itself (":before" + per-href mask-image) is defined once,
       unscoped, alongside the desktop ".top-section .btn" rule - only
       the mobile-only box model/text-hiding lives in this query. */
    .top-section .wf-btn.wf-small {
        width: auto;
        height: 36px;
        padding: 0 12px;
        gap: 0;
        /* per request: icon-only chips - "font-size:0" hides the plain
           title text node (no wrapper element to target directly with
           CSS) while leaving the icon (fixed px sizing below) and any
           child element (the Balance/Bonuses amount ".notification-
           badge"/suffix "" - see the two rules further down that
           reinstate a real font-size on those) unaffected. */
        font-size: 0;
    }

    /* Balance/Bonuses: the amount was plain PHP-concatenated text with
       no wrapper element ("Balance: " . $value), so font-size:0 above
       would have hidden the number along with the label with no way to
       CSS-target just one half. Wrapped just the value in its own
       <span> at the source (modules/preload/clientarea/clientarea_
       forwarding.php, _native.php, _transportations.php - the "title"
       array key that becomes this button's full text) so it can be
       re-enabled here, same as the ".notification-badge" case. */
    .top-section .wf-btn.wf-small[href*="d=transactions"] span,
    .top-section .wf-btn.wf-small[href*="d=selectpaymenttype"] span,
    .top-section .wf-btn.wf-small[href*="bonuses"] span,
    .top-section .wf-btn.wf-small .notification-badge {
        font-size: 11px;
    }

    .top-section .wf-btn.wf-small[href*="d=transactions"],
    .top-section .wf-btn.wf-small[href*="d=selectpaymenttype"],
    .top-section .wf-btn.wf-small[href*="bonuses"] {
        /* per request: 2px icon-to-amount spacing on mobile */
        gap: 2px;
    }

    .top-section .currency-rate-info {
        margin-top: 2.5vw;
    }
}

/* =========================================================================
   15. inner components pass (phase 2)
   ---------------------------------------------------------------------
   Covers: clientarea_mytrackings.tpl, clientarea_myparcels.tpl,
   clientarea_addtrack.tpl, clientarea_sortation_terminal.tpl,
   login_panel_bottom.tpl. All rules are .cabinet-content-scoped and
   written to match or exceed the specificity of the the old (deleted) theme.css chains
   they replace (see final report for the per-rule specificity audit).
   ========================================================================= */

/* card wrappers: .ca-filter-card on .filter_section (mytrackings/myparcels),
   .ca-form-card on the add-tracking form root.
   ---------------------------------------------------------------------
   Modeled on the landing's own calculator widget (www.3axid.com/
   calculator, ".delivery-calc" panel): a soft tinted panel rather than
   a plain white shadow-card, so form panels read as visually distinct
   from list/display cards (.centerpanelbody etc., which stay white). */
.cabinet-content .ca-filter-card,
.cabinet-content .ca-form-card {
    background-color: var(--section--grey-bg);
    border-radius: 16px;
    box-shadow: none;
    margin-bottom: 20px;
}

.cabinet-content .ca-form-card {
    padding: 24px 28px;
}

.cabinet-content .addtrack-inline {
    align-items: center;
}

.cabinet-content .addtrack-inline__control {
    flex: 0 0 200px;
}

.cabinet-content .addtrack-inline .control-label {
    flex: 1 1 auto;
    margin: 0;
}

.cabinet-content .addtrack-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.cabinet-content .addtrack-checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
}

.cabinet-content .addtrack-checkbox-row label {
    margin: 0;
}

@media (max-width: 680px) {

    .cabinet-content .addtrack-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .cabinet-content .addtrack-inline__control {
        flex-basis: auto;
    }

    /* main.css's own <=680px breakpoint hides ".form-add .control-label"
       outright (an old "placeholder replaces the label" mobile pattern)
       - wrong for selects/checkboxes/message rows that have no
       placeholder to fall back on, so every field would read as an
       unlabeled blank control. Force labels back on for this form. */
    .cabinet-content .add-tracking .control-label {
        display: block !important;
    }
}

/* review fix: .ca-filter-card wraps TWO siblings - .filter_buttons
   (the "add tracking number" / extra filter links) and the .trckfltrs/
   .prclfltrs filter <form> (itself float-collapse-prone, same reason
   as .ca-form-card above). Flex fixes both problems at once: flex
   items establish their own block-formatting context so the form's
   floated .col-md-* grid is contained without a separate flow-root,
   and `order` reliably places the form (ending in the "show" submit
   button) before .filter_buttons ("add tracking number") in one
   visually inline row, regardless of their actual DOM order - which
   here is the opposite of the wanted "show, then add tracking number"
   reading order. */
.cabinet-content .ca-filter-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.cabinet-content .ca-filter-card .trckfltrs,
.cabinet-content .ca-filter-card .prclfltrs {
    order: 1;
    float: none;
    margin: 0;
}

.cabinet-content .ca-filter-card .filter_buttons {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cabinet-content .ca-filter-card .filter_buttons .wf-btn {
    float: none;
}

/* The filter <form> is a single row of controls, but it wraps a
   ".form-group", which section 26 gives BS3's vertical-rhythm
   "margin-bottom: 15px". That made the form's flex box 15px taller than
   its visible contents, so "align-items: center" centred the taller box
   and pushed the form's own controls ~7px above the "show all" button
   sitting beside it (visible whenever a filter is applied and that button
   appears). No rhythm is wanted for a single inline row. */
.cabinet-content .ca-filter-card .trckfltrs .form-group,
.cabinet-content .ca-filter-card .prclfltrs .form-group {
    margin-bottom: 0;
    /* section 26 promotes this .form-group to a flex row with
       "--bs-gutter-y: 0" and the columns carry no vertical padding, so once
       the row wraps (narrow viewports) the stacked controls sat flush
       against each other. row-gap only applies to wrapped lines, so the
       single-line desktop layout is unaffected. */
    row-gap: 8px;
}

/* mytrackings' expanded-row detail panel (menu links | main content),
   was a Bootstrap col-md-1(spacer)/col-md-3/col-md-7 grid with a
   custom 1024px-breakpoint override; flex reflows naturally so the
   extra breakpoint isn't needed. */
.cabinet-content .trk-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 0;
}

.cabinet-content .trk-detail-row__main {
    flex: 1 1 400px;
    min-width: 0;
}

.cabinet-content .margin__top__25 {
    margin-top: 25px;
}

/* review fix: "add tracking number" moved out of the filter panel
   (clientarea_mytrackings.tpl) into its own standalone row above it -
   the filter card now holds only search/filter controls. */
.cabinet-content .ca-add-tracking-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.cabinet-content .ca-add-tracking-row .wf-btn {
    float: none;
    margin: 0;
}

/* review fix: on mobile the bootstrap grid stacks each filter field
   full-width (input, both selects all measure 100% of the card), but
   the "show" submit button and the filter_buttons row stayed their
   own content width, floating off to one side - inconsistent with the
   rest of the now-stacked form. Match the desktop form's full-width,
   same-recipe fields all the way down instead of a different "mobile"
   look. */
@media (max-width: 767px) {
    .cabinet-content .ca-filter-card .trckfltrs .wf-btn,
    .cabinet-content .ca-filter-card .prclfltrs .wf-btn {
        width: 100%;
    }

    .cabinet-content .ca-filter-card .filter_buttons {
        width: 100%;
    }

    .cabinet-content .ca-filter-card .filter_buttons .wf-btn {
        width: 100%;
    }

    .cabinet-content .ca-add-tracking-row .wf-btn {
        width: 100%;
    }
}

/* action row inside the filter card: keep the existing float:right inline
   styles on the links harmless - float has no effect on flex items, so
   this neutralizes the float without touching the templates */
.cabinet-content .filter_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* .wf-btn: landing grey pill. Chained to match/exceed every
   the old (deleted) theme.css specificity variant (.filter_section, .deliveryorder_form,
   .ca-list .deliveryorder_form, .ca-list .ca-list__detail) */
.cabinet-content .filter_section a.wf-btn,
.cabinet-content .deliveryorder_form a.wf-btn,
.cabinet-content .ca-list .deliveryorder_form a.wf-btn,
.cabinet-content .ca-list .ca-list__detail a.wf-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* matches the .form-control/.form-control-sm height (see section 17.2) so
       it lines up with the filter row's input/selects/show-button */
    height: 40px;
    margin: 0 0 0 8px;
    padding: 0 24px 0 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue--brand);
    background: var(--btn--grey-bg);
    border: none;
    float: none;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .filter_section a.wf-btn:hover,
.cabinet-content .deliveryorder_form a.wf-btn:hover,
.cabinet-content .ca-list .deliveryorder_form a.wf-btn:hover,
.cabinet-content .ca-list .ca-list__detail a.wf-btn:hover {
    color: var(--blue--brand);
    background: var(--btn--grey-bg-hover);
    text-decoration: none;
}

/* the addtrack form's "FILE:" button (id="upload_invoice") sits inline
   with the "or URL" text input in the same row - scoped to .form-add
   only (not the base rule above, which is also shared with the
   unrelated .ca-list .ca-list__detail context) so just this
   instance shrinks to match that input's new 34px height. */
.cabinet-content .form-add a.wf-btn {
    height: 34px;
    padding: 0 20px 0 14px;
}

/* .wf-btn: filter form "Show" submit - landing blue primary (input,
   not .btn, so it needs its own recipe rather than reusing .btn) */
.cabinet-content .filter_section .trckfltrs .wf-btn,
.cabinet-content .filter_section .prclfltrs .wf-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* matches the .form-control/.form-control-sm height (see section 17.2/19) so
       the "show" submit button lines up with the input/selects beside
       it instead of sitting shorter than them - re-sized to 34px to
       match the settings-page recipe those fields now use */
    height: 34px;
    margin: 0;
    padding: 0 20px 0 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: #fff;
    background: var(--blue--brand);
    border: none;
    float: none;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .ca-filter-card .trckfltrs .wf-btn:hover,
.cabinet-content .ca-filter-card .prclfltrs .wf-btn:hover {
    color: #fff;
    background: var(--btn--hover-blue);
}

/* .color__gray: bulk untrack/unwatch/order submit buttons - landing grey
   pill, same family as .wf-btn */
.cabinet-content .color__gray,
.cabinet-content .myparcels .color__gray,
.cabinet-content .mytrecking .color__gray,
.cabinet-content input.color__gray {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    margin: 0 0 0 8px;
    padding: 0 24px 0 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue--brand);
    background: var(--btn--grey-bg);
    border: none;
    float: none;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .color__gray:hover,
.cabinet-content .myparcels .color__gray:hover,
.cabinet-content .mytrecking .color__gray:hover {
    color: var(--blue--brand);
    background: var(--btn--grey-bg-hover);
}

/* .yellow_text: legacy orange emphasis note -> landing padded grey note */
.cabinet-content .yellow_text {
    display: block;
    float: none;
    background-color: var(--section--grey-bg);
    color: var(--text--body);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 12px;
    padding: 12px 16px;
}

/* .form-add inputs/selects/textareas: filter forms (trckfltrs/prclfltrs,
   both nested in a .form-add ancestor) and the add-tracking form
   (.form-horizontal .form-control chain) share this recipe.
   ---------------------------------------------------------------------
   Originally sized to match the landing calculator's roomy field style
   (height ~46px, radius 12px). Per request, re-sized down to match the
   compact settings-page recipe instead (section 19: height 34px, radius
   10px) for a single consistent select/input style across the cabinet;
   the bootstrap-select toggle and the "Show"/upload_button buttons
   beside these fields are shrunk to match below so the row stays
   aligned. */
.cabinet-content .form-add .form-control,
.cabinet-content .form-add .form-horizontal .form-control,
.cabinet-content .trckfltrs .form-control,
.cabinet-content .prclfltrs .form-control {
    border: 1px solid var(--border--input);
    border-radius: 10px !important;
    height: 34px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text--body);
    background-color: #fff;
    box-shadow: none;
    transition: border-color .55s;
}

.cabinet-content .form-add textarea.form-control,
.cabinet-content .form-add .form-horizontal textarea.form-control {
    height: auto;
    min-height: 90px;
    padding: 12px 16px;
}

.cabinet-content .form-add .form-control:focus,
.cabinet-content .form-add .form-horizontal .form-control:focus,
.cabinet-content .trckfltrs .form-control:focus,
.cabinet-content .prclfltrs .form-control:focus {
    outline: none;
    border-color: var(--hover--blue);
}

/* trckfltrs/prclfltrs delivery+type filters opt out of the bootstrap-select
   JS plugin via .no-selectpicker (see js/app.js) - its custom dropdown was
   unusable on mobile. These stay plain native <select>, so style the box
   directly (height/border/radius already come from the .form-control rule
   above) with just an appearance reset and a custom arrow. */
.cabinet-content .trckfltrs select.no-selectpicker,
.cabinet-content .prclfltrs select.no-selectpicker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%233b475a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 10px;
    padding-right: 32px;
}

/* bold dark field labels, matching the calculator's ".calc-field label"
   (font-weight 700, dark heading color, generous spacing above field) */
.cabinet-content .form-add .control-label,
.cabinet-content .trckfltrs label,
.cabinet-content .prclfltrs label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--text--heading);
    margin-bottom: 6px;
}

/* checkbox/radio option rows (e.g. delivery/packaging choices): mirror
   the calculator's ".delivery-type" pills - muted label text, darkens
   once checked, accent-colored control */
.cabinet-content .form-add .checkbox label,
.cabinet-content .form-add .radio label {
    font-weight: 700;
    color: #7a8494;
}

.cabinet-content .form-add .checkbox label:has(input:checked),
.cabinet-content .form-add .radio label:has(input:checked) {
    color: var(--text--heading);
}

/* add-tracking form primary submit -> landing blue (overrides the grey
   .btn-transparent-orange mapping for this one, higher-priority, button) */
.cabinet-content .form-add .btn[type="submit"],
.cabinet-content .form-add button[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 28px 0 20px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: #fff;
    background-color: var(--blue--brand);
    border: none;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .form-add .btn[type="submit"]:hover,
.cabinet-content .form-add button[type="submit"]:hover,
.cabinet-content .form-add .btn[type="submit"]:focus,
.cabinet-content .form-add button[type="submit"]:focus {
    color: #fff;
    background-color: var(--btn--hover-blue);
}

/* login_panel_bottom.tpl (rendered inside a .centerpanelbody-equivalent
   white card - see .cabinet-content .main-panel__title font-pin in
   section 3, which already assumes a light background for this widget).
   Was a Bootstrap ".row"/".col-sm-12"/".col-sm-10" wrapper around
   single, already-full-width blocks - no real grid math, just removed. */
.cabinet-content .logged__client__row {
    height: 100%;
}

.cabinet-content .login-buttons-block .btn-login,
.cabinet-content .btn-login.btn-transparent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin-top: 8px;
    padding: 0 24px 0 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg);
    border: none;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .login-buttons-block .btn-login:hover,
.cabinet-content .login-buttons-block .btn-login:focus,
.cabinet-content .btn-login.btn-transparent:hover,
.cabinet-content .btn-login.btn-transparent:focus {
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg-hover);
}

.cabinet-content .login-buttons-block .btn-login.ca-btn-primary,
.cabinet-content .btn-login.btn-transparent.ca-btn-primary {
    color: #fff;
    background-color: var(--blue--brand);
}

.cabinet-content .login-buttons-block .btn-login.ca-btn-primary:hover,
.cabinet-content .login-buttons-block .btn-login.ca-btn-primary:focus,
.cabinet-content .btn-login.btn-transparent.ca-btn-primary:hover,
.cabinet-content .btn-login.btn-transparent.ca-btn-primary:focus {
    color: #fff;
    background-color: var(--btn--hover-blue);
}

.cabinet-content .client__navigation li a,
.cabinet-content .logged__client ul li a {
    font-family: var(--font-body);
    color: var(--text--body);
    font-size: 13px;
    font-weight: 400;
    transition: color .55s;
}

.cabinet-content .client__navigation li a:hover,
.cabinet-content .logged__client ul li a:hover {
    color: var(--hover--blue);
}

.cabinet-content .logged__client .logged__client__balance .balance {
    display: inline-flex;
    align-items: center;
    background: var(--btn--grey-bg);
    background-image: none;
    color: var(--blue--brand);
    text-shadow: none;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    left: 0;
    top: 0;
}

@media (max-width: 767px) {
    .cabinet-content .ca-filter-card,
    .cabinet-content .ca-form-card {
        padding: 16px;
    }
}

/* =========================================================================
   16. Dashboard page (m=clientarea&d=dashboard)
   ---------------------------------------------------------------------
   Markup is PHP-generated (modules/inc/clientarea/dashboard/
   dashboard_forwarding.php), not templated. Was originally a fixed
   3-column bootstrap row (".dashboard__columns .row > .col-md-3/4/5",
   one shared card per column, ".subtitledash" dividers stacking several
   unrelated item groups inside the same card). Restructured in PHP so
   every group (Tracking & Parcels, Billing & Rewards, Support Service,
   FAQ, etc. - 11 total, conditional ones only emitted when they'd have
   content) is its own independent ".dashboard-panel" card; laid out
   here with CSS multi-column instead of a fixed column count so panels
   of very different heights (Support Service: 2 items vs. FAQ: ~18)
   flow like a masonry board and the column count itself adapts to
   whatever width is available, no breakpoint-by-breakpoint column-count
   rules needed. the old (deleted) theme.css still defines .cabinet-content .dashboardli
   (line ~14040) and .subtitledash (line ~14049), both id+class
   (specificity 1,1,0); the .subtitledash rule is now unused (dashboard
   headers are ".dashboard-panel__header", a plain div) but left as-is
   since other pages may still reference the class. */
.cabinet-content .dashboard-grid {
    column-width: 280px;
    column-gap: 20px;
    orphans: 1;
}

/* one card per item group. "display:inline-block" + "break-inside:avoid"
   is what makes a multi-column container behave like a masonry grid
   instead of splitting a single card's content across two columns.
   Square corners on purpose: the landing draws no radius on any card
   (".wf-card" is white ground plus soft shadow, nothing else), and the
   dashboard hero tiles above match. Do not "restore" this to the 16px
   that section 1c gives Bootstrap's own ".card" - that value is for
   stock BS components, not for this family. */
.cabinet-content .dashboard-panel {
    display: inline-block;
    width: 100%;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    background-color: #fff;
    border-radius: 0;
    box-shadow: var(--card--shadow);
    padding: 20px 24px;
    margin: 0 0 20px;
    box-sizing: border-box;
}

.cabinet-content .dashboard-panel__header {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    font-size: 13px;
    color: var(--text--heading);
    letter-spacing: .02em;
    margin: 0 0 10px;
}

.cabinet-content .dashboard-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 767px) {
    .cabinet-content .dashboard-grid {
        column-width: 100%;
    }
}

/* out-specifies the old (deleted) theme.css:14040 ".cabinet-content .dashboardli" (1,1,0)
   via the added type selector, giving (1,1,1) */
.cabinet-content li.dashboardli {
    padding: 5px 0;
    margin-bottom: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: #8b96a5;
}

.cabinet-content .dashboardli a {
    color: var(--blue--brand);
    text-decoration: none;
    transition: color .55s;
}

.cabinet-content .dashboardli a:hover {
    color: var(--hover--blue);
    text-decoration: underline;
}

.cabinet-content .dashboardli .fa {
    color: #8b96a5;
}

/* Inline semantic color remap: individual dashboard links/icons carry
   hardcoded style="color:#ff1547" / "color:#ff9000" from the PHP
   generator - inline styles need !important to be overridden at all. */
.cabinet-content .dashboardli a[style*="#ff1547"],
.cabinet-content .dashboardli .fa[style*="#ff1547"] {
    color: var(--brand--orange) !important;
    font-weight: 600;
}

.cabinet-content .dashboardli a[style*="#ff9000"],
.cabinet-content .dashboardli .fa[style*="#ff9000"] {
    color: var(--brand--orange) !important;
}

/* =========================================================================
   16.1 Dashboard items UX pass (senior-UX redesign of the 3-column
   quick-link list under "Dashboard - USA")
   ---------------------------------------------------------------------
   Problems found auditing the live page:
   - Column 1 (~22 mixed links: tracking, billing, vehicles, settings...)
     has no heading at all, unlike columns 2/3 (SUPPORT SERVICE, DELIVERY
     PRICE, SHOPPING, SWITCH CABINET TO, FAQ, HELP) - reads as one
     undifferentiated wall of links.
   - Only 5 of ~22 column-1 items carry an icon (<i class="fa fa-X">,
     hardcoded in the PHP generator: truck/car/bell/envelope/cogs) - the
     rest are bare text, hurting scannability.
   - The 8-country "SHOPPING" list and 7-country "SWITCH CABINET TO" list
     are text-only, even though the project already ships per-country
     flag SVGs (assets/flags/{code}.svg, used by the nav's own division
     switcher) that would make these lists scan far faster.
   - The 2-3 "priority" links (Add tracking number, Bonuses information,
     Add request) are only distinguished by plain colored text - easy to
     miss as the primary calls-to-action they are.
   Fixes below are CSS-only (no template/PHP change): a synthetic column
   header via ::before content, FontAwesome glyph icons (matching the
   icon language the 5 existing <i class="fa"> items already use, so
   nothing looks bolted-on) added via ::before on matched href/onclick
   patterns, flag backgrounds the same way, and a light pill treatment
   for the priority links. Counts like "Recipients (36)" ARE badge-ified:
   dashitem.php now wraps SetAdditionalText() output in a
   ".dashboardli__badge" span (same <span> precedent as Balance/Bonuses
   in section 12), and every call site's own literal parens were removed
   from the PHP (was '('.$count.')') since the pill shape now supplies
   the visual grouping a badge needs.
   ========================================================================= */

/* column 1 used to have no heading and no sub-groups at all (one flat
   22-item list) - now that dashboard_forwarding.php (see "Tracking &
   Parcels"/"Billing & Rewards"/"Vehicles"/"Account & Settings" in that
   file) gives it real .subtitledash sub-headers matching columns 2/3,
   a synthetic CSS-only column title would just be a redundant extra
   heading stacked on top of the first real one - removed. */

/* unify the PHP-emitted icons (truck/car/bell/envelope/cogs, now
   Material ligatures - see section 28) with the ::before glyph icons
   below: same box, spacing and muted color so the whole list reads as
   one consistent icon language. Sized up from 13px: Material Symbols
   are drawn on a 24px grid and read thin and cramped at FontAwesome's
   old size, and these are the dashboard's primary wayfinding. The 22px
   box keeps the labels on a single left edge. */
.cabinet-content .dashboardli > .fa {
    display: inline-block;
    width: 22px;
    text-align: center;
    margin-right: 6px;
    font-size: 19px;
    vertical-align: -0.25em;
}

.cabinet-content .dashboardli a[href*="d=myparcels"]:before,
.cabinet-content .dashboardli a[onclick*="addtrack"]:before,
.cabinet-content .dashboardli a[href*="d=addmultitracks"]:before,
.cabinet-content .dashboardli a[href*="d=bonusesinfo"]:before,
.cabinet-content .dashboardli a[href*="d=myreceivers"]:before,
.cabinet-content .dashboardli a[href*="d=mytrackings"]:before,
.cabinet-content .dashboardli a[href*="d=customerdocs"]:before,
.cabinet-content .dashboardli a[href*="d=myinvoices"]:before,
.cabinet-content .dashboardli a[href*="d=selectpaymenttype"]:before,
.cabinet-content .dashboardli a[href*="d=transactions"]:before,
.cabinet-content .dashboardli a[href*="d=certificates"]:before,
.cabinet-content .dashboardli a[href*="d=promo-codes"]:before,
.cabinet-content .dashboardli a[href*="d=cashback"]:before,
.cabinet-content .dashboardli a[href*="submodule=searched-orders"]:before,
.cabinet-content .dashboardli a[href*="submodule=parcelfromukrainewizard"]:before,
.cabinet-content .dashboardli a[href*="d=acceptedruleslist"]:before,
.cabinet-content .dashboardli a[href*="submodule=pricing"]:before,
.cabinet-content .dashboardli a[href*="d=prepareaddticket"]:before,
.cabinet-content .dashboardli a[href*="d=tickets"]:before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    width: 22px;
    margin-right: 6px;
    text-align: center;
    font-size: 19px;
    vertical-align: -0.25em;
    color: #8b96a5;
}

.cabinet-content .dashboardli a[onclick*="addtrack"]:before { content: "add_circle"; } /* was FontAwesome plus-circle */
.cabinet-content .dashboardli a[href*="d=addmultitracks"]:before { content: "add_location_alt"; } /* was FontAwesome list-ul */
.cabinet-content .dashboardli a[href*="d=bonusesinfo"]:before { content: "redeem"; } /* was FontAwesome gift */
.cabinet-content .dashboardli a[href*="d=myreceivers"]:before { content: "group"; } /* was FontAwesome users */
.cabinet-content .dashboardli a[href*="d=myparcels"]:before { content: "deployed_code"; } /* was FontAwesome cube */
.cabinet-content .dashboardli a[href*="d=mytrackings"]:before { content: "location_on"; } /* was FontAwesome map-marker */
.cabinet-content .dashboardli a[href*="d=customerdocs"]:before { content: "description"; } /* was FontAwesome file-text-o */
.cabinet-content .dashboardli a[href*="d=myinvoices"]:before { content: "description"; } /* was FontAwesome file-text */
.cabinet-content .dashboardli a[href*="d=selectpaymenttype"]:before { content: "credit_card"; } /* was FontAwesome credit-card */
.cabinet-content .dashboardli a[href*="d=transactions"]:before { content: "swap_horiz"; } /* was FontAwesome exchange */
.cabinet-content .dashboardli a[href*="d=certificates"]:before { content: "workspace_premium"; } /* was FontAwesome certificate */
.cabinet-content .dashboardli a[href*="d=promo-codes"]:before { content: "sell"; } /* was FontAwesome tag */
.cabinet-content .dashboardli a[href*="d=cashback"]:before { content: "payments"; } /* was FontAwesome money */
.cabinet-content .dashboardli a[href*="submodule=searched-orders"]:before { content: "search"; } /* was FontAwesome search */
.cabinet-content .dashboardli a[href*="submodule=parcelfromukrainewizard"]:before { content: "send"; } /* was FontAwesome paper-plane */
.cabinet-content .dashboardli a[href*="d=acceptedruleslist"]:before { content: "check_circle"; } /* was FontAwesome check-circle */
.cabinet-content .dashboardli a[href*="submodule=pricing"]:before { content: "list_alt"; } /* was FontAwesome list-alt */
.cabinet-content .dashboardli a[href*="d=prepareaddticket"]:before { content: "add_circle"; } /* was FontAwesome plus-circle */
.cabinet-content .dashboardli a[href*="d=tickets"]:before { content: "forum"; } /* was FontAwesome comments */

/* country flags: reuse the same assets/flags/{code}.svg the nav's own
   division switcher already uses, so "SHOPPING" (per-country shipping
   address) and "SWITCH CABINET TO" (division switch) scan by flag
   instead of reading every country name. Scoped to "forwarding-address"
   (shipping addresses) vs "d=dashboard"+"div=" (division switch) so the
   two groups can't cross-match each other's hrefs. */
.cabinet-content .dashboardli a[href*="forwarding-address"]:before,
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div="]:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 12px;
    margin-right: 6px;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}

.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=us"]:before { background-image: url("flags/us.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=gb"]:before { background-image: url("flags/gb.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=pl"]:before { background-image: url("flags/pl.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=de"]:before { background-image: url("flags/de.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=it"]:before { background-image: url("flags/it.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=es"]:before { background-image: url("flags/es.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=pt"]:before { background-image: url("flags/pt.svg"); }
.cabinet-content .dashboardli a[href*="forwarding-address"][href*="d=fr"]:before { background-image: url("flags/fr.svg"); }

.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=gb"]:before { background-image: url("flags/gb.svg"); }
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=pl"]:before { background-image: url("flags/pl.svg"); }
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=de"]:before { background-image: url("flags/de.svg"); }
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=it"]:before { background-image: url("flags/it.svg"); }
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=es"]:before { background-image: url("flags/es.svg"); }
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=pt"]:before { background-image: url("flags/pt.svg"); }
.cabinet-content .dashboardli a[href*="d=dashboard"][href*="div=fr"]:before { background-image: url("flags/fr.svg"); }

/* count badges - dashitem.php wraps SetAdditionalText() output (e.g.
   "36", "0/34") in this span. Neutral pill instead of bare "(36)" text
   so counts scan as metadata, not part of the link label. Sits inside
   a[style*="#ff1547"/"#ff9000"] priority pills too (rule below), where
   its own background reads as a slightly darker chip nested in the
   lighter tinted pill. */
.cabinet-content .dashboardli__badge {
    display: inline-block;
    background-color: var(--section--grey-bg);
    color: var(--text--body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    padding: 0 7px;
    margin-left: 4px;
    border-radius: 999px;
    vertical-align: 1px;
}

/* priority calls-to-action: dashitem.php's ->SetColorAttention()/
   ->SetColorHighlight() now emit "dashboardli__link--attention"/
   "dashboardli__link--highlight" alongside the legacy inline color (kept
   for themes that don't load cabinet.css) - which item gets
   flagged is decided per-call-site in PHP, this class is the single
   place that owns what "flagged" looks like. A light tinted pill reads
   as "start here" instead of just colored text easily missed in a
   20-line list. */
.cabinet-content .dashboardli a.dashboardli__link--attention,
.cabinet-content .dashboardli a.dashboardli__link--highlight {
    display: inline-block;
    background-color: rgba(237, 107, 56, .1);
    padding: 3px 10px;
    margin: -3px 0;
    border-radius: 6px;
}

/* breathing room + click affordance across every dashboard list
   (column 1's own items, and the SUPPORT SERVICE/SHOPPING/SWITCH
   CABINET TO/FAQ/HELP sub-lists in columns 2-3, which share the same
   ".dashboardli" class) */
.cabinet-content li.dashboardli {
    padding: 7px 0;
    line-height: 1.4;
}

.cabinet-content .dashboardli:hover {
    color: #6b7686;
}

/* Dashboard/addtrack delivery form submit (the "Save" button, classes
   "btn btn-transparent-orange cabinet__delivery_form_button") - landing
   blue primary instead of the section-6 grey ".btn-transparent-orange"
   mapping. Must beat ".cabinet-content .btn-transparent-orange" (1,1,0);
   the extra class on the same element gives the chained selector
   (1,2,0). The plain class selector is kept alongside for safety in
   case the markup ever drops the btn-transparent-orange class. */
.cabinet-content .btn-transparent-orange.wf-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 28px 0 20px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: #fff;
    background-color: var(--blue--brand);
    border: none;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .btn-transparent-orange.wf-btn:hover,
.cabinet-content .btn-transparent-orange.wf-btn:focus {
    color: #fff;
    background-color: var(--btn--hover-blue);
}

@media (max-width: 767px) {
    .cabinet-content .dashboard-panel {
        margin-bottom: 16px;
    }
}

/* =========================================================================
   17. Legacy bootstrap skin
   ---------------------------------------------------------------------
   Bootstrap 3 is bundled inside css/the old (deleted) theme.css, every rule prefixed with
   .cabinet-content (specificity baseline 1,1,0 for a single class, plus
   one more "class slot" per chained pseudo-class/attribute). Because
   this file loads AFTER the old (deleted) theme.css, an equal-specificity selector here
   always wins the cascade - so most overrides below simply mirror
   the old (deleted) theme.css's own selector/state chain instead of artificially
   increasing specificity. Usage inventory (grep across modules/ and
   themes/3axid|default/*.tpl) - only components with real hits are
   skinned; components with 0 hits are left alone (noted inline).
   ========================================================================= */

/* -------------------------------------------------------------------------
   17.1 Buttons (.btn: 18 hits, .btn-primary: 1, .btn-link: 2, .btn-sm: 6,
   .btn-lg: 1; .btn-default/success/danger/warning/info: 0 static hits but
   kept per plan as they are reachable via dynamic class composition and
   are cheap to keep in sync with the base .btn recipe)
   ------------------------------------------------------------------------- */
.cabinet-content .btn {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 8px;
    border-color: transparent;
    box-shadow: none;
    transition: all .55s;
}

.cabinet-content .btn:focus,
.cabinet-content .btn.focus,
.cabinet-content .btn:active:focus,
.cabinet-content .btn.active:focus,
.cabinet-content .btn:active.focus,
.cabinet-content .btn.active.focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 66, 170, .18);
}

.cabinet-content .btn.disabled,
.cabinet-content .btn[disabled],
.cabinet-content fieldset[disabled] .btn {
    opacity: .55;
}

.cabinet-content .btn-primary,
.cabinet-content .btn-primary:focus,
.cabinet-content .btn-primary.focus {
    color: #fff;
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
}

.cabinet-content .btn-primary:hover,
.cabinet-content .btn-primary:active,
.cabinet-content .btn-primary.active,
.cabinet-content .open > .dropdown-toggle.btn-primary,
.cabinet-content .btn-primary:active:hover,
.cabinet-content .btn-primary.active:hover,
.cabinet-content .open > .dropdown-toggle.btn-primary:hover,
.cabinet-content .btn-primary:active:focus,
.cabinet-content .btn-primary.active:focus,
.cabinet-content .open > .dropdown-toggle.btn-primary:focus {
    color: #fff;
    background-color: var(--btn--hover-blue);
    border-color: var(--btn--hover-blue);
}

.cabinet-content .btn-default,
.cabinet-content .btn-default:focus,
.cabinet-content .btn-default.focus {
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg);
    border-color: transparent;
}

.cabinet-content .btn-default:hover,
.cabinet-content .btn-default:active,
.cabinet-content .btn-default.active,
.cabinet-content .open > .dropdown-toggle.btn-default,
.cabinet-content .btn-default:active:hover,
.cabinet-content .btn-default.active:hover,
.cabinet-content .open > .dropdown-toggle.btn-default:hover {
    color: var(--blue--brand);
    background-color: var(--btn--grey-bg-hover);
    border-color: transparent;
}

.cabinet-content .btn-success,
.cabinet-content .btn-success:focus,
.cabinet-content .btn-success.focus {
    color: #fff;
    background-color: #1f7a46;
    border-color: #1f7a46;
}

.cabinet-content .btn-success:hover,
.cabinet-content .btn-success:active,
.cabinet-content .btn-success.active,
.cabinet-content .open > .dropdown-toggle.btn-success,
.cabinet-content .btn-success:active:hover,
.cabinet-content .btn-success.active:hover,
.cabinet-content .open > .dropdown-toggle.btn-success:hover {
    color: #fff;
    background-color: #17603a;
    border-color: #17603a;
}

.cabinet-content .btn-danger,
.cabinet-content .btn-danger:focus,
.cabinet-content .btn-danger.focus {
    color: #fff;
    background-color: #c0392b;
    border-color: #c0392b;
}

.cabinet-content .btn-danger:hover,
.cabinet-content .btn-danger:active,
.cabinet-content .btn-danger.active,
.cabinet-content .open > .dropdown-toggle.btn-danger,
.cabinet-content .btn-danger:active:hover,
.cabinet-content .btn-danger.active:hover,
.cabinet-content .open > .dropdown-toggle.btn-danger:hover {
    color: #fff;
    background-color: #a53125;
    border-color: #a53125;
}

.cabinet-content .btn-warning,
.cabinet-content .btn-warning:focus,
.cabinet-content .btn-warning.focus {
    color: #fff;
    background-color: var(--brand--orange);
    border-color: var(--brand--orange);
}

.cabinet-content .btn-warning:hover,
.cabinet-content .btn-warning:active,
.cabinet-content .btn-warning.active,
.cabinet-content .open > .dropdown-toggle.btn-warning,
.cabinet-content .btn-warning:active:hover,
.cabinet-content .btn-warning.active:hover,
.cabinet-content .open > .dropdown-toggle.btn-warning:hover {
    color: #fff;
    background-color: #d55a29;
    border-color: #d55a29;
}

.cabinet-content .btn-info,
.cabinet-content .btn-info:focus,
.cabinet-content .btn-info.focus {
    color: #fff;
    background-color: var(--btn--hover-blue);
    border-color: var(--btn--hover-blue);
}

.cabinet-content .btn-info:hover,
.cabinet-content .btn-info:active,
.cabinet-content .btn-info.active,
.cabinet-content .open > .dropdown-toggle.btn-info,
.cabinet-content .btn-info:active:hover,
.cabinet-content .btn-info.active:hover,
.cabinet-content .open > .dropdown-toggle.btn-info:hover {
    color: #fff;
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
}

.cabinet-content .btn-link {
    color: var(--blue--brand);
    font-weight: 400;
    text-transform: none;
    background-color: transparent;
}

.cabinet-content .btn-link:hover,
.cabinet-content .btn-link:focus {
    color: var(--hover--blue);
    text-decoration: underline;
    background-color: transparent;
}

/* -------------------------------------------------------------------------
   17.2 Forms (.form-control: 69 hits, .control-label: 48, .form-control-sm: 57,
   .help-block: 1, .has-error: real via JS-added class on
   .form-control-wrapper / .form-group-wrapper - see
   modules/inc/clientarea includes; .input-group-addon: 0 hits, skipped)
   ------------------------------------------------------------------------- */
/* Field/label sizing bumped to echo the landing calculator's roomy,
   rounder field style (www.3axid.com/calculator); kept a notch below
   the .form-add recipe above since this rule reaches EVERY .form-control
   in the app, including dense inline/table contexts. */
.cabinet-content .form-control {
    border: 1px solid var(--border--input);
    border-radius: 10px;
    font-family: var(--font-body);
    color: var(--text--body);
    box-shadow: none;
}

/* out-specifies the old (deleted) theme.css's ".cabinet-content input[type='text']"
   border-radius:0!important (around line 13061) */
.cabinet-content input[type="text"].form-control,
.cabinet-content input[type="text"] {
    border-radius: 10px !important;
}

.cabinet-content .form-control:focus {
    border-color: var(--hover--blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 189, .12);
}

.cabinet-content .form-control::-moz-placeholder {
    color: #9aa4b2;
}

.cabinet-content .form-control:-ms-input-placeholder {
    color: #9aa4b2;
}

.cabinet-content .form-control::-webkit-input-placeholder {
    color: #9aa4b2;
}

.cabinet-content .form-control,
.cabinet-content .form-control-sm {
    height: 42px;
}

.cabinet-content .form-control-sm {
    height: 34px;
    border-radius: 10px;
}

.cabinet-content textarea.form-control,
.cabinet-content textarea.form-control-sm {
    height: auto;
}

/* review fix: the old (deleted) theme.css's bootstrap ".cabinet-content select.form-control-sm"
   (line ~4390) hardcodes "line-height: 30px" as a cross-browser select-
   height hack matched to ITS OWN height:30px - since we bump .form-control-sm
   (and .form-add's .form-control) to a taller box everywhere, that
   stale 30px line-height no longer matches the real content-box height,
   pushing the selected option text off-center (visibly too high) in
   every plain <select> sitewide. Bootstrap-select's fake toggle button
   is unaffected (it flexbox-centers ".filter-option" instead of relying
   on the real, hidden <select>'s line-height), so this only bites bare
   selects (settings-style admin forms), but the fix is global so any
   current or future bare select stays centered regardless of its
   final height. */
.cabinet-content select.form-control,
.cabinet-content select.form-control-sm {
    line-height: normal;
    /* the bootstrap-select JS plugin is gone, so every <select> is now a
       bare native control - give them all the appearance-reset + custom
       chevron the filter selects already use, so no select renders as an
       arrow-less empty box (the .no-selectpicker rule above is now a
       redundant subset, kept harmless). */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%233b475a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 10px;
    padding-right: 32px;
}

/* bold dark label, matching the calculator's ".calc-field label" -
   !important because at least 3 separate legacy rules across main.css/
   stylesheets.css independently target ".control-label" in various
   ancestor contexts (".form-add .control-label", ".add-tracking.form-
   add .control-label", ".deliveryorder_form label", etc.) with their
   own mix of italic/grey/normal-weight, at specificities that win
   piecemeal per-property against any single non-important selector
   here - not worth hand-chasing across ~13k lines of CSS slated for
   deletion once every Bootstrap-grid template is migrated off it. */
.cabinet-content .control-label {
    font-weight: 700 !important;
    font-style: normal !important;
    text-align: left !important;
    color: var(--text--heading) !important;
}

.cabinet-content .help-block {
    font-size: 12px;
    color: #8b96a5;
}

.cabinet-content .has-error .form-control {
    border-color: #c0392b;
}

.cabinet-content .has-error .control-label {
    color: #c0392b !important;
}

.cabinet-content .input-group-addon {
    background-color: var(--section--grey-bg);
    border: 1px solid var(--border--input);
    border-radius: 10px;
}

.cabinet-content input[type="checkbox"],
.cabinet-content input[type="radio"] {
    accent-color: var(--blue--brand);
}

/* -------------------------------------------------------------------------
   17.3 Panels (real usage: themes/default/shopdir_faq.tpl FAQ accordion,
   included from modules/inc/clientarea/faq.php - reachable from the
   dashboard's "FAQ" links)
   ------------------------------------------------------------------------- */
.cabinet-content .panel,
.cabinet-content .panel-default {
    border: none;
    border-radius: 16px;
    box-shadow: var(--card--shadow);
}

.cabinet-content .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--section--grey-bg);
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--text--heading);
}

.cabinet-content .panel-footer {
    background-color: transparent;
    border-top: 1px solid var(--section--grey-bg);
}

/* the generic (non-accordion) .panel-heading/.panel-body/.panel-footer
   never had padding at all - harmless while .panel's only real
   consumer was the FAQ accordion (which has its own padded variants
   below, ".accordion-container .panel-*"), but notifications.php's
   single-notification view uses the bare classes directly. */
.cabinet-content .panel-heading,
.cabinet-content .panel-body,
.cabinet-content .panel-footer {
    padding: 16px 20px;
}

/* unread notification accent - .panel-primary vs .panel-default was a
   Bootstrap contextual-color pair with no color of its own defined
   here; distinguish it the same way .alert-info's left accent works. */
.cabinet-content .panel-primary {
    box-shadow: var(--card--shadow), inset 3px 0 0 var(--brand--orange);
}

.cabinet-content .panel-primary .panel-heading {
    background-color: rgba(237, 107, 56, .08);
    color: var(--brand--orange);
}

/* -------------------------------------------------------------------------
   17.4 Tabs (.nav-tabs: real usage via includes/admintabs.php ->
   themes/default/common_admintabs.tpl, compiled/cached for the 3axid
   theme - used across cabinet admin subpages. .nav-pills: 0 hits, kept
   minimal per plan)
   ------------------------------------------------------------------------- */
.cabinet-content .nav-tabs {
    border-bottom: 1px solid var(--border--input);
}

/* Tabs are BS5-structured. Bootstrap 5 styles .nav-link and tracks .active on
   the <a>; BS3 used ".nav-tabs > li > a" and put .active on the <li>.
   themes/3axid/common_admintabs.tpl (copied up from themes/default, which is
   shared with frontendr and must not be edited) emits both sets of hooks.
   These selectors follow the BS5 one: BS5's tab JS only ever moves .active
   between the <a> elements, so the BS3 selector would leave the first tab
   highlighted forever after a switch. */
.cabinet-content .nav-tabs .nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--text--body);
    border: none;
    background-color: transparent;
}

.cabinet-content .nav-tabs .nav-link:hover {
    color: var(--hover--blue);
    background-color: transparent;
    border-color: transparent;
}

.cabinet-content .nav-tabs .nav-link.active,
.cabinet-content .nav-tabs .nav-link.active:hover,
.cabinet-content .nav-tabs .nav-link.active:focus {
    color: var(--blue--brand);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--blue--brand);
}

.cabinet-content .nav-pills > li.active > a,
.cabinet-content .nav-pills > li.active > a:hover,
.cabinet-content .nav-pills > li.active > a:focus {
    background-color: var(--blue--brand);
}

/* -------------------------------------------------------------------------
   17.5 Dropdowns (.dropdown-menu: 2 hits - uppermenu_.tpl top nav,
   index_payment.tpl - both compiled/cached for the 3axid theme)
   ------------------------------------------------------------------------- */
.cabinet-content .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
    padding: 8px 0;
}

.cabinet-content .dropdown-menu > li > a {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text--body);
    padding: 8px 16px;
}

.cabinet-content .dropdown-menu > li > a:hover,
.cabinet-content .dropdown-menu > li > a:focus {
    background-color: var(--section--grey-bg);
    color: var(--text--heading);
}

/* -------------------------------------------------------------------------
   17.6 Labels/badges (.label: 12 hits incl. label-info: 4, label-success:
   6, label-warning: 1, label-danger: 1; bare .badge: 0 real hits - the
   only "badge"-named classes in use are .notification-badge and
   .menu-badge, both already styled in section 14 - skipped)
   ------------------------------------------------------------------------- */
/* display:inline-block + no-underline fix: .label is also used as an
   <a> (e.g. a "label label-info" link inside an alert) - as a plain
   inline anchor it would inherit the ambient link color/underline and,
   since none of the variants below set a text color, render invisible
   text on a same-color background */
.cabinet-content .label {
    display: inline-block;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px 9px;
}

.cabinet-content .label-default {
    background-color: var(--btn--grey-bg);
    color: var(--blue--brand);
}

/* compound ".label.label-X" selectors (2 classes) rather than bare
   ".label-X" (1 class): a label is only ever styled as one of these
   variants combined with the base .label class in real markup, and
   the extra specificity is required to beat ".cabinet-content .alert-X
   a" (section 11), which would otherwise repaint a .label link's text
   the alert's own link color - invisible when that happens to match
   the label's background (e.g. a blue label inside an alert-info). */
.cabinet-content .label.label-primary,
.cabinet-content .label.label-info {
    background-color: var(--blue--brand);
    color: #fff;
}

.cabinet-content .label.label-success {
    background-color: #1f7a46;
    color: #fff;
}

.cabinet-content .label.label-warning,
.cabinet-content .label.label-danger {
    background-color: var(--brand--orange);
    color: #fff;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   17.7 Misc (hr, .text-muted: 0 real hits but cheap/global so kept per
   plan; checkbox/radio accent-color already added in 17.2)
   ------------------------------------------------------------------------- */
.cabinet-content hr {
    border-color: var(--section--grey-bg);
}

.cabinet-content .text-muted {
    color: #8b96a5;
}

/* -------------------------------------------------------------------------
   17.8 Tooltips (.tooltip: 1 hit - themes/3axid/common_adminform.tpl
   field-hint icon; .tooltip-inner is injected by the bootstrap JS plugin
   at runtime so it never appears in a static template grep. .popover:
   0 hits, skipped)
   ------------------------------------------------------------------------- */
.cabinet-content .tooltip-inner {
    background-color: var(--text--heading);
    border-radius: 8px;
}

/* -------------------------------------------------------------------------
   17.9 Not skinned - no real usage found in the inventory grep across
   modules/ and themes/3axid|default/*.tpl: .well, .list-group(-item),
   .pagination (the codebase uses its own .cabinet-content .pagebar
   instead, already covered by section 10), .progress(-bar), .popover,
   .input-group-addon variants beyond the base one above, .btn-xs.
   Per the plan, .alert/.modal/.breadcrumb/.pagebar/.admintable/table.table
   are intentionally left to sections 8-11 and not touched here.
   ------------------------------------------------------------------------- */

/* review fix: per-row "submit a ticket" buttons on prepareaddticket use a
   repeated id (#yelow_button) + .yellow_button class (the old (deleted) theme.css:13283,
   yellow outline). Map to the landing grey chip, same family as
   .wf-btn. .cabinet-content + id = (2,0,0), beats theme's (1,1,0). */
.cabinet-content #yelow_button,
.cabinet-content .yellow_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    margin: 0;
    padding: 0 24px 0 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue--brand);
    background: var(--btn--grey-bg);
    border: none;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
    cursor: pointer;
}

.cabinet-content #yelow_button:hover,
.cabinet-content .yellow_button:hover {
    color: var(--blue--brand);
    background: var(--btn--grey-bg-hover);
}

/* review fix: generic admin button bars (includes/adminbuttons.php emits
   <button class="... ab-button">, the old (deleted) theme.css:12773 yellow-outline). Base
   becomes the landing grey chip; compound rules follow so semantic
   variants (btn-success/btn-danger/btn-regular) keep their colors. */
.cabinet-content .ab-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    margin: 2px 4px 2px 0;
    padding: 0 24px 0 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: var(--blue--brand);
    background: var(--btn--grey-bg);
    border: none;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    transition: all .55s;
    cursor: pointer;
}

.cabinet-content .ab-button:hover {
    color: var(--blue--brand);
    background: var(--btn--grey-bg-hover);
}

.cabinet-content .ab-button.btn-success {
    color: #fff;
    background: #1f7a46;
    border: none;
}

.cabinet-content .ab-button.btn-success:hover {
    background: #17603a;
}

.cabinet-content .ab-button.btn-danger {
    color: #fff;
    background: #c0392b;
    border: none;
}

.cabinet-content .ab-button.btn-danger:hover {
    background: #a53125;
}

.cabinet-content .ab-button.btn-regular {
    color: var(--text--body);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border--input);
}

.cabinet-content .ab-button.btn-regular:hover {
    background: var(--section--grey-bg);
}

/* call-to-action variant (".ab-cta", set via AddClassname in PHP -
   first consumer: cashback's "Add" button): landing blue with the
   chevron notch the base .ab-button already carries, so it reads as
   the page's primary action next to plain filter toggles. */
.cabinet-content .ab-button.ab-cta {
    color: #fff;
    background: var(--blue--brand);
}

.cabinet-content .ab-button.ab-cta:hover {
    color: #fff;
    background: var(--btn--hover-blue);
}

/* orange-accent variant (".ab-orange"): the secondary-but-prominent
   action that sits next to an .ab-cta (first consumer: m15's "I paid"
   proof-of-payment button beside the blue "Pay" CTA). Landing orange,
   keeps the chevron notch; hover shade matches the .btn-info-3 family. */
.cabinet-content .ab-button.ab-orange {
    color: #fff;
    background: var(--brand--orange);
}

.cabinet-content .ab-button.ab-orange:hover {
    color: #fff;
    background: #d55a29;
}

/* quiet variant (".ab-quiet"): de-emphasized housekeeping action
   (first consumer: m15's "Hide" on paid rows). Loses the chevron notch
   and the brand-blue text so it can't compete with real actions -
   same plain-rectangle treatment as the .ab-filterbar toggles. */
.cabinet-content .ab-button.ab-quiet {
    color: var(--text--body);
    clip-path: none;
    padding: 0 16px;
}

.cabinet-content .ab-button.ab-quiet:hover {
    color: var(--text--heading);
    background: var(--btn--grey-bg-hover);
}

/* filter-tab bars (".ab-filterbar" on the TButtons bar, set via
   AddClassnameGlobal - first consumer: cashback's status filters):
   the btn-regular/btn-selected buttons are state toggles, not actions,
   so they lose the chevron notch and become plain rectangles; the
   selected filter gets a blue outline + blue text. The .ab-cta button
   in the same bar is exempt and keeps its chevron. */
.cabinet-content .adminbuttons.ab-filterbar .ab-button.btn-regular,
.cabinet-content .adminbuttons.ab-filterbar .ab-button.btn-selected {
    clip-path: none;
    border-radius: 8px;
    padding: 0 16px;
}

.cabinet-content .adminbuttons.ab-filterbar .ab-button.btn-selected {
    color: var(--blue--brand);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--blue--brand);
}

/* orange "Settings (Country)" divider bar -> flat landing section header */
.cabinet-content .adminform_form .adminform-separator {
    display: flex;
    align-items: center;
    background: var(--section--grey-bg);
    color: var(--text--heading);
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 12px 20px !important;
    border-radius: 10px;
    margin: 24px 0 4px;
}

.cabinet-content .adminform_form .adminform-separator:first-child {
    margin-top: 0;
}

.cabinet-content .adminform_form .adminform-separator strong {
    font-weight: 700;
}

/* italic grey-blue label -> landing body text; right-alignment comes
   from the ".adminform-row__label" flex column's text-align, which a
   leftover "float:left" on the bare <label> (still present in the
   legacy stylesheet main.css/stylesheets.css ship) would otherwise
   defeat - floated boxes ignore an ancestor's text-align. */
.cabinet-content .adminform_form label:not(.control-label) {
    display: inline;
    float: none;
    color: var(--text--body);
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
}

/* plain <select>/<input> here get no bootstrap-select JS widget, so
   they need their own chevron + native-appearance removal (section 18
   only covers the bootstrap-select .dropdown-toggle button). */
.cabinet-content .adminform_form .form-control:not(textarea),
.cabinet-content .adminform_form select.form-control-sm {
    height: 34px;
    border-radius: 10px;
    padding: 6px 32px 6px 12px;
}

.cabinet-content .adminform_form select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%233b475a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 10px;
}

.cabinet-content .adminform_form .form-control:focus {
    border-color: var(--hover--blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 189, .12);
}

@media (max-width: 680px) {
    .cabinet-content .adminform_form .adminform-separator {
        margin-top: 16px;
    }

    .cabinet-content .adminform_form label:not(.control-label) {
        text-align: left;
        padding-right: 0 !important;
        margin-bottom: 4px;
    }
}

/* =========================================================================
   20. Trackings/parcels list (.ca-list)
   ---------------------------------------------------------------------
   Markup: clientarea_mytrackings.tpl renders a real CSS Grid table -
   ".ca-list" > ".ca-list__row.ca-list__head" (column
   captions) + one ".ca-list__row.ca-list__body" per row (a mini
   <form data-add-form> so its own delivery-type select, once a row is
   expanded, already gets the section-18 bootstrap-select skin for
   free). Both the header and every row share one ".trk-row" grid
   definition (five named areas: icon/number/desc/status/check), so
   columns always line up without Bootstrap's col-md/col-sm/col-xs +
   push/pull juggling the old markup used - the row's DOM order is now
   just its visual order. At <=767px the same five areas are reflowed
   into a 3-line card via grid-template-areas instead of a second set of
   ".col-xs-*" markup, so the invoice/rejected-file icons that used to
   be duplicated in two places (one ".hidden-xs" copy, one ".visible-xs"
   copy) now render once, in the "number" cell, at every width.
   Section 8 already gave the wrapper a white/rounded/shadow card; this
   section re-skins the header caption, the row divider, the
   tracking-number link, and the good/error/gray status + track-menu
   quick-action link colors the old (deleted) theme.css hardcodes in old, off-palette hex
   values (independent of the section 17.x .alert/.label color mapping,
   since this table uses its own .good/.error/.gray classes rather than
   .label-success/.label-danger).
   ========================================================================= */

.cabinet-content .ca-list {
    padding: 20px 24px;
}

/* the shared grid: header and every ".ca-list__body" row use the exact same
   column template, so captions and cells always align. Per request,
   every cell just top-aligns to the row - simpler and more predictable
   than trying to vertically center cells of very different natural
   heights (icon+flag stack vs. a single text line) against each other. */
.cabinet-content .ca-list .trk-row {
    display: grid;
    grid-template-columns: 40px minmax(170px, 1.1fr) minmax(220px, 2.2fr) 150px 28px;
    grid-template-areas: "icon number desc status check";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .trk-cell--icon { grid-area: icon; }
.cabinet-content .ca-list .trk-cell--number { grid-area: number; min-width: 0; }
.cabinet-content .ca-list .trk-cell--desc { grid-area: desc; min-width: 0; }
.cabinet-content .ca-list .trk-cell--status { grid-area: status; }
.cabinet-content .ca-list .trk-cell--check { grid-area: check; justify-self: center; }

/* icons that mark "has invoice" / "sending disallowed" on the tracking
   number itself - sits on its own line above the number when present
   (see markup comment above; a single instance now, not duplicated for
   mobile/desktop). ":empty" never actually matches here even with
   neither icon present - Smarty leaves whitespace between the
   {if}...{/if} blocks, so the div always has a text node - font-
   size/line-height:0 handles that whitespace, but the real bug was
   "display:inline-flex": an inline-level box still opens an anonymous
   inline formatting context and reserves line-height-based space around
   itself even at font-size:0, so the empty badges div was adding a
   phantom ~14-19px gap above the tracking-number link regardless of its
   own (correctly zeroed) content height. Block-level "flex" doesn't
   have that quirk - a block box's height is just its content height. */
/* the badges now sit on the same line as the tracking number (they are
   inside .ca-list__code-link), so that row is the flex container. */
.cabinet-content .ca-list__code-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* NB: the old "font-size/line-height: 0" here existed to kill inline-image
   whitespace. It must not come back - these badges now include a font
   glyph, which a zero font-size would render invisible. Flex already
   removes the whitespace. */
.cabinet-content .ca-list__code-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.cabinet-content .ca-list__flag-invoice {
    width: 16px;
    height: 16px;
}

/* "sending disallowed" - was a red bitmap, now FontAwesome (4.7 is what
   ships here, so .fa-ban is the equivalent of FA3's .icon-ban-circle).
   Colour matches the .error status tint used across the lists. */
.cabinet-content .ca-list__flag-ban {
    color: #c0392b;
    font-size: 15px;
    line-height: 1;
}

/* header row: hide on mobile, the reflowed card layout below has no
   room for standalone column captions */
@media (max-width: 767px) {
    .cabinet-content .ca-list .ca-list__head {
        display: none;
    }

    /* same five grid areas, reflowed into a 3-line card: tracking
       number on its own line, icon/status/checkbox sharing a line,
       description below - matches the card shape every other list in
       the redesign already uses on mobile */
    .cabinet-content .ca-list .trk-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "number number number"
            "icon   status check"
            "desc   desc   desc";
        row-gap: 8px;
    }
}

/* "Tracking number / Description / Status" captions: the old (deleted) theme.css paints
   these italic in a low-contrast blue-grey (#a6b6c7) - flatten to the
   same muted-uppercase-caption look used for dashboard/table headers
   elsewhere (section 9's ".admintable > thead > tr > th"). */
.cabinet-content .ca-list__head {
    font-style: normal;
}

.cabinet-content .ca-list__caption {
    color: var(--text--heading);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* row divider: the old (deleted) theme.css hardcodes #9eb0c2 (desktop ":after" pseudo-
   element) / #dee1e5 (>=1185px header rule) - both replaced with the
   shared border token used everywhere else in the redesign. */
.cabinet-content .ca-list__row + .ca-list__row:not(:last-child):after,
.cabinet-content .ca-list__head:after {
    background-color: var(--border--input) !important;
}

/* tracking-number link: the old (deleted) theme.css's ".ca-list__code" is a leftover
   dark-navy (#003f78) permanently-underlined link - per request this
   reads as data (an ID), not a call-to-action, so it's the same near-
   black used for headings rather than the landing blue link color;
   still tints blue on hover/focus as the interactive affordance. */
.cabinet-content .ca-list__code {
    color: var(--text--heading);
    font-weight: 600;
    text-decoration: none;
}

.cabinet-content .ca-list__code:hover,
.cabinet-content .ca-list .ca-list__code:active,
.cabinet-content .ca-list .ca-list__code:focus {
    color: var(--hover--blue);
    text-decoration: underline;
}

.cabinet-content .parcel_number {
    color: var(--text--heading);
    font-weight: 600;
    text-decoration: none;
}

.cabinet-content .parcel_number:hover,
.cabinet-content .ca-list .parcel_number:active,
.cabinet-content .ca-list .parcel_number:focus {
    color: var(--hover--blue);
    text-decoration: underline;
}

/* status colors: the old (deleted) theme.css's ".good"/".error"/".gray" (used for both
   the row's own "Received"/"Not received" status and the ".track-menu"
   quick-action links in an expanded row) use off-palette hex - map to
   the same green/red/muted tokens used for alerts and field errors
   elsewhere in the redesign. */
.cabinet-content .admintable .good,
.cabinet-content .ca-list .ca-list__body .good {
    color: #1f7a46;
}

.cabinet-content .admintable .error,
.cabinet-content .ca-list .ca-list__body .error,
.cabinet-content .ca-list .ca-list__status .error {
    color: #c0392b;
}

.cabinet-content .ca-list .ca-list__body .gray,
.cabinet-content .ca-list .ca-list__status .gray {
    color: #8b96a5;
}

/* the row's own status (".good"/".error"/".gray"/".yelow"/
   ".yellow-warning", from StatusColorTag::WWWClassname() - mytrackings.
   php wraps the status text in one of these spans already, no template
   change needed) styled as a pill badge instead of plain colored text,
   same tinted-chip language as the alert icons (section 11) and the
   dashboard count badges (section 16) - and scoped to ".ca-list__status"
   specifically so it doesn't reach the same classes reused on
   ".track-menu"/notices links inside the expanded row, which stay plain
   text links. */
.cabinet-content .ca-list .ca-list__status > span {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.cabinet-content .ca-list .ca-list__status .good {
    color: #1f7a46;
    background-color: rgba(31, 122, 70, .1);
}

.cabinet-content .ca-list .ca-list__status .error {
    color: #c0392b;
    background-color: rgba(192, 57, 43, .1);
}

.cabinet-content .ca-list .ca-list__status .gray {
    color: #8b96a5;
    background-color: var(--section--grey-bg);
}

.cabinet-content .ca-list .ca-list__status .yelow {
    color: var(--blue--brand);
    background-color: rgba(45, 66, 170, .1);
}

.cabinet-content .ca-list .ca-list__status .yellow-warning {
    color: var(--brand--orange);
    background-color: rgba(237, 107, 56, .1);
}

/* generalized version of the pill rule above: every Phase 3/4 bespoke
   grid rewrite (myinvoices, tickets, certificates, and more to come)
   wraps its status cell's content in a plain ".ca-list__cell"
   div (not the trackings-specific ".ca-list__status"), so repeating a
   per-page copy of the same 6 rules doesn't scale - this one rule
   covers all of them. Scoped to a DIRECT child (">") of
   ".ca-list__cell" specifically so it can't reach the same
   .good/.error classes nested deeper inside notices/track-menu
   contexts (those live inside .ca-list__desc/.ca-collapse, never
   as a direct child of .ca-list__cell). */
.cabinet-content .ca-list .ca-list__cell > .good,
.cabinet-content .ca-list .ca-list__cell > .error,
.cabinet-content .ca-list .ca-list__cell > .gray,
.cabinet-content .ca-list .ca-list__cell > .yelow,
.cabinet-content .ca-list .ca-list__cell > .yellow-label,
.cabinet-content .ca-list .ca-list__cell > .yellow-warning {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.cabinet-content .ca-list .ca-list__cell > .good {
    color: #1f7a46;
    background-color: rgba(31, 122, 70, .1);
}

.cabinet-content .ca-list .ca-list__cell > .error {
    color: #c0392b;
    background-color: rgba(192, 57, 43, .1);
}

.cabinet-content .ca-list .ca-list__cell > .gray {
    color: #8b96a5;
    background-color: var(--section--grey-bg);
}

.cabinet-content .ca-list .ca-list__cell > .yelow,
.cabinet-content .ca-list .ca-list__cell > .yellow-label {
    color: var(--blue--brand);
    background-color: rgba(45, 66, 170, .1);
}

.cabinet-content .ca-list .ca-list__cell > .yellow-warning {
    color: var(--brand--orange);
    background-color: rgba(237, 107, 56, .1);
}

/* ".track-menu": the expanded-row quick-action links ("Request
   photo(s)", "Additional package", "Return to sender" etc., shared by
   both the trackings and parcels list - scoped to ".ca-collapse" rather
   than trackings' own ".ca-list__detail" so both pick it up, since
   ".ca-list__detail" itself always carries the ".ca-collapse" class) -
   per request, styled as real buttons (same grey-pill family as
   ".wf-btn", just smaller since this is a cluster of equal-
   weight peer actions rather than one primary CTA) instead of a plain
   vertical list of text links. ".ca-list__menu"'s markup already wraps
   each link in its own <div> - flex-wrap turns that same markup into a
   wrapped row of chips with no template change needed.
   ".track-menu.error" ("Utilize") keeps a danger-tinted variant. */
.cabinet-content .ca-list .ca-collapse .ca-list__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cabinet-content .ca-list .ca-collapse .ca-list__menu > div {
    margin: 0;
}

.cabinet-content .ca-list .ca-collapse .track-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    background-color: var(--btn--grey-bg);
    color: var(--blue--brand);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s;
}

.cabinet-content .ca-list .ca-collapse .track-menu:hover {
    background-color: var(--btn--grey-bg-hover);
    color: var(--blue--brand);
    text-decoration: none;
}

.cabinet-content .ca-list .ca-collapse .track-menu.error {
    color: #c0392b;
}

.cabinet-content .ca-list .ca-collapse .track-menu.error:hover {
    background-color: rgba(192, 57, 43, .1);
    color: #a8321f;
}

/* Trackings' expanded row stacks the same links as a vertical BS5 button
   group. It lives in the tracking-number column, directly under the
   "collapse" link, so it starts at the top of the panel beside the
   description instead of below it; the same .ca-collapse toggle that drives
   the rest of the expanded row shows/hides it. Parcels keeps the shared
   wrapped chip row above.
   Both the shared ".ca-list__menu" flex-wrap row and ".track-menu"'s own
   pill radius out-specify Bootstrap's own .btn-group-vertical rules, so
   the group's layout and joined corners are re-stated here rather than
   left to Bootstrap. margin-top:0 cancels BS5's border-collapsing negative
   margin, which would otherwise eat the divider below. */
/* spacing from the "collapse" link above it */
.cabinet-content .mytrecking .trk-actions {
    margin-top: 10px;
}

.cabinet-content .mytrecking .trk-actions .ca-list__menu {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.cabinet-content .mytrecking .trk-actions .track-menu {
    width: 100%;
    justify-content: flex-start;
    border-radius: 0;
}

.cabinet-content .mytrecking .trk-actions .track-menu + .track-menu {
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, .7);
}

.cabinet-content .mytrecking .trk-actions .track-menu:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.cabinet-content .mytrecking .trk-actions .track-menu:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* ".track-additional-menu": a second, separate set of quick-action
   links ("Leave the original packaging" etc, plus whatever a tracking
   item's own "notices"/"logitems" pass along) shown both in the
   collapsed row's description and at the bottom of the expanded panel
   (".ca-list__code-log"). the old (deleted) theme.css already rendered these as
   bordered pill buttons rather than plain links, but in old off-
   palette colors (#2c6da4 blue, #c31f1f red border/hover-fill) - same
   fix as ".track-menu" above, just carried over to this second button
   family so every button in the row reads as one consistent design
   system instead of two different vintages. */
.cabinet-content .track-additional-menu-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: normal;
}

.cabinet-content .ca-list__code-log {
    margin-top: 8px;
}

.cabinet-content .track-additional-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background-color: var(--btn--grey-bg);
    color: var(--blue--brand);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .25s;
}

.cabinet-content .track-additional-menu:hover {
    background-color: var(--btn--grey-bg-hover);
    color: var(--blue--brand);
    text-decoration: none;
}

.cabinet-content .track-additional-menu-error {
    color: #c0392b !important;
    border: none !important;
}

.cabinet-content .track-additional-menu-error:hover {
    background-color: rgba(192, 57, 43, .1);
    color: #a8321f !important;
}

/* subtle hover affordance on each row (not the already-expanded/
   ".selected" one, which keeps its own tint) */
.cabinet-content .ca-list .ca-list__row.ca-list__body:not(.selected):hover {
    background-color: var(--section--grey-bg);
}

/* the expanded row's "Save" button (input.wf-btn,
   no "btn-transparent-orange" class here) gets re-un-styled back to the
   old transparent/orange-outline look by the old (deleted) theme.css's own nested
   ".cabinet-content .ca-list .deliveryorder_form .cabinet__
   delivery_form_button" (1 id + 3 classes), which beats the section-16
   blue-chevron rule (1 id + 1 class) that skins this button everywhere
   else. Repeat that recipe with the same (1,3,0) chain so it wins here
   too. */
.cabinet-content .ca-list .deliveryorder_form .wf-btn,
.cabinet-content .ca-list .deliveryorder_form #delivery_form_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 28px 0 20px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 100%;
    color: #fff;
    background: var(--blue--brand);
    border: none;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    transition: all .55s;
}

.cabinet-content .ca-list .deliveryorder_form .wf-btn:hover,
.cabinet-content .ca-list .deliveryorder_form #delivery_form_button:hover {
    color: #fff;
    background: var(--btn--hover-blue);
}

@media (max-width: 767px) {
    .cabinet-content .ca-list {
        padding: 16px;
    }
}

/* =========================================================================
   20b. Parcels list (.ca-list, myparcels)
   ---------------------------------------------------------------------
   Same treatment as section 20's trackings list, same grid mechanics
   (one shared column template for header + every row, top-aligned, a
   card reflow on mobile) - kept as its own class family (".prc-row"/
   ".prc-cell--*" vs. trackings' ".trk-row"/".trk-cell--*") since the
   column count/purpose differs (icon/code/status/weight/icons/total/
   check, 7 areas vs. trackings' 5). Markup: themes/3axid/clientarea_
   myparcels.tpl (header) + clientarea_myparcelslist.tpl (rows) - both
   theme-local overrides of the shared themes/default/ originals, so
   this redesign doesn't touch whatever other theme still uses those.
   ".ca-list__code"/".track-menu"/".ca-delivery-icon" color and icon
   rules from section 20 already apply here for free (same classes,
   same markup pattern) - only the grid layout and the parcel-specific
   status badges need their own rules below. */
.cabinet-content .ca-list .prc-row {
    display: grid;
    grid-template-columns: 40px minmax(120px, 1fr) minmax(220px, 2.4fr) 70px 40px 80px 28px;
    grid-template-areas: "icon code desc weight icons total check";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .prc-cell--icon { grid-area: icon; }
.cabinet-content .ca-list .prc-cell--code { grid-area: code; min-width: 0; }
.cabinet-content .ca-list .prc-cell--desc { grid-area: desc; min-width: 0; }
.cabinet-content .ca-list .prc-cell--weight { grid-area: weight; }
.cabinet-content .ca-list .prc-cell--icons { grid-area: icons; }
.cabinet-content .ca-list .prc-cell--total { grid-area: total; }
.cabinet-content .ca-list .prc-cell--check { grid-area: check; justify-self: center; }

/* clientarea_sortation_terminal.tpl reuses .prc-row/.prc-cell--* for
   its own header row (its section headings + row list both share the
   same 7-column icon/code/desc/weight/icons/total/check shape as
   myparcels) plus two small classes that were only ever defined in
   the legacy stylesheet: ".subtitledash" (section heading, "Paid (3)
   1.2kg") and ".text-yellow" (a promo-notice text tint). Modernized to
   the design tokens rather than the old italic/hardcoded-hex look;
   the trailing weight/total figure is right-aligned via flex instead
   of the old ".pull-right" float. */
.cabinet-content .subtitledash {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: normal;
    font-size: 15px;
    color: var(--text--heading);
    padding: 12px 0;
}

.cabinet-content .text-yellow {
    color: var(--brand--orange);
}

.cabinet-content .text-blue {
    color: var(--blue--brand);
}

.cabinet-content .text-center {
    text-align: center;
}

.cabinet-content .pull-left {
    float: left;
}

.cabinet-content .pull-right {
    float: right;
}

/* the parcel's own status line ("Packed into container"/"Not paid"
   etc.) - "parcel_status_detail" and the is_paid/ne_proplachena spans
   both reuse the same StatusColorTag classes as the trackings status
   (.good/.error/.gray/.yelow/.yellow-warning), so the same pill-badge
   treatment applies here, scoped to just the visible status line (the
   ".clearfix" wrapper) - the hidden expanded panel's price/tracking
   rows reuse ".parcel__notices" too but as plain labeled text, not a
   status, so they're deliberately left alone. */
.cabinet-content .ca-list .ca-list__desc > .clearfix .good,
.cabinet-content .ca-list .ca-list__desc > .clearfix .error,
.cabinet-content .ca-list .ca-list__desc > .clearfix .gray,
.cabinet-content .ca-list .ca-list__desc > .clearfix .yelow,
.cabinet-content .ca-list .ca-list__desc > .clearfix .yellow-warning {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.cabinet-content .ca-list .ca-list__desc > .clearfix .good {
    background-color: rgba(31, 122, 70, .1);
}

.cabinet-content .ca-list .ca-list__desc > .clearfix .error {
    background-color: rgba(192, 57, 43, .1);
}

/* the old (deleted) theme.css's own ">=1186px" media block re-zeroes padding just for
   ".error" inside ".ca-list__desc" (two rules: one scoped to
   ".myparcels", one not - 5 and 4 classes respectively), which outguns
   the pill rule above (4 classes) on the "myparcels"-scoped one and so
   silently strips only the red/error badge's box on desktop while
   good/gray/yelow/yellow-warning keep theirs. Re-assert with matching-
   or-higher specificity (same selectors plus ".clearfix") so error
   reads as the same pill shape, color aside. */
.cabinet-content .myparcels .ca-list .ca-list__body .ca-list__desc .clearfix .error,
.cabinet-content .ca-list .ca-list__body .ca-list__desc .clearfix .error {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background-color: rgba(192, 57, 43, .1);
}

.cabinet-content .ca-list .ca-list__desc > .clearfix .gray {
    background-color: var(--section--grey-bg);
}

.cabinet-content .ca-list .ca-list__desc > .clearfix .yelow {
    color: var(--blue--brand);
    background-color: rgba(45, 66, 170, .1);
}

.cabinet-content .ca-list .ca-list__desc > .clearfix .yellow-warning {
    color: var(--brand--orange);
    background-color: rgba(237, 107, 56, .1);
}

@media (max-width: 767px) {
    /* five visual groups (icon, code, status, weight+price, checkbox)
       reflowed into a card: code on its own line, icon/weight/icons/
       checkbox sharing a line, status below - same shape as the
       trackings card reflow in section 20 */
    .cabinet-content .ca-list .prc-row {
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas:
            "code   code   code   code"
            "icon   weight icons  check"
            "desc   desc   desc   desc"
            "total  total  total  total";
        row-gap: 8px;
    }

    .cabinet-content .ca-list .prc-cell--total {
        font-weight: 700;
    }
}

/* =========================================================================
   20b(ii). Parcels list on the TGrid panel design
   ---------------------------------------------------------------------
   Bring myparcels onto the same look as the redesigned admintable
   (common_admintable.css): borderless white row panels on a grey
   backdrop with blue header captions, instead of one white card split by
   divider lines. Scoped to ".myparcels" so the sibling lists that share
   ".ca-list" (trackings, promo codes, sortation terminal)
   keep the section-20 card treatment. Both row states work: the
   collapsed row IS the panel, and the expanded ".ca-collapse" block just
   grows the same panel. Header and every row share the ".prc-row" grid,
   so giving them the same 20px horizontal padding keeps columns aligned.
   ========================================================================= */
.cabinet-content .myparcels .ca-list {
    background-color: var(--section--grey-bg);
    box-shadow: none;
    border-radius: 0;
    padding: 8px 4px;
}

.cabinet-content .myparcels .ca-list__head {
    background: transparent;
    padding: 4px 20px;
}

.cabinet-content .myparcels .ca-list__caption {
    color: var(--blue--brand);
}

/* the divider line between items is gone - the panel gaps separate them */
.cabinet-content .myparcels .ca-list__row + .ca-list__row:not(:last-child):after,
.cabinet-content .myparcels .ca-list__head:after {
    display: none !important;
}

.cabinet-content .myparcels .ca-list__row.ca-list__body {
    background: #fff;
    box-shadow: var(--card--shadow);
    margin-bottom: 4px;
    padding: 16px 20px;
}

/* the two row states. The collapse/expand toggle (parcelOpenUp/CloseUp in
   script-20200910.js) adds/removes ".is-collapsed" on the row's
   ".ca-collapse" blocks, but the rule that actually HIDES a closed block
   was lost with the old theme.css, so every row rendered permanently
   expanded. Restore it here (scoped to myparcels): collapsed by default
   (the template ships ".ca-collapse is-collapsed"), clicking the parcel
   code expands just that row's extra menu + price/tracking rows. */
.cabinet-content .myparcels .ca-collapse.is-collapsed {
    display: none;
}

/* expanded row: lift the open panel above its collapsed neighbours with a
   stronger, softer shadow (no border) so it reads as raised rather than
   outlined - the ":has" matches a row whose hidden block is shown */
.cabinet-content .myparcels .ca-list__row.ca-list__body:has(.ca-collapse:not(.is-collapsed)) {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
    position: relative;
    z-index: 1;
}

/* no row hover: the shared grey-tint hover (cabinet.css:4159, 0,6,0) reads
   as a glitch on the white panels - keep the panel white on hover */
.cabinet-content .myparcels .ca-list__row.ca-list__body:hover {
    background-color: #fff !important;
}

/* delivery-type icon in the first column, shared by the parcels AND
   trackings lists (both emit ".ca-delivery-icon.icon_<tag>"). The mapping
   was lost with the old theme.css; restored from the recorded 3axid one
   (files in themes/3axid/images/, reached as "../images/" from
   assets/cabinet.css). ".selected" (expanded/checkbox-picked) rows use the
   "_1" variant. Trackings nests the icon one level deeper in a
   ".ca-delivery-icon__inner" wrapper, so both wrappers get the centered column. */
.cabinet-content .ca-list .ca-delivery-icon__wrap,
.cabinet-content .ca-list .ca-delivery-icon__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cabinet-content .ca-list .ca-delivery-icon {
    width: 40px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cabinet-content .ca-list .ca-delivery-icon.icon_airregular,
.cabinet-content .ca-list .ca-delivery-icon.icon_airexpress { background-image: url(../images/delivery_air.svg); }
.cabinet-content .ca-list .ca-delivery-icon.icon_searegular,
.cabinet-content .ca-list .ca-delivery-icon.icon_seastandard,
.cabinet-content .ca-list .ca-delivery-icon.icon_seaexpress { background-image: url(../images/delivery_ship.svg); }
.cabinet-content .ca-list .ca-delivery-icon.icon_groundregular { background-image: url(../images/delivery_truck.svg); }

.cabinet-content .ca-list .selected .ca-delivery-icon.icon_airregular,
.cabinet-content .ca-list .selected .ca-delivery-icon.icon_airexpress,
.cabinet-content .ca-list .selected .ca-delivery-icon.icon_searegular,
.cabinet-content .ca-list .selected .ca-delivery-icon.icon_seastandard,
.cabinet-content .ca-list .selected .ca-delivery-icon.icon_seaexpress,
.cabinet-content .ca-list .selected .ca-delivery-icon.icon_groundregular {
    filter: invert(8%) sepia(99%) saturate(4174%) hue-rotate(239deg) brightness(67%) contrast(119%);
}

.cabinet-content .ca-list .ca-delivery-icon__country {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text--body);
}

/* =========================================================================
   20(ii). Trackings list on the TGrid panel design (mytrackings)
   ---------------------------------------------------------------------
   Same redesign as the parcels list (20b(ii)), scoped to ".mytrecking".
   Trackings keeps the class-toggling trackingOpenUp/CloseUp
   (script-20200910.js), so its collapse works purely off ".is-collapsed"
   and the ":has" expanded highlight keys off the class directly (unlike
   parcels' newer inline-display toggle). The rule that HIDES a collapsed
   block was lost with the old theme.css, so every row showed its full
   detail/summary permanently - restored below for all three collapsed
   element kinds: ".ca-collapse" (close-up link + the detail panel), the
   editable ".ca-collapse-input" description, and the read-only
   ".ca-desc-readonly" description that swaps out when the input appears.
   ========================================================================= */
.cabinet-content .mytrecking .ca-list {
    background-color: var(--section--grey-bg);
    box-shadow: none;
    border-radius: 0;
    padding: 8px 4px;
}

.cabinet-content .mytrecking .ca-list__head {
    background: transparent;
    padding: 4px 20px;
}

.cabinet-content .mytrecking .ca-list__caption {
    color: var(--blue--brand);
}

.cabinet-content .mytrecking .ca-list__row + .ca-list__row:not(:last-child):after,
.cabinet-content .mytrecking .ca-list__head:after {
    display: none !important;
}

.cabinet-content .mytrecking .ca-list__row.ca-list__body {
    background: #fff;
    box-shadow: var(--card--shadow);
    margin-bottom: 4px;
    padding: 16px 20px;
}

.cabinet-content .mytrecking .ca-collapse.is-collapsed,
.cabinet-content .mytrecking .ca-collapse-input.is-collapsed,
.cabinet-content .mytrecking .ca-desc-readonly.is-collapsed {
    display: none;
}

/* expanded row: lift the open panel with a stronger shadow (matches
   parcels) - here the ":has" works because the class really toggles */
.cabinet-content .mytrecking .ca-list__row.ca-list__body:has(.ca-collapse:not(.is-collapsed)) {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
    position: relative;
    z-index: 1;
}

/* no row hover on the white panels */
.cabinet-content .mytrecking .ca-list__row.ca-list__body:hover {
    background-color: #fff !important;
}

/* ---- label-over-control form component (.trk-form) --------------------
   Shared by the trackings expanded row and the add-tracking form
   (clientarea_addtrack.tpl), which is why this is not scoped to
   ".mytrecking" - the class names are unique to those two templates.
   Rows of fields, each field stacking its label above its control:
   [declared price][delivery type] / [invoice file][invoice url] / [save].
   Labels sit over their input at every width, so the old right-aligned
   2-column grid - and the narrow-width override that used to stack it -
   are both gone. Selects pick up the chevron from section 17.2 (same
   control as the filter form). */
.cabinet-content .trk-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cabinet-content .trk-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
}

.cabinet-content .trk-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cabinet-content .trk-form__field--wide {
    flex: 1 1 260px;
}

.cabinet-content .trk-form__label {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text--heading);
    white-space: nowrap;
    margin: 0;
}

.cabinet-content .trk-form__control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.cabinet-content .trk-form__control .form-control {
    width: auto;
    min-width: 150px;
}

/* inside a Bootstrap column the control owns the full width - the auto/
   min-width above is for the flex rows, where fields size to content */
.cabinet-content .trk-form .row .trk-form__control,
.cabinet-content .trk-form .row .trk-form__control .form-control {
    width: 100%;
}

.cabinet-content .trk-form__control textarea.form-control {
    width: 100%;
    min-height: 90px;
}

/* Control sizing. The filter form gets "padding: 6px 12px" only because it
   sits inside ".form-add"; this detail form does not, so it fell through to
   the legacy bare-element rule ("select, input[type=text], .form-control")
   and its vw padding - 16px 24px at 1440. On a 34px-tall control that is
   32px of vertical padding, which collapsed the select's content box and
   rendered it blank. Match the filter form explicitly instead; the select
   keeps the section 18 chevron's reserved right gutter. */
.cabinet-content .trk-form .form-control {
    padding: 6px 12px;
}

.cabinet-content .trk-form select.form-control {
    padding-right: 32px;
}

.cabinet-content .trk-form__field--wide .form-control {
    flex: 1 1 260px;
    max-width: 520px;
}

/* save closes the form, bottom right */
.cabinet-content .trk-form__actions {
    display: flex;
    justify-content: flex-end;
}

/* status notices (.mytrackings[i].notices - "photo ordered", "inspection
   ordered"...) were inline spans running together; render as a list */
.cabinet-content .mytrecking .ca-list__desc .ca-list__notice {
    display: list-item;
    list-style: disc inside;
    margin: 3px 0;
}

/* =========================================================================
   20c. Promo codes list (.ca-list, promo-codes)
   ---------------------------------------------------------------------
   promo_codes_forwarding.php already emitted its own raw ".invoice
   ca-list" HTML directly (page-owned markup, not the shared
   TGrid/common_admintable.tpl pipeline other cabinet pages delegate
   to), so - like trackings/parcels - this is a template-free rewrite:
   own class prefix (".promo-row"/".promo-cell--*") since the column
   set differs from trk-row/prc-row. Reuses the same top-aligned,
   shared-grid-template-between-header-and-rows technique.
   ========================================================================= */
.cabinet-content .ca-list .promo-row {
    display: grid;
    grid-template-columns: minmax(200px, 3fr) 60px minmax(120px, 1fr) minmax(140px, 1fr);
    grid-template-areas: "code country reward used";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .promo-cell--code { grid-area: code; min-width: 0; }
.cabinet-content .ca-list .promo-cell--country { grid-area: country; }
.cabinet-content .ca-list .promo-cell--reward { grid-area: reward; }
.cabinet-content .ca-list .promo-cell--used { grid-area: used; }

.cabinet-content .promo-code__value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text--heading);
    letter-spacing: .02em;
}

/* the code's own "reason" note (e.g. an Instagram-campaign label) used
   to be wrapped in ".alert.alert-info" - turning a one-line inline note
   into a full white card with its own icon/shadow, floating
   disconnected above the code it actually describes. A small muted
   pill reads as what it is: metadata attached to the code above it. */
.cabinet-content .promo-code__reason {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--section--grey-bg);
    color: var(--text--body);
    font-size: 11px;
}

.cabinet-content .promo-cell--reward .ca-list__cell {
    color: var(--brand--orange);
    font-weight: 700;
}

/* "Applied at ..." reads as a success confirmation, same family as the
   trackings/parcels status pills */
.cabinet-content .promo-cell--used .ca-list__cell {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    background-color: rgba(31, 122, 70, .1);
    color: #1f7a46;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .cabinet-content .ca-list .promo-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "code    code"
            "country reward"
            "used    used";
        row-gap: 8px;
    }
}

/* =========================================================================
   21. Forwarding address (submodules/forwarding-address.php)
   ---------------------------------------------------------------------
   The per-division warehouse address a customer copies into their
   online orders - a high-traffic page (dashboard "Shopping"/"Switch
   cabinet to" links + the top-nav "Addresses" chip all point here).
   Both PHP-side components this page uses (LabelValueBlock, the label/
   value row renderer; WWWAccordion, the collapsible per-division tab
   list) are single-consumer classes (verified: nothing else in the
   codebase instantiates either), so - like the trackings/parcels/
   promo-codes rewrites - this is a safe, template-free redesign: their
   RenderHTML() output was changed to emit page-owned class names
   instead of reusing generic ones ("adminform_table"/"form-group" -
   also, coincidentally, the settings pages' own class names, though a
   different code path entirely) so this page can be styled on its own
   without any risk of touching settings.
   ========================================================================= */

/* WWWAccordion's own wrapper class scopes every rule below - the inner
   ".panel"/".panel-heading"/".panel-collapse" classes stay Bootstrap's
   own (both for the JS collapse binding elsewhere and because FAQ's
   accordion reuses those same bare classes; ".accordion-container" is
   unique to this component, confirmed no other template emits it). */
.cabinet-content .accordion-container .panel {
    background-color: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: var(--card--shadow);
    margin-bottom: 8px;
    overflow: hidden;
}

.cabinet-content .accordion-container .panel-heading {
    background-color: var(--section--grey-bg);
    border-bottom: none;
    border-radius: 0;
    padding: 0;
}

.cabinet-content .accordion-container .panel-title {
    margin: 0;
}

.cabinet-content .accordion-container .panel-title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--blue--brand);
    text-decoration: none;
}

/* open/closed affordance - the panel had none. Keys off aria-expanded,
   which BS5's Collapse keeps in sync on the trigger, so no extra class
   is needed. Same chevron artwork as the select control (section 18). */
.cabinet-content .accordion-container .panel-title a::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232d42aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px;
    transition: transform .2s ease;
}

.cabinet-content .accordion-container .panel-title a[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* white body under the grey header - needs its own top padding now that
   the heading is no longer the same colour as the panel */
.cabinet-content .accordion-container .panel-body {
    padding: 20px;
}

.cabinet-content .fwd-address {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.cabinet-content .fwd-address__col {
    flex: 1 1 320px;
    min-width: 0;
}

.cabinet-content .fwd-address__title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--blue--brand);
    font-size: 15px;
    margin: 0 0 12px;
}

/* label/value address rows (LabelValueBlock::RenderHTML) */
.cabinet-content .lv-block__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.cabinet-content .lv-block__label {
    color: var(--text--body);
    font-size: 13px;
}

.cabinet-content .lv-block__value {
    text-align: right;
}

.cabinet-content .lv-block__separator {
    display: flex;
    align-items: center;
    background: var(--section--grey-bg);
    color: var(--text--heading);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 12px 20px;
    border-radius: 10px;
    margin: 24px 0 4px;
}

/* the address value itself - reuses the same StatusColorTag classes
   (.good/.error/.gray/.yelow/.yellow-warning) as the trackings/parcels
   status pills and promo-codes "Applied" pill, so the same semantic
   colors carry over here for free; every value already gets this pill
   treatment regardless of color (a plain field still reads as data,
   not a random inline label) */
.cabinet-content .forwarding-address-component {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 8px;
    background-color: var(--section--grey-bg);
    color: var(--text--heading);
    font-weight: 600;
    font-size: 13px;
}

.cabinet-content .forwarding-address-component.good {
    background-color: rgba(31, 122, 70, .1);
    color: #1f7a46;
}

.cabinet-content .forwarding-address-component.error {
    background-color: rgba(192, 57, 43, .1);
    color: #c0392b;
}

.cabinet-content .forwarding-address-component.yelow {
    background-color: rgba(45, 66, 170, .1);
    color: var(--blue--brand);
}

.cabinet-content .forwarding-address-component.yellow-warning {
    background-color: rgba(237, 107, 56, .1);
    color: var(--brand--orange);
}

.cabinet-content .clipboard-copy-with-fa {
    cursor: pointer;
    color: inherit;
    opacity: .7;
    transition: opacity .2s;
}

.cabinet-content .clipboard-copy-with-fa:hover {
    opacity: 1;
}

.cabinet-content .fwd-address__schedule {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border--input);
}

/* single column, not a 2-per-row grid: most days are a short "8am -
   6pm" value, but weekend rows can carry a full sentence instead
   ("warehouse open for receiving cargo") - a 2-up grid has no clean way
   to let just those rows span both columns, so every row gets the full
   row width and a fixed-width day label keeps the values lined up */
.cabinet-content .fwd-address__schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cabinet-content .fwd-address__schedule-row {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--text--body);
}

.cabinet-content .fwd-address__schedule-row strong {
    flex: 0 0 90px;
}

.cabinet-content .fwd-address__schedule-row:has(span:not(:only-child)) {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .cabinet-content .accordion-container .panel-title a {
        padding: 14px 16px;
    }

    .cabinet-content .accordion-container .panel-body {
        padding: 16px;
    }

    .cabinet-content .lv-block__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cabinet-content .lv-block__value {
        text-align: left;
    }

    .cabinet-content .fwd-address__schedule-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   20d. Invoices list (.ca-list, myinvoices)
   ---------------------------------------------------------------------
   myinvoices.php's list view (sm_action('myinvoices')) was refactored
   off the shared TGrid/common_admintable.tpl pipeline onto page-owned
   markup, same reasoning as trackings/parcels/promo-codes: this is one
   of the highest-traffic cabinet pages (linked from every dashboard
   variant + the persistent top nav), worth the one-time PHP cost of
   moving it onto its own grid instead of settling for Phase 1's
   generic TGrid polish. The invoice DETAIL view (sm_action(
   'viewinvoice')) stays on the generic pipeline for now - it branches
   into 4+ different nested TGrid shapes depending on invoice type
   (templated/parcels-based/custom-invoice), each considerably higher
   risk to rewrite for lower relative traffic (reached only after
   clicking into one specific invoice).
   ========================================================================= */
.cabinet-content .ca-list .inv-row {
    display: grid;
    grid-template-columns: minmax(90px, .8fr) minmax(110px, 1fr) minmax(200px, 2.5fr) minmax(90px, .8fr) minmax(100px, .8fr);
    grid-template-areas: "date num desc sum status";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .inv-cell--date { grid-area: date; color: var(--text--body); }
.cabinet-content .ca-list .inv-cell--num { grid-area: num; min-width: 0; }
.cabinet-content .ca-list .inv-cell--desc { grid-area: desc; min-width: 0; color: var(--text--body); }
.cabinet-content .ca-list .inv-cell--sum { grid-area: sum; font-weight: 700; color: var(--text--heading); }
.cabinet-content .ca-list .inv-cell--status { grid-area: status; }

/* unpaid invoices on non-forwarding accounts get a real "Pay" button
   (was a bare text link before) - same small grey-pill family as the
   track-menu/track-additional-menu buttons elsewhere */
.cabinet-content .ca-list .inv-cell--status a.wf-btn {
    height: 30px;
    padding: 0 16px;
    margin: 0;
}

@media (max-width: 767px) {
    .cabinet-content .ca-list .inv-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "num    num"
            "date   sum"
            "desc   desc"
            "status status";
        row-gap: 8px;
    }
}

/* =========================================================================
   20e. Support tickets list (.ca-list, tickets)
   ---------------------------------------------------------------------
   support.php's list view (sm_action('tickets')) refactored off the
   shared TGrid/common_admintable.tpl pipeline the same way as
   myinvoices - linked from the persistent top-nav "unanswered ticket"
   badge, so worth the same one-time cost. The per-row "Details" button
   already had real design-system styling from earlier in this project
   (the shared "#yelow_button" id, reused by prepareaddticket) - kept
   as-is, just swapped from a JS-onclick <button> to a plain <a href>
   for the same destination (simpler, works without JS, same look).
   ========================================================================= */
.cabinet-content .ca-list .tkt-row {
    display: grid;
    grid-template-columns: 50px minmax(200px, 2fr) minmax(90px, .8fr) minmax(140px, 1.2fr) minmax(100px, .7fr);
    grid-template-areas: "num subject info status action";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .tkt-cell--num { grid-area: num; color: var(--text--body); }
.cabinet-content .ca-list .tkt-cell--subject { grid-area: subject; min-width: 0; }
.cabinet-content .ca-list .tkt-cell--info { grid-area: info; color: var(--text--body); font-size: 13px; }
.cabinet-content .ca-list .tkt-cell--status { grid-area: status; }
.cabinet-content .ca-list .tkt-cell--action { grid-area: action; }

@media (max-width: 767px) {
    .cabinet-content .ca-list .tkt-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "subject subject"
            "num     info"
            "status  status"
            "action  action";
        row-gap: 8px;
    }
}

/* =========================================================================
   20f. Certificates list (.ca-list, certificates)
   ---------------------------------------------------------------------
   certificates_forwarding.php refactored off TGrid the same way as
   myinvoices/tickets - simplest of the Phase 4 pages (4 columns, no
   filter bar). ".error"/".gray"/".good" pills carry the same semantic
   meaning as everywhere else: expired = red, still-active (shows an
   expiry date) = neutral grey, used = green/positive.
   ========================================================================= */
.cabinet-content .ca-list .cert-row {
    display: grid;
    grid-template-columns: 70px minmax(90px, 1fr) minmax(140px, 1.5fr) minmax(80px, .8fr);
    grid-template-areas: "id sum status action";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .cert-cell--id { grid-area: id; color: var(--text--body); }
.cabinet-content .ca-list .cert-cell--sum { grid-area: sum; font-weight: 700; color: var(--text--heading); }
.cabinet-content .ca-list .cert-cell--status { grid-area: status; }
.cabinet-content .ca-list .cert-cell--action { grid-area: action; }

@media (max-width: 767px) {
    .cabinet-content .ca-list .cert-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "id     sum"
            "status status"
            "action action";
        row-gap: 8px;
    }
}

/* =========================================================================
   20g. Bonuses ledger (.ca-list, bonusesoperationslist)
   ---------------------------------------------------------------------
   bonuses.php refactored off TGrid - simplest Phase 4 page (4 columns,
   no actions/filters). The +/- bonus amount reuses the same .good/.error
   spans as everywhere else, now picked up by the generalized pill rule.
   ========================================================================= */
.cabinet-content .ca-list .bns-row {
    display: grid;
    grid-template-columns: 90px minmax(200px, 2.5fr) minmax(90px, .8fr) minmax(90px, .8fr);
    grid-template-areas: "time desc sum end";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .bns-cell--time { grid-area: time; color: var(--text--body); font-size: 13px; }
.cabinet-content .ca-list .bns-cell--desc { grid-area: desc; min-width: 0; color: var(--text--body); }
.cabinet-content .ca-list .bns-cell--sum { grid-area: sum; }
.cabinet-content .ca-list .bns-cell--end { grid-area: end; font-weight: 700; color: var(--text--heading); }

@media (max-width: 767px) {
    .cabinet-content .ca-list .bns-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "desc desc"
            "time sum"
            "end  end";
        row-gap: 8px;
    }
}

/* =========================================================================
   20h. Cashback list (.ca-list, cashback)
   ---------------------------------------------------------------------
   cashback.php refactored off TGrid the same way as certificates/bonuses -
   most complex Phase 4 page (7 columns, delete-confirm action). The
   filter-tab TButtons bar above the grid is untouched/out of scope.
   ".good"/".error" status pills reuse the generalized rule.
   ========================================================================= */
.cabinet-content .ca-list .csh-row {
    display: grid;
    grid-template-columns: 50px 90px 90px 90px minmax(160px, 2fr) minmax(120px, 1.2fr) 40px;
    grid-template-areas: "id date sum type desc status remove";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .csh-cell--id { grid-area: id; color: var(--text--body); }
.cabinet-content .ca-list .csh-cell--date { grid-area: date; color: var(--text--body); font-size: 13px; }
.cabinet-content .ca-list .csh-cell--sum { grid-area: sum; font-weight: 700; color: var(--text--heading); }
.cabinet-content .ca-list .csh-cell--type { grid-area: type; color: var(--text--body); }
.cabinet-content .ca-list .csh-cell--desc { grid-area: desc; min-width: 0; color: var(--text--body); font-size: 13px; }
.cabinet-content .ca-list .csh-cell--status { grid-area: status; }
.cabinet-content .ca-list .csh-cell--remove { grid-area: remove; }

.cabinet-content .ca-list .csh-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text--body);
    background: var(--bg--muted, #f2f4f7);
    transition: color .15s ease, background-color .15s ease;
}

.cabinet-content .ca-list .csh-delete-btn:hover {
    color: #fff;
    background: var(--color--error, #e5484d);
}

@media (max-width: 767px) {
    .cabinet-content .ca-list .csh-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "desc   desc"
            "id     date"
            "sum    type"
            "status status"
            "remove remove";
        row-gap: 8px;
    }
}

/* =========================================================================
   20i. Customs payments list (.ca-list, m15)
   ---------------------------------------------------------------------
   m15.php refactored off TGrid the same way as the other Phase 4 pages -
   most columns of the four (originally 8: title/url/date/sum/parcels/
   status/payment_url/i_paid). The last two action columns (a "pay now"
   button plus an "I've paid"/"hide"/"restore watching" button) are
   conceptually a single action slot per row, so they're merged into one
   ".m15-cell--action" cell instead of carrying an always-mostly-empty
   extra grid column - simpler than replicating TGrid's original
   RemoveColumn('payment_url') "hide entirely if no row uses it" behavior.
   The receipt-link ("Квитанція") keeps its own thin column since it's
   informational, not an action. ".gray"/".good"/".yellow-label" status
   pills reuse the generalized rule (".yellow-label" added there as an
   alias for ".yelow" - same look, same semantic tier).
   ========================================================================= */
.cabinet-content .ca-list .m15-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.3fr) minmax(80px, .8fr) 90px 90px minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(150px, 1.4fr);
    grid-template-areas: "title url date sum parcels status action";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .m15-cell--title { grid-area: title; }
.cabinet-content .ca-list .m15-cell--url { grid-area: url; font-size: 13px; }
.cabinet-content .ca-list .m15-cell--date { grid-area: date; color: var(--text--body); font-size: 13px; }
.cabinet-content .ca-list .m15-cell--sum { grid-area: sum; font-weight: 700; color: var(--text--heading); }
.cabinet-content .ca-list .m15-cell--parcels { grid-area: parcels; min-width: 0; color: var(--text--body); font-size: 13px; }
.cabinet-content .ca-list .m15-cell--status { grid-area: status; }
.cabinet-content .ca-list .m15-cell--action { grid-area: action; }

.cabinet-content .ca-list .m15-cell--action .yellow_button,
.cabinet-content .ca-list .m15-cell--action .btn-regular {
    margin: 0 6px 6px 0;
}

@media (max-width: 767px) {
    .cabinet-content .ca-list .m15-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title   title"
            "parcels parcels"
            "date    sum"
            "url     status"
            "action  action";
        row-gap: 8px;
    }
}

/* =========================================================================
   20j. Customer documents list (.ca-list, customerdocs)
   ---------------------------------------------------------------------
   customerdocs.php refactored off TGrid - 4 columns (file/pages/
   accepted/delete). ".good-bold"/".yellow-bold" yes/verification markers
   keep their base-theme colored-bold-text look (they're inline word
   markers, not statuses pills). The delete action reuses cashback's
   .csh-delete-btn (identical semantics: small trash icon-button).
   ========================================================================= */
.cabinet-content .ca-list .doc-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(140px, 1.5fr) minmax(110px, 1fr) 40px;
    grid-template-areas: "file pages accepted delete";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .doc-cell--file { grid-area: file; min-width: 0; word-break: break-all; }
.cabinet-content .ca-list .doc-cell--pages { grid-area: pages; color: var(--text--body); }
.cabinet-content .ca-list .doc-cell--accepted { grid-area: accepted; }
.cabinet-content .ca-list .doc-cell--delete { grid-area: delete; }

@media (max-width: 767px) {
    .cabinet-content .ca-list .doc-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "file     file"
            "pages    pages"
            "accepted delete";
        row-gap: 8px;
    }
}

/* =========================================================================
   20k. Vehicle orders list (.ca-list, vehicles)
   ---------------------------------------------------------------------
   vehicles.php's main list (sm_action('vehicles')) refactored off TGrid -
   6 columns. The unread-messages badge (".label.label-danger") and the
   VIN line (".gray.gray__block") keep their existing styling. The
   "Переглянути" per-row link becomes an .wf-btn-style button like
   myinvoices' "Pay". The vehicledetails tab grids stay on the shared
   pipeline (complex TTabs context, covered by section 9's baseline).
   ========================================================================= */
.cabinet-content .ca-list .veh-row {
    display: grid;
    grid-template-columns: 60px minmax(130px, 1.2fr) minmax(170px, 1.8fr) minmax(90px, .8fr) minmax(120px, 1fr) minmax(110px, .9fr);
    grid-template-areas: "id service vehicle price status view";
    align-items: start;
    gap: 10px 16px;
}

.cabinet-content .ca-list .veh-cell--id { grid-area: id; color: var(--text--body); }
.cabinet-content .ca-list .veh-cell--service { grid-area: service; min-width: 0; }
.cabinet-content .ca-list .veh-cell--vehicle { grid-area: vehicle; min-width: 0; color: var(--text--body); }
.cabinet-content .ca-list .veh-cell--price { grid-area: price; font-weight: 700; color: var(--text--heading); }
.cabinet-content .ca-list .veh-cell--status { grid-area: status; color: var(--text--body); }
.cabinet-content .ca-list .veh-cell--view { grid-area: view; }

@media (max-width: 767px) {
    .cabinet-content .ca-list .veh-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "vehicle vehicle"
            "service service"
            "id      price"
            "status  status"
            "view    view";
        row-gap: 8px;
    }
}

/* =========================================================================
   21b. Recipient address-book cards (myreceivers)
   ---------------------------------------------------------------------
   receivers.php's list refactored off TGrid onto a responsive card grid
   instead of table rows - each recipient is a compact address block
   (name, multi-line UA address, phone + confirm link, three
   verification statuses, edit/delete actions), which reads far better
   as a card than as a 6-column row. Same card language as the rest of
   the redesign (white, bordered, soft shadow per --card--shadow).
   ".label.label-*" badges and ".good-bold"/".error-bold"/".yellow-bold"
   markers reuse existing styling.
   ========================================================================= */
.cabinet-content .rcv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cabinet-content .rcv-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--section--grey-bg);
    border-radius: 12px;
    box-shadow: var(--card--shadow);
}

.cabinet-content .rcv-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cabinet-content .rcv-card__name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text--heading);
}

.cabinet-content .rcv-card__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.cabinet-content .rcv-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--text--body);
    background: var(--btn--grey-bg);
    transition: color .15s ease, background-color .15s ease;
}

.cabinet-content .rcv-icon-btn:hover {
    color: #fff;
    background: var(--blue--brand);
}

.cabinet-content .rcv-icon-btn--danger:hover {
    color: #fff;
    background: #c0392b;
}

.cabinet-content .rcv-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cabinet-content .rcv-card__note {
    font-size: 12px;
    color: var(--text--body);
}

.cabinet-content .rcv-card__address {
    color: var(--text--body);
    font-size: 13px;
    line-height: 1.5;
}

.cabinet-content .rcv-card__statuses {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text--body);
    border-top: 1px solid var(--section--grey-bg);
    padding-top: 10px;
}

.cabinet-content .rcv-card__files {
    font-size: 13px;
    color: var(--text--body);
    margin-top: auto;
}

/* =========================================================================
   21c. Parcel-wizard step indicator + recipient picker (inetparcelwizard,
        parcelfromukrainewizard)
   ---------------------------------------------------------------------
   Both wizards already track their position via wizard_step_number()
   (previously surfaced only as "Step N/5" in the page title); the new
   wizard_progress_html() in each wizard PHP renders it as this visual
   stepper: numbered dots joined by connector lines, done steps filled
   blue with a checkmark, the current step outlined. The connector line
   is drawn by each step's ::before, spanning back to the previous
   step's center - so ".wiz-step--done + .wiz-step" (a step right after
   a completed one) is exactly the segment that should read as
   "traversed"/blue.
   ".wiz-recipient-picker" wraps select-recipient's TNavigation
   (common_adminnavigation.tpl's .anav-container) to restyle its items
   as clickable address cards without touching any other TNavigation
   consumer.
   ========================================================================= */
.cabinet-content .wiz-steps {
    display: flex;
    align-items: flex-start;
    margin: 4px 0 24px;
}

.cabinet-content .wiz-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    min-width: 0;
}

.cabinet-content .wiz-step + .wiz-step::before {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(50% + 22px);
    left: calc(-50% + 22px);
    height: 2px;
    background: var(--section--grey-bg);
}

.cabinet-content .wiz-step--done + .wiz-step::before {
    background: var(--blue--brand);
}

.cabinet-content .wiz-step__dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--section--grey-bg);
    color: var(--text--body);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
}

.cabinet-content .wiz-step--done .wiz-step__dot {
    background: var(--blue--brand);
    border-color: var(--blue--brand);
    color: #fff;
}

.cabinet-content .wiz-step--current .wiz-step__dot {
    border-color: var(--blue--brand);
    color: var(--blue--brand);
}

.cabinet-content .wiz-step__label {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text--body);
    padding: 0 4px;
}

.cabinet-content .wiz-step--current .wiz-step__label {
    color: var(--text--heading);
    font-weight: 600;
}

@media (max-width: 767px) {
    .cabinet-content .wiz-step__label {
        display: none;
    }
    .cabinet-content .wiz-step--current .wiz-step__label {
        display: block;
    }
}

.cabinet-content .wiz-recipient-picker .anav-container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cabinet-content .wiz-recipient-picker .anav-item a {
    display: block;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--section--grey-bg);
    border-radius: 10px;
    color: var(--text--body);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.cabinet-content .wiz-recipient-picker .anav-item a:hover {
    border-color: var(--blue--brand);
    color: var(--blue--brand);
}

/* =========================================================================
   22. Dashboard hero (dashboard_forwarding.php's $hero_panel)
   ---------------------------------------------------------------------
   PHP emits fresh, purpose-built markup (".dashboard-hero" >
   ".dashboard-hero__actions" + "__stats") for a cozier, glanceable
   dashboard: big tappable action cards for the highest-frequency tasks,
   plus small stat tiles surfacing balance, bonuses, unread
   notifications and unpaid invoices. Both families are expressed in the
   landing's own component recipes rather than in bespoke values: the
   action cards follow ".wf-btn" (square, uppercase Montserrat 700,
   .55s), the stat tiles follow ".wf-card.grey", and both take the 2px
   orange-on-hover ring the landing puts on interactive cards
   (".wf-card.wf-link"). Nothing here should introduce a colour, radius
   or timing that isn't already a token or a landing value.
   ========================================================================= */

.cabinet-content .dashboard-hero {
    margin-top: 8px;
    margin-bottom: 8px;
}

.cabinet-content .dashboard-hero__actions,
.cabinet-content .dashboard-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* the notifications tile can grow tall (it hosts the unread list) -
   keep the other stat tiles at their natural compact height instead
   of stretching to match it */
.cabinet-content .dashboard-hero__stats {
    align-items: flex-start;
}

.cabinet-content .dashboard-hero__actions {
    margin-bottom: 12px;
}

/* big tappable action cards - flat/square-edged per request, matching
   the landing's own button language rather than the rounded card look:
   ".wf-btn" in landing.webflow.css is square, uppercase Montserrat 700
   and transitions over .55s, and its "white" variant is a white ground
   with brand-blue text, which is what the resting state below is. The
   drawn border is the landing's interactive-card ring
   (".wf-card.wf-link", 2px) rather than the form-input grey it used to
   be, so :hover can recolour it without shifting layout. Only the last
   button in the row (whichever one that ends up being - "Add tracking
   number" was moved to the end specifically so it's the one that gets
   this) gets the landing's signature arrow-notch right edge, same
   "only the last button keeps the chevron" rule as .top-section__nav
   (section 6). Padding is 1px tighter than it reads because the ring
   grew from 1px to 2px - the outer box is unchanged. */
.cabinet-content .hero-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 220px;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 0;
    padding: 15px 19px;
    box-shadow: var(--card--shadow);
    color: var(--blue--brand);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .55s;
}

/* sortation-terminal parcel counter on the Parcels action card - same
   .notification-badge pill as the top-nav Parcels button; the gap:12px
   above already spaces it from the label, so drop the pill's own
   inline margin */
.cabinet-content .hero-action .notification-badge {
    margin-left: 0;
}

/* the landing's hover affordance for an interactive card is its ring
   going orange (".wf-card.wf-link:hover"), and its links tint orange
   the same way (".wrap.wf-link:hover") - so no lift and no bespoke
   shadow here, which is what this used to do. */
.cabinet-content .hero-action:hover {
    border-color: var(--brand--orange);
    color: var(--brand--orange);
    text-decoration: none;
}

/* the solid-blue CTA variant is the landing's default ".wf-btn", whose
   hover is a flat step to --btn--hover-blue rather than the orange
   ring, so it opts out of the rule above */
.cabinet-content .hero-action--primary {
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
    color: #fff;
}

.cabinet-content .hero-action--primary:hover {
    background-color: var(--btn--hover-blue);
    border-color: var(--btn--hover-blue);
    color: #fff;
}

.cabinet-content .hero-action:last-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.cabinet-content .hero-action__icon {
    display: block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cabinet-content .hero-action--add-tracking .hero-action__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.cabinet-content .hero-action--tracking .hero-action__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.7-7-11.5a7 7 0 1 1 14 0C19 14.3 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.7-7-11.5a7 7 0 1 1 14 0C19 14.3 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

.cabinet-content .hero-action--parcels .hero-action__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/%3E%3Cpath d='M12 12v9M12 12l8-4.5M12 12L4 7.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/%3E%3Cpath d='M12 12v9M12 12l8-4.5M12 12L4 7.5'/%3E%3C/svg%3E");
}

.cabinet-content .hero-action--send .hero-action__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}

/* distribution-center glyph (open-front warehouse with a delivery
   truck parked in the doorway) - per reference image; the hanging-
   boxes/conveyor detail from the reference is dropped at this size
   (22px) since it turned to noise once mask-rendered that small,
   same reasoning as every other icon here staying to 2-3 shape
   groups - distinct from the plain paper-plane "send" icon it used
   to share with .hero-action--send */
.cabinet-content .hero-action--sort-term .hero-action__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8L12 2l10 6'/%3E%3Cpath d='M3 8v12M21 8v12'/%3E%3Cpath d='M1 20h22'/%3E%3Cpath d='M4 18v-8h9v8'/%3E%3Cpath d='M13 18v-5h3l1.5 2.5v2.5'/%3E%3Ccircle cx='7' cy='19.3' r='2'/%3E%3Ccircle cx='15' cy='19.3' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8L12 2l10 6'/%3E%3Cpath d='M3 8v12M21 8v12'/%3E%3Cpath d='M1 20h22'/%3E%3Cpath d='M4 18v-8h9v8'/%3E%3Cpath d='M13 18v-5h3l1.5 2.5v2.5'/%3E%3Ccircle cx='7' cy='19.3' r='2'/%3E%3Ccircle cx='15' cy='19.3' r='2'/%3E%3C/svg%3E");
}

/* sortation-terminal hero action, informative state: shown when the
   customer's consolidated weight hasn't reached their free-delivery
   threshold yet (DeliveryConsolidationCustomer::MinWeightFor
   ConsolidationKG() - 0 for carrier setups with no such threshold, so
   this state never applies there) - dashboard_forwarding.php sets the
   "--progress" custom property inline per customer. The fill is a
   real span, not a gradient background, so its width can be driven by
   the inline custom property directly. Once the threshold is met (or
   never applied), the tile switches to ".hero-action--sort-term-ready"
   instead - a flat brand-blue tint marking free delivery as already
   unlocked, no progress info needed. */
.cabinet-content .hero-action--progress {
    position: relative;
    overflow: hidden;
}

.cabinet-content .hero-action--progress .hero-action__progress-fill {
    position: absolute;
    inset: 0;
    width: var(--progress);
    background-color: rgba(45, 66, 170, .16);
    z-index: 0;
}

.cabinet-content .hero-action--progress .hero-action__icon,
.cabinet-content .hero-action--progress .hero-action__body,
.cabinet-content .hero-action--progress .dashboardli__badge {
    position: relative;
    z-index: 1;
}

.cabinet-content .hero-action__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* body copy, not a button label - so it opts out of the uppercase the
   landing's button recipe puts on .hero-action (it is a full sentence,
   and in Ukrainian and Russian it is a long one) */
.cabinet-content .hero-action__weight-info {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    text-transform: none;
    color: var(--text--body);
}

.cabinet-content .hero-action--progress .dashboardli__badge {
    margin-left: auto;
    flex-shrink: 0;
}

/* free-delivery-unlocked state reuses the "Add tracking number" CTA
   look exactly (solid brand blue + the landing's arrow-notch), so it
   reads as the same "start here" call to action - unlike that button
   the notch isn't conditional on being last in the row, since this
   tile can land anywhere in the actions list */
.cabinet-content .hero-action--sort-term-ready {
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.cabinet-content .hero-action--sort-term-ready:hover {
    background-color: var(--btn--hover-blue);
    border-color: var(--btn--hover-blue);
    color: #fff;
}

/* compact glanceable stat tiles - the landing's grey card
   (".wf-card.grey": grey ground, the same soft shadow --card--shadow
   carries, no drawn border, and square corners - the landing draws no
   radius on any card), so they read as siblings of the
   .dashboard-panel cards directly below them. They carry the same 2px
   interactive ring as .hero-action - transparent at rest, orange on
   hover - and the same .55s transition; padding is 1px tighter to keep
   the outer box where it was when the ring was 1px. */
.cabinet-content .hero-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 140px;
    background-color: var(--section--grey-bg);
    border: 2px solid transparent;
    border-radius: 0;
    box-shadow: var(--card--shadow);
    padding: 13px 17px;
    text-decoration: none;
    transition: all .55s;
}

.cabinet-content .hero-stat:hover {
    background-color: var(--btn--grey-bg-hover);
    border-color: var(--brand--orange);
    text-decoration: none;
}

/* unpaid invoices / unread notifications: the orange ring is already
   the design's attention signal, so this state just makes it visible
   at rest and tints the ground to match */
.cabinet-content .hero-stat--attention {
    background-color: rgba(237, 107, 56, .1);
    border-color: rgba(237, 107, 56, .4);
}

.cabinet-content .hero-stat--attention:hover {
    background-color: rgba(237, 107, 56, .18);
    border-color: var(--brand--orange);
}

.cabinet-content .hero-stat__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text--heading);
    line-height: 1.2;
}

.cabinet-content .hero-stat--attention .hero-stat__value {
    color: var(--brand--orange);
}

.cabinet-content .hero-stat__label {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text--body);
    margin-top: 2px;
}

/* the notifications tile hosts the unread-notification links (moved
   here from the left column's alert cards per request): the tile is a
   <div> now, with the count/label as an inner .hero-stat__link and a
   compact .hero-stat__items list below it */
.cabinet-content .hero-stat--notifications {
    justify-content: flex-start;
}

.cabinet-content .hero-stat__link {
    display: block;
    text-decoration: none;
}

.cabinet-content .hero-stat__link:hover {
    text-decoration: none;
}

.cabinet-content .hero-stat__items {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cabinet-content .hero-stat__items li {
    margin: 0;
    line-height: 1.4;
}

.cabinet-content .hero-stat__items a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: var(--blue--brand);
    transition: color .55s;
}

/* landing link hover is an orange tint, not an underline */
.cabinet-content .hero-stat__items a:hover {
    color: var(--brand--orange);
    text-decoration: none;
}

.cabinet-content .hero-stat__items-all a {
    font-weight: 600;
}

/* With unread notifications the tile is emitted as a DIRECT CHILD of
   .dashboard-hero, ahead of the action buttons, rather than as one of the
   stat tiles (dashboard_forwarding.php picks the position). It is the most
   urgent thing on the dashboard, so it leads.

   That placement is done in PHP, not here, because CSS "order" can only
   reorder siblings - it cannot lift the tile out of .dashboard-hero__stats
   and above .dashboard-hero__actions. An earlier version of this section
   did use order:1 to give it its own row INSIDE the stats flex; that rule
   is gone because the element is no longer in that container.

   With no unread notifications it stays in the stats row as an ordinary
   tile, and none of this applies. */
.cabinet-content .dashboard-hero > .hero-stat--notifications {
    margin-bottom: 12px;   /* matches .dashboard-hero__actions' own gap */
}

@media (max-width: 767px) {
    .cabinet-content .hero-action,
    .cabinet-content .hero-stat {
        flex: 1 1 calc(50% - 6px);
    }

    .cabinet-content .hero-action {
        padding: 13px 15px;
        font-size: 13px;
    }

    /* the diagonal chevron notch only reads well on a single wide row -
       on the 2-column mobile grid the last card is a narrow, often
       vertically-stacked tile and the clipped corner just looks broken.
       Same reasoning applies to the sortation-terminal "ready" tile,
       which carries its own unconditional notch above. */
    .cabinet-content .hero-action:last-child,
    .cabinet-content .hero-action--sort-term-ready {
        clip-path: none;
        padding-right: 0.4vw;
    }
}

@media (max-width: 479px) {
    .cabinet-content .hero-action {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 13px 9px;
        flex: 1 1 calc(50% - 6px);
    }

    .cabinet-content .hero-stat {
        flex: 1 1 calc(50% - 6px);
    }
}

/* =========================================================================
   24. askforurl confirm modal (index.tpl)
   ---------------------------------------------------------------------
   Vanilla replacement for the old bootstrap .modal() markup - this theme
   never loaded bootstrap.js, so the jQuery .modal() calls were silently
   broken. Plain hidden-attribute toggle, no JS framework involved. */
.ca-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.ca-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 28, 46, .5);
}

.ca-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(19, 28, 46, .18);
    max-width: 560px;
    width: calc(100% - 32px);
    padding: 24px;
}

.ca-modal__body {
    font-size: 15px;
    color: var(--text--body);
    margin-bottom: 20px;
}

.ca-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* disabled payment method (e.g. PayPal unavailable in this division) -
   Bootstrap gave this no styling of its own either, but the deleted
   grid at least kept it in its own half-width column; dim it now that
   there's nothing else marking it as inactive. */
.cabinet-content .manual-transaction-disabled {
    opacity: .45;
    pointer-events: none;
}

/* the auto-allow countdown banner inside a tracking-list notification
   (ObjectNotification\TrackingListAutoAllowSoon) - zero coverage
   anywhere before this, plan step 2 flagged it as unbridged and it
   was never actually ported. Styled as a compact warning strip rather
   than reusing the full .alert card treatment, since it only ever
   holds the single countdown number. */
.cabinet-content .notification__auto_tracking_countdown {
    display: inline-block;
    margin: 8px 0;
    padding: 8px 14px;
    border-radius: 10px;
    background-color: rgba(237, 107, 56, .1);
    border: 1px solid rgba(237, 107, 56, .4);
    color: var(--brand--orange);
    font-family: var(--font-heading);
    font-weight: 700;
}

/* 25.6 notification list rows (right-hand column of the master-detail
   split above) - ported from css/notifications.css, which never
   reaches the 3axid theme at all: sm_add_cssfile() (includes/smcore.php)
   silently no-ops for this theme, a leftover from when 3axid's CSS was
   compiled into one theme_styles.less bundle (deleted earlier this
   migration). Colors modernized to the design tokens rather than the
   original file's raw hex/Bootstrap-alert blues. */
.cabinet-content .notification-in-list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border--input);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 6px;
}

.cabinet-content .alert-notification-read {
    border-color: var(--section--grey-bg);
}

.cabinet-content .alert-notification-unread {
    background-color: rgba(45, 66, 170, .06);
    border-color: #b7c2ea;
    color: var(--blue--brand);
}

.cabinet-content .alert-notification-current {
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
    color: #fff;
}

.cabinet-content .alert-notification-current .notification-list-time,
.cabinet-content .alert-notification-current a {
    color: #fff;
}

.cabinet-content .notification-info-block,
.cabinet-content .notification-info-block-secondary {
    padding: 8px 0 4px;
}


/* =========================================================================
   26. Bootstrap 3 compatibility shim
   ---------------------------------------------------------------------
   WHY THIS EXISTS, AND WHY IT IS NOT TECHNICAL DEBT TO BE "CLEANED UP":

   themes/frontendr (the mobile-app webview, chosen per instance via the
   default_theme DB setting) is a second live theme running real
   Bootstrap 3, and it renders the SAME PHP-emitted markup as this theme -
   TInterface ($ui->div_open('', 'col-md-6')), TForm, TButtons, plus the
   themes/default/*.tpl fallbacks. So the shared vocabulary can never be
   re-written to BS5 for 3axid's benefit without breaking the webview.
   Instead, 3axid teaches Bootstrap 5 to understand the BS3 words.

   Census that justifies each rule below (2026-07-15). Counted only in real
   class contexts - class="..." in templates (Smarty-aware: the attribute
   ends at the first quote at brace-depth 0), and class-list string
   literals in PHP. A naive word-grep inflates this badly: it scores
   $sm['delayed_actions'][...]['panel'] as a .panel and the English word
   "well" as .well. 235 real occurrences, PHP + templates:
     form-control-sm 37, control-label 32, form-group 28, panel family 30,
     btn-xs 24, pull-right/left 16, col-xs-* 17, checkbox/radio 14,
     hidden/visible tiers 12, btn-block 5, btn-default 5, label-* 7,
     form-horizontal 4, offsets 2, help-block 1.
   Bootstrap 5 defines NONE of these (verified against 5.3.8), so without
   this section that markup renders unstyled.

   NOT shimmed, deliberately: .well and .caret (0 real uses - the file's
   convention is to skin only what is actually emitted), .img-responsive,
   .center-block, .table-responsive (0 uses each). .caret additionally
   must NOT be revived: section 18 replaced BS3's border-triangle with a
   mask-image chevron, and bootstrap-select (its only consumer) is gone.

   Rules already covered elsewhere in this file are deliberately NOT
   repeated here: .form-control/.form-control-sm sizing (section 7),
   .control-label (sections 7/19), .btn-default (section 1c via
   .btn-secondary + the alias below), the .panel family's cabinet-specific
   looks (sections 8/19), .checkbox/.radio (section 7), .has-error and
   .help-block (section 7).
   ========================================================================= */

/* -------------------------------------------------------------------------
   26.1 Grid: BS3 rows and the xs tier
   ---------------------------------------------------------------------
   BS3 laid columns out with float:left, so any block could act as a row.
   BS5 columns are flex children (flex:0 0 auto; width:N/12) and get their
   gutters from `.row > *` - outside a flex parent they collapse into a
   stack of N%-wide blocks. That is exactly what broke the mytrackings /
   myparcels filter bars, where the row element is a bare `.form-group`.

   So: any BS3-vocabulary block that directly contains columns is promoted
   to a real BS5 row, mirroring stock `.row` / `.row > *` declarations. The
   :has() guard matters - `.form-group` is far more often a plain
   vertical-rhythm wrapper (label above input), and those must stay block.
   ------------------------------------------------------------------------- */
.cabinet-content .form-group:has(> [class*="col-"]),
.cabinet-content .form-horizontal .form-group:has(> [class*="col-"]) {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

/* Mirrors stock `.row > *` — including its `width: 100%`, which is
   load-bearing. A column whose only tier is inactive at the current width
   (e.g. `col-md-3 col-sm-3` below 576px) has no width rule at all; in real
   BS3 it was a plain block that filled its parent, but as a flex item here
   it would shrink to its content. Without this the mytrackings filter sat
   at ragged content widths on mobile (185/154/288px inside a 358px column),
   while the migrated myparcels filter looked fine because its base tier is
   an explicit `col-12`.

   `:where()` is what makes it safe, and is not cosmetic. Bootstrap's own
   `.row > *` is specificity (0,1,0) exactly so that `.col-md-3` (0,1,0,
   declared later) can beat it. A `.cabinet-content`-scoped version would be
   (0,2,0) and would out-specify EVERY tier rule at every width — pinning
   each column to 100% and stacking the filter on desktop, which is what
   happened the first time this was written. `:where()` contributes zero
   specificity, so the whole selector is (0,0,0): it supplies the base only
   where no tier is active, and every Bootstrap tier still wins. Same trap
   as the col-xs rule above. */
:where(.cabinet-content .form-group:has(> [class*="col-"])) > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

/* .form-group as BS3 knew it: vertical rhythm. BS5's equivalent is .mb-3. */
.cabinet-content .form-group {
    margin-bottom: 15px;
}

/* The xs tier. BS3's col-xs-N is the BASE tier: N/12 at every width, but
   OVERRIDDEN by col-sm-/col-md- above their breakpoints - in BS3 that works
   because every tier is one class (0,1,0) and the higher tiers simply come
   later in the file.

   Here it cannot work that way: these rules must carry the .cabinet-content
   prefix (0,2,0) to stay off the chrome, which out-specifies Bootstrap's own
   (0,1,0) tier rules and would pin the column to its xs width at EVERY
   width. That is not theoretical - it shipped: the myparcels filter's
   `col-md-3 col-sm-3 col-xs-12` computed 100% at 1440px and stacked into
   four rows.

   So cap them at the point where the next BS3 tier takes over (BS3 sm =
   768px). Verified safe: every col-xs- use in this codebase (templates and
   PHP) is paired with a col-sm-/col-md- class, so nothing relies on col-xs-
   surviving above 768px.

   NOTE the tier shift - BS3 and BS5 share class NAMES but not breakpoints:
     BS3 sm = 768 = BS5 md      BS3 md = 992 = BS5 lg
   So PHP markup like `col-md-8 col-sm-4 col-xs-6` renders its md width from
   768px here where BS3 gave the sm width until 992px. Where both tiers
   carry the same N (the common case) it is identical; where they differ the
   column changes width one tier early between 768-991px. Templates are
   migrated to real BS5 tiers instead (Phase 4); PHP cannot be, so this
   residual difference is accepted and documented. */
@media (max-width: 767px) {
    .cabinet-content .col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }
    .cabinet-content .col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
    .cabinet-content .col-xs-3  { flex: 0 0 auto; width: 25%; }
    .cabinet-content .col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
    .cabinet-content .col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
    .cabinet-content .col-xs-6  { flex: 0 0 auto; width: 50%; }
    .cabinet-content .col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
    .cabinet-content .col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
    .cabinet-content .col-xs-9  { flex: 0 0 auto; width: 75%; }
    .cabinet-content .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
    .cabinet-content .col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
    .cabinet-content .col-xs-12 { flex: 0 0 auto; width: 100%; }
}

/* BS3 offsets, at their BS3 breakpoints (sm = 768, md = 992). */
@media (min-width: 768px) {
    .cabinet-content .col-sm-offset-1 { margin-left: 8.33333333%; }
    .cabinet-content .col-sm-offset-2 { margin-left: 16.66666667%; }
}

@media (min-width: 992px) {
    .cabinet-content .col-md-offset-2 { margin-left: 16.66666667%; }
    .cabinet-content .col-md-offset-5 { margin-left: 41.66666667%; }
}

/* -------------------------------------------------------------------------
   26.2 Buttons BS5 dropped
   ------------------------------------------------------------------------- */
/* BS3's default button == BS5's .btn-secondary; keep one recipe (1c). */
.cabinet-content .btn-default {
    --bs-btn-color: var(--blue--brand);
    --bs-btn-bg: var(--btn--grey-bg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--blue--brand);
    --bs-btn-hover-bg: var(--btn--grey-bg-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--blue--brand);
    --bs-btn-active-bg: var(--btn--grey-bg-hover);
}

/* .btn-xs was removed in BS4; it is still emitted 24x from PHP. */
.cabinet-content .btn-xs {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 4px;
    --bs-btn-font-size: 10px;
    --bs-btn-border-radius: 6px;
}

/* .btn-xs-icon small button with only icon, with same left and right paddings */
.cabinet-content .btn-xs-icon {
    padding-left: 0.4vw;
}


/* .btn-block was removed in BS5 (replaced by .d-grid on the parent). */
.cabinet-content .btn-block {
    display: block;
    width: 100%;
}

.cabinet-content .btn-block + .btn-block {
    margin-top: 8px;
}

/* -------------------------------------------------------------------------
   26.3 Utilities BS5 renamed
   ------------------------------------------------------------------------- */
.cabinet-content .pull-right { float: right; }
.cabinet-content .pull-left  { float: left; }
.cabinet-content .center-block { margin-right: auto; margin-left: auto; display: block; }
.cabinet-content .img-responsive { max-width: 100%; height: auto; }

/* BS3 responsive visibility -> BS5 .d-none/.d-*-block. BS3's xs tier ends
   at 767px; sm = 768-991; md = 992-1199. */
@media (max-width: 767px) {
    .cabinet-content .hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .cabinet-content .hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .cabinet-content .hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
    .cabinet-content .hidden-lg { display: none !important; }
}

.cabinet-content .visible-xs,
.cabinet-content .visible-sm,
.cabinet-content .visible-md,
.cabinet-content .visible-lg {
    display: none !important;
}

@media (max-width: 767px) {
    .cabinet-content .visible-xs { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .cabinet-content .visible-sm { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .cabinet-content .visible-md { display: block !important; }
}

@media (min-width: 1200px) {
    .cabinet-content .visible-lg { display: block !important; }
}

/* -------------------------------------------------------------------------
   26.4 Components BS5 dropped or renamed
   ---------------------------------------------------------------------
   .label -> .badge (12 PHP hits). Note .label-* must set colour AND
   background: an anchor styled as a label otherwise inherits the alert
   link colour and goes invisible-on-itself (this was a real bug once -
   compound .label.label-x selectors keep specificity above .alert-x a).
   ------------------------------------------------------------------------- */
.cabinet-content .label {
    display: inline-block;
    padding: .4em .6em;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 6px;
}

.cabinet-content .label.label-default { color: var(--blue--brand); background-color: var(--btn--grey-bg); }
.cabinet-content .label.label-primary { color: #fff; background-color: var(--blue--brand); }
.cabinet-content .label.label-info    { color: #fff; background-color: var(--blue--brand); }
.cabinet-content .label.label-success { color: #fff; background-color: #1f7a46; }
.cabinet-content .label.label-warning { color: #fff; background-color: var(--brand--orange); }
.cabinet-content .label.label-danger  { color: #fff; background-color: #c0392b; }

/* BS3's dismiss button. BS5 renamed it .btn-close and paints its own SVG
   glyph into an empty button; the PHP that emits this (np-office-selector)
   is shared with frontendr and still writes `class="close"` around a
   &times;, so style THAT rather than swap the class - .btn-close would draw
   a second mark beside the &times;. Only the data-bs-dismiss attribute was
   added there, additively. */
.cabinet-content .close {
    float: right;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--text--body);
    text-shadow: none;
    background: transparent;
    border: 0;
    opacity: .5;
    cursor: pointer;
}

.cabinet-content .close:hover,
.cabinet-content .close:focus {
    opacity: 1;
}

.no-transition, .no-transition * {
    transition: none !important;
    animation: none !important;
}
/* =========================================================================
   27. Add-tracking form (clientarea_addtrack.tpl)
   ---------------------------------------------------------------------
   Rebuilt on the shared ".trk-form" component plus real Bootstrap 5 rows,
   replacing the old nested ".form-group"/"col-md-*" scaffolding. Only the
   two pieces with no stock equivalent live here: the on/off switches and
   the "additional paid services" collapse button. The checkboxes keep
   their name/value/id and are still plain <input type="checkbox"> - the
   switch is purely Bootstrap's own .form-switch presentation, so the
   posted form data is byte-identical to the old markup.
   ========================================================================= */
.cabinet-content .ca-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    margin: 0;
    padding-left: 0;
}

/* [hidden] is a UA rule ("display:none") with no specificity, so the flex
   above would win and the sending-hold switch would flash in before its
   script runs. It stays hidden until the script un-hides it. */
.cabinet-content .ca-switch[hidden] {
    display: none;
}

/* "temporarily postpone sending": the real <select name=readytosend_t> is
   kept (hidden - a display:none control still submits) and driven by the
   switch, so the posted value is still whichever option PHP emitted. The
   old <label> for the select is now the help text under the switch. */
.cabinet-content .ca-hold .help-block {
    margin: 0;
}

/* BS5 puts the input in the .form-check padding box; this form lays the
   switch and its label out as flex siblings instead, so that is undone. */
.cabinet-content .ca-switch .form-check-input {
    float: none;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    background-color: #fff;
    border-color: var(--border--input);
}

.cabinet-content .ca-switch .form-check-input:checked {
    background-color: var(--blue--brand);
    border-color: var(--blue--brand);
}

.cabinet-content .ca-switch .form-check-input:focus {
    border-color: var(--blue--brand);
    box-shadow: 0 0 0 .2rem rgba(45, 66, 170, .15);
}

.cabinet-content .ca-switch .form-check-label {
    margin: 0;
    cursor: pointer;
    color: var(--text--heading);
    font-weight: 600;
}

/* the collapse trigger keeps the theme chevron button; the caret mirrors
   the accordion's (section 21) and keys off aria-expanded, which BS5's
   Collapse keeps in sync. */
.cabinet-content .ca-paidservices-toggle {
    display: flex;
}

.cabinet-content .ca-collapse-btn::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 12px;
    transition: transform .2s ease;
}

.cabinet-content .ca-collapse-btn[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* the paid-services panel is a nested .trk-form, so it inherits the row
   rhythm; give it breathing room from the trigger above it */
.cabinet-content #paidservices {
    margin-top: 4px;
}

/* =========================================================================
   28. Material Symbols icon swap
   ---------------------------------------------------------------------
   The cabinet's glyph icons are Google Material Symbols (Outlined),
   not FontAwesome. This is done entirely in CSS, and it has to be: the
   icons are emitted from PHP as <i class="fa fa-truck"></i> (FA::Code()
   in includes/ui/fontawesome.php, ~130 call sites), and that same PHP
   renders under themes/frontendr for the mobile-app webview, which
   still runs FontAwesome. Re-vocabularising the PHP would break the
   webview - section 2 rule 1 of the handoff doc. So the markup keeps
   saying "fa fa-truck" and this section re-points the classes it maps
   at the Material font, swapping the glyph each one resolves to.

   THE TRAP, and why the font-family below is on an explicit list of
   classes rather than on ".fa" as a whole: Material Symbols occupies
   U+E000-U+F8FF, and FontAwesome 4's private-use codepoints
   (U+F000-U+F2FF) sit INSIDE that range. A font fallback stack of
   "Material Symbols Outlined, FontAwesome" therefore does NOT degrade
   gracefully - Material reports a glyph at FontAwesome's codepoint, so
   the browser never falls through, and an unmapped icon renders as a
   silently WRONG Material glyph instead of a missing one. Measured, not
   assumed: at 40px, U+F164 renders 40px wide in Material Symbols and
   37.15px in FontAwesome, and the stacked stack gave 40. So any class
   NOT listed below must never be reached by the Material font-family,
   which is what scoping it to the listed selectors guarantees - those
   icons keep FontAwesome's own ".fa" font and render correctly. That
   safety net is load-bearing: the icon name is not always a literal
   (DeliveryTag::FAForTag(), TButtons and WWW::Html::ClipboardCopy() all
   pass it through a variable), so no grep can prove this list complete.

   Keep the FontAwesome stylesheet loaded in page_header.tpl for that
   reason. It also still supplies the geometry utilities (fa-fw, fa-lg,
   fa-2x, fa-spin), which this section deliberately does not touch.

   Icons resolve by LIGATURE, not codepoint - the content below reads
   "local_shipping" rather than a hex escape, which keeps this table
   auditable against the Material Symbols catalogue. That makes
   "text-transform" load-bearing too: an uppercase ancestor
   (.hero-action and .dashboard-panel__header both set one) would fold
   the name to "LOCAL_SHIPPING", match no ligature, and print the
   literal word. It is neutralised in the shared rule below.

   SCOPE: this section now only serves icons written directly into a
   TEMPLATE as <i class="fa fa-x"> with no text inside. Icons emitted
   from PHP carry the ligature as real text plus a
   ".material-symbols-outlined" class (FA::Code(),
   includes/ui/fontawesome.php) and are styled app-wide by
   ext/tools/material-symbols/material-symbols.css. Hence the
   ":not(.material-symbols-outlined)" on every selector here - without
   it these rules would inject a SECOND glyph through ::before on top of
   the PHP-emitted ligature.

   The font is loaded in page_header.tpl with "display=block" so a
   ligature name is never briefly painted as text during the font swap.
   ========================================================================= */

.cabinet-content .fa-question-circle:not(.material-symbols-outlined):before,
.cabinet-content .fa-info-circle:not(.material-symbols-outlined):before,
.cabinet-content .fa-exclamation-triangle:not(.material-symbols-outlined):before,
.cabinet-content .fa-exclamation:not(.material-symbols-outlined):before,
.cabinet-content .fa-check-circle:not(.material-symbols-outlined):before,
.cabinet-content .fa-check-square-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-ban:not(.material-symbols-outlined):before,
.cabinet-content .fa-bell:not(.material-symbols-outlined):before,
.cabinet-content .fa-star:not(.material-symbols-outlined):before,
.cabinet-content .fa-flag:not(.material-symbols-outlined):before,
.cabinet-content .fa-flag-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-lightbulb-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-bolt:not(.material-symbols-outlined):before,
.cabinet-content .fa-spinner:not(.material-symbols-outlined):before,
.cabinet-content .fa-times:not(.material-symbols-outlined):before,
.cabinet-content .fa-search:not(.material-symbols-outlined):before,
.cabinet-content .fa-print:not(.material-symbols-outlined):before,
.cabinet-content .fa-download:not(.material-symbols-outlined):before,
.cabinet-content .fa-refresh:not(.material-symbols-outlined):before,
.cabinet-content .fa-trash:not(.material-symbols-outlined):before,
.cabinet-content .fa-pencil:not(.material-symbols-outlined):before,
.cabinet-content .fa-pencil-square:not(.material-symbols-outlined):before,
.cabinet-content .fa-pencil-square-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-plus-square:not(.material-symbols-outlined):before,
.cabinet-content .fa-plus-circle:not(.material-symbols-outlined):before,
.cabinet-content .fa-clone:not(.material-symbols-outlined):before,
.cabinet-content .fa-paperclip:not(.material-symbols-outlined):before,
.cabinet-content .fa-eye:not(.material-symbols-outlined):before,
.cabinet-content .fa-eye-slash:not(.material-symbols-outlined):before,
.cabinet-content .fa-sign-out:not(.material-symbols-outlined):before,
.cabinet-content .fa-external-link:not(.material-symbols-outlined):before,
.cabinet-content .fa-external-link-square:not(.material-symbols-outlined):before,
.cabinet-content .fa-arrow-left:not(.material-symbols-outlined):before,
.cabinet-content .fa-arrow-right:not(.material-symbols-outlined):before,
.cabinet-content .fa-arrows-v:not(.material-symbols-outlined):before,
.cabinet-content .fa-exchange:not(.material-symbols-outlined):before,
.cabinet-content .fa-list:not(.material-symbols-outlined):before,
.cabinet-content .fa-list-ul:not(.material-symbols-outlined):before,
.cabinet-content .fa-list-alt:not(.material-symbols-outlined):before,
.cabinet-content .fa-th:not(.material-symbols-outlined):before,
.cabinet-content .fa-th-list:not(.material-symbols-outlined):before,
.cabinet-content .fa-archive:not(.material-symbols-outlined):before,
.cabinet-content .fa-book:not(.material-symbols-outlined):before,
.cabinet-content .fa-newspaper-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-cog:not(.material-symbols-outlined):before,
.cabinet-content .fa-cogs:not(.material-symbols-outlined):before,
.cabinet-content .fa-wrench:not(.material-symbols-outlined):before,
.cabinet-content .fa-calculator:not(.material-symbols-outlined):before,
.cabinet-content .fa-github:not(.material-symbols-outlined):before,
.cabinet-content .fa-money:not(.material-symbols-outlined):before,
.cabinet-content .fa-credit-card:not(.material-symbols-outlined):before,
.cabinet-content .fa-gift:not(.material-symbols-outlined):before,
.cabinet-content .fa-tag:not(.material-symbols-outlined):before,
.cabinet-content .fa-certificate:not(.material-symbols-outlined):before,
.cabinet-content .fa-cart-arrow-down:not(.material-symbols-outlined):before,
.cabinet-content .fa-user:not(.material-symbols-outlined):before,
.cabinet-content .fa-user-plus:not(.material-symbols-outlined):before,
.cabinet-content .fa-users:not(.material-symbols-outlined):before,
.cabinet-content .fa-id-card:not(.material-symbols-outlined):before,
.cabinet-content .fa-envelope:not(.material-symbols-outlined):before,
.cabinet-content .fa-envelope-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-phone:not(.material-symbols-outlined):before,
.cabinet-content .fa-comments:not(.material-symbols-outlined):before,
.cabinet-content .fa-paper-plane:not(.material-symbols-outlined):before,
.cabinet-content .fa-headphones:not(.material-symbols-outlined):before,
.cabinet-content .fa-microphone:not(.material-symbols-outlined):before,
.cabinet-content .fa-microphone-slash:not(.material-symbols-outlined):before,
.cabinet-content .fa-file-text:not(.material-symbols-outlined):before,
.cabinet-content .fa-file-text-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-file-audio-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-picture-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-map-marker:not(.material-symbols-outlined):before,
.cabinet-content .fa-clock-o:not(.material-symbols-outlined):before,
.cabinet-content .fa-cube:not(.material-symbols-outlined):before,
.cabinet-content .fa-cubes:not(.material-symbols-outlined):before,
.cabinet-content .fa-desktop:not(.material-symbols-outlined):before,
.cabinet-content .fa-laptop:not(.material-symbols-outlined):before,
.cabinet-content .fa-tablet:not(.material-symbols-outlined):before,
.cabinet-content .fa-mobile:not(.material-symbols-outlined):before,
.cabinet-content .fa-truck:not(.material-symbols-outlined):before,
.cabinet-content .fa-car:not(.material-symbols-outlined):before,
.cabinet-content .fa-motorcycle:not(.material-symbols-outlined):before,
.cabinet-content .fa-bicycle:not(.material-symbols-outlined):before,
.cabinet-content .fa-plane:not(.material-symbols-outlined):before,
.cabinet-content .fa-fighter-jet:not(.material-symbols-outlined):before,
.cabinet-content .fa-ship:not(.material-symbols-outlined):before,
.cabinet-content .fa-life-ring:not(.material-symbols-outlined):before,
.cabinet-content .fa-cutlery:not(.material-symbols-outlined):before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* status and feedback */
.cabinet-content .fa-question-circle:not(.material-symbols-outlined):before { content: "help"; }
.cabinet-content .fa-info-circle:not(.material-symbols-outlined):before { content: "info"; }
.cabinet-content .fa-exclamation-triangle:not(.material-symbols-outlined):before { content: "warning"; }
.cabinet-content .fa-exclamation:not(.material-symbols-outlined):before { content: "priority_high"; }
.cabinet-content .fa-check-circle:not(.material-symbols-outlined):before { content: "check_circle"; }
.cabinet-content .fa-check-square-o:not(.material-symbols-outlined):before { content: "check_box"; }
.cabinet-content .fa-ban:not(.material-symbols-outlined):before { content: "block"; }
.cabinet-content .fa-bell:not(.material-symbols-outlined):before { content: "notifications"; }
.cabinet-content .fa-star:not(.material-symbols-outlined):before { content: "star"; }
.cabinet-content .fa-flag:not(.material-symbols-outlined):before,
.cabinet-content .fa-flag-o:not(.material-symbols-outlined):before { content: "flag"; }
.cabinet-content .fa-lightbulb-o:not(.material-symbols-outlined):before { content: "lightbulb"; }
.cabinet-content .fa-bolt:not(.material-symbols-outlined):before { content: "bolt"; }
.cabinet-content .fa-spinner:not(.material-symbols-outlined):before { content: "progress_activity"; }

/* actions */
.cabinet-content .fa-times:not(.material-symbols-outlined):before { content: "close"; }
.cabinet-content .fa-search:not(.material-symbols-outlined):before { content: "search"; }
.cabinet-content .fa-print:not(.material-symbols-outlined):before { content: "print"; }
.cabinet-content .fa-download:not(.material-symbols-outlined):before { content: "download"; }
.cabinet-content .fa-refresh:not(.material-symbols-outlined):before { content: "refresh"; }
.cabinet-content .fa-trash:not(.material-symbols-outlined):before { content: "delete"; }
.cabinet-content .fa-pencil:not(.material-symbols-outlined):before { content: "edit"; }
.cabinet-content .fa-pencil-square:not(.material-symbols-outlined):before,
.cabinet-content .fa-pencil-square-o:not(.material-symbols-outlined):before { content: "edit_square"; }
.cabinet-content .fa-plus-square:not(.material-symbols-outlined):before { content: "add_box"; }
.cabinet-content .fa-plus-circle:not(.material-symbols-outlined):before { content: "add_circle"; }
.cabinet-content .fa-clone:not(.material-symbols-outlined):before { content: "content_copy"; }
.cabinet-content .fa-paperclip:not(.material-symbols-outlined):before { content: "attach_file"; }
.cabinet-content .fa-eye:not(.material-symbols-outlined):before { content: "visibility"; }
.cabinet-content .fa-eye-slash:not(.material-symbols-outlined):before { content: "visibility_off"; }
.cabinet-content .fa-sign-out:not(.material-symbols-outlined):before { content: "logout"; }
.cabinet-content .fa-external-link:not(.material-symbols-outlined):before,
.cabinet-content .fa-external-link-square:not(.material-symbols-outlined):before { content: "open_in_new"; }

/* arrows and direction */
.cabinet-content .fa-arrow-left:not(.material-symbols-outlined):before { content: "arrow_back"; }
.cabinet-content .fa-arrow-right:not(.material-symbols-outlined):before { content: "arrow_forward"; }
.cabinet-content .fa-arrows-v:not(.material-symbols-outlined):before { content: "swap_vert"; }
.cabinet-content .fa-exchange:not(.material-symbols-outlined):before { content: "swap_horiz"; }

/* lists and layout */
.cabinet-content .fa-list:not(.material-symbols-outlined):before { content: "list"; }
.cabinet-content .fa-list-ul:not(.material-symbols-outlined):before { content: "add_location_alt"; }
.cabinet-content .fa-list-alt:not(.material-symbols-outlined):before { content: "list_alt"; }
.cabinet-content .fa-th:not(.material-symbols-outlined):before { content: "grid_view"; }
.cabinet-content .fa-th-list:not(.material-symbols-outlined):before { content: "view_list"; }
.cabinet-content .fa-archive:not(.material-symbols-outlined):before { content: "archive"; }
.cabinet-content .fa-book:not(.material-symbols-outlined):before { content: "menu_book"; }
.cabinet-content .fa-newspaper-o:not(.material-symbols-outlined):before { content: "newspaper"; }

/* settings and tools */
.cabinet-content .fa-cog:not(.material-symbols-outlined):before,
.cabinet-content .fa-cogs:not(.material-symbols-outlined):before { content: "settings"; }
.cabinet-content .fa-wrench:not(.material-symbols-outlined):before { content: "build"; }
.cabinet-content .fa-calculator:not(.material-symbols-outlined):before { content: "calculate"; }
.cabinet-content .fa-github:not(.material-symbols-outlined):before { content: "code"; }

/* money and rewards */
.cabinet-content .fa-money:not(.material-symbols-outlined):before { content: "payments"; }
.cabinet-content .fa-credit-card:not(.material-symbols-outlined):before { content: "credit_card"; }
.cabinet-content .fa-gift:not(.material-symbols-outlined):before { content: "redeem"; }
.cabinet-content .fa-tag:not(.material-symbols-outlined):before { content: "sell"; }
.cabinet-content .fa-certificate:not(.material-symbols-outlined):before { content: "workspace_premium"; }
.cabinet-content .fa-cart-arrow-down:not(.material-symbols-outlined):before { content: "shopping_cart"; }

/* people and contact */
.cabinet-content .fa-user:not(.material-symbols-outlined):before { content: "person"; }
.cabinet-content .fa-user-plus:not(.material-symbols-outlined):before { content: "person_add"; }
.cabinet-content .fa-users:not(.material-symbols-outlined):before { content: "group"; }
.cabinet-content .fa-id-card:not(.material-symbols-outlined):before { content: "badge"; }
.cabinet-content .fa-envelope:not(.material-symbols-outlined):before,
.cabinet-content .fa-envelope-o:not(.material-symbols-outlined):before { content: "mail"; }
.cabinet-content .fa-phone:not(.material-symbols-outlined):before { content: "call"; }
.cabinet-content .fa-comments:not(.material-symbols-outlined):before { content: "forum"; }
.cabinet-content .fa-paper-plane:not(.material-symbols-outlined):before { content: "send"; }
.cabinet-content .fa-headphones:not(.material-symbols-outlined):before { content: "headphones"; }
.cabinet-content .fa-microphone:not(.material-symbols-outlined):before { content: "mic"; }
.cabinet-content .fa-microphone-slash:not(.material-symbols-outlined):before { content: "mic_off"; }

/* documents, places and time */
.cabinet-content .fa-file-text:not(.material-symbols-outlined):before,
.cabinet-content .fa-file-text-o:not(.material-symbols-outlined):before { content: "description"; }
.cabinet-content .fa-file-audio-o:not(.material-symbols-outlined):before { content: "audio_file"; }
.cabinet-content .fa-picture-o:not(.material-symbols-outlined):before { content: "image"; }
.cabinet-content .fa-map-marker:not(.material-symbols-outlined):before { content: "location_on"; }
.cabinet-content .fa-clock-o:not(.material-symbols-outlined):before { content: "schedule"; }

/* parcels */
.cabinet-content .fa-cube:not(.material-symbols-outlined):before { content: "deployed_code"; }
.cabinet-content .fa-cubes:not(.material-symbols-outlined):before { content: "inventory_2"; }

/* devices */
.cabinet-content .fa-desktop:not(.material-symbols-outlined):before { content: "desktop_windows"; }
.cabinet-content .fa-laptop:not(.material-symbols-outlined):before { content: "laptop_windows"; }
.cabinet-content .fa-tablet:not(.material-symbols-outlined):before { content: "tablet"; }
.cabinet-content .fa-mobile:not(.material-symbols-outlined):before { content: "smartphone"; }

/* transport - the delivery-tag glyphs (DeliveryTag::FAForTag) plus the
   vehicle-order icons */
.cabinet-content .fa-truck:not(.material-symbols-outlined):before { content: "local_shipping"; }
.cabinet-content .fa-car:not(.material-symbols-outlined):before { content: "directions_car"; }
.cabinet-content .fa-motorcycle:not(.material-symbols-outlined):before { content: "two_wheeler"; }
.cabinet-content .fa-bicycle:not(.material-symbols-outlined):before { content: "pedal_bike"; }
.cabinet-content .fa-plane:not(.material-symbols-outlined):before { content: "flight"; }
.cabinet-content .fa-fighter-jet:not(.material-symbols-outlined):before { content: "flight_takeoff"; }
.cabinet-content .fa-ship:not(.material-symbols-outlined):before { content: "directions_boat"; }
.cabinet-content .fa-life-ring:not(.material-symbols-outlined):before { content: "sailing"; }
.cabinet-content .fa-cutlery:not(.material-symbols-outlined):before { content: "restaurant"; }

/* =========================================================================
   29. Account icon in the navbar (page_header.tpl)
   ---------------------------------------------------------------------
   The account icon used to exist only in the mobile top bar
   (".grid_3 _16 mb_show"). A second copy now sits in the desktop nav list,
   and both carry a count badge fed by
   $special.uppermenu_notifications_count - the sum of the actionable
   alerts menu_generator_3axid.php collects (pending sortation-terminal
   parcels, support tickets awaiting an answer, unpaid invoices). The
   per-category breakdown stays as the link's title tooltip.

   Why two copies rather than one moved element: the mobile icon is a cell
   of that grid's own layout and cannot be relocated without breaking it,
   and ".nav-menu-two" is RESTYLED at <=991px rather than hidden, so the
   desktop copy would otherwise reappear inside the mobile drawer. Hence
   ".ca-account-li" is hidden at exactly the breakpoint the burger takes
   over (landing.webflow.css: "@media (max-width:991px)" is where
   ".w-nav[data-collapse=medium] .w-nav-button{display:block}" lives).
   ========================================================================= */

.ca-account-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the badge hangs off the icon's top-right corner, same anchoring idea as
   ".menu-button .notification-dot" on the burger, but sized to hold digits */
.ca-account-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #fff;
    background-color: var(--brand--orange);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

/* desktop-only copy: stand down where the burger takes over */
@media screen and (max-width: 991px) {
    .ca-account-li {
        display: none;
    }
}