/*!
 * px-tools-pages.css — shared page-level styling for the freight tool
 * calculator pages (CBM, Chargeable Weight, Freight Cost Estimator,
 * Transit Time, Volumetric Weight). Consolidated from what used to be
 * a near-identical <style> block copy-pasted into every page.
 *
 * Load order: px-tools.css, style.css, px-tools-pages.css (this file).
 *
 * Add the matching body class to each page so the few rules that differ
 * per page apply correctly:
 *   CBMCalculator.html               -> <body class="page-cbm">
 *   ChargeableWeightCalculator.html  -> <body class="page-cw">
 *   FreightCostEstimator.html        -> <body class="page-fc">
 *   TransitTimeCalculator.html       -> <body class="page-tt">
 *   VolumetricWeightCalculator.html  -> <body class="page-vw">
 */

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Archivo',system-ui,sans-serif;
            background: #fff;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased
        }

        .px-topbar {
            background: #122d57;
            padding: 8px 0;
            font-size: .72rem;
            color: rgba(255,255,255,.6)
        }

        .px-nav {
            position: sticky;
            top: 0;
            z-index: 900;
            background: rgba(255,255,255,.97);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid #e3e6ec
        }

        .px-container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 24px
        }

        .px-nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px
        }

        .px-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            padding: 4px;
            cursor: pointer
        }

            .px-hamburger span {
                display: block;
                width: 22px;
                height: 2px;
                background: #1c437e;
                border-radius: 2px
            }

        @media(max-width:960px) {
            .px-nav-links, .px-nav-cta {
                display: none
            }

            .px-hamburger {
                display: flex
            }
        }

        .px-skip-link {
            position: absolute;
            top: -100px;
            left: 16px;
            z-index: 9999;
            background: var(--amber);
            color: #fff;
            padding: 10px 20px;
            border-radius: 0 0 8px 8px;
            font-weight: 700;
            font-size: .9rem;
            transition: top .2s
        }

            .px-skip-link:focus {
                top: 0
            }

        @media(min-width:901px) {
            .px-sticky-side {
                position: sticky;
                top: 90px
            }
        }

/* ── Mode toggle buttons (Air/Sea, Import/Export, etc.) ──────
   Shared base; padding/font-size and active-state treatment
   differ slightly per page, preserved as-is via body scoping. */
.px-mode { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap }
.px-mode button {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #d6dae2;
    background: #fff;
    color: #1c437e
}
body.page-cw .px-mode button { font-size: .88rem; padding: 9px 18px }
body.page-cw .px-mode button[aria-pressed="true"] {
    background: #1c437e;
    border-color: #1c437e;
    color: #fff
}
body.page-fc .px-mode button, body.page-tt .px-mode button { font-size: .86rem; padding: 9px 16px }
body.page-fc .px-mode button:hover, body.page-tt .px-mode button:hover { border-color: var(--amber,#f5a623) }

/* ── Basis flag pill (Chargeable Weight, Volumetric Weight) ── */
.px-basis-flag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(245,166,35,.18);
    color: var(--amber-lt,#ffc46b)
}

/* ── Freight Cost Estimator: extra charge line rows ──────────── */
.px-charge-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 130px 40px;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px
}
@media(max-width:520px) {
    .px-charge-row { grid-template-columns: minmax(0,1fr) 110px 36px }
}
.px-charge-del {
    background: none;
    border: 1px solid #e8eaef;
    border-radius: 8px;
    height: 40px;
    cursor: pointer;
    color: #9aa3b2
}
.px-charge-del:hover { color: #d64545; border-color: #f0c9c9 }

/* ── Transit Time: vertical timeline ──────────────────────────── */
.px-timeline { list-style: none; padding: 0; margin: 0; position: relative }
.px-timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e3e6ec
}
.px-tl-item { position: relative; padding: 0 0 20px 34px }
.px-tl-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--amber,#f5a623)
}
.px-tl-item:last-child { padding-bottom: 0 }
.px-tl-item.is-end::before { background: var(--amber,#f5a623) }
.px-tl-label { font-weight: 700; color: #1c437e; font-size: .93rem }
.px-tl-meta { font-size: .82rem; color: #77808f; margin-top: 3px }
.px-tl-date { font-size: .86rem; color: #4a5568; font-weight: 700; margin-top: 2px }
.px-checkline { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #4a5568 }
.px-checkline input { width: auto; margin: 0 }
