/*
 * nordson.css
 * Nordson brand styles built on Bootstrap 5.
 * Matches nordsonmedical.com: colors, logobox, cards, buttons, wave, footer.
 */

/* ── TOKENS ──────────────────────────────────────────────────────── */
:root {
    --nm-blue: #007ac9;
    --nm-dark: #002d64;
    --nm-light: #53c6fd;
    --nm-orange: #ff7800;
    --nm-border: #dee2e6;
    --nm-gray: #f8f9fa;
}

/* ── BASE ────────────────────────────────────────────────────────── */
body {
    font-family: 'Source Sans 3', sans-serif;
    background: #f8f9fa;
}

h1 {
    color: #007ac9;
    font-weight: 700;
}

h2 {
    color: #007ac9;
    font-weight: 500;
}

h3 {
    color: #007ac9;
    font-weight: 400;
}

h4 {
    color: #007ac9;
    font-weight: 300;
}

h5 {
    color: #ffffff;
    font-weight: 700;
}

a, a:visited {
    color: #ff7800;
}

    a:hover, a:focus {
        color: #007ac9;
    }

/* ── LOGOBOX ─────────────────────────────────────────────────────── */
.logobox {
    background-color: #ffffff;
    border-radius: 0 0 2rem 2rem;
    box-shadow: -6px 6px 6px 0px rgba(0,0,0,0.2);
    width: 158px;
    height: 106px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-decoration: none !important;
}

    .logobox svg {
        width: 100%;
        height: auto;
        display: block;
    }

@media (min-width: 1200px) {
    .logobox {
        width: 208px;
        height: 132px;
    }
}

/* ── BLUE NAV BAR ────────────────────────────────────────────────── */
.nm-blue-nav {
    background-color: #007ac9;
    min-height: 56px;
    position: relative;
}

/* Mobile logo — inline in the nav bar, shown below lg, hidden on lg+ */
.nm-mobile-logo {
    display: none;
    align-items: center;
    text-decoration: none !important;
    flex-shrink: 0;
}

    .nm-mobile-logo svg {
        display: block;
    }

@media (max-width: 991.98px) {
    /* Hide the hanging badge wrapper */
    .logobox-container {
        display: none !important;
    }
    /* Show the inline logo */
    .nm-mobile-logo {
        display: flex;
    }
}

/* Vertical centring for everything inside the blue nav */
.nm-blue-nav .container,
.nm-blue-nav ul.nav,
.nm-blue-nav .nav-item,
.nm-blue-nav .nav-link-topnav,
.nm-blue-nav .dropdown {
    display: flex;
    align-items: center;
}

.nav-link-topnav {
    display: inline-flex;
    align-items: center;
    color: #ffffff !important;
    font-size: .875rem;
    padding: .5rem 1rem;
    text-decoration: none !important;
}

    .nav-link-topnav:hover {
        opacity: .8;
    }

/* ── BREADCRUMB ──────────────────────────────────────────────────── */
.breadcrumb-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--nm-border);
    padding: .5rem 0;
}

    .breadcrumb-bar .breadcrumb {
        margin: 0;
        font-size: .875rem;
    }

    .breadcrumb-bar .breadcrumb-item a {
        color: #007ac9;
        text-decoration: none;
    }

        .breadcrumb-bar .breadcrumb-item a:hover {
            color: #ff7800;
        }

    .breadcrumb-bar .breadcrumb-item.active {
        color: #6c757d;
    }

/* ── STEPPER ─────────────────────────────────────────────────────── */
.stepper-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--nm-border);
    padding: 1rem 0;
}

.step-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 560px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    position: relative;
}

    .step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 13px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
        height: 2px;
        background: var(--nm-border);
        z-index: 0;
        transition: background .3s;
    }

    .step-item.is-done:not(:last-child)::after {
        background: #007ac9;
    }

.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    z-index: 1;
    border: 2px solid var(--nm-border);
    background: #f8f9fa;
    color: #adb5bd;
    flex-shrink: 0;
    transition: all .3s;
}

.step-item.is-active .step-circle {
    background: #007ac9;
    border-color: #007ac9;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0,122,201,.18);
}

.step-item.is-done .step-circle {
    background: #007ac9;
    border-color: #007ac9;
    color: #ffffff;
}

.step-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #adb5bd;
    white-space: nowrap;
}

.step-item.is-active .step-label,
.step-item.is-done .step-label {
    color: #007ac9;
}

/* ── CARDS ───────────────────────────────────────────────────────── */
.card {
    border: solid 1px var(--nm-border) !important;
    border-radius: 1rem !important;
    box-shadow: -6px 6px 6px 0px rgba(0,0,0,0.2) !important;
    background: #ffffff;
    overflow: hidden;
}

    .card .card-header {
        background: #ffffff;
        border-bottom: 1px solid var(--nm-border);
        border-radius: 1rem 1rem 0 0 !important;
        padding: 1.25rem 1.5rem 1rem;
    }

.card-header-accent {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .375rem;
}

.card-icon {
    width: 38px;
    height: 38px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.card-icon-blue {
    background: #e8f4fc;
}

.card-icon-navy {
    background: #e6eaf0;
}

.card-icon-green {
    background: #e8f5ee;
}

.card-icon-orange {
    background: #fff3e8;
}

.card-title-portal {
    font-size: 1.3rem;
    font-weight: 700;
    color: #007ac9;
    margin: 0;
}

.card-subtitle-portal {
    font-size: .9rem;
    color: #6c757d;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary, .btn-primary:visited {
    background-color: #ff7800 !important;
    border-color: #ff7800 !important;
    color: #ffffff !important;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        background-color: #002d64 !important;
        border-color: #002d64 !important;
        color: #ffffff !important;
    }

.btn-secondary, .btn-secondary:visited {
    background-color: #002d64 !important;
    border-color: #002d64 !important;
    color: #ffffff !important;
}

    .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
        background-color: #ffffff !important;
        border: 1px solid #002d64 !important;
        color: #002d64 !important;
    }

.btn-success, .btn-success:visited {
    background-color: #007ac9 !important;
    border-color: #007ac9 !important;
    color: #ffffff !important;
}

    .btn-success:hover, .btn-success:active, .btn-success:focus {
        background-color: #002d64 !important;
        border-color: #002d64 !important;
        color: #ffffff !important;
    }

/* ── FORM CONTROLS ───────────────────────────────────────────────── */
.form-label-nm {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #212529;
    margin-bottom: .4rem;
}

.form-hint-nm {
    font-size: .875rem;
    color: #6c757d;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: .4rem;
}

.form-control-nm {
    display: block;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: .8125rem;
    letter-spacing: .4px;
    border: 1px solid var(--nm-border);
    border-radius: .375rem;
    padding: .6875rem .875rem;
    color: #212529;
    background: #ffffff;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    appearance: none;
}

    .form-control-nm:focus {
        border-color: #007ac9;
        box-shadow: 0 0 0 .2rem rgba(0,122,201,.25);
    }

    .form-control-nm.is-invalid {
        border-color: #dc3545;
    }

    .form-control-nm.is-valid {
        border-color: #198754;
    }

    .form-control-nm:disabled {
        background: #f8f9fa;
        opacity: .65;
        cursor: not-allowed;
    }

.form-control-nm-text {
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: .9375rem !important;
    letter-spacing: normal !important;
    font-weight: 300;
}

.char-count {
    font-size: .75rem;
    color: #adb5bd;
    text-align: right;
    margin-top: .25rem;
}

    .char-count.is-ok {
        color: #198754;
    }

    .char-count.is-warn {
        color: #ff7800;
    }

.invalid-feedback {
    font-size: .8125rem;
    color: #dc3545;
    font-weight: 600;
}

    .invalid-feedback::before {
        content: '⚠ ';
    }

/* ── ALERTS ──────────────────────────────────────────────────────── */
.alert-nm {
    border-radius: .5rem;
    border: none;
    border-left: 4px solid;
    padding: .875rem 1rem;
    font-size: .9375rem;
    font-weight: 300;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    line-height: 1.5;
}

    .alert-nm .alert-icon {
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

.alert-nm-info {
    background: #e8f4fc;
    border-color: #007ac9;
    color: #005a95;
}

.alert-nm-success {
    background: #d1e7dd;
    border-color: #198754;
    color: #0a3622;
}

.alert-nm-warning {
    background: #fff3cd;
    border-color: #ff7800;
    color: #663d00;
}

.alert-nm-danger {
    background: #f8d7da;
    border-color: #dc3545;
    color: #58151c;
}

/* ── STATUS BADGES ───────────────────────────────────────────────── */
.badge-nm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .25rem .75rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-processing {
    background: #fff3cd;
    color: #663d00;
}

    .badge-processing .badge-dot {
        background: #ff7800;
        animation: nm-pulse 1.4s ease-in-out infinite;
    }

.badge-ready {
    background: #d1e7dd;
    color: #0a3622;
}

    .badge-ready .badge-dot {
        background: #198754;
    }

@keyframes nm-pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .4;
        transform: scale(.6)
    }
}

/* ── INFO TABLE ──────────────────────────────────────────────────── */
.info-table-nm {
    background: #f8f9fa;
    border: 1px solid var(--nm-border);
    border-radius: .5rem;
    padding: .875rem 1.125rem;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--nm-border);
    font-size: .875rem;
}

    .info-row:first-child {
        padding-top: 0;
    }

    .info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.info-row-label {
    color: #6c757d;
    font-weight: 600;
    min-width: 115px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-top: 1px;
    flex-shrink: 0;
}

.info-row-value {
    color: #212529;
    font-family: 'Courier New', monospace;
    font-size: .75rem;
    word-break: break-all;
    line-height: 1.5;
}

.info-row-value-text {
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: .875rem !important;
    font-weight: 300;
}

/* ── HELPER BOX ──────────────────────────────────────────────────── */
.helper-box {
    background: #f8f9fa;
    border: 1px solid var(--nm-border);
    border-radius: .5rem;
    padding: .875rem 1rem;
}

.helper-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6c757d;
    margin-bottom: .375rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.helper-box p {
    font-size: .875rem;
    color: #6c757d;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* ── PROCESSING ──────────────────────────────────────────────────── */
.processing-ring {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    border: 5px solid #e8f4fc;
    border-top-color: #007ac9;
    border-radius: 50%;
    animation: nm-spin 1.1s linear infinite;
    display: block;
}

@keyframes nm-spin {
    to {
        transform: rotate(360deg);
    }
}

.poll-track {
    background: var(--nm-border);
    border-radius: 1rem;
    height: 4px;
    overflow: hidden;
}

.poll-fill {
    height: 100%;
    background: #007ac9;
    border-radius: 1rem;
    transition: width .5s linear;
}

/* ── DOWNLOAD ────────────────────────────────────────────────────── */
.download-icon-circle {
    width: 72px;
    height: 72px;
    background: #d1e7dd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    border: 3px solid #198754;
    margin: 0 auto;
}

/* ── INSTALL STEPS ───────────────────────────────────────────────── */
.install-step {
    display: flex;
    gap: .875rem;
    padding: .75rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .9375rem;
    font-weight: 300;
    align-items: flex-start;
    line-height: 1.5;
}

    .install-step:last-child {
        border-bottom: none;
    }

.install-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #007ac9;
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── WAVE ────────────────────────────────────────────────────────── */
.waves {
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 150px;
    display: block;
    margin-bottom: -2px;
}

    .waves .parallax > use {
        animation: wave-osc 20s ease-in-out infinite;
    }

        .waves .parallax > use:nth-child(1) {
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .waves .parallax > use:nth-child(2) {
            animation-delay: -1s;
            animation-duration: 20s;
        }

        .waves .parallax > use:nth-child(3) {
            animation-delay: -2s;
            animation-duration: 22s;
        }

        .waves .parallax > use:nth-child(4) {
            animation-delay: -3s;
            animation-duration: 25s;
        }

@keyframes wave-osc {
    0% {
        transform: translate3d( 0px,0,0);
    }

    25% {
        transform: translate3d(-50px,0,0);
    }

    50% {
        transform: translate3d( 0px,0,0);
    }

    75% {
        transform: translate3d( 50px,0,0);
    }

    100% {
        transform: translate3d( 0px,0,0);
    }
}

@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer-nm {
    background-image: linear-gradient(to bottom right, #007ac9, #002d64);
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    font-weight: 300;
}

    .footer-nm a {
        color: #53c6fd !important;
        text-decoration: none;
    }

        .footer-nm a:hover {
            color: #002d64 !important;
        }

    .footer-nm p {
        color: #ffffff;
        font-size: 1rem;
    }

    .footer-nm h5 {
        color: #ffffff;
        font-weight: 700;
    }

    .footer-nm .nav-link {
        color: #53c6fd !important;
        font-size: .9375rem;
        font-weight: 300;
    }

        .footer-nm .nav-link:hover {
            color: #002d64 !important;
        }

.footer-divider {
    margin: 1rem 0;
    border-top: 3px solid #53c6fd;
    opacity: 1;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .step-label {
        display: none;
    }

    .card .card-header {
        padding: 1rem;
    }

    .card .card-body {
        padding: 1rem;
    }
}