/* ============================================================
   OneCloud header v2 (ocx-*) - topbar, language switch, toolbar,
   account menu + wallet card, megamenu extras, shared buttons.
   Ported from design-mockups/homepage-redesign/css/styles.css.
   Loaded on every page. Flat fills only: no gradients, no neon.
   ============================================================ */

:root {
    --ocx-primary: var(--brand-primary, #05259f);
    --ocx-secondary: var(--brand-secondary, #3352d3);
    --ocx-ink: #10182b;
    --ocx-muted: #5a657d;
    --ocx-line: #e4e8f2;
    --ocx-tint: rgba(5, 37, 159, 0.06);
    --ocx-green: #14804a;
    /* Matches the theme's .container max-width, so full-bleed sections can keep
       their controls and decorations aligned with the header menu. */
    --ocx-content: 1300px;
}

/* Typography: DM Sans everywhere, matching the live theme */
body,
[class^="ocx-"],
[class*=" ocx-"],
.ocx-search__form input,
button.ocx-cat-tile,
.ocx-search__chip,
.ocx-sg__poptag,
.ocx-sg__all,
.ocx-quotes__arrow,
.ocx-search__close {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------- HEADER: top bar, toolbar, account menu, megamenu extras ---------------- */


/* Top bar */
.ocx-topbar .container > div {
    min-height: 40px;
}

.ocx-topbar__left,
.ocx-topbar__right {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13.5px;
}

.ocx-topbar__contact {
    color: var(--ocx-ink);
    text-decoration: none;
    font-weight: 500;
}

.ocx-topbar__contact:hover {
    color: var(--ocx-primary);
    text-decoration: none;
}

.ocx-topbar__sep {
    width: 1px;
    height: 16px;
    background: var(--ocx-line);
}

.ocx-topbar__notif,
.ocx-topbar__company {
    color: var(--ocx-ink);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ocx-topbar__notif:hover,
.ocx-topbar__company:hover {
    color: var(--ocx-primary);
    text-decoration: none;
}

.ocx-topbar__company span {
    font-weight: 700;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Language / currency switch */
.ocx-lang {
    position: relative;
}

.ocx-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ocx-ink);
    cursor: pointer;
    border-radius: 6px;
}

.ocx-lang__btn:hover { background: #f1f4fc; }
.ocx-lang__sep, .ocx-lang__alt { color: var(--ocx-muted); font-weight: 600; }
.ocx-lang__globe { font-size: 15px; color: var(--ocx-muted); margin-right: 3px; }

.ocx-lang__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--ocx-line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16, 24, 43, 0.14);
    padding: 8px;
}

.ocx-lang.is-open .ocx-lang__menu { display: block; }

.ocx-lang__label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocx-muted);
    padding: 8px 10px 4px;
}

.ocx-lang__item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ocx-ink);
    cursor: pointer;
}

.ocx-lang__item:hover { background: #f1f4fc; }
.ocx-lang__item.is-active { color: var(--ocx-primary); font-weight: 700; }

/* Toolbar buttons: identical at rest, ring only on keyboard focus */
.ocx-tool {
    position: relative;
}

.ocx-toolbar .ocx-tool:focus { outline: none; box-shadow: none; }
.ocx-toolbar .ocx-tool:focus-visible { box-shadow: 0 0 0 3px rgba(5, 37, 159, 0.25); }

.ocx-tool__dot {
    display: none;
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c96a00;
    border: 2px solid #fff;
}

.ocx-tool__dot.is-visible { display: block; }

/* Account dropdown */
.ocx-account { position: relative; }

.ocx-account__menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--ocx-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(16, 24, 43, 0.16);
    padding: 10px;
}

/* Only one menu is ever rendered (Smarty picks guest vs auth). */
.ocx-account.is-open .ocx-account__menu { display: block; }

.ocx-account__menu--guest { min-width: 220px; }
.ocx-account__menu--auth { min-width: 520px; }

.ocx-account__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}

.ocx-account__col { padding: 4px 6px; }
.ocx-account__col + .ocx-account__col { border-left: 1px solid var(--ocx-line); }

.ocx-account__title {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocx-muted);
    padding: 8px 10px 6px;
}

.ocx-account__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ocx-ink);
    text-decoration: none;
    white-space: nowrap;
}

.ocx-account__link i { width: 16px; text-align: center; color: var(--ocx-muted); font-size: 13px; }
.ocx-account__link:hover { background: #f1f4fc; color: var(--ocx-primary); text-decoration: none; }
.ocx-account__link:hover i { color: var(--ocx-primary); }
.ocx-account__link--muted { color: var(--ocx-muted); font-size: 13px; }
.ocx-account__link--danger { color: #b3261e; }
.ocx-account__link--danger i { color: #b3261e; }
.ocx-account__link--danger:hover { background: #fdecec; color: #b3261e; }
.ocx-account__rule { display: block; height: 1px; background: var(--ocx-line); margin: 6px 4px; }

/* Wallet card at the top of the logged-in menu */
.ocx-wallet {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ocx-tint);
    border: 1px solid rgba(5, 37, 159, 0.12);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ocx-wallet:hover { text-decoration: none; border-color: rgba(5, 37, 159, 0.4); }

.ocx-wallet__icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ocx-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.ocx-wallet__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.ocx-wallet__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocx-muted); }
.ocx-wallet__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocx-wallet__amount { font-size: 20px; font-weight: 800; color: var(--ocx-ink); letter-spacing: -0.01em; }

.ocx-wallet__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #c96a00;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 9px;
    line-height: 1;
}

.ocx-wallet__chip i { font-size: 11px; }
.ocx-wallet__chip[hidden] { display: none; }
.ocx-wallet__cta { font-size: 13px; font-weight: 700; color: var(--ocx-primary); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.ocx-wallet.is-low { background: #fff6ec; border-color: rgba(201, 106, 0, 0.35); }
.ocx-wallet.is-low .ocx-wallet__icon { background: #c96a00; }
.ocx-wallet.is-low .ocx-wallet__amount { color: #a35500; }
.ocx-wallet.is-low .ocx-wallet__cta { color: #a35500; }

/* Megamenu extras */
/* Icon tiles in the megamenu: rest = tinted tile + blue glyph; hover = the theme's
   solid blue tile + white glyph (a.oc-mega-item:hover rules in custom.css). */
.ocx-mega-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ocx-mega-icon i { color: var(--ocx-primary); }
a.oc-mega-item:hover .ocx-mega-icon { background: var(--ocx-primary); }
a.oc-mega-item:hover .ocx-mega-icon i { color: #fff; }

.ocx-mega-tlds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 12px 10px;
}

.ocx-mega-tlds a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    border: 1px solid var(--ocx-line);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ocx-primary);
    text-decoration: none;
}

.ocx-mega-tlds a b { font-weight: 600; color: var(--ocx-muted); }
.ocx-mega-tlds a:hover { border-color: var(--ocx-primary); text-decoration: none; }

.ocx-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 8px 0;
    padding: 12px 12px;
    border-top: 1px solid var(--ocx-line);
    font-size: 13px;
    font-weight: 700;
    color: var(--ocx-primary);
    text-decoration: none;
}

.ocx-mega-foot:hover { text-decoration: none; color: #041d7e; }
.ocx-mega-foot i { font-size: 11px; }


@media (max-width: 1199.98px) {
    .ocx-topbar__contact--email { display: none; }
    .ocx-topbar__company span { max-width: 110px; }
    .ocx-account__menu--auth { min-width: 0; width: min(520px, calc(100vw - 32px)); }
}

@media (max-width: 767.98px) {
    .ocx-account__cols { grid-template-columns: 1fr; }
    .ocx-account__col + .ocx-account__col { border-left: 0; border-top: 1px solid var(--ocx-line); }
}

/* ---------------- Buttons ---------------- */

.ocx-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ocx-btn--primary {
    background: var(--ocx-primary);
    color: #fff;
}

.ocx-btn--primary:hover,
.ocx-btn--primary:focus {
    background: #041d7e;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.ocx-btn--white {
    background: #fff;
    color: var(--ocx-primary);
}

.ocx-btn--white:hover,
.ocx-btn--white:focus {
    background: #eef1fb;
    color: var(--ocx-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.ocx-btn--outline-white {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.ocx-btn--outline-white:hover,
.ocx-btn--outline-white:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}


/* ---------------- MOTION SAFETY (header scope) ---------------- */

@media (prefers-reduced-motion: reduce) {
    .ocx-btn {
        transition: none;
    }
}

/* ---------------- MARKETPLACE SUGGESTIONS ----------------
   Result rows shared by the homepage search band and the header search panel.
   They live here, not in ocx-home.css, because the header panel exists on every
   page. The rules are context-free, so both surfaces render identical rows. */

/* Suggestions dropdown */

.ocx-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 8px;
    max-height: 480px;
    overflow-y: auto;
    text-align: left;
}

.ocx-sg__group + .ocx-sg__group {
    border-top: 1px solid var(--ocx-line);
    margin-top: 6px;
    padding-top: 6px;
}

.ocx-sg__label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocx-muted);
    padding: 8px 12px 4px;
}

.ocx-sg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ocx-sg:hover,
.ocx-sg:focus,
.ocx-sg.is-active {
    background: #f1f4fc;
    text-decoration: none;
}

.ocx-sg .ocx-result__logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--ocx-line);
}

.ocx-sg .ocx-result__logo img {
    width: 22px;
    height: 22px;
}

.ocx-sg .ocx-result__logo--icon {
    background: var(--ocx-tint);
    color: var(--ocx-primary);
    border-color: transparent;
}

.ocx-sg__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.ocx-sg__text strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--ocx-ink);
}

.ocx-sg__text span {
    font-size: 12.5px;
    color: var(--ocx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ocx-sg__via {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--ocx-primary);
    white-space: nowrap;
}

.ocx-sg__via em {
    font-style: normal;
    font-weight: 600;
    color: var(--ocx-muted);
    margin-right: 3px;
}

.ocx-sg > i {
    color: var(--ocx-muted);
    font-size: 11px;
}

.ocx-sg__pop {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 12px 10px;
}

.ocx-sg__poptag {
    border: 1px solid var(--ocx-line);
    background: #fff;
    color: var(--ocx-ink);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 7px 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ocx-sg__poptag:hover {
    border-color: var(--ocx-primary);
    color: var(--ocx-primary);
    background: var(--ocx-tint);
}

.ocx-sg__none {
    display: block;
    padding: 12px;
    font-size: 13.5px;
    color: var(--ocx-muted);
}

.ocx-sg__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    border: 0;
    border-top: 1px solid var(--ocx-line);
    background: transparent;
    color: var(--ocx-primary);
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px;
    cursor: pointer;
    border-radius: 0 0 12px 12px;
}

.ocx-sg__all:hover,
.ocx-sg__all.is-active {
    background: #f1f4fc;
}

.ocx-sg__foot {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ocx-muted);
    padding: 12px;
    border-top: 1px solid var(--ocx-line);
    margin-top: 6px;
}

.ocx-sg__none a {
    color: var(--ocx-primary);
    font-weight: 700;
}

/* ---------------- MEGA MENU PANELS (two-audience) ----------------
   Left rail is plain-language jobs, middle is the product list, right is a
   single featured card. Flat fills only, DM Sans, theme tokens. The panel
   itself keeps the theme's .oc-mega-dropdown chrome; these rules only lay out
   the inside, so Bootstrap's dropdown behaviour and ARIA are untouched. */

.ocx-mega__grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr 0.95fr;
    gap: 26px;
    padding: 4px 4px 0;
}

.ocx-mega__head {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ocx-muted);
    margin-bottom: 10px;
}

.ocx-mega__col--need .ocx-mega__head { color: var(--ocx-green); }

/* Left rail: the non-technical entry points */
.ocx-mega__need {
    display: block;
    padding: 9px 10px;
    border-radius: 9px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ocx-mega__need:hover,
.ocx-mega__need:focus {
    background: var(--ocx-tint);
    text-decoration: none;
}

.ocx-mega__need-t {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ocx-ink);
    line-height: 1.35;
}

.ocx-mega__need:hover .ocx-mega__need-t { color: var(--ocx-primary); }

.ocx-mega__need-s {
    display: block;
    font-size: 12.5px;
    color: var(--ocx-muted);
    line-height: 1.45;
    margin-top: 1px;
}

/* Featured card */
.ocx-mega__feat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--ocx-line);
    border-radius: 14px;
    background: var(--ocx-tint);
}

.ocx-mega__feat-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ocx-green);
    background: rgba(20, 128, 74, 0.1);
    border: 1px solid rgba(20, 128, 74, 0.25);
    border-radius: 999px;
    padding: 3px 9px;
    margin-bottom: 12px;
}

.ocx-mega__feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ocx-primary);
    color: #fff;
    font-size: 17px;
    margin-bottom: 12px;
}

.ocx-mega__feat-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ocx-ink);
    line-height: 1.35;
    margin-bottom: 6px;
}

.ocx-mega__feat-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ocx-muted);
    margin-bottom: 14px;
    flex: 1 1 auto;
}

.ocx-mega__feat-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ocx-primary);
    text-decoration: none;
}

.ocx-mega__feat-cta:hover { text-decoration: none; color: #041d7e; }
.ocx-mega__feat-cta i { font-size: 11px; transition: transform 0.15s ease; }
.ocx-mega__feat-cta:hover i { transform: translateX(3px); }

/* Footer bar */
.ocx-mega__foot {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: 12px 6px 2px;
    border-top: 1px solid var(--ocx-line);
}

.ocx-mega__foot-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--ocx-primary);
    text-decoration: none;
}

.ocx-mega__foot-link:hover { text-decoration: none; color: #041d7e; }
.ocx-mega__foot-link i { font-size: 10px; }

/* The counter is the only thing left in the footer bar now that the catalogue
   link is gone, so it reads as a caption on the left rather than a stranded
   right-aligned label. */
.ocx-mega__foot-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ocx-muted);
}

@media (max-width: 1199.98px) {
    /* Collapsed nav: the panel becomes a plain stacked list. */
    .ocx-mega__grid { grid-template-columns: 1fr; gap: 14px; }
    .ocx-mega__col--feat { display: none; }
    .ocx-mega__foot { flex-wrap: wrap; gap: 10px; }
    .ocx-mega__foot-count { margin-left: 0; }
}

/* ---------------- NAV WIDTH (expanded header) ----------------
   With eight top-level items the menu needs ~1270px and the theme container
   caps at 1300px (1270px usable), so the nav sits exactly on the limit at every
   width above the breakpoint, not just one band: the logo and toolbar margins
   then tip it over and a horizontal scrollbar appears. Trimming the nav-link
   padding buys ~80px and keeps the menu expanded on laptops.
   Only applies where the navbar is actually horizontal; below the breakpoint
   the theme's own collapsed-nav rules take over. */

@media (min-width: 1200px) {
    /* !important to match the collapsed-nav rules this theme already uses on the
       same element; without it the trim is overridden and the scrollbar returns. */
    header.header .main-header #nav > .oc-mega-parent > .nav-link {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}

/* ---------------- MEGA PANEL POSITIONING (expanded header) ----------------
   The theme anchors each dropdown under its own nav item at a fixed width, so
   the right-hand panels hang off the viewport and the page scrolls sideways.
   These panels are full-bleed by design, so span the header instead - the same
   trick the header search panel already uses (#header is the positioned
   ancestor). Only above the breakpoint: below it the nav collapses and the
   panel is a stacked list inside the menu. */

@media (min-width: 1200px) {
    header.header .main-header .oc-mega-parent {
        position: static;
    }

    header.header .main-header .oc-mega-parent > .ocx-mega {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        margin: 0;
        /* Square drawer flush under the header: no top border (it doubled the
           header's own bottom rule), no corner radius, and no hairline ring in
           the shadow. One plain bottom border closes it off. */
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--ocx-line) !important;
        border-radius: 0 !important;
        box-shadow: 0 18px 34px rgba(16, 24, 43, 0.12) !important;
        /* Above the dimming overlay (1040), level with the search panel. */
        z-index: 1050;
    }

    header.header .main-header .oc-mega-parent > .ocx-mega > .ocx-mega__grid,
    header.header .main-header .oc-mega-parent > .ocx-mega > .ocx-mega__foot {
        max-width: var(--ocx-content);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------- MEGA MENU HOVER INTENT ----------------
   The theme opens panels on :hover and sets pointer-events:none when the hover
   is lost. pointer-events cannot be transitioned, so it flips the instant the
   pointer leaves the nav link: the invisible bridge over the 7px gap dies at the
   same moment and the panel shuts before you can reach it. ocx-header.js adds
   .is-open and keeps it for a short grace period after mouseleave, which holds
   the panel (and its bridge) hoverable long enough to travel into it.
   The theme's own :hover rule is left in place as the no-JS fallback. */

@media (min-width: 1200px) {
    header.header .main-header .oc-mega-parent.is-open > .oc-mega-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}