/* Header/Hero */
.hero {
    color: #fff;
    min-height: 960px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #000;
    position: relative;
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
}

.hero__content {
    position: relative;
    z-index: 2;
    margin-top: 254px;
    padding: 0 1.25rem;
    max-width: var(--max-width);
}

/* ===== Banner entrance animations ===== */

@keyframes fadeDown {
    from { opacity: 0; transform: translate3d(0, -100px, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translate3d(0, 100px, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

/* .btn-fill-hover moved to style.css (shared across all pages) */

.hero__title {
    font-weight: 700;
    font-style: Bold;
    font-size: 56px;
    line-height: normal;
    letter-spacing: 0%;
    margin: 0 0 10px;
    animation: fadeDown 0.8s ease-out both;
}

.subtitle {
    margin: 0 0 55px;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0%;
    line-height: 100%;
    animation: fadeUp 0.8s ease-out 0.25s both;
}

.tracking {
    background: #fff;
    color: var(--clr-text);
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px -8px rgba(0,0,0,.3);
    max-width: 480px;
    animation: fadeUp 0.8s ease-out 0.5s both;
}

.tracking--panel {
    max-width: 880px;
    padding: 24px 40px;
    border-radius: 20px;
    position: relative;
    background-image: url('/Style%20Library/OLL/img/Tracking_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
}
/* .tracking--panel::before { content:""; position:absolute; inset:0; border-radius:inherit; background-image:radial-gradient(#000 1px,transparent 1px); background-size:12px 12px; opacity:.08; pointer-events:none; } */
.tracking fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.tracking__title {
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 24px;
    color: var(--clr-text);
}

.tracking__tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

    .tracking__tabs button {
        flex: 1;
        background: rgba(255,255,255,0.5);
        border: 1px solid var(--clr-border);
        border-radius: 8px;
        padding: .85rem .9rem;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: .5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        color: #27201F;
        position: relative;
        transition: color 0.25s 0.083s;
        overflow: hidden;
        height: 52px;
        font-family: inherit;
    }

    .tracking__tabs button::before,
    .tracking__tabs button::after {
        border: 0 solid transparent;
        box-sizing: border-box;
        content: '';
        pointer-events: none;
        position: absolute;
        width: 0;
        height: 0;
        bottom: -1px;
        right: -1px;
        border-radius: inherit;
    }

    .tracking__tabs button::before {
        border-bottom-width: 2px;
        border-left-width: 2px;
    }

    .tracking__tabs button::after {
        border-top-width: 2px;
        border-right-width: 2px;
    }

    .tracking__tabs button:not(.is-active):hover {
        color: #DA291C;
    }

    .tracking__tabs button[data-tracktype="land"]:not(.is-active):hover img.tab-icon {
        filter: none;
        content: url("/Style%20Library/OLL/img/icon-container%20truck-active.svg");
    }

    .tracking__tabs button[data-tracktype="ocean"]:not(.is-active):hover img.tab-icon {
        filter: none;
        content: url("/Style%20Library/OLL/img/icon-vessel-active.svg");
    }

    .tracking__tabs button[data-tracktype="air"]:not(.is-active):hover img.tab-icon {
        filter: none;
        content: url("/Style%20Library/OLL/img/icon-airplane-active.svg");
    }

    .tracking__tabs button:not(.is-active):hover::before,
    .tracking__tabs button:not(.is-active):hover::after {
        border-color: #DA291C;
        transition: border-color 0s, width 0.25s, height 0.25s;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
    }

    .tracking__tabs button:not(.is-active):hover::before {
        transition-delay: 0s, 0s, 0.25s;
    }

    .tracking__tabs button:not(.is-active):hover::after {
        transition-delay: 0s, 0.25s, 0s;
    }

    /* Active button: no hover animations */
    .tracking__tabs button.is-active:hover {
        color: #DA291C;
        border-color: #DA291C;
        background: rgba(255,255,255,0.5);
        box-shadow: none;
    }

    .tracking__tabs button.is-active:hover::before,
    .tracking__tabs button.is-active:hover::after {
        border-color: transparent;
        width: 0;
        height: 0;
        transition: none;
    }

        .tracking__tabs button img.tab-icon {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            filter: none;
        }

        .tracking__tabs button.is-active {
            background: rgba(255,255,255,0.5); /* keep active button consistent with requested opacity */
            color: #DA291C;
            border: 1.5px solid #DA291C;
            box-shadow: none; /* Remove heavy shadow */
            transition: none;
        }

            .tracking__tabs button.is-active img.tab-icon {
                /* Tint PNG/SVG images via filter to approximate the red accent color */
                filter: invert(19%) sepia(88%) saturate(5454%) hue-rotate(339deg) brightness(92%) contrast(105%);
            }

        .tracking__tabs button[data-tracktype="land"].is-active img.tab-icon {
            filter: none;
            content: url("/Style%20Library/OLL/img/icon-container%20truck-active.svg");
        }

        .tracking__tabs button[data-tracktype="ocean"].is-active img.tab-icon {
            filter: none;
            content: url("/Style%20Library/OLL/img/icon-vessel-active.svg");
        }

        .tracking__tabs button[data-tracktype="air"].is-active img.tab-icon {
            filter: none;
            content: url("/Style%20Library/OLL/img/icon-airplane-active.svg");
        }

.tab-icon {
    font-size: 1rem;
    line-height: 1;
}
/* SVG icon sizing for tracking tabs */
.tracking__tabs .tab-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.tracking input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    font-size: .85rem;
    line-height: 24px;
    margin-bottom: .6rem;
    height: 52px;
    box-sizing: border-box;
}

.tracking .btn {
    width: 100%;
}

.btn--dark {
    background: #27201F;
}

    .btn--dark:hover, .btn--dark:focus {
        background: #000;
    }

/* Tracking actions row */
.tracking__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: .5rem;
}

    .tracking__actions input {
        flex: 1;
        margin: 0;
        height: 52px !important;
        min-height: 52px;
        max-height: 52px;
        box-sizing: border-box;
    }

    .tracking__actions .btn--search {
        flex: 0 0 180px;
        height: 52px;
        background-color: #27201F;
        color: #fff;
        font-weight: 600;
        border-radius: 8px;
        border: 1px solid #000;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Remove full-width rule for search button when in actions row */
    .tracking__actions .btn {
        width: auto;
        font-family: inherit;
    }

/* Tracking form message when an error occurs */
.tracking .error-form-msg.is-error {
    color: #DA291C; /* red accent */
    font-size: 1rem; /* larger than default */
    font-weight: 700;
}

/* Responsive Styles */

/* Large screen design adjustments for hero (1920px reference) */
@media (min-width:1400px) {
    .hero__content {
        width: 872px; /* Matches blue size label in spec */
        margin-left: 350px; /* Left gap */
        margin-right: 698px; /* Right gap derived from 1920-350-872 */
        margin-top: 254px; /* Top gap from spec */
        padding: 0; /* Remove side padding to align exact width */
        max-width: none; /* Allow fixed width */
    }
    /* Tracking form fixed size */
    #trackingForm.tracking--panel {
        width: 845px;
        height: 248px; /* total outer height per spec */
        max-width: none; /* override generic max-width */
    }
    /* Tracking tabs fixed button dimensions */
    #trackingForm .tracking__tabs button {
        flex: 0 0 244px; /* prevent stretching */
        width: 242px;
        height: 52px;
        padding: 0 1.25rem; /* horizontal padding while preserving total width */
    }
}

/* Medium-large screens: 1280px ~ 1897px
   Adjust hero layout and tracking panel without affecting normal (larger) pages */
@media (min-width:1280px) and (max-width:1897px) {
    /* center hero content for mid-large screens */
    .hero__content {
        width: 872px;
        margin: 220px auto 0; /* center horizontally */
        padding: 0;
        max-width: none;
    }

        .hero__content h1,
        .hero__content .subtitle {
            text-align: left;
        }

    /* Tracking panel centered within hero content */
    #trackingForm.tracking--panel {
        width: 820px;
        margin: 24px 0; /* small vertical gap under heading */
        height: 240px;
        padding: 24px 36px;
        max-width: none;
    }

    /* Keep the tracking tab button dimensions aligned */
    #trackingForm .tracking__tabs button {
        flex: 1; /* Allow buttons to fill the available space evenly */
        width: auto; /* Remove fixed width to prevent overflow */
        padding: 0 1.1rem;
    }
}

/* Make better use of width on 1024px - 1279px screens */
@media (min-width:1024px) and (max-width:1279px) {

    .hero__content {
        width: calc(100% - 15rem); /* allow generous width */
        margin: 160px auto 0; /* reduce side margins */
        padding: 0 1rem;
        max-width: none;
    }
    /* Allow tracking panel to grow within the reduced hero padding */
    #trackingForm.tracking--panel {
        width: calc(100% - 0rem);
        max-width: 920px;
        margin: 20px 0;
        padding: 25px 45px 45px;
        height: auto;
    }

}

@media (max-width:1024px) {
    .hero__title {
        font-size: 40px !important;
    }
    
.tracking--panel {
    padding: 25px 45px 45px;
}
}

@media (max-width: 767px) {
    /* Tracking form adjustments for mobile */
    .tracking--panel {
        padding: 20px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .tracking__title {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .tracking__tabs {
        gap: 0.5rem;
    }

        .tracking__tabs button {
            padding: 0.5rem;
            font-size: 14px;
            flex: 1; /* Distribute space equally */
        }

    .tracking__actions {
        flex-direction: column;
        gap: 1rem;
    }

        .tracking__actions input {
            width: 100%;
            height: 52px !important;
            min-height: 52px;
            max-height: 52px;
        }

        .tracking__actions .btn--search {
            width: 100%;
            flex: auto; /* Override flex: 0 0 180px */
        }

    .tracking--panel {
        padding: 24px;
        margin-top: 0;
        width: 100vw;
        max-width: none;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        border-radius: 0;
    }

}

/* Hero adjustments for small phones 320px - 450px */
@media (max-width: 450px) {
    .hero {
        min-height: auto;
        padding-bottom: 0;
    }

    .hero__content {
        margin: 140px 0 0;
        padding: 0 20px;
    }

        .hero__content h1 {
            font-size: 36px;
            line-height: 1.2;
            margin-bottom: 16px;
        }

    .subtitle {
        font-size: 18px;
        margin-bottom: 32px;
        line-height: 1.4;
    }

    .tracking--panel {
        padding: 24px;
        margin-top: 0;
        width: 100vw;
        max-width: none;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        border-radius: 0;
    }

    .tracking__title {
        text-align: center;
        margin-bottom: 16px;
    }

    .tracking__tabs {
        margin-bottom: 16px;
        flex-wrap: wrap; /* Restore default wrapping behavior per original CSS */
        gap: 0.5rem; /* Restore original gap */
    }

    /* Restore button styles */
    .tracking__tabs button {
        flex: 1;
        padding: 0.5rem;
        font-size: 14px;
        white-space: normal;
    }

    .tracking__actions {
        flex-direction: column;
        gap: 12px;
    }

        .tracking__actions input {
            width: 100%;
            margin-bottom: 0;
            height: 52px !important;
            min-height: 52px;
            max-height: 52px;
        }

        .tracking__actions .btn--search {
            width: 100%;
            flex: none;
            margin-top: 0;
            height: 52px;
        }
}

@media (min-width: 1921px) {
    .hero__content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1180px; /* Center content on very large screens */
        padding: 0 1.25rem;
    }
}

@media (max-width: 375px) {
   .tracking__tabs button img.tab-icon {
        display: none; /* Hide the default icon */
    }
}