/* ── Track My Order Block ── */

.bsb-track-order {
    --to-text:        var(--bsb-color-text);
    --to-muted:       rgba(13, 13, 13, 0.55);
    --to-border:      rgba(13, 13, 13, 0.2);
    --to-border-focus: var(--bsb-pink);
    --to-placeholder: rgba(13, 13, 13, 0.35);
    --to-success:     #22a06b;
    --to-pending:     rgba(13, 13, 13, 0.15);
    --to-divider:     rgba(13, 13, 13, 0.1);

    padding-top:    8rem;
    padding-bottom: 8rem;
    color:          var(--to-text);
}

/* ── Inner wrapper — centred, constrained ── */
.bsb-track-order__inner {
    max-width:    680px;
    margin-left:  auto;
    margin-right: auto;
}

/* ── Header ── */
.bsb-track-order__header {
    text-align:    center;
    margin-bottom: 3.5rem;
}

.bsb-track-order__title {
    font-family:    var(--bsb-font-display);
    font-size:      clamp(1.6rem, 3vw, 2.5rem);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height:    1.15;
    margin:         0 0 1rem;
    color:          var(--to-text);
}

.bsb-track-order__subtitle {
    font-family: var(--bsb-font-primary);
    font-size:   1rem;
    color:       var(--to-muted);
    margin:      0;
    line-height: 1.7;
}

/* ── Form ── */
.bsb-track-order__fields {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2.5rem;
    margin-bottom:         2.5rem;
}

.bsb-track-order__field {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.bsb-track-order__field label {
    font-family:    var(--bsb-font-primary);
    font-size:      0.875rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    color:          var(--to-muted);
    display:        block;
}

.bsb-track-order__field input {
    font-family:        var(--bsb-font-primary);
    font-size:          1rem;
    font-weight:        400;
    color:              var(--to-text);
    background:         transparent;
    border:             none;
    border-bottom:      1.5px solid var(--to-border);
    border-radius:      0;
    padding:            0.6rem 0;
    outline:            none;
    width:              100%;
    transition:         border-color 0.3s ease;
    -webkit-appearance: none;
}

.bsb-track-order__field input::placeholder {
    color: var(--to-placeholder);
}

.bsb-track-order__field input:focus {
    border-bottom-color: var(--to-border-focus);
}

.bsb-track-order__field input:-webkit-autofill,
.bsb-track-order__field input:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 1000px transparent inset;
    -webkit-text-fill-color: var(--to-text);
    transition:              background-color 9999s ease-in-out 0s;
}

/* ── Actions ── */
.bsb-track-order__actions {
    display:     flex;
    align-items: center;
}

/* ── Submit button — pill outline matching BSB style ── */
.bsb-track-order__submit {
    display:          inline-flex;
    align-items:      center;
    gap:              0.75rem;
    padding:          1rem 2rem;
    border:           1.5px solid var(--to-text);
    border-radius:    50px;
    font-family:      var(--bsb-font-primary);
    font-size:        0.85rem;
    font-weight:      700;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    color:            var(--to-text);
    background-color: transparent;
    cursor:           pointer;
    transition:       background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    white-space:      nowrap;
}

.bsb-track-order__submit:hover {
    background-color: var(--bsb-pink);
    border-color:     var(--bsb-pink);
    color:            var(--bsb-color-text);
}

.bsb-track-order__submit:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

.bsb-track-order__submit-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.bsb-track-order__submit:hover .bsb-track-order__submit-arrow {
    transform: translateX(4px);
}

/* Spinner — shown while loading */
.bsb-track-order__submit-spinner {
    display:       none;
    width:         14px;
    height:        14px;
    border:        2px solid rgba(13, 13, 13, 0.25);
    border-top-color: var(--to-text);
    border-radius: 50%;
    animation:     bsb-to-spin 0.7s linear infinite;
    flex-shrink:   0;
}

.bsb-track-order__submit.is-loading .bsb-track-order__submit-label,
.bsb-track-order__submit.is-loading .bsb-track-order__submit-arrow {
    display: none;
}

.bsb-track-order__submit.is-loading .bsb-track-order__submit-spinner {
    display: block;
}

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

/* ── Error message ── */
.bsb-track-order__error {
    margin-top:  1.5rem;
    font-family: var(--bsb-font-primary);
    font-size:   0.875rem;
    color:       #c0392b;
    padding:     0.6rem 0;
    border-bottom: 1px solid rgba(192, 57, 43, 0.25);
}

/* ── Result area ── */
.bsb-track-order__result {
    margin-top:  3rem;
    padding-top: 3rem;
    border-top:  1px solid var(--to-divider);
}

.bsb-track-order__greeting {
    font-family:   var(--bsb-font-primary);
    font-size:     1rem;
    color:         var(--to-muted);
    margin:        0 0 2rem;
    line-height:   1.6;
}

/* ── Status notice (cancelled / refunded / failed) ── */
.bsb-track-order__status-notice {
    font-family:   var(--bsb-font-primary);
    font-size:     0.9rem;
    line-height:   1.6;
    padding:       1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border:        1px solid currentColor;
}

.bsb-track-order__status-notice--cancelled,
.bsb-track-order__status-notice--trash {
    color:            #92400e;
    background-color: #fffbeb;
    border-color:     #fde68a;
}

.bsb-track-order__status-notice--refunded {
    color:            #1e40af;
    background-color: #eff6ff;
    border-color:     #bfdbfe;
}

.bsb-track-order__status-notice--failed {
    color:            #991b1b;
    background-color: #fef2f2;
    border-color:     #fecaca;
}

/* ── Timeline ── */
.bsb-track-order__timeline {
    list-style: none;
    padding:    0;
    margin:     0 0 2.5rem;
    position:   relative;
}

/* Vertical connector line */
.bsb-track-order__timeline::before {
    content:    '';
    position:   absolute;
    left:       9px;
    top:        14px;
    bottom:     14px;
    width:      1px;
    background: var(--to-pending);
}

.bsb-track-order__stage {
    position:    relative;
    display:     flex;
    align-items: flex-start;
    gap:         1.25rem;
    padding-bottom: 1.75rem;
}

.bsb-track-order__stage:last-child {
    padding-bottom: 0;
}

/* Dot */
.bsb-track-order__stage-dot {
    position:      relative;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    border:        1.5px solid var(--to-pending);
    background:    #fff;
    flex-shrink:   0;
    margin-top:    2px;
    z-index:       1;
    transition:    border-color 0.3s ease, background 0.3s ease;
}

.bsb-track-order__stage.is-done .bsb-track-order__stage-dot {
    border-color: var(--to-success);
    background:   var(--to-success);
    box-shadow:   inset 0 0 0 4px #fff;
}

.bsb-track-order__stage-body {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    padding-top:    2px;
}

.bsb-track-order__stage-label {
    font-family:  var(--bsb-font-primary);
    font-size:    0.95rem;
    font-weight:  600;
    color:        var(--to-text);
    line-height:  1.3;
}

.bsb-track-order__stage.is-pending .bsb-track-order__stage-label {
    color:       var(--to-muted);
    font-weight: 500;
}

.bsb-track-order__stage-date {
    font-family: var(--bsb-font-primary);
    font-size:   0.8rem;
    color:       var(--to-muted);
}

/* ── Tracking card(s) ── */
.bsb-track-order__tracking {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    padding:        1.5rem 0;
    border-top:     1px solid var(--to-divider);
}

.bsb-track-order__tracking-card {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    padding:        1.25rem;
    border:         1px solid var(--to-divider);
    border-radius:  8px;
}

/* Package label — only shown when multiple shipments */
.bsb-track-order__tracking-pkg {
    font-family:    var(--bsb-font-primary);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--to-muted);
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--to-divider);
}

.bsb-track-order__tracking-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             1rem;
    font-family:     var(--bsb-font-primary);
    font-size:       0.9rem;
}

.bsb-track-order__tracking-key {
    color:       var(--to-muted);
    flex-shrink: 0;
}

.bsb-track-order__tracking-val {
    font-weight: 600;
    text-align:  right;
}

/* Track shipment CTA — same pill outline style as submit */
.bsb-track-order__tracking-cta {
    display:          inline-flex;
    align-items:      center;
    gap:              0.6rem;
    margin-top:       0.5rem;
    padding:          0.8rem 1.75rem;
    border:           1.5px solid var(--to-text);
    border-radius:    50px;
    font-family:      var(--bsb-font-primary);
    font-size:        0.8rem;
    font-weight:      700;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    color:            var(--to-text);
    text-decoration:  none;
    background-color: transparent;
    transition:       background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    align-self:       flex-start;
}

.bsb-track-order__tracking-cta:hover {
    background-color: var(--bsb-pink);
    border-color:     var(--bsb-pink);
    color:            var(--bsb-color-text);
}

.bsb-track-order__tracking-cta svg {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.bsb-track-order__tracking-cta:hover svg {
    transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .bsb-track-order {
        padding-top:    5rem;
        padding-bottom: 5rem;
    }

    .bsb-track-order__fields {
        grid-template-columns: 1fr;
        gap:                   2rem;
    }
}