/* iOutlet Shipment Tracking — customer-facing styles */

.ist-lookup,
.ist-branded,
.ist-overview {
    max-width: 640px;
    margin: 32px auto;
    padding: 32px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1d1d1f;
}

.ist-lookup__heading,
.ist-branded__title,
.ist-overview__title {
    font-size: 26px;
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: -0.012em;
}

.ist-lookup__intro,
.ist-branded__order {
    color: #6e6e73;
    margin: 0 0 20px;
    font-size: 15px;
}

.ist-lookup__form { display: grid; gap: 14px; margin-top: 18px; }
.ist-lookup__field { display: block; }
.ist-lookup__field > span { display: block; font-weight: 500; margin-bottom: 4px; font-size: 14px; }
.ist-lookup__field input {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    font-size: 15px;
    background: #fbfbfd;
}
.ist-lookup__field input:focus { outline: 2px solid #0071e3; outline-offset: -1px; }

.ist-lookup .button-primary,
.ist-branded__cta .button {
    display: inline-block;
    padding: 12px 28px;
    background: #0071e3;
    color: #fff;
    border: 0;
    border-radius: 980px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}
.ist-lookup .button-primary:hover,
.ist-branded__cta .button:hover { background: #0077ed; }

.ist-error {
    margin-top: 16px;
    padding: 10px 14px;
    background: #fdecea;
    color: #b00020;
    border-radius: 8px;
    font-size: 14px;
}

.ist-empty {
    color: #6e6e73;
    font-style: italic;
    text-align: center;
    padding: 18px;
}

/* Timeline */
.ist-timeline {
    list-style: none;
    margin: 28px 0 24px;
    padding: 0;
    position: relative;
}
.ist-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e8e8ed;
    z-index: 0;
}
.ist-timeline__item {
    position: relative;
    padding: 0 0 22px 36px;
    z-index: 1;
}
.ist-timeline__item:last-child { padding-bottom: 0; }
.ist-timeline__marker {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8e8ed;
    border: 2px solid #fff;
}
.ist-timeline__item.is-done .ist-timeline__marker    { background: #1c6b2a; }
.ist-timeline__item.is-current .ist-timeline__marker { background: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
.ist-timeline__item.is-pending .ist-timeline__marker { background: #d2d2d7; }
.ist-timeline__label { font-weight: 500; font-size: 15px; }
.ist-timeline__item.is-pending .ist-timeline__label { color: #86868b; }
.ist-timeline__date { display: block; font-size: 13px; color: #6e6e73; margin-top: 2px; }

/* Meta */
.ist-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    margin: 20px 0;
    padding: 16px 20px;
    background: #f5f5f7;
    border-radius: 10px;
    font-size: 14px;
}
.ist-meta dt { font-weight: 500; color: #1d1d1f; margin: 0; }
.ist-meta dd { margin: 0; color: #424245; }
.ist-meta__tracking { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ist-meta__tracking a { color: #0071e3; text-decoration: none; }
.ist-meta__tracking a:hover { text-decoration: underline; }

.ist-branded__cta { margin-top: 18px; }

@media (max-width: 520px) {
    .ist-lookup, .ist-branded, .ist-overview { padding: 22px 18px; margin: 18px 12px; }
    .ist-meta { grid-template-columns: 1fr; gap: 4px; }
    .ist-meta dt { margin-top: 8px; }
}