/*
 * safe-portal.css
 * Styles scoped to the Safe Vault lookup page only (vault.php).
 * Reuses the same tokens as header-custom.css:
 *   Navy: #0c1f44 / #081733   Red: #e11d07 / hover #b81606
 * Load this AFTER vendor.min.css, style.css, header-custom.css.
 *
 * Note: the page banner itself now uses the theme's shared .page-title /
 * breadcrumb pattern (see about.php / services.php / tracking_details.php
 * for the matching markup) instead of a custom hero, so there are no
 * .safe-hero styles here anymore.
 */

/* ---------- Lookup card (sits just below the banner) ---------- */

.safe-lookup-wrap {
    margin-top: 48px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.safe-lookup-card {
    background-color: #fff;
    max-width: 640px;
    margin: 0 auto;
    padding: 44px 40px 40px;
    border-radius: 18px;
    border-top: 4px solid #0c1f44;
    text-align: center;
    -webkit-box-shadow: 0 30px 70px -30px rgba(13, 32, 57, .32);
    box-shadow: 0 30px 70px -30px rgba(13, 32, 57, .32);
}

.safe-lookup-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-color: #e7ebf3;
    color: #0c1f44;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 20px;
}

.safe-lookup-heading {
    font-family: rubik, sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #0c1f44;
    margin: 0 0 8px;
}

.safe-lookup-intro {
    font-family: roboto, sans-serif;
    font-size: 14px;
    color: #6b7a8a;
    margin: 0 0 28px;
}

.safe-lookup-card form {
    text-align: left;
}

.safe-lookup-label {
    display: block;
    color: #5b6472;
    font-family: roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.safe-lookup-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    border: 1px solid #d8dce3;
    border-radius: 10px;
    overflow: hidden;
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.safe-lookup-form:focus-within {
    border-color: #0c1f44;
    -webkit-box-shadow: 0 0 0 3px rgba(12, 31, 68, .1);
    box-shadow: 0 0 0 3px rgba(12, 31, 68, .1);
}

.safe-lookup-form input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 17px 20px;
    font-family: roboto, sans-serif;
    font-size: 16px;
    color: #0c1f44;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.safe-lookup-form input::-webkit-input-placeholder {
    color: #a3aab8;
    text-transform: none;
}

.safe-lookup-form input::placeholder {
    color: #a3aab8;
    text-transform: none;
}

.safe-lookup-form button {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 26px;
    border: none;
    background-color: #0c1f44;
    color: #fff;
    font-family: roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}

.safe-lookup-form button:hover {
    background-color: #e11d07;
}

.safe-lookup-hint {
    display: block;
    margin-top: 12px;
    color: #8992a3;
    font-family: roboto, sans-serif;
    font-size: 13px;
}

.safe-lookup-hint a {
    color: #0c1f44;
    font-weight: 600;
    text-decoration: underline;
}

.safe-lookup-hint a:hover {
    color: #e11d07;
}

/* ---------- Not-found alert ---------- */

.safe-alert {
    max-width: 640px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    background-color: #fdecea;
    border: 1px solid #f5c6c0;
    color: #9a2a1c;
    font-family: roboto, sans-serif;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.safe-alert i {
    margin-right: 10px;
    color: #e11d07;
}

/* ---------- Result card ---------- */

.safe-result {
    max-width: 760px;
    margin: 0 auto 60px;
    background-color: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    -webkit-box-shadow: 0 24px 60px -30px rgba(13, 32, 57, .28);
    box-shadow: 0 24px 60px -30px rgba(13, 32, 57, .28);
}

.safe-parcel-card {
    background-color: #fcfcfc;
    border: 1px solid #e6e9ee;
    border-radius: 16px;
    -webkit-box-shadow: 0 12px 30px -18px rgba(13, 32, 57, .18);
    box-shadow: 0 12px 30px -18px rgba(13, 32, 57, .18);
    max-width: 420px;
    margin: 0 auto 24px;
    padding: 24px;
    text-align: center;
}

.safe-parcel-card h4 {
    font-family: rubik, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #0c1f44;
    margin: 0 0 16px;
}

.safe-parcel-card img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.safe-result-body {
    padding: 32px 36px 36px;
}

.safe-result-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e4e7ec;
}

.safe-result-item {
    color: #0c1f44;
    font-family: rubik, sans-serif;
    font-weight: 600;
    font-size: 20px;
}

.safe-status {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 14px;
    border-radius: 20px;
    font-family: roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.safe-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 7px;
}

.safe-status--active {
    background-color: #e7f7ee;
    color: #1a9a55;
}

.safe-status--returned {
    background-color: #eef1f5;
    color: #5b6472;
}

.safe-status--overdue {
    background-color: #fdecea;
    color: #d0311f;
}

.safe-again-row {
    max-width: 760px;
    margin: 0 auto 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.btn-safe-again {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    background-color: #f1f3f6;
    color: #0c1f44;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: roboto, sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}

.btn-safe-again:hover {
    background-color: #e4e8ee;
    color: #0c1f44;
    text-decoration: none;
}

.safe-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.safe-info-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f3;
}

.safe-info-list li:last-child {
    border-bottom: none;
}

.safe-info-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    color: #6b7a8a;
    font-family: roboto, sans-serif;
    font-size: 14px;
}

.safe-info-label i {
    color: #0c1f44;
    width: 16px;
    text-align: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.safe-info-value {
    color: #0c1f44;
    font-family: roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}

.safe-divider-label {
    color: #0c1f44;
    font-family: roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 4px 0 8px;
    padding-top: 22px;
    border-top: 1px solid #e4e7ec;
}

@media only screen and (max-width: 575px) {
    .safe-lookup-card {
        padding: 28px 22px 30px;
    }

    .safe-result-body {
        padding: 26px 22px 30px;
    }

    .safe-lookup-wrap {
        margin-top: 28px;
    }
}