.tracking-page {
    --tracking-ink: #2f2228;
    --tracking-muted: #76676e;
    --tracking-line: #eadde2;
    --tracking-rose: #b52d5b;
    --tracking-deep: #542236;
    min-height: 68vh;
    padding: clamp(42px, 7vw, 82px) 20px 70px;
    background:
        radial-gradient(circle at 8% 12%, rgba(237, 168, 190, 0.22), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(255, 222, 186, 0.26), transparent 25%),
        linear-gradient(180deg, #fff9fb 0%, #fff 54%, #fff8fa 100%);
}

.tracking-shell {
    width: min(100%, 820px);
    margin: 0 auto;
}

.tracking-intro {
    max-width: 650px;
    margin: 0 auto 30px;
    text-align: center;
}

.tracking-eyebrow {
    display: inline-block;
    color: var(--tracking-rose);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tracking-intro h1 {
    margin: 8px 0 12px;
    color: var(--tracking-deep);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.15rem, 7vw, 3.7rem);
    line-height: 1.08;
}

.tracking-intro p {
    margin: 0;
    color: var(--tracking-muted);
    font-size: clamp(1rem, 2.5vw, 1.12rem);
}

.tracking-card {
    border: 1px solid rgba(181, 45, 91, 0.13);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 55px rgba(74, 35, 50, 0.09);
}

.tracking-lookup,
.tracking-loading,
.tracking-error,
.tracking-unavailable {
    padding: clamp(24px, 5vw, 38px);
}

.tracking-lookup-heading,
.tracking-loading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tracking-card-icon,
.tracking-state-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fae9ef;
    color: var(--tracking-rose);
    font-size: 1.4rem;
    font-weight: 900;
}

.tracking-lookup h2,
.tracking-loading h2,
.tracking-error h2,
.tracking-unavailable h2 {
    margin: 0;
    color: var(--tracking-ink);
    font-size: 1.35rem;
    line-height: 1.25;
}

.tracking-lookup-heading p,
.tracking-loading p,
.tracking-error p,
.tracking-unavailable p {
    margin: 4px 0 0;
    color: var(--tracking-muted);
}

.tracking-lookup form {
    margin-top: 25px;
}

.tracking-lookup label {
    display: block;
    margin-bottom: 8px;
    color: var(--tracking-ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.tracking-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.tracking-input-row input {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    border: 1px solid #d8c8ce;
    border-radius: 14px;
    background: #fff;
    color: var(--tracking-ink);
    font: inherit;
}

.tracking-input-row input:focus {
    border-color: var(--tracking-rose);
    outline: 3px solid rgba(181, 45, 91, 0.13);
}

.tracking-input-row input[aria-invalid='true'] {
    border-color: #c93636;
}

.tracking-input-row button,
.tracking-primary-button,
.tracking-secondary-button,
.tracking-whatsapp-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tracking-rose), #8e2448);
    box-shadow: 0 10px 24px rgba(181, 45, 91, 0.2);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
}

.tracking-secondary-button {
    margin-top: 20px;
}

.tracking-input-row button:hover,
.tracking-primary-button:hover,
.tracking-secondary-button:hover,
.tracking-whatsapp-button:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.tracking-form-error {
    margin: 9px 0 0;
    color: #a42222;
    font-size: 0.88rem;
    font-weight: 650;
}

.tracking-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--tracking-line);
    color: var(--tracking-muted);
    font-size: 0.88rem;
}

.tracking-loading {
    min-height: 150px;
    justify-content: center;
}

.tracking-spinner {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 4px solid #f3dce4;
    border-top-color: var(--tracking-rose);
    border-radius: 50%;
    animation: tracking-spin 0.8s linear infinite;
}

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

.tracking-error,
.tracking-unavailable {
    text-align: center;
}

.tracking-error .tracking-state-icon,
.tracking-unavailable .tracking-state-icon {
    margin: 0 auto 18px;
}

.tracking-error .tracking-state-icon {
    background: #fdeaea;
    color: #b42318;
}

.tracking-error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.tracking-link-button {
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--tracking-rose);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.tracking-result {
    display: grid;
    gap: 16px;
}

.tracking-order-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 4px 4px;
}

.tracking-order-heading h2 {
    margin: 2px 0 0;
    color: var(--tracking-deep);
    font-size: clamp(1.7rem, 5vw, 2.35rem);
}

.tracking-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef8f1;
    color: #19733a;
    font-size: 0.76rem;
    font-weight: 800;
}

.tracking-live-badge > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #24a55a;
    box-shadow: 0 0 0 4px rgba(36, 165, 90, 0.13);
}

.tracking-live-badge.is-finished {
    background: #f1edef;
    color: #65575d;
}

.tracking-status-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    padding: clamp(24px, 5vw, 34px);
    overflow: hidden;
}

.tracking-status-mark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f4e6eb;
    color: var(--tracking-rose);
    font-size: 1.75rem;
    font-weight: 900;
}

.tracking-status-label {
    color: var(--tracking-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tracking-status-card h3,
.tracking-section-heading h3 {
    margin: 4px 0 7px;
    color: var(--tracking-ink);
    font-size: clamp(1.3rem, 4vw, 1.65rem);
}

.tracking-status-card p {
    margin: 0;
    color: var(--tracking-muted);
}

.tracking-status-card.is-success .tracking-status-mark {
    background: #e6f7eb;
    color: #19733a;
}

.tracking-status-card.is-warning .tracking-status-mark {
    background: #fff2d8;
    color: #9b6200;
}

.tracking-status-card.is-danger .tracking-status-mark {
    background: #fde8e8;
    color: #b42318;
}

.tracking-status-card.is-info .tracking-status-mark {
    background: #e6f2fb;
    color: #17649a;
}

.tracking-timeline-card,
.tracking-details-card {
    padding: clamp(24px, 5vw, 34px);
}

.tracking-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.tracking-updated {
    color: var(--tracking-muted);
    font-size: 0.78rem;
    text-align: right;
}

.tracking-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.tracking-timeline-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #9a8e93;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.tracking-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 15px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 3px;
    border-radius: 3px;
    background: #eadfe3;
}

.tracking-timeline-step.is-complete:not(:last-child)::after {
    background: #3aa568;
}

.tracking-timeline-marker {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 3px solid #e8dce0;
    border-radius: 50%;
    background: #fff;
    color: #fff;
}

.tracking-timeline-step.is-complete,
.tracking-timeline-step.is-current {
    color: var(--tracking-ink);
}

.tracking-timeline-step.is-complete .tracking-timeline-marker {
    border-color: #3aa568;
    background: #3aa568;
}

.tracking-timeline-step.is-current .tracking-timeline-marker {
    border-color: var(--tracking-rose);
    box-shadow: 0 0 0 6px rgba(181, 45, 91, 0.11);
}

.tracking-timeline-step.is-current .tracking-timeline-marker::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tracking-rose);
}

.tracking-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 0;
}

.tracking-details > div {
    padding: 16px;
    border: 1px solid var(--tracking-line);
    border-radius: 15px;
    background: #fffbfc;
}

.tracking-details dt {
    color: var(--tracking-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.tracking-details dd {
    margin: 4px 0 0;
    color: var(--tracking-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.tracking-whatsapp-button {
    width: 100%;
    margin-top: 18px;
    background: linear-gradient(135deg, #169c4a, #087934);
    box-shadow: 0 10px 24px rgba(22, 156, 74, 0.17);
}

.tracking-another-button {
    justify-self: center;
}

.tracking-live-map-card {
    padding: 24px;
    overflow: hidden;
}

.tracking-driver-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.tracking-driver-heading h3 {
    margin: 3px 0 0;
    color: var(--tracking-ink);
    font-size: 1.22rem;
}

.tracking-driver-name {
    margin: 4px 0 0;
    color: var(--tracking-muted);
    font-weight: 700;
}

.tracking-driver-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    overflow: hidden;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--tracking-rose), var(--tracking-deep));
    color: #fff;
    font-weight: 900;
    letter-spacing: .04em;
}

.tracking-driver-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tracking-location-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f3eef0;
    color: var(--tracking-muted);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.tracking-location-badge.is-live {
    background: #dcfce7;
    color: #166534;
}

.tracking-location-badge.is-live::before {
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #22c55e;
    content: '';
}

.tracking-location-badge.is-paused {
    background: #fff7ed;
    color: #9a3412;
}

.tracking-location-badge.is-waiting {
    background: #eff6ff;
    color: #1d4ed8;
}

.tracking-location-message {
    margin: 18px 0 0;
    color: var(--tracking-muted);
    line-height: 1.5;
}

.tracking-delivery-progress {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.45;
}

.tracking-delivery-progress.is-waiting {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.tracking-delivery-progress.is-next {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.tracking-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.tracking-map-actions .tracking-primary-button,
.tracking-map-actions .tracking-whatsapp-button {
    width: auto;
    margin: 0;
}

.tracking-map {
    width: 100%;
    height: min(52vh, 420px);
    min-height: 300px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--tracking-line);
    border-radius: 18px;
    background: #f1ecee;
}

.tracking-map-marker {
    display: grid !important;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--tracking-rose);
    box-shadow: 0 8px 24px rgba(84, 34, 54, .28);
    font-size: 21px;
}

.tracking-store-marker {
    display: grid !important;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 12px;
    background: #6f1838;
    box-shadow: 0 8px 24px rgba(84, 34, 54, .25);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 800;
}

.tracking-map-privacy {
    margin: 14px 0 0;
    color: var(--tracking-muted);
    font-size: .82rem;
    line-height: 1.5;
}

[hidden] {
    display: none !important;
}

@media (max-width: 680px) {
    .tracking-page {
        padding: 34px 14px 54px;
    }

    .tracking-card {
        border-radius: 20px;
    }

    .tracking-input-row {
        grid-template-columns: 1fr;
    }

    .tracking-input-row button {
        width: 100%;
    }

    .tracking-order-heading,
    .tracking-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tracking-updated {
        text-align: left;
    }

    .tracking-status-card {
        grid-template-columns: 1fr;
    }

    .tracking-details {
        grid-template-columns: 1fr;
    }

    .tracking-timeline {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tracking-timeline-step {
        min-height: 58px;
        grid-template-columns: 36px minmax(0, 1fr);
        justify-items: start;
        align-items: start;
        gap: 12px;
        text-align: left;
    }

    .tracking-timeline-step:not(:last-child)::after {
        top: 32px;
        left: 15px;
        width: 3px;
        height: 26px;
    }

    .tracking-timeline-label {
        padding-top: 5px;
    }

    .tracking-error-actions {
        flex-direction: column;
    }

    .tracking-driver-heading {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tracking-location-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .tracking-map-actions,
    .tracking-map-actions .tracking-primary-button,
    .tracking-map-actions .tracking-whatsapp-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tracking-spinner {
        animation-duration: 1.8s;
    }

    .tracking-input-row button:hover,
    .tracking-primary-button:hover,
    .tracking-secondary-button:hover,
    .tracking-whatsapp-button:hover {
        transform: none;
    }
}