/* =========================================================================
   Compatibility shim: make the existing NamPost website markup (old button
   variants, data-icon, .content sections, .well, tables, forms) render
   acceptably inside the new theme, so every page can be flipped to the new
   layout for review. Brand red: #e30d18.
   ========================================================================= */

/* ---- content sections / layout ---------------------------------------- */
.boxed_wrapper .content { padding: 70px 15px; }
.boxed_wrapper .content > .row,
.boxed_wrapper .content { max-width: 1240px; margin-left: auto; margin-right: auto; }
.boxed_wrapper .content .body { font-size: 16px; line-height: 1.7; color: #5b6b86; }
.boxed_wrapper .content h1, .boxed_wrapper .content h2,
.boxed_wrapper .content h3 { color: #1b2a4a; font-weight: 700; margin: 24px 0 14px; }
.boxed_wrapper .content h2 { font-size: 26px; }
.boxed_wrapper .content h3 { font-size: 21px; }
/* ---- rich CMS content typography (all inner/content pages) ------------- */
.np-page-content { color:#4a5568; font-size:16.5px; line-height:1.85; }
.np-page-content > *:first-child { margin-top:0; }
.np-page-content p { margin:0 0 18px; }
.np-page-content > p:first-child { font-size:18.5px; line-height:1.8; color:#3a4a63; }
.np-page-content h2 { font-size:27px; font-weight:800; color:#1b2a4a; line-height:1.3;
    margin:38px 0 16px; padding-left:16px; border-left:4px solid #e30d18; }
.np-page-content h3 { font-size:21px; font-weight:700; color:#1b2a4a; margin:30px 0 12px; }
.np-page-content h4 { font-size:17px; font-weight:700; color:#1b2a4a; margin:22px 0 10px; }
.np-page-content a { color:#e30d18; font-weight:600; }
.np-page-content a:hover { text-decoration:underline; }
.np-page-content strong { color:#1b2a4a; }
.np-page-content ul { list-style:none; padding:0; margin:0 0 22px; }
.np-page-content ul > li { position:relative; padding-left:32px; margin-bottom:12px; }
.np-page-content ul > li::before { content:"\f00c"; font-family:'Font Awesome 5 Pro','Font Awesome 5 Free',FontAwesome;
    font-weight:900; position:absolute; left:0; top:4px; width:20px; height:20px; font-size:10px; line-height:20px;
    text-align:center; color:#0acf97; background:#e6f7f1; border-radius:50%; }
.np-page-content ul ul { margin:12px 0 0; }
.np-page-content ul ul > li::before { content:"\f105"; color:#e30d18; background:#fdeaee; }
.np-page-content ol { padding-left:22px; margin:0 0 22px; }
.np-page-content ol > li { margin-bottom:11px; padding-left:6px; }
.np-page-content ol > li::marker { color:#e30d18; font-weight:700; }
.np-page-content blockquote { border-left:4px solid #e30d18; background:#f7f8fc; padding:16px 22px;
    margin:0 0 22px; border-radius:0 10px 10px 0; color:#5b6b86; font-style:italic; }
.np-page-content table { width:100%; border-collapse:collapse; margin:0 0 24px; border-radius:10px;
    overflow:hidden; box-shadow:0 6px 20px rgba(27,42,74,.06); }
.np-page-content table th { background:#1b2a4a; color:#fff; text-align:left; padding:13px 16px; font-weight:600; }
.np-page-content table td { padding:12px 16px; border-top:1px solid #eef0f5; }
.np-page-content table tr:nth-child(even) td { background:#f9fafc; }
.np-page-content img { max-width:100%; height:auto; border-radius:12px; margin:6px 0 20px; box-shadow:0 10px 30px rgba(27,42,74,.1); }
.np-page-content hr { border:0; border-top:1px solid #eef0f5; margin:30px 0; }
.np-list-item { padding: 24px 0; border-bottom: 1px solid #eef0f5; }
.np-list-item h3 { color:#1b2a4a; font-weight:700; }

/* ---- buttons ---------------------------------------------------------- */
.boxed_wrapper .btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    padding: 10px 22px; border-radius: 8px; font-weight: 600; font-size: 15px;
    line-height: 1.4; border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: all .2s ease; margin: 4px 6px 4px 0;
}
.boxed_wrapper .btn-primary,
.boxed_wrapper .btn-info,
.boxed_wrapper .btn-submit { background: #e30d18; border-color: #e30d18; color: #fff; }
.boxed_wrapper .btn-primary:hover,
.boxed_wrapper .btn-info:hover,
.boxed_wrapper .btn-submit:hover { background: #c10b15; border-color: #c10b15; color: #fff; }
.boxed_wrapper .btn-info-invert,
.boxed_wrapper .btn-primary-invert,
.boxed_wrapper .btn-default-invert { background: #fff; border-color: #e30d18; color: #e30d18; }
.boxed_wrapper .btn-info-invert:hover,
.boxed_wrapper .btn-primary-invert:hover,
.boxed_wrapper .btn-default-invert:hover { background: #e30d18; color: #fff; }
.boxed_wrapper .btn-default,
.boxed_wrapper .btn-secondary { background: #f1f3f8; border-color: #e3e7ef; color: #1b2a4a; }
.boxed_wrapper .btn-default:hover,
.boxed_wrapper .btn-secondary:hover { background: #e7ebf3; color: #1b2a4a; }
.boxed_wrapper .btn-block { width: 100%; }
.boxed_wrapper .btn-xs { padding: 5px 12px; font-size: 13px; }
.boxed_wrapper .btn-sm { padding: 7px 16px; font-size: 14px; }
.boxed_wrapper .btn-flat { border-radius: 6px; }
.boxed_wrapper .btn-helpful { background:#fff; border:1px solid #e30d18; color:#e30d18; padding:4px 12px; }

/* ---- data-icon (old icon buttons) ------------------------------------- */
[data-icon] > i.np-dicon { margin-right: 6px; }

/* ---- forms ------------------------------------------------------------ */
.boxed_wrapper .form-control {
    width: 100%; min-height: 50px; border: 1px solid #e3e7ef; border-radius: 8px;
    padding: 10px 16px; font-size: 15px; background: #fff;
}
.boxed_wrapper textarea.form-control { min-height: auto; }
.boxed_wrapper .form-control:focus { border-color: #e30d18; outline: none; box-shadow: 0 0 0 .15rem rgba(227,13,24,.12); }
.boxed_wrapper .form-group { margin-bottom: 18px; }
.boxed_wrapper .form-group label,
.boxed_wrapper label { font-weight: 600; color: #1b2a4a; margin-bottom: 6px; display: inline-block; }
.boxed_wrapper .has-error .form-control { border-color: #fa5c7c; }
.boxed_wrapper .help-block { color: #fa5c7c; font-size: 13px; }

/* ---- tables ----------------------------------------------------------- */
.boxed_wrapper .content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.boxed_wrapper .content table th { text-align: left; padding: 12px 14px; background: #f7f8fc; color: #1b2a4a; font-weight: 600; }
.boxed_wrapper .content table td { padding: 12px 14px; border-top: 1px solid #eef0f5; }

/* ---- misc ------------------------------------------------------------- */
.boxed_wrapper .well { background: #f7f8fc; border: 1px solid #eef0f5; border-radius: 10px; padding: 18px; margin-bottom: 20px; }
.boxed_wrapper .box { background:#fff; border:1px solid #eef0f5; border-radius:10px; padding:20px; margin-bottom:20px; }
.boxed_wrapper .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.boxed_wrapper .alert-success { background: #e6f7f1; color: #0a7d5d; }
.boxed_wrapper .alert-danger, .boxed_wrapper .alert-error { background: #fdeaee; color: #c0182b; }
.boxed_wrapper .pull-right { float: right; }
.boxed_wrapper .text-right { text-align: right; }
.boxed_wrapper .vacancy-item, .boxed_wrapper .swipe-item.news,
.boxed_wrapper .panel { background:#fff; border:1px solid #eef0f5; border-radius:12px; padding:22px 24px; margin-bottom:18px;
    box-shadow:0 6px 20px rgba(27,42,74,.04); }
.boxed_wrapper .vacancy-item h3 { font-size:19px; color:#1b2a4a; font-weight:700; margin:0 0 10px; }
.boxed_wrapper .vacancy-item h3 span { display:block; font-size:13px; color:#0a7d5d; font-weight:600; margin-top:4px; }
.boxed_wrapper .vacancy-item .date { color:#8a97ad; font-size:13.5px; line-height:1.6; margin-bottom:8px; }
.boxed_wrapper .vacancy-item.applied { border-left:4px solid #0acf97; }
.boxed_wrapper .vacancy > h2, .boxed_wrapper .vacancy h2 { font-size:24px; margin:26px 0 12px; }
.boxed_wrapper .d-flex { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* old bootstrap panels (messages, account) */
.boxed_wrapper .panel { padding:0; overflow:hidden; }
.boxed_wrapper .panel-heading { background:#f7f8fc; padding:14px 20px; font-weight:600; color:#1b2a4a; border-bottom:1px solid #eef0f5; }
.boxed_wrapper .panel-body { padding:18px 20px; color:#5b6b86; }
.boxed_wrapper .panel-footer { background:#fbfcfe; padding:12px 20px; border-top:1px solid #eef0f5; font-size:14px; color:#8a97ad; }
.boxed_wrapper .panel-title { margin:0; font-size:16px; }
.boxed_wrapper .panel-title a { color:#1b2a4a; display:block; }
.boxed_wrapper .panel-title a:hover { color:#e30d18; }

/* old label badges (order/message statuses) */
.boxed_wrapper .label { display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; color:#fff; line-height:1.4; }
.boxed_wrapper .label-primary, .boxed_wrapper .label-info { background:#39afd1; }
.boxed_wrapper .label-success { background:#0acf97; }
.boxed_wrapper .label-warning { background:#ffbc00; color:#4a3b00; }
.boxed_wrapper .label-danger { background:#fa5c7c; }
.boxed_wrapper .label-default { background:#8a97ad; }

/* old input-group with icon addon (profile forms) */
.boxed_wrapper .input-group { display:flex; width:100%; }
.boxed_wrapper .input-group .form-control { flex:1 1 auto; border-top-right-radius:0; border-bottom-right-radius:0; }
.boxed_wrapper .input-group-addon, .boxed_wrapper .input-group-btn { display:flex; align-items:center; padding:0 14px;
    background:#f7f8fc; border:1px solid #e3e7ef; border-left:0; border-radius:0 8px 8px 0; color:#8a97ad; }
.boxed_wrapper .input-group-btn { padding:0; }
.boxed_wrapper .input-group-btn .btn { margin:0; border-radius:0 8px 8px 0; }
.boxed_wrapper .text-red { color:#e30d18; }
.boxed_wrapper .checkbox label { font-weight:400; color:#5b6b86; }
.boxed_wrapper .btn-black-invert { background:#fff; border:1px solid #1b2a4a; color:#1b2a4a; }
.boxed_wrapper .btn-black-invert:hover { background:#1b2a4a; color:#fff; }
.boxed_wrapper .btn-link { background:transparent; border:0; color:#e30d18; padding-left:0; }
.boxed_wrapper .btn-cancel { cursor:pointer; }
/* generic table styling wherever tables appear (not only .content) */
.boxed_wrapper table.total td { padding:8px 12px; color:#5b6b86; }
.boxed_wrapper table.total tr:last-child td { font-weight:700; color:#1b2a4a; border-top:1px solid #eef0f5; }

/* ---- website-user login modal ----------------------------------------- */
.np-login-modal .modal-content { border:0; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.np-login-modal .modal-header { background:#e30d18; color:#fff; border:0; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; }
.np-login-modal .modal-header .modal-title { color:#fff; font-weight:700; margin:0; font-size:20px; }
.np-login-modal .modal-header .close { color:#fff; opacity:.9; text-shadow:none; background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer; }
.np-login-modal .modal-header .close:hover { opacity:1; }
.np-login-modal .modal-body { padding:26px 24px; color:#5b6b86; }
.np-login-modal .modal-body label { font-weight:600; color:#1b2a4a; margin-bottom:6px; display:inline-block; }
.np-login-modal .form-group { margin-bottom:16px; }
.np-login-modal .np-login-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:4px 0 18px; font-size:14px; }
.np-login-modal .np-login-row .np-remember { font-weight:400; color:#5b6b86; margin:0; }
.np-login-modal .np-login-row a { color:#e30d18; }
.np-login-modal .np-login-btn { width:100%; justify-content:center; }
.np-login-modal .np-login-foot { margin:18px 0 0; }
.np-login-modal .np-login-foot a { color:#e30d18; font-weight:600; }
#np-login-feedback .alert { padding:10px 14px; border-radius:8px; margin-bottom:14px; }
#np-login-feedback .alert-danger { background:#fdeaee; color:#c0182b; }

/* ---- standalone auth pages (login / register) ------------------------- */
.np-auth-card { background:#fff; border:1px solid #eef0f5; border-radius:14px; padding:34px 32px; box-shadow:0 10px 40px rgba(27,42,74,.06); }
.np-auth-card h2 { color:#1b2a4a; font-weight:700; }
.np-auth-card .np-remember { font-weight:400; color:#5b6b86; }
.np-auth-card a { color:#e30d18; }
.np-auth-card .theme-btn { color:#fff; }
#np-register-feedback .alert { padding:10px 14px; border-radius:8px; margin-bottom:16px; }
#np-register-feedback .alert-danger { background:#fdeaee; color:#c0182b; }

/* ---- select2 (match new-theme form-control) --------------------------- */
.boxed_wrapper .select2-container { width:100% !important; }
.boxed_wrapper .select2-container--default .select2-selection--single,
.boxed_wrapper .select2-container--default .select2-selection--multiple {
    min-height:50px; border:1px solid #e3e7ef; border-radius:8px; padding:6px 10px; background:#fff;
}
.boxed_wrapper .select2-container--default .select2-selection--single { display:flex; align-items:center; }
.boxed_wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color:#1b2a4a; line-height:normal; padding-left:6px;
}
.boxed_wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height:48px; }
.boxed_wrapper .select2-container--default.select2-container--focus .select2-selection--single,
.boxed_wrapper .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color:#e30d18; box-shadow:0 0 0 .15rem rgba(227,13,24,.12);
}
.boxed_wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background:#e30d18; border-color:#e30d18; color:#fff; border-radius:6px; padding:2px 10px; margin-top:6px;
}
.boxed_wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color:#fff; margin-right:6px; }
.select2-dropdown { border:1px solid #e3e7ef; border-radius:8px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:#e30d18; }

/* ---- shopping basket -------------------------------------------------- */
.np-cart-list { display:flex; flex-direction:column; gap:16px; }
.np-cart-item { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid #eef0f5;
    border-radius:12px; padding:16px 18px; box-shadow:0 6px 24px rgba(27,42,74,.04); flex-wrap:wrap; }
.np-cart-thumb { flex:0 0 84px; width:84px; }
.np-cart-thumb img { width:84px; height:84px; object-fit:cover; border-radius:8px; border:1px solid #eef0f5; }
.np-cart-info { flex:1 1 240px; min-width:0; }
.np-cart-info h4 { font-size:17px; font-weight:700; margin:0 0 6px; line-height:1.3; }
.np-cart-info h4 a { color:#1b2a4a; }
.np-cart-info h4 a:hover { color:#e30d18; }
.np-cart-meta { font-size:13px; color:#8a97ad; margin:0 0 2px; }
.np-cart-meta a { color:#5b6b86; }
.np-cart-code { font-size:12px; letter-spacing:.5px; color:#aab2c2; margin:6px 0 0; text-transform:uppercase; }
.np-stock { display:inline-block; font-size:12px; font-weight:600; margin-top:8px; }
.np-stock.in { color:#0a7d5d; } .np-stock.out { color:#c0182b; }
.np-cart-note { font-size:12px; color:#8a97ad; line-height:1.5; margin:8px 0 0; }
.np-cart-note i { color:#e30d18; margin-right:4px; }
.np-cart-price { flex:0 0 110px; text-align:right; }
.np-cart-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#aab2c2; margin-bottom:4px; }
.np-cart-amount { font-size:16px; font-weight:700; color:#1b2a4a; }
.np-cart-qty { flex:0 0 92px; }
.np-cart-qty .js-quantity { width:92px; min-height:44px; text-align:center; padding:8px; }
.np-cart-remove { flex:0 0 auto; }
.np-cart-remove a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:8px; background:#fdeaee; color:#e30d18; transition:all .2s; }
.np-cart-remove a:hover { background:#e30d18; color:#fff; }
.np-continue { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:#1b2a4a; font-weight:600; }
.np-continue:hover { color:#e30d18; }

.np-cart-summary { background:#fff; border:1px solid #eef0f5; border-radius:12px; padding:24px;
    box-shadow:0 10px 40px rgba(27,42,74,.06); margin-bottom:24px; }
.np-cart-summary h4 { font-weight:700; color:#1b2a4a; margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid #eef0f5; }
.np-summary-list { list-style:none; padding:0; margin:0 0 20px; }
.np-summary-list li { display:flex; justify-content:space-between; align-items:center; padding:9px 0; color:#5b6b86; font-size:15px; }
.np-summary-list .np-summary-grand { border-top:1px solid #eef0f5; margin-top:6px; padding-top:14px;
    font-size:18px; font-weight:700; color:#1b2a4a; }
.np-cart-cta { width:100%; justify-content:center; }
.np-cart-empty { text-align:center; padding:40px 20px; }
.np-cart-empty i { font-size:54px; color:#e3e7ef; margin-bottom:18px; }
.np-cart-empty h3 { color:#1b2a4a; font-weight:700; }
.np-cart-empty p { color:#8a97ad; margin-bottom:22px; }
@media (max-width:575px){
    .np-cart-price, .np-cart-qty { flex:1 1 auto; text-align:left; }
    .np-cart-price { text-align:left; }
}

/* ---- shop listing ----------------------------------------------------- */
.np-shop-filterbar { margin-bottom:28px; }
.np-shop-filterbar .np-filter-toggle { width:100%; justify-content:center; }
.np-filter-panel { background:#fff; border:1px solid #eef0f5; border-radius:12px; padding:22px; margin-top:14px;
    box-shadow:0 8px 30px rgba(27,42,74,.05); }
.np-filter-panel label { font-weight:600; color:#1b2a4a; margin-bottom:6px; display:inline-block; }
.np-filter-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:6px; }
.np-reset-filters { color:#8a97ad; }
.np-reset-filters:hover { color:#e30d18; }

.np-shop-grid { margin-left:-12px; margin-right:-12px; }
.np-shop-grid > [class*="col-"] { padding-left:12px; padding-right:12px; }
.np-product-card { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid #eef0f5;
    border-radius:12px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.np-product-card:hover { box-shadow:0 14px 40px rgba(27,42,74,.12); transform:translateY(-3px); }
.np-product-thumb { display:block; aspect-ratio:4/3; background:#f7f8fc; overflow:hidden; }
.np-product-thumb img { width:100%; height:100%; object-fit:cover; }
.np-product-body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1 1 auto; }
.np-product-title { font-size:17px; font-weight:700; line-height:1.3; margin:0 0 12px; }
.np-product-title a { color:#1b2a4a; }
.np-product-title a:hover { color:#e30d18; }
.np-product-meta { list-style:none; padding:0; margin:0 0 10px; }
.np-product-meta li { font-size:13px; color:#8a97ad; margin-bottom:3px; }
.np-product-meta li a { color:#5b6b86; }
.np-product-meta li a:hover { color:#e30d18; }
.np-product-card .np-stock { font-size:12px; font-weight:600; margin-bottom:8px; }
.np-product-card .np-stock.in { color:#0a7d5d; } .np-product-card .np-stock.out { color:#c0182b; }
.np-product-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.np-product-price { font-size:18px; font-weight:800; color:#e30d18; white-space:nowrap; }
.np-add-cart { padding:8px 16px !important; font-size:13px !important; }
.np-add-cart.disabled { opacity:.5; pointer-events:none; }
.np-shop-noresults { color:#8a97ad; padding:30px 0; }

/* shop sidebar */
.np-shop-sidebar .well { background:#fff; box-shadow:0 8px 30px rgba(27,42,74,.05); }
.np-shop-sidebar .side-heading { font-weight:700; color:#1b2a4a; font-size:17px; margin-bottom:12px;
    padding-bottom:10px; border-bottom:1px solid #eef0f5; }
.np-shop-sidebar ul { list-style:none; padding:0; margin:0; }
.np-shop-sidebar .menu-side li a, .np-shop-sidebar > .well > ul li a { display:flex; justify-content:space-between;
    align-items:center; gap:8px; padding:7px 0; color:#5b6b86; font-size:14px; }
.np-shop-sidebar .menu-side li a:hover, .np-shop-sidebar li a.active { color:#e30d18; }
.np-shop-sidebar .menu-side ul { padding-left:14px; border-left:1px solid #eef0f5; margin-left:2px; }
.np-shop-sidebar .badge { background:#f1f3f8; color:#5b6b86; border-radius:20px; padding:2px 9px; font-size:11px; font-weight:600; }
.np-shop-sidebar li a.active .badge, .np-shop-sidebar .menu-side li a:hover .badge { background:#e30d18; color:#fff; }

/* paginator footer */
.paginator-footer { margin-top:30px; }
.paginator-footer .info-display { color:#8a97ad; font-size:14px; }
.paginator-footer .pagination { display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
    padding:0; margin:10px 0 0; list-style:none; }
.paginator-footer .pagination .page-item { margin:0; }
.paginator-footer .pagination .page-link {
    display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 13px;
    border:1px solid #e3e7ef; border-radius:8px; color:#1b2a4a; background:#fff; font-weight:600;
    font-size:14px; line-height:1; transition:all .15s; text-decoration:none;
}
/* neutralise any framework SVG arrows that may leak through */
.paginator-footer .pagination .page-link svg { width:16px; height:16px; }
.paginator-footer .pagination .page-link:hover { background:#f7f8fc; border-color:#d7dce6; color:#e30d18; }
.paginator-footer .pagination .page-item.active .page-link { background:#e30d18; border-color:#e30d18; color:#fff; }
.paginator-footer .pagination .page-item.disabled .page-link { color:#c3cad6; background:#fff; cursor:not-allowed; }

/* ---- home news cards: uniform height regardless of title length -------- */
.news-section .news-block { display:flex; }
.news-section .news-block-one { width:100%; margin-bottom:30px; }
.news-section .news-block-one .inner-box { min-height:400px; height:100%; display:flex; flex-direction:column;
    justify-content:flex-end; padding:34px 30px 30px; margin-bottom:0; }
.news-section .news-block-one .content-box h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:52px; }
.news-section .news-block-one .content-box h3 a { display:block; }

/* ---- home: quick links / divisions / cta (from the design sample) ------ */
.npx-quick{padding:90px 0 70px;background:#ffffff;}
.npx-quick .sec-title h6,.npx-div .sec-title h6{color:#C8102E;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.npx-row{display:flex;flex-wrap:wrap;margin:0 -12px;}
.npx-quick .col-lg,.npx-div .col-lg-4,.npx-div .col-lg-6,.npx-quick .col-md-6{padding:0 12px;}
.npx-q{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:34px 16px 28px;height:100%;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s;box-shadow:0 8px 22px rgba(11,31,58,.06);}
.npx-q:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(11,31,58,.16);border-color:transparent;}
.npx-q-ic{width:74px;height:74px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;margin-bottom:18px;box-shadow:0 12px 22px rgba(0,61,165,.22);}
/* Quick-links icons: use the About-page navy->red gradient (overrides the theme's
   navy->navy !important rule in style_new.css). */
.npx-quick .npx-q-ic{background:linear-gradient(135deg,#003DA5,#e30d18)!important;}
.npx-q-t{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:#0b1f3a;line-height:1.25;}
.npx-q-s{color:#7a869a;font-size:13px;margin-top:6px;}
/* The quick-card corner badge is an arrow chip (design sample). style_new.css asks for
   "Font Awesome 5 Free" but this theme's icon font registers as 'Font Awesome 5 Pro',
   so the glyph rendered as a placeholder square. Point it at the right family. */
.npx-q::after{font-family:'Font Awesome 5 Pro','Font Awesome 5 Free',FontAwesome !important;font-weight:900;}
.npx-div{padding:30px 0 100px;background:#f4f6fb;position:relative;}
.npx-card{position:relative;display:block;height:310px;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;margin-bottom:24px;box-shadow:0 14px 32px rgba(11,31,58,.14);text-decoration:none;transition:transform .4s,box-shadow .4s;}
.npx-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,18,38,.94) 0%,rgba(7,18,38,.55) 48%,rgba(7,18,38,.12) 100%);transition:.45s;}
.npx-card:hover{transform:translateY(-7px);box-shadow:0 26px 50px rgba(11,31,58,.26);}
.npx-card:hover::before{background:linear-gradient(to top,rgba(200,16,46,.92) 0%,rgba(0,61,165,.55) 55%,rgba(7,18,38,.18) 100%);}
.npx-ic{position:absolute;top:22px;left:22px;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;border:1px solid rgba(255,255,255,.35);z-index:2;}
.npx-body{position:absolute;left:0;bottom:0;width:100%;padding:0 26px 26px;z-index:2;}
.npx-body h4{color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:23px;margin:0 0 6px;}
.npx-body p{color:#e3e9f5;font-size:14px;line-height:1.45;margin:0 0 14px;}
.npx-link{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;}
.npx-link i{transition:.3s;}
.npx-card:hover .npx-link i{transform:translateX(6px);}
.npx-cta{position:relative;padding:90px 0;background-size:cover;background-position:center;}
.npx-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,38,.9) 0%,rgba(7,18,38,.6) 60%,rgba(0,61,165,.35) 100%);}
.npx-cta-inner{position:relative;z-index:2;max-width:640px;}
.npx-cta-inner h2{color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:38px;margin:0 0 12px;line-height:1.15;}
.npx-cta-inner p{color:#dfe7f5;font-size:17px;margin:0 0 26px;}
.npx-cta .theme-btn{background:#C8102E;color:#fff;padding:16px 38px;border-radius:8px;font-weight:700;display:inline-block;text-decoration:none;transition:.3s;}
.npx-cta .theme-btn:hover{background:#fff;color:#003DA5;}
.npx-card-sm{height:auto;background:#fff;box-shadow:0 8px 24px rgba(11,31,58,.06);border:1px solid #eef1f7;}
.npx-card-sm::before{display:none;}
.npx-card-sm .npx-body{position:static;padding:22px 24px;}
.npx-card-sm .npx-body h4{color:#1b2a4a;}
.npx-card-sm .npx-body p{color:#5b6b86;}
.npx-card-sm .npx-link{color:#e30d18;}
@media(max-width:991px){.npx-card{height:280px;}.npx-cta-inner h2{font-size:30px;}}
@media(max-width:767px){.npx-q{margin-bottom:20px;}}

/* ---- awarded bids cards (npx-card style: bordered card per item) ------- */
.np-award-item{display:block;background:#fff;border:1px solid #eef1f7;border-radius:18px;
    padding:26px 28px;margin-bottom:20px;box-shadow:0 8px 24px rgba(11,31,58,.06);
    transition:transform .3s, box-shadow .3s, border-color .3s;}
.np-award-item:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(11,31,58,.14);border-color:#f4c6cb;}
.np-award-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:19px;color:#1b2a4a;
    margin:0 0 12px;line-height:1.4;}
.np-award-item .npx-link{color:#e30d18;margin-top:4px;}
.np-award-item:hover .npx-link i{transform:translateX(6px);}
.np-award-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.np-chip{display:inline-flex;align-items:center;gap:6px;background:#f1f3f8;color:#5b6b86;border-radius:20px;
    padding:4px 12px;font-size:12.5px;font-weight:600;}
.np-chip i{font-size:11px;color:#8a97ad;}
.np-chip-blue{background:#eaf1ff;color:#003DA5;} .np-chip-blue i{color:#003DA5;}
.np-chip-green{background:#e6f7f1;color:#0a7d5d;} .np-chip-green i{color:#0a7d5d;}
.np-award-to{color:#5b6b86;font-size:14.5px;margin:0 0 12px;}
.np-award-to strong{color:#1b2a4a;}
.np-award-doc{font-size:13.5px;}

/* ---- profile section cards --------------------------------------------- */
.np-profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:28px;}
.np-profile-card{display:block;background:#fff;border:1px solid #eef0f5;border-radius:14px;padding:22px;
    text-decoration:none;box-shadow:0 6px 20px rgba(27,42,74,.04);transition:all .22s;position:relative;overflow:hidden;}
.np-profile-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(27,42,74,.13);border-color:#f4c6cb;}
.np-profile-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;
    color:#fff;font-size:21px;margin-bottom:14px;box-shadow:0 8px 18px rgba(27,42,74,.18);}
.np-profile-card h4{color:#1b2a4a;font-weight:700;font-size:16.5px;margin:0 0 6px;}
.np-profile-card p{color:#8a97ad;font-size:13.5px;margin:0 0 12px;line-height:1.5;}
.np-profile-go{display:inline-flex;align-items:center;gap:7px;color:#e30d18;font-weight:700;font-size:12.5px;
    letter-spacing:.5px;text-transform:uppercase;}
.np-profile-go i{transition:transform .2s;}
.np-profile-card:hover .np-profile-go i{transform:translateX(4px);}

/* alternating full-width content sections */
.boxed_wrapper .np-sec-alt { background:#f4f6fb; }
.boxed_wrapper .about-style-two .text-box.np-page-content > *:first-child { margin-top:0; }

/* ---- media + text block (design sample: about-style-two) --------------- */
.np-media-block { margin: 0 0 30px; }
.np-media-block.np-media-left, .np-media-block.np-media-right {
    display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }
.np-media-block.np-media-right { flex-direction: row-reverse; }
.np-media-figure-col { flex: 1 1 300px; }
.np-media-text { flex: 1 1 320px; min-width: 0; margin: 0 !important; }
.np-media-figure { position: relative; margin: 0; }
.np-media-figure::before {
    content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,61,165,.10), rgba(227,13,24,.08)); z-index: 0; }
.np-media-block.np-media-right .np-media-figure::before { inset: 14px 14px -14px -14px; }
.np-media-figure a, .np-media-figure img {
    position: relative; z-index: 1; display: block; width: 100%; border-radius: 16px; }
.np-media-figure img { object-fit: cover; box-shadow: 0 20px 44px rgba(11,31,58,.16); }
.np-media-figure figcaption { position: relative; z-index: 1; margin-top: 12px; font-size: 13.5px; color: #8a97ad; text-align: center; }
.np-media-top { text-align: center; }
.np-media-top .np-media-figure img { border-radius: 16px; box-shadow: 0 18px 40px rgba(11,31,58,.14); }
.np-media-top .np-page-content { text-align: left; }
@media (max-width: 767px) {
    .np-media-block.np-media-left, .np-media-block.np-media-right { gap: 22px; }
}

/* ---- feature-list block (structured page-type) ------------------------- */
.np-feature-block{margin:8px 0 30px;}
.np-feature-heading{font-size:26px;font-weight:800;color:#1b2a4a;line-height:1.3;margin:10px 0 8px;
    padding-left:16px;border-left:4px solid #e30d18;}
.np-feature-intro{color:#5b6675;font-size:16.5px;line-height:1.75;margin:0 0 26px;}
.np-feature-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #eef1f7;
    border-radius:14px;padding:22px 24px;height:100%;margin-bottom:24px;box-shadow:0 8px 22px rgba(11,31,58,.06);
    transition:transform .3s, box-shadow .3s, border-color .3s;}
.np-feature-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(11,31,58,.14);border-color:#f4c6cb;}
.np-feature-ic{flex:0 0 52px;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
    justify-content:center;font-size:21px;color:#fff;background:linear-gradient(135deg,#003DA5,#012a6e);
    box-shadow:0 10px 22px rgba(0,61,165,.22);}
.np-feature-body h4{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:#0b1f3a;margin:2px 0 8px;line-height:1.35;}
.np-feature-body p{color:#5b6675;font-size:14.5px;line-height:1.6;margin:0;}

/* ---- PDF document pages (design sample: npm-doc) ----------------------- */
.npm-sec{padding:90px 0;}
.npm-sec.alt{background:#f4f6fb;}
.npm-doc{display:flex;flex-wrap:wrap;align-items:center;gap:40px;background:#fff;border-radius:20px;
    padding:48px;box-shadow:0 16px 40px rgba(11,31,58,.1);}
.npm-doc-info{flex:1 1 320px;}
.npm-doc-info .npm-ic{width:70px;height:70px;border-radius:20px;font-size:28px;margin-bottom:22px;}
.npm-doc-info h2{font-family:'Manrope',sans-serif;font-weight:800;color:#0b1f3a;font-size:30px;margin:0 0 14px;line-height:1.25;}
.npm-doc-info p{color:#5b6675;font-size:16px;line-height:1.7;margin:0 0 26px;}
.npm-ic{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:23px;margin-bottom:18px;background:linear-gradient(135deg,#003DA5,#012a6e);
    box-shadow:0 14px 30px rgba(0,61,165,.22);}
.npm-dl{display:inline-flex;align-items:center;gap:10px;background:#C8102E;color:#fff;padding:15px 32px;
    border-radius:9px;font-weight:700;text-decoration:none;transition:.3s;}
.npm-dl:hover{background:#003DA5;color:#fff;}
.npm-dl i{color:#fff;}
.npm-doc-frame{flex:1 1 380px;}
.npm-doc-frame iframe{width:100%;height:520px;border:1px solid #e6eaf2;border-radius:12px;background:#fff;}
.npm-more-title{font-family:'Manrope',sans-serif;font-weight:800;color:#0b1f3a;font-size:22px;margin:50px 0 24px;}
.npm-card{display:block;background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:30px 28px;height:100%;
    margin-bottom:26px;box-shadow:0 8px 22px rgba(11,31,58,.06);transition:transform .3s,box-shadow .3s;text-decoration:none;}
.npm-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(11,31,58,.15);}
/* npm-card grids: cards are height:100% inside flex-stretched columns, so each
   card's margin-bottom is absorbed and stacked rows sit flush. Add real gaps. */
.row:has(> [class*="col-"] > .npm-card){row-gap:30px;}
.npm-card .npm-ic{width:52px;height:52px;font-size:20px;margin-bottom:16px;}
.npm-card h4{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:#0b1f3a;margin:0 0 12px;line-height:1.4;}
.npm-card-link{color:#C8102E;font-weight:700;font-size:13.5px;margin:0;display:inline-flex;align-items:center;gap:7px;}
.npm-card-link i{transition:transform .2s;}
.npm-card:hover .npm-card-link i{transform:translateX(5px);}
@media(max-width:767px){.npm-doc{padding:30px;}.npm-doc-frame iframe{height:360px;}.npm-sec{padding:60px 0;}}

/* ---- shop product detail ---------------------------------------------- */
.np-product-detail{background:#fff;border:1px solid #eef0f5;border-radius:14px;padding:28px;
    box-shadow:0 8px 30px rgba(27,42,74,.05);margin-bottom:36px;}
.np-product-gallery{display:flex;flex-wrap:wrap;gap:10px;}
.np-gallery-main{flex:0 0 100%;display:block;border-radius:12px;overflow:hidden;border:1px solid #eef0f5;background:#f7f8fc;}
.np-gallery-main img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.np-gallery-thumb{flex:0 0 calc(25% - 8px);display:block;border-radius:8px;overflow:hidden;border:1px solid #eef0f5;background:#f7f8fc;}
.np-gallery-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.np-product-detail-title{font-size:26px;font-weight:800;color:#1b2a4a;margin:0 0 12px;line-height:1.25;}
.np-detail-price{font-size:30px;font-weight:800;color:#e30d18;margin:12px 0 16px;}
.np-detail-buy{display:flex;gap:12px;align-items:center;margin-top:8px;}
.np-detail-buy .js-quantity{width:92px;min-height:48px;text-align:center;padding:8px;}
.np-related-title{font-size:20px;font-weight:700;color:#1b2a4a;margin:8px 0 18px;}
.np-related-title a{color:#e30d18;}

/* ---- order confirmation ------------------------------------------------ */
.np-order-confirm{background:#fff;border:1px solid #eef0f5;border-radius:14px;padding:44px 36px;text-align:center;
    box-shadow:0 10px 40px rgba(27,42,74,.06);}
.np-order-ic{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;
    background:#e6f7f1;color:#0acf97;font-size:30px;margin-bottom:18px;}
.np-order-confirm h2{color:#1b2a4a;font-weight:800;margin:0 0 14px;}
.np-order-confirm p{color:#5b6b86;margin:0 0 10px;}
.np-order-ref strong{color:#1b2a4a;}
.np-order-total strong{color:#e30d18;font-size:20px;}
.np-order-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 8px;}
.np-order-note{font-size:13px;color:#8a97ad;}
.np-terms{margin:0 0 16px;font-size:14px;color:#5b6b86;}
.np-terms a{color:#e30d18;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* ---- shared page sidebar (np-side) ------------------------------------ */
.np-side{display:flex;flex-direction:column;gap:22px;}
.sidebar-side .np-side, .col-lg-4 > .np-side{width:100% !important;max-width:100%;padding-left:0;padding-right:0;flex:0 0 100%;}
.np-side-card{background:#fff;border:1px solid #eef0f5;border-radius:14px;padding:24px;
    box-shadow:0 8px 26px rgba(27,42,74,.05);}
.np-side-title{font-size:17px;font-weight:700;color:#1b2a4a;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #eef0f5;}
.np-side-links{list-style:none;padding:0;margin:0;}
.np-side-links li{border-bottom:1px solid #f4f6fa;}
.np-side-links li:last-child{border-bottom:0;}
.np-side-links a{display:flex;align-items:center;gap:8px;padding:9px 0;color:#5b6b86;font-size:14.5px;transition:color .2s, padding-left .2s;}
.np-side-links a::before{content:"\f105";font-family:'Font Awesome 5 Pro','Font Awesome 5 Free',FontAwesome;font-weight:900;color:#e30d18;font-size:12px;}
.np-side-links a:hover, .np-side-links a.active{color:#e30d18;padding-left:4px;}
.np-side-cta{background:linear-gradient(135deg,#f7f9ff 0%,#fdf3f4 100%);}
.np-side-cta p{color:#5b6b86;font-size:14px;line-height:1.65;margin:0 0 16px;}
.np-side-cta .theme-btn{font-size:14px;padding:10px 22px;}
.np-side-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
    background:#e30d18;color:#fff;font-size:19px;margin-bottom:14px;}
.np-side-news{display:flex;flex-direction:column;}
.np-side-news-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f4f6fa;align-items:flex-start;}
.np-side-news-item:last-child{border-bottom:0;}
.np-side-news-thumb{flex:0 0 64px;}
.np-side-news-thumb img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid #eef0f5;background:#f4f6fa;}
.np-side-news-body{min-width:0;}
.np-side-news-date{display:block;font-size:12px;color:#8a97ad;margin-bottom:4px;}
.np-side-news-date i{color:#e30d18;margin-right:4px;}
.np-side-news-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    color:#1b2a4a;font-size:14px;font-weight:600;line-height:1.4;transition:color .2s;}
.np-side-news-item:hover .np-side-news-title{color:#e30d18;}
.np-side-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#e30d18;font-weight:600;font-size:13.5px;}
.np-side-more i{transition:transform .2s;}
.np-side-more:hover i{transform:translateX(4px);}

/* ---- footer bottom (copyright left, credit right) ---------------------- */
.np-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.np-footer-credit p{margin:0;color:#9aa5b8;font-size:14px;}
.np-footer-credit a{color:#fff;}
.np-footer-credit a:hover{color:#e30d18;}
@media(max-width:575px){.np-footer-bottom{justify-content:center;text-align:center;}}

/* ---- account pages ---------------------------------------------------- */
.np-acct-stats{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:26px;}
.np-acct-stat{flex:1 1 200px;background:#fff;border:1px solid #eef0f5;border-radius:12px;padding:22px 24px;
    box-shadow:0 8px 26px rgba(27,42,74,.05);display:flex;align-items:center;gap:16px;}
.np-acct-stat .ic{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:#fdeaee;color:#e30d18;font-size:20px;flex:0 0 52px;}
.np-acct-stat .num{font-size:26px;font-weight:800;color:#1b2a4a;line-height:1;}
.np-acct-stat .lbl{font-size:13px;color:#8a97ad;margin-top:4px;}
.np-acct-stat a{font-size:13px;color:#e30d18;font-weight:600;}
.np-acct-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:30px;}
.np-acct-link{display:block;background:#fff;border:1px solid #eef0f5;border-radius:12px;padding:20px 22px;
    text-decoration:none;transition:all .2s;box-shadow:0 6px 20px rgba(27,42,74,.04);}
.np-acct-link:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,42,74,.12);border-color:#f4c6cb;}
.np-acct-link i{color:#e30d18;font-size:22px;margin-bottom:12px;display:block;}
.np-acct-link h4{color:#1b2a4a;font-weight:700;font-size:16px;margin:0 0 4px;}
.np-acct-link p{color:#8a97ad;font-size:13px;margin:0;}
.np-acct-title{color:#1b2a4a;font-weight:700;margin:6px 0 18px;}

/* Admin-only shortcut to the back office (shown on /account for admins). */
.np-admin-cta{display:flex;align-items:center;gap:16px;background:#1b2a4a;border-radius:12px;
    padding:16px 22px;margin:0 0 26px;text-decoration:none;transition:all .2s;
    box-shadow:0 8px 24px rgba(27,42,74,.14);}
.np-admin-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(27,42,74,.22);}
.np-admin-cta .np-admin-cta-ic{flex:0 0 auto;width:44px;height:44px;border-radius:10px;
    background:#e30d18;display:flex;align-items:center;justify-content:center;}
.np-admin-cta .np-admin-cta-ic i{color:#fff;font-size:20px;}
.np-admin-cta .np-admin-cta-txt{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.3;}
.np-admin-cta .np-admin-cta-txt strong{color:#fff;font-size:16px;font-weight:700;}
.np-admin-cta .np-admin-cta-txt span{color:#b9c4da;font-size:13px;}
.np-admin-cta .np-admin-cta-arrow{flex:0 0 auto;color:#fff;font-size:16px;transition:transform .2s;}
.np-admin-cta:hover .np-admin-cta-arrow{transform:translateX(4px);}

/* page-title hero on compat-flipped pages: break out of the constrained
   .content container to full viewport width, flush with the header */
.boxed_wrapper .content .np-hero-bleed{width:100vw;position:relative;left:50%;right:50%;
    margin-left:-50vw;margin-right:-50vw;margin-top:-70px;margin-bottom:44px;}
.np-hero-bleed .page-title{margin:0;}
/* the hero nests inside .content on compat pages — restore its own typography
   against the shim's dark .content h1 rule */
.boxed_wrapper .content .page-title h1{color:#fff;margin:0;}
.boxed_wrapper .content .page-title .bread-crumb li,
.boxed_wrapper .content .page-title .bread-crumb li a{color:#fff;}
.boxed_wrapper{overflow-x:hidden;}
/* the compat-flipped content section: give it a light page background + card feel */
.boxed_wrapper .content.bg-default{background:transparent;}
.boxed_wrapper .content .body{color:#5b6b86;}
/* accordion (profile page) — styled + shown; toggling handled by np-account.js shim */
.boxed_wrapper .accordion-content{display:none;background:#fff;border:1px solid #eef0f5;border-radius:12px;padding:26px;margin-bottom:24px;box-shadow:0 8px 26px rgba(27,42,74,.05);}
.boxed_wrapper .accordion-content.active{display:block;}
.boxed_wrapper .accordion-content h2{color:#1b2a4a;font-weight:700;margin-top:0;}

/* reusable FAQ accordion (also used on /faq) */
.np-faq .acc-item{border:1px solid #eef0f5;border-radius:10px;margin-bottom:14px;overflow:hidden;background:#fff;}
.np-faq .acc-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;
    padding:16px 20px;font-weight:600;font-size:16px;color:#1b2a4a;background:#fff;border:0;cursor:pointer;}
.np-faq .acc-btn .fas{transition:transform .2s;color:#e30d18;}
.np-faq .acc-btn[aria-expanded="true"]{color:#e30d18;}
.np-faq .acc-btn[aria-expanded="true"] .fas{transform:rotate(180deg);}
.np-faq .acc-body{padding:0 20px 18px;color:#5b6b86;line-height:1.7;}
.np-faq .acc-foot{border-top:1px solid #eef0f5;margin-top:12px;padding-top:12px;font-size:14px;color:#8a97ad;}
.np-faq .acc-foot .btn-helpful{display:inline-flex;align-items:center;gap:6px;border:1px solid #e30d18;color:#e30d18;
    border-radius:6px;padding:4px 12px;margin-left:6px;font-size:13px;text-decoration:none;}
.np-faq .acc-foot .btn-helpful:hover{background:#e30d18;color:#fff;}

/* ---- Structured Table block (typed page-type: tariffs / rates) ---------- */
.np-table-block { margin: 4px 0 8px; }
.np-table-block .sec-title h2 { color:#1b2a4a; }
.np-table-block .sec-title { margin-bottom: 14px !important; }
.np-table-intro { text-align:center; max-width:760px; margin:0 auto 16px; color:#5b6b86; }
.np-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:12px; box-shadow:0 10px 30px rgba(27,42,74,.08); }
.np-table { width:100%; border-collapse:collapse; background:#fff; min-width:0; }
.np-table thead th { background:#1b2a4a; color:#fff; text-align:left;
    padding:9px 16px; font-weight:600; white-space:nowrap; border-bottom:3px solid #e30d18; }
.np-table tbody td { padding:6px 16px; border-top:1px solid #eef0f5; color:#31415e; vertical-align:top; }
.np-table tbody tr:nth-child(even) td { background:#f9fafc; }
.np-table tbody tr:hover td { background:#f1f4fb; }
.np-table tbody td:first-child { font-weight:600; color:#1b2a4a; }
@media (max-width:575px){ .np-table thead th, .np-table tbody td { padding:7px 12px; } }

/* Data-table pages (postal codes, tariffs): two compact tables per row on
   desktop, stacked on mobile. Tables keep their own horizontal scroll. */
.np-table-grid { display:grid; grid-template-columns:1fr; gap:20px 28px; align-items:start; }
@media (min-width:992px){ .np-table-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---- Online Banking: app store badges + QR codes ----------------------- */
.np-app-badges { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:26px; }
.np-app-badges a { display:inline-block; }
.np-app-badges img { height:52px; width:auto; border-radius:8px; }
.np-app-qr { display:flex; flex-wrap:wrap; gap:26px; }
.np-app-qr figure { margin:0; text-align:center; }
.np-app-qr img { width:120px; height:120px; border:1px solid #eef0f5; border-radius:12px; padding:8px; background:#fff; }
.np-app-qr figcaption { margin-top:8px; font-weight:600; color:#1b2a4a; font-size:14px; }
@media (max-width:575px){ .np-app-qr img { width:100px; height:100px; } }

/* ---- Fixes: card & panel padding (parent landing + About Us) ----------- */
/* Parent landing "Read more" child cards — more breathing room + presence */
.npx-card-sm .npx-body { padding: 30px 32px; }
.npx-card-sm .npx-body h4 { margin-bottom: 10px; }
.npx-row { margin-top: 6px; }

/* About Us "What Drives Us" — mission/vision/values as a padded panel */
.about-section .content_block_one .inner-box {
    padding: 44px 44px 30px; background: #fff; border: 1px solid #eef1f7;
    border-radius: 20px; box-shadow: 0 16px 40px rgba(11,31,58,.06); margin-top: 8px;
}
/* keep the sample's 90px left offset so the absolute icon never overlaps text */
.about-section .content_block_one .inner-box .single-item { padding: 4px 10px 22px 90px; margin-bottom: 0; }
.about-section .content_block_one .inner-box .single-item h3 { margin-bottom: 8px; }
@media (max-width:575px){ .about-section .content_block_one .inner-box { padding: 26px 22px 14px; } }

/* ---- Post Office Finder ------------------------------------------------- */
.np-po-map { width:100%; height:560px; border-radius:16px; overflow:hidden; box-shadow:0 12px 34px rgba(11,31,58,.10); background:#eef1f7; }
.np-po-panel { background:#fff; border:1px solid #eef1f7; border-radius:16px; padding:24px; box-shadow:0 12px 34px rgba(11,31,58,.06); height:560px; display:flex; flex-direction:column; }
.np-po-panel h3 { color:#1b2a4a; font-weight:700; margin-bottom:4px; }
.np-po-hint { color:#5b6b86; font-size:14px; margin-bottom:14px; }
.np-po-searchwrap { position:relative; margin-bottom:14px; }
.np-po-searchwrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9aa6bd; }
.np-po-search { width:100%; padding:12px 14px 12px 40px; border:1px solid #e3e8f0; border-radius:10px; font-size:15px; outline:none; }
.np-po-search:focus { border-color:#e30d18; box-shadow:0 0 0 3px rgba(227,13,24,.10); }
.np-po-list { overflow-y:auto; flex:1; margin:-4px -6px 0; padding:4px 6px; }
.np-po-item { border-bottom:1px solid #eef0f5; }
.np-po-head { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:13px 4px; font-weight:600; color:#1b2a4a; font-size:15px; }
.np-po-head i { color:#e30d18; transition:transform .2s; font-size:13px; }
.np-po-item.open .np-po-head i { transform:rotate(180deg); }
.np-po-body { display:none; padding:2px 4px 16px; }
.np-po-item.open .np-po-body { display:block; }
.np-po-dl { display:grid; grid-template-columns:34% 1fr; gap:4px 10px; font-size:13.5px; color:#5b6b86; margin:0 0 10px; }
.np-po-dl dt { font-weight:600; color:#31415e; }
.np-po-dl dd { margin:0; }
.np-po-times { color:#1b2a4a; font-weight:700; font-size:14px; margin:6px 0; }
.np-po-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.np-po-btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:7px 12px; border-radius:8px; background:#e30d18; color:#fff; }
.np-po-btn:hover { background:#c00b14; color:#fff; }
.np-po-btn-alt { background:#1b2a4a; }
.np-po-btn-alt:hover { background:#0f1c34; }
.np-po-empty { color:#8a97ad; padding:14px 4px; }
@media (max-width:991px){ .np-po-map { height:360px; margin-bottom:24px; } .np-po-panel { height:auto; } .np-po-list { max-height:420px; } }

/* ---- Readable measure for standalone prose content pages --------------- */
.np-prose { max-width: 900px; margin-left: auto; margin-right: auto; }
.np-prose .np-media-block,
.np-prose table { max-width: 100%; }

/* Post office finder — graceful map fallback (unauthorized referrer / no key) */
.np-po-map.np-po-map-off { display:flex; align-items:center; justify-content:center; background:#f4f6fb; }
.np-po-map-fallback { text-align:center; max-width:340px; padding:24px; color:#5b6b86; }
.np-po-map-fallback i { font-size:40px; color:#c9d2e3; margin-bottom:14px; }
.np-po-map-fallback p { margin:0; line-height:1.6; }

/* PDF preview container — tidy the sample's oversized margin */
#pdf-preview-1, #pdf-preview-2, #pdf-preview-3 { margin: 6px 0 22px !important; border-radius: 12px; overflow: hidden; }

/* ---- Fix: children "Read more" cards (npx-card-sm) --------------------- */
/* npx-body is a <span> (inline) so its padding didn't contain the block text;
   force block, and equalise card heights across each row. */
.npx-card-sm .npx-body { display: block; }
.npx-row { display: flex; flex-wrap: wrap; }
.npx-row > [class*="col-"] { display: flex; }
.npx-row .npx-card { width: 100%; }
.npx-card-sm .npx-body { display: flex; flex-direction: column; height: 100%; }
.npx-card-sm .npx-body p { flex: 1 1 auto; }

/* ---- Tip-off Hotline: contact channel cards ---------------------------- */
.np-tip-row { margin-top: 10px; }
.np-tip-card { background:#fff; border:1px solid #eef1f7; border-radius:16px; padding:34px 24px; text-align:center;
    box-shadow:0 12px 30px rgba(11,31,58,.06); height:100%; transition:transform .35s, box-shadow .35s; }
.np-tip-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(11,31,58,.12); }
.np-tip-ic { width:72px; height:72px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#fff; background:linear-gradient(135deg,#e30d18,#b00812); box-shadow:0 10px 22px rgba(227,13,24,.28); }
.np-tip-card h4 { color:#8a97ad; font-size:14px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:8px; }
.np-tip-card a, .np-tip-card span.np-tip-val { display:block; color:#1b2a4a; font-size:19px; font-weight:700; word-break:break-word; }
.np-tip-card a:hover { color:#e30d18; }
.np-tip-note { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:34px; color:#5b6b86;
    background:#eef2fb; border-radius:12px; padding:16px 22px; }
.np-tip-note i { color:#0acf97; font-size:20px; }
.np-tip-row > [class*="col-"] { display:flex; margin-bottom:24px; }

/* Bootstrap 3 .hidden utility (dropped in BS5) — several legacy views use it
   for show/hide flows (e.g. shop basket shipping options). Restore it. */
.hidden { display: none !important; }

/* ---- Header responsive fixes (tablet/mobile) --------------------------- */
/* Hamburger: the toggler computes to display:flex, which lays the three
   .icon-bar bars in a ROW (one broken line). Stack them vertically. */
.menu-area .mobile-nav-toggler { flex-direction: column; align-items: center; justify-content: center; }
.menu-area .mobile-nav-toggler .icon-bar { width: 26px; flex: 0 0 auto; }

/* Top-bar quick links squashed: the 350px logo padding-left isn't cleared at
   tablet width, so 5 links wrap word-by-word. Reclaim the space + keep each
   link on one line; hide the row on phones (nav is via the hamburger). */
@media (max-width: 1200px) {
    .header-top .top-inner { padding-left: 0 !important; flex-wrap: wrap; row-gap: 4px; }
    .header-top .links-list { flex-wrap: wrap; }
    .header-top .links-list li { margin-right: 20px; }
    .header-top .links-list li a { white-space: nowrap; }
}
@media (max-width: 767px) {
    .header-top .links-list { display: none; }
}

/* Logo cut off on tablet/mobile: the desktop logo-box uses margin-top:-60px to
   overlap upward; on smaller screens there's no header-top space above it, so
   the top of the logo is clipped. Sit it inside the header row instead. */
@media (max-width: 1200px) {
    .main-header .header-lower .logo-box { margin-top: 0 !important; padding: 14px 0 !important; }
    .main-header .header-lower .logo-box .logo img { max-height: 54px; width: auto; }
}

/* Phone: the theme hides the whole .header-top (<=767px), which removes the
   cart, announcements, contact and login/register — leaving no way to reach
   them on mobile (the hamburger only holds the main nav). Keep it as a compact,
   centred icon row instead. (Register/Logout now carry icons in the markup.) */
@media (max-width: 767px) {
    .main-header .header-top { display: block !important; }
    .header-top .top-inner { padding-left: 0 !important; justify-content: center; }
    .header-top .np-top-actions { justify-content: center; width: 100%; }
}

/* =========================================================================
   Logo preloader + custom cursor  (NamPost redesign)
   ========================================================================= */

/* ---- Logo preloader ---- */
.np-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity .6s ease, visibility .6s ease;
}
.np-preloader.np-loaded { opacity: 0; visibility: hidden; }
.np-preloader__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.np-preloader__logo {
    width: 190px;
    max-width: 55vw;
    height: auto;
    animation: npPreloaderPulse 1.4s ease-in-out infinite;
}
.np-preloader__ring {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(227, 13, 24, .2);
    border-top-color: #e30d18;
    border-radius: 50%;
    animation: npPreloaderSpin .8s linear infinite;
}
@keyframes npPreloaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .72; } }
@keyframes npPreloaderSpin { to { transform: rotate(360deg); } }

/* ---- Custom cursor (fine-pointer devices only) ---- */
.np-cursor, .np-cursor-dot { display: none; }

@media (hover: hover) and (pointer: fine) {
    .np-cursor, .np-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        pointer-events: none;
        border-radius: 50%;
        z-index: 100000;
        will-change: transform;
    }
    .np-cursor {
        width: 34px;
        height: 34px;
        border: 1.5px solid rgba(227, 13, 24, .7);
        background: transparent;
        transition: width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease;
    }
    .np-cursor-dot {
        width: 8px;
        height: 8px;
        background: #e30d18;
        transition: opacity .25s ease;
    }
    /* grow the ring over interactive elements */
    .np-cursor.np-cursor--hover {
        width: 54px;
        height: 54px;
        background: rgba(227, 13, 24, .12);
        border-color: #e30d18;
    }
    /* Native pointer stays visible; the custom dot+ring layer on top of it. */
}

/* Respect reduced-motion: no pulse/spin/trailing, keep a plain fade */
@media (prefers-reduced-motion: reduce) {
    .np-preloader__logo, .np-preloader__ring { animation: none; }
    .np-cursor { transition: width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease; }
}

/* =========================================================================
   Homepage quick-links: fixes (UAT feedback)
   - remove decorative divider line that struck through the heading
   - move the arrow chip to the top-right corner so it no longer overlaps text
   - guarantee all five cards render at exactly the same size
   ========================================================================= */
.npx-quick::before { display: none !important; }

.npx-q { min-height: 210px; justify-content: flex-start; }
.npx-q::after {
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
}
.npx-q:hover::after { background: #e30d18; color: #fff; }

/* Quick-links: force five equal-width columns on desktop (the theme's .col-lg
   was sizing to content, giving uneven card widths). */
@media (min-width: 992px) {
    .npx-quick .npx-row > .col-lg { flex: 0 0 20%; max-width: 20%; }
}
.npx-quick .npx-row > .col-lg .npx-q { width: 100%; }

/* =========================================================================
   Scroll feel + footer reveal
   ========================================================================= */

/* The theme forces `scroll-behavior:smooth`, which eases every scroll and
   feels like dragging. Restore native, instant scrolling. */
html { scroll-behavior: auto !important; }

/* Footer columns rise one after another when the footer enters view.
   One-shot via IntersectionObserver (NO scroll handler), gated by a JS class
   and reduced-motion so it never hides content or affects scroll smoothness. */
html.np-foot-anim .main-footer .footer-column {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
}
html.np-foot-anim .main-footer.np-footer-in .footer-column { opacity: 1; transform: none; }
html.np-foot-anim .main-footer .footer-column:nth-child(1) { transition-delay: 0ms; }
html.np-foot-anim .main-footer .footer-column:nth-child(2) { transition-delay: 120ms; }
html.np-foot-anim .main-footer .footer-column:nth-child(3) { transition-delay: 240ms; }
html.np-foot-anim .main-footer .footer-column:nth-child(4) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
    html.np-foot-anim .main-footer .footer-column { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   Twitter -> X (rebrand). Font Awesome 5 has no X glyph, so render the
   official X logo via an SVG mask; background-color:currentColor keeps it
   colour-adaptive (white in the footer, brand colour on cards, etc.).
   ========================================================================= */
.fa-twitter::before, .fa-x-twitter::before { content: "" !important; }
.fa-twitter, .fa-x-twitter {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =========================================================================
   Home slider height — was ~790px (103% of a 1366x768 laptop screen), so the
   whole first screen was just the banner. Right-size it to ~65% of viewport
   and centre the content. Single knob: change --np-hero-h to tune the height.
   ========================================================================= */
:root { --np-hero-h: 550px; }
.banner-carousel .slide-item {
    display: flex;
    align-items: center;
    min-height: var(--np-hero-h);
    padding: 40px 0 !important;            /* was 180px / 225px */
}
.banner-carousel .slide-item > .auto-container { width: 100%; }
.banner-carousel .content-box h2 { font-size: 46px !important; line-height: 1.14 !important; }
.banner-carousel .content-box p  { font-size: 17px !important; line-height: 1.6 !important; margin-top: 14px; }

@media (max-width: 991px) {
    :root { --np-hero-h: 420px; }
    .banner-carousel .content-box h2 { font-size: 34px !important; }
}
@media (max-width: 575px) {
    :root { --np-hero-h: 360px; }
    .banner-carousel .slide-item { padding: 28px 0 !important; }
    .banner-carousel .content-box h2 { font-size: 27px !important; }
}

/* =========================================================================
   UAT feedback batch — dropdown gap, page-title, header logo
   ========================================================================= */
/* Dropdown: reduce the gap between a menu item and its dropdown (was 15px). */
.main-menu .navigation > li > ul,
.main-menu .navigation > li > .megamenu { margin-top: 0 !important; }

/* Page headers: smaller title + less vertical padding (client request). */
.page-title { padding: 100px 0 !important; }
.page-title .content-box h1, .page-title h1 { font-size: 38px !important; line-height: 1.2 !important; }

/* Header logo: enlarge on desktop (ample room in the logo box) without
   resizing the containers. Mobile keeps its own smaller size. */
@media (min-width: 1201px) {
    .main-header .header-lower .logo-box .logo img { height: 84px !important; max-height: 84px !important; width: auto !important; }
}

/* =========================================================================
   Annual Reports (and similar download lists) — clean, modern rows.
   ========================================================================= */
.content .body .col-sm-12 > p { margin: 0 0 10px; }
/* legacy download-link styling — excludes the redesigned annual-report cards/rows,
   which carry their own icon (so they don't get a second PDF glyph) */
.content .body a.js-track-download:not(.npx-card):not(.np-report-row) {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    background: #fff; border: 1px solid #e9edf5; border-radius: 10px;
    color: #1b2a4a; font-weight: 600; text-decoration: none; line-height: 1.3;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.content .body a.js-track-download:not(.npx-card):not(.np-report-row)::before {
    content: "\f1c1"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome; font-weight: 900;
    color: #e30d18; font-size: 18px; flex: 0 0 auto;
}
.content .body a.js-track-download:not(.npx-card):not(.np-report-row):hover {
    border-color: #e30d18; box-shadow: 0 10px 24px rgba(11,31,58,.08);
    transform: translateY(-2px); color: #e30d18;
}

/* =========================================================================
   Mobile menu: make the close button + submenu toggles clearly visible.
   ========================================================================= */
.mobile-menu-visible .mobile-menu .close-btn {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    width: 40px; height: 40px; line-height: 40px !important; text-align: center;
    top: 14px; right: 14px; z-index: 30;
    color: #fff !important; background: #e30d18; border-radius: 50%; font-size: 20px;
}
.mobile-menu .navigation li.dropdown .dropdown-btn {
    background: rgba(255,255,255,0.14) !important; color: #fff !important;
    width: 40px; height: 40px; line-height: 40px !important; top: 8px; right: 8px;
}

/* Logo box padding tweak (client request) */
.main-header .outer-box .logo-box { padding: 31px 90px 41px 0px !important; }

/* ---- Header: switch to the hamburger sooner ---------------------------- */
/* The theme only collapses the horizontal menu below 1200px, but the six
   top-level groups + logo wrap onto a second line well before that (~1365px).
   Extend the theme's own collapse rule up to 1400px so the full menu shows
   only when it actually fits on one line; below that, use the hamburger. */
@media (max-width: 1400px) {
    .main-menu,
    .sticky-header,
    .main-header.style-one .outer-container:before { display: none !important; }
    .menu-area .mobile-nav-toggler { display: flex !important; padding: 10px; }
}

/* ---- Content data tables (procurement bids, etc.) ---------------------- */
/* Replace the harsh blue-gradient header with the site's navy + red-underline
   table header (matches .np-table), and theme the in-table links red (they
   were rendering as browser-default blue). */
.boxed_wrapper table.table thead th,
.boxed_wrapper table.table tr:first-child th {
    background: #1b2a4a !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
    border-bottom: 3px solid #e30d18 !important;
    font-weight: 600 !important;
}
/* The theme paints the first row as a header (blue gradient) for header-less
   tables; when the table has a real <thead>, its first BODY row is data, not a
   header — reset it so it doesn't render blue. */
.boxed_wrapper table.table thead + tbody tr:first-child td {
    background: #fff !important;
    color: #31415e !important;
    font-weight: 400 !important;
    border-color: var(--np-line, #e4eaf3) !important;
}
.boxed_wrapper table.table td a { color: #e30d18; }
.boxed_wrapper table.table td a:hover { color: #c10b15; text-decoration: underline; }
/* The first data row is pinned white above (so it doesn't look like a header); that
   !important also swallowed the row-hover highlight. Restore a consistent hover on
   every row, including the first. */
.boxed_wrapper table.table tbody tr:hover td,
.boxed_wrapper table.table thead + tbody tr:first-child:hover td { background: #f1f4fb !important; }

/* Procurement button bar: wrap now that there are more actions. */
.procurement-nav { flex-wrap: wrap; }

/* ---- DataTables controls (procurement bid tables) ---------------------- */
.dataTables_wrapper .dataTables_filter { text-align: right; margin-bottom: 14px; padding: 18px 20px 0; }
.dataTables_wrapper .dataTables_filter label { color:#1b2a4a; font-weight:600; font-size:14px; }
.dataTables_wrapper .dataTables_filter input {
    border:1px solid #e3e7ef; border-radius:8px; padding:8px 12px; margin-left:8px; min-width:220px;
}
.dataTables_wrapper .dataTables_filter input:focus { outline:none; border-color:#e30d18; box-shadow:0 0 0 3px rgba(227,13,24,.12); }
.dataTables_wrapper .dataTables_info { color:#5b6b86; font-size:13px; padding:20px 20px 20px !important; }
.dataTables_wrapper .dataTables_paginate { padding:12px 20px 20px !important; text-align:right; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display:inline-block; padding:6px 12px; margin-left:4px; border:1px solid #e3e7ef !important;
    border-radius:8px; color:#1b2a4a !important; background:#fff !important; cursor:pointer; text-decoration:none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background:#e30d18 !important; border-color:#e30d18 !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity:.45; cursor:default; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) { background:#f1f3f8 !important; }

/* Bid tables scroll horizontally on small screens instead of clipping. */
.np-dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#bid-datatable { min-width: 560px; }

/* ---- Fleet / blog-details content pages ------------------------------- */
/* Text was flush against the bordered inner-box (padding 24px 0 0). Inset it. */
.blog-details-content .news-block-three .inner-box .lower-content {
    padding: 26px 32px 32px !important;
}
/* Round the page images to match the theme's card radius (banner was 10px,
   the two-column content images had square corners). */
.blog-details-content .news-block-three .inner-box .image-box,
.blog-details-content .image-box,
.blog-details-content .image-box img,
.blog-details-content .image-column figure.image img,
.blog-details-content figure.image > img,
.blog-details-content figure.image > a > img {
    border-radius: 16px !important;
}

/* Parcel Tracking dropdown in the top-bar left links-list. */
.header-top .links-list .np-track-menu { position: relative; }
.header-top .links-list .np-track-menu .np-top-dropdown { left: 0; right: auto; width: 230px; }
.header-top .links-list .np-track-menu > a .fa-angle-down { font-size: 11px; margin-left: 4px; }

/* Sub-sub (3rd-level) flyout fix: the theme's reveal rule for the 3rd level
   sets visibility/opacity but omits display:block (the 2nd level gets it), so
   flyouts stayed display:none and never appeared on hover. Add it. */
.main-menu .navigation > li > ul > li.dropdown:hover > ul { display: block !important; }

/* ---- Document download list (Mail Compensation etc.) ------------------- */
/* Plain "Download X document." links become tidy download cards. */
.np-doc-list { display: grid; gap: 10px; margin: 10px 0 28px; }
.np-doc-item {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    background: #fff; border: 1px solid #eef0f5; border-radius: 12px;
    text-decoration: none; transition: all .2s ease; box-shadow: 0 6px 18px rgba(27,42,74,.04);
}
.np-doc-item:hover { border-color: #f4c6cb; box-shadow: 0 14px 30px rgba(27,42,74,.10); transform: translateY(-2px); }
.np-doc-item .np-doc-ic {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: #fdecee;
    color: #e30d18; display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.np-doc-item .np-doc-name { flex: 1 1 auto; color: #1b2a4a; font-weight: 600; font-size: 15px; line-height: 1.3; }
.np-doc-item .np-doc-dl { flex: 0 0 auto; color: #8a97ad; font-size: 15px; }
.np-doc-item:hover .np-doc-dl { color: #e30d18; }

/* 3rd-level flyout was (a) clipped by the 2nd-level submenu's overflow:hidden and
   (b) opening off the right edge of the viewport. Let it overflow, and open the
   flyout to the LEFT of its parent item so it stays on screen. */
.main-menu .navigation > li > ul { overflow: visible !important; }
.main-menu .navigation > li > ul > li > ul {
    left: auto !important;
    right: 100% !important;
}

/* overflow:visible (needed for the flyout) removed the submenu's rounded corners
   (they came from overflow:hidden clipping the square item backgrounds). Restore
   the rounding by rounding the last item's bottom corners instead. */
.main-menu .navigation > li > ul { border-radius: 0 0 14px 14px; }
.main-menu .navigation > li > ul > li:last-child,
.main-menu .navigation > li > ul > li:last-child > a {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.main-menu .navigation > li > ul > li > ul { border-radius: 14px; overflow: hidden; }

/* ---- CMS content pages (departments etc.): align images with the theme ---- */
.np-page-content img { max-width: 100%; height: auto; border-radius: 12px; }
.about-style-two .image_block_two .image-box figure.image { border-radius: 16px; overflow: hidden; box-shadow: 0 22px 54px rgba(7,23,47,.16); }
.about-style-two .image_block_two .image-box figure.image img { border-radius: 16px; display: block; width: 100%; }
/* standalone content images (e.g. a portrait in prose) read as framed figures */
.np-page-content p > img:only-child { display: block; margin: 18px auto; max-width: 420px;
    box-shadow: 0 16px 40px rgba(27,42,74,.14); }
/* drop the empty paragraphs pasted from Word so spacing stays even */
.np-page-content p:empty { display: none; }

/* ---- Department pages: image left (first on mobile), compact; justified text -- */
.np-dept-page.about-style-two { padding-top: 60px; padding-bottom: 60px; }
/* image before the text everywhere -> left on desktop, first (top) on mobile */
.np-dept-page.about-style-two .image-column   { order: 0 !important; }
.np-dept-page.about-style-two .content-column { order: 1 !important; }
@media (min-width: 992px) {
    .np-dept-page.about-style-two .image-column   { flex: 0 0 40%; max-width: 40%; }
    .np-dept-page.about-style-two .content-column { flex: 0 0 60%; max-width: 60%; }
}
/* keep the portrait from making the page huge; rounded + framed */
.np-dept-page.about-style-two .image_block_two .image-box figure.image img {
    width: 100%; height: auto; max-height: 440px; object-fit: cover; border-radius: 16px;
}
.np-dept-page.about-style-two .image_block_two .image-box { margin: 0; }
/* justified body copy */
.np-dept-page .np-page-content { text-align: justify; }

/* ---- Annual reports: latest as cover cards (reuse home .npx-card) + collapsible list ---- */
/* Cards reuse .npx-card (image-background + navy shadow, same as Our Business Units).
   A PDF-cover fallback band for reports that have no generated cover image. */
.npx-card--report .npx-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#0b1f3a,#15345e); color:rgba(255,255,255,.22); font-size:96px; }
.npx-card--report .npx-body h4 { font-size:18px; }
.npx-card--report .npx-body p { color:#e3e9f5; }

.np-reports-all { margin-top:42px; }
.np-reports-all-title { font-size:20px; font-weight:800; color:#0b1f3a; margin:0 0 18px; }
.np-reports-more { position:relative; }
.np-reports-more.is-collapsed { max-height:300px; overflow:hidden; }
.np-reports-more.is-collapsed::after { content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
    background:linear-gradient(rgba(255,255,255,0), #fff); pointer-events:none; }
.np-report-row { display:flex; align-items:center; gap:14px; padding:14px 18px; margin-bottom:10px; background:#fff;
    border:1px solid #eef1f7; border-radius:12px; text-decoration:none; box-shadow:0 6px 16px rgba(11,31,58,.05);
    transition:transform .2s, box-shadow .2s, border-color .2s; }
.np-report-row:hover { transform:translateX(3px); box-shadow:0 12px 26px rgba(11,31,58,.12); border-color:#f4c6cb; }
.np-report-row-ic { width:38px; height:38px; border-radius:10px; background:#fdecee; color:#e30d18; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; font-size:16px; }
.np-report-row-name { flex:1 1 auto; color:#1b2a4a; font-weight:600; font-size:15px; }
.np-report-row-year { color:#5b6b86; font-weight:700; font-size:13px; background:#f1f5fb; border-radius:20px; padding:4px 12px; white-space:nowrap; }
.np-report-row-dl { color:#e30d18; font-size:15px; flex:0 0 auto; }
.np-reports-toggle { display:inline-flex; align-items:center; gap:8px; margin-top:8px; cursor:pointer;
    background:#eef2fb; color:#0b1f3a; border:1px solid #e3e8f0; font-weight:700; font-size:14px;
    padding:11px 24px; border-radius:30px; transition:background .2s; }
.np-reports-toggle:hover { background:#e2e8f5; }
.np-reports-toggle i { font-size:12px; }

/* ===== Business-unit "About" pages (Financial / Mail & Logistics / Postal) ===== */
.np-bu-intro { padding:100px 0 70px; }
.np-bu-intro .np-bu-eyebrow { display:inline-block; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:13px; color:#e30d18; margin-bottom:14px; }
.np-bu-intro h2 { font-weight:800; color:#0b1f3a; font-size:36px; line-height:1.18; margin:0 0 22px; }
.np-bu-lead p { color:#5b6b86; font-size:16.5px; line-height:1.85; margin:0 0 16px; text-align:justify; }
.np-bu-figure { position:relative; border-radius:20px; overflow:hidden; margin:0; box-shadow:0 26px 54px rgba(11,31,58,.20); }
.np-bu-figure img { width:100%; height:100%; object-fit:cover; display:block; min-height:340px; }
@media (max-width:991px){ .np-bu-intro .content-column{ margin-bottom:34px; } .np-bu-intro{ padding:70px 0 50px; } }

.np-bu-pills { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0; padding:0; }
.np-bu-pills li { display:inline-flex; align-items:center; gap:8px; background:#f4f7fc; border:1px solid #e6ecf6; color:#1b2a4a; font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:30px; }
.np-bu-pills li i { color:#e30d18; }

.np-bu-features { padding:40px 0 100px; }
.np-bu-features.np-sec-alt { background:#f6f8fc; padding:90px 0; }
.np-bu-grid { margin-right:-12px; margin-left:-12px; }
.np-bu-grid > [class*="col-"] { padding:12px; }
.np-bu-card { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid #eef1f7; border-radius:16px; padding:30px 28px; box-shadow:0 10px 30px rgba(11,31,58,.06); transition:transform .3s, box-shadow .3s, border-color .3s; }
.np-bu-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(11,31,58,.14); border-color:#f4c6cb; }
.np-bu-card .np-bu-ic { width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin-bottom:20px; background:linear-gradient(135deg,#003DA5,#e30d18); box-shadow:0 12px 22px rgba(0,61,165,.22); }
.np-bu-card h4 { color:#0b1f3a; font-size:18px; font-weight:700; margin:0 0 10px; line-height:1.3; }
.np-bu-card p { color:#5b6b86; font-size:14.5px; line-height:1.6; margin:0; }
.np-bu-card .np-bu-soon { display:inline-block; margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#e30d18; background:rgba(227,13,24,.09); padding:4px 10px; border-radius:20px; }

.np-bu-info-card { background:#fff; border:1px solid #eef1f7; border-radius:16px; padding:30px; box-shadow:0 10px 30px rgba(11,31,58,.06); height:100%; }
.np-bu-info-card h3 { color:#0b1f3a; font-size:20px; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:12px; }
.np-bu-info-card h3 i { color:#e30d18; }
.np-bu-info-card p { color:#5b6b86; line-height:1.75; margin:0; text-align:justify; }

.np-bu-cta { background:linear-gradient(120deg,#0b1f3a,#15345e); border-radius:22px; padding:48px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; box-shadow:0 22px 50px rgba(11,31,58,.22); }
.np-bu-cta-text h3 { color:#fff; font-size:26px; font-weight:800; margin:0 0 6px; }
.np-bu-cta-text p { color:rgba(255,255,255,.78); margin:0; font-size:15px; }
.np-bu-cta .theme-btn { white-space:nowrap; }
@media (max-width:767px){ .np-bu-cta{ padding:34px 26px; } .np-bu-intro h2{ font-size:28px; } }

/* Header menu: 3rd-level (sub-sub) links match the 2nd-level 14px (theme left them 16px) */
.main-menu .navigation > li > ul > li > ul > li > a { font-size:14px; line-height:22px; }

/* "Learn more" link inside a business-unit feature card */
.np-bu-card .np-bu-cardlink { margin-top:16px; color:#e30d18; font-weight:700; font-size:14px;
    text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.np-bu-card .np-bu-cardlink i { transition:transform .2s; }
.np-bu-card .np-bu-cardlink:hover i { transform:translateX(4px); }

/* REM landing: digital-mail portal access panel */
.np-rem-portal { background:linear-gradient(135deg,#0b1f3a,#15345e); border-radius:20px; padding:48px 40px;
    text-align:center; box-shadow:0 26px 54px rgba(11,31,58,.22); }
.np-rem-ic { width:84px; height:84px; border-radius:22px; background:rgba(255,255,255,.12); color:#fff;
    display:inline-flex; align-items:center; justify-content:center; font-size:36px; margin-bottom:22px; }
.np-rem-portal h3 { color:#fff; font-weight:800; font-size:24px; margin:0 0 10px; }
.np-rem-portal p { color:rgba(255,255,255,.78); margin:0 0 24px; font-size:15px; }
.np-rem-portal .theme-btn i { margin-left:8px; font-size:13px; }
@media (max-width:991px){ .np-rem-portal{ margin-top:34px; } }

/* REM landing: prose + benefits checklist */
.np-rem-prose { max-width:880px; margin:0 auto; }
.np-rem-prose p { color:#5b6b86; line-height:1.85; font-size:16.5px; margin:0 0 16px; text-align:justify; }
.np-rem-benefits { list-style:none; margin:6px auto 0; padding:0; max-width:820px;
    display:grid; grid-template-columns:repeat(2,1fr); gap:16px 36px; }
.np-rem-benefits li { display:flex; gap:13px; align-items:flex-start; color:#1b2a4a; font-weight:600; line-height:1.5; font-size:15.5px; }
.np-rem-benefits li i { color:#1b9e5a; font-size:18px; margin-top:2px; flex:0 0 auto; }
@media (max-width:767px){ .np-rem-benefits { grid-template-columns:1fr; } }

/* Department pages: top-align the image & text columns (theme centres them vertically) */
.np-dept-page.about-style-two .row.align-items-center { align-items: flex-start !important; }

/* Postal Codes: collapsed region rows + "Show more" toggle */
.np-table tbody tr.np-row-hidden { display: none; }
.np-table-more { display:inline-flex; align-items:center; gap:8px; margin:12px 0 4px; cursor:pointer;
    background:#eef2fb; color:#0b1f3a; border:1px solid #e3e8f0; font-weight:700; font-size:13.5px;
    padding:9px 20px; border-radius:30px; transition:background .2s; }
.np-table-more:hover { background:#e2e8f5; }
.np-table-more i { font-size:11px; }