/* =====================================================
   NUMB STUDIO — ORDER TRACKING (track.php)
   ===================================================== */
.numb-track {
    min-height: 60vh;
    padding: 70px 16px 90px;
    background: #3c2405;
    font-family: "Times New Roman", Times, serif;
}

/* ---------- Look-up form (lace frame) ---------- */
.nt-lookup { max-width: 480px; margin: 0 auto; }
.nt-lace {
    padding: 20px;
    background: #2a1708 url("../img/bg-img/lace-bg.jpg") center / 420px auto repeat;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
}
.nt-lookup-inner {
    display: flex;
    flex-direction: column;
    padding: 34px 32px 30px;
    background: #3c2405;
    outline: 1px solid rgba(239, 233, 225, .35);
    outline-offset: -8px;
}
.nt-lookup-text { margin: 0 0 22px; text-align: center; font-size: 17px !important; line-height: 1.6; color: #d8cdc1 !important; }
.nt-lookup-inner label {
    margin: 0 0 6px;
    font: 700 12px "Times New Roman", Times, serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #cdbfb2;
}
.nt-lookup-inner input {
    height: 48px;
    margin-bottom: 18px;
    padding: 0 16px;
    border: 1px solid rgba(239, 233, 225, .4);
    background: #f6f1ea;
    color: #1a1208;
    font: 17px "Times New Roman", Times, serif;
}
.nt-lookup-inner input:focus { outline: 2px solid #efe9e1; outline-offset: 2px; }
.nt-error {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid rgba(242, 184, 168, .5);
    background: rgba(242, 184, 168, .1);
    font-size: 15px !important;
    color: #f6cfc5 !important;
}

/* ---------- Buttons ---------- */
.nt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 38px;
    border: 0;
    border-radius: 999px;
    background: #e9e3df;
    color: #111 !important;
    font: 700 17px "Times New Roman", Times, serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
    transition: transform 200ms, background 200ms, box-shadow 200ms;
}
.nt-btn svg { width: 18px; height: 18px; }
.nt-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.nt-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.nt-btn:focus-visible { outline: 3px solid #efe9e1; outline-offset: 3px; }
.nt-ghost {
    height: 38px;
    padding: 0 18px;
    border: 1px solid rgba(239, 233, 225, .5);
    border-radius: 999px;
    background: transparent;
    color: #efe6db;
    font: 700 14px "Times New Roman", Times, serif;
    letter-spacing: .6px;
    cursor: pointer;
}
.nt-ghost:hover { background: rgba(255, 255, 255, .08); }

/* ---------- Order view ---------- */
.nt-wrap { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.nt-card {
    padding: 26px 30px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(239, 233, 225, .22);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}
.nt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.nt-card-head h2 { margin: 0; font: 700 26px "Times New Roman", Times, serif; color: #f3ebe1; }
.nt-trackno { margin: 0; font-size: 18px !important; color: #d8cdc1 !important; }
.nt-trackno strong { color: #fff; }
.nt-muted { color: #a99a8d !important; font-weight: 400; }

.nt-details {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 18px 0 4px;
    border-top: 1px solid rgba(239, 233, 225, .18);
}
.nt-details dt { margin-bottom: 6px; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #b9aa9b; }
.nt-details dd { margin: 0; font-size: 19px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.nt-status { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 15px; }
.nt-status.is-new { background: #f6e7c8; color: #6b4600; }
.nt-status.is-packed { background: #e7defa; color: #4b318f; }
.nt-status.is-shipped { background: #dbe9fb; color: #1a4f97; }
.nt-status.is-delivered { background: #dcefdc; color: #22622a; }

/* Progress steps */
.nt-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 26px;
    padding: 24px 10px 20px;
    list-style: none;
    border: 1px solid rgba(239, 233, 225, .18);
    background: rgba(0, 0, 0, .12);
}
.nt-steps::before,
.nt-steps::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 12.5%;
    height: 2px;
    background: rgba(239, 233, 225, .25);
    width: 75%;
}
.nt-steps::after { background: #efe6db; width: calc(75% * var(--progress, 0)); transition: width 800ms ease; }
.nt-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.nt-dot {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    border: 1.5px solid rgba(239, 233, 225, .5);
    border-radius: 50%;
    background: #3c2405;
    color: #cdbfb2;
    font: 700 14px "Times New Roman", Times, serif;
}
.nt-step strong { font-size: 16px; color: #b9aa9b; }
.nt-step small { font-size: 13px; color: #9a8b7d; }
.nt-step.is-done .nt-dot { background: #efe6db; border-color: #efe6db; color: #3c2405; }
.nt-step.is-done strong { color: #fff; }
.nt-step.is-done small { color: #d8cdc1; }
.nt-step.is-current .nt-dot { box-shadow: 0 0 0 6px rgba(239, 230, 219, .18); }

/* Courier row */
.nt-courier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: #2a1708 url("../img/bg-img/lace-bg.jpg") center / 420px auto repeat;
    border: 1px solid rgba(239, 233, 225, .25);
}
.nt-courier-info { display: flex; align-items: center; gap: 14px; }
.nt-courier-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(239, 233, 225, .5); color: #efe6db; flex: 0 0 auto; }
.nt-courier-icon svg { width: 24px; height: 24px; }
.nt-courier-name { margin: 0; font: 700 19px "Times New Roman", Times, serif !important; color: #fff !important; }
.nt-courier-no { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; font-size: 16px !important; color: #e6dbcf !important; letter-spacing: .5px; }
.nt-copy {
    padding: 2px 10px;
    border: 1px solid rgba(239, 233, 225, .5);
    border-radius: 999px;
    background: transparent;
    color: #efe6db;
    font: 700 12px "Times New Roman", Times, serif;
    cursor: pointer;
}
.nt-copy:hover { background: rgba(255, 255, 255, .1); }

/* Items */
.nt-items-head,
.nt-item { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px; align-items: center; gap: 14px; }
.nt-items-head {
    padding: 10px 14px;
    background: rgba(0, 0, 0, .18);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #b9aa9b;
}
.nt-items-head span:nth-child(n+2), .nt-qty, .nt-price { text-align: right; }
.nt-item { padding: 14px; border-bottom: 1px solid rgba(239, 233, 225, .14); }
.nt-item-product { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nt-item-product > span:last-child { min-width: 0; font: 700 19px/1.3 "Times New Roman", Times, serif !important; color: #fff; overflow-wrap: anywhere; text-transform: none !important; letter-spacing: 0 !important; }
.nt-item-product a { color: #fff; }
.nt-item-product a:hover { color: #efe6db; text-decoration: underline; }
.nt-item-product small { display: block; margin-top: 3px; font: 400 15px "Times New Roman", Times, serif; color: #b9aa9b; }
.nt-thumb { width: 64px; height: 80px; flex: 0 0 auto; overflow: hidden; background: #efe9e1; }
.nt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nt-qty { font-size: 17px; color: #d8cdc1; }
.nt-price { font-size: 18px; color: #fff; }

/* Totals */
.nt-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nt-sum { display: flex; flex-direction: column; gap: 10px; padding: 20px 26px; }
.nt-sum div { display: flex; justify-content: space-between; gap: 16px; font-size: 17px; color: #d8cdc1; }
.nt-sum strong { color: #fff; text-align: right; }
.nt-sum .nt-grand { padding-top: 10px; border-top: 1px solid rgba(239, 233, 225, .2); font-size: 21px; }
.nt-sum .nt-grand span { color: #fff; font-weight: 700; }

.nt-help { margin: 6px 0 0; text-align: center; font-size: 17px !important; color: #d8cdc1 !important; }
.nt-help a { color: #fff; text-decoration: underline; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 860px) {
    .nt-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nt-totals { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .numb-track { padding: 50px 12px 70px; }
    .nt-card { padding: 20px 16px; }
    .nt-lookup-inner { padding: 28px 20px 24px; }
    .nt-steps { padding: 20px 0 16px; }
    .nt-steps::before, .nt-steps::after { top: 35px; }
    .nt-step strong { font-size: 13px; }
    .nt-step small { font-size: 11px; }
    .nt-courier { flex-direction: column; align-items: stretch; }
    .nt-track-btn { width: 100%; }
    .nt-items-head, .nt-item { grid-template-columns: minmax(0, 1fr) 40px 90px; gap: 8px; padding-left: 8px; padding-right: 8px; }
    .nt-thumb { width: 48px; height: 60px; }
    .nt-item-product > span:last-child { font-size: 16px !important; }
}

/* ---------- Print the receipt ---------- */
@media print {
    .header_area, .footer_area, .right-side-cart-area, .cart-bg-overlay, .nt-ghost, .nt-track-btn, .nt-copy, .nt-help, #scrollUp { display: none !important; }
    body, .numb-track { background: #fff !important; margin: 0 !important; }
    .numb-track * { color: #111 !important; background: transparent !important; box-shadow: none !important; }
    .nt-card, .nt-steps, .nt-courier { border-color: #ccc !important; }
}

/* Item names: override the template's small link font */
.nt-item-product a,
.nt-item-product > span:last-child { font: 700 19px/1.3 "Times New Roman", Times, serif !important; }
.nt-track-btn { white-space: nowrap; }
@media (max-width: 575px) {
    .nt-item-product a,
    .nt-item-product > span:last-child { font-size: 16px !important; }
    .nt-track-btn { padding: 0 20px; font-size: 16px; }
}

/* 5 steps */
.nt-steps { grid-template-columns: repeat(5, 1fr); }
.nt-steps::before, .nt-steps::after { left: 10%; }
.nt-steps::before { width: 80%; }
.nt-steps::after { width: calc(80% * var(--progress, 0)); }
.nt-status.is-paid { background: #d6efec; color: #0b5d54; }
@media (max-width: 575px) {
    .nt-step strong { font-size: 11.5px; line-height: 1.2; }
    .nt-dot { width: 28px; height: 28px; }
}

/* =====================================================
   v4 — header: logo left · tagline centre · title right
   ===================================================== */
.nt-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 46px;
    padding: 0 0 26px;
    border-bottom: 1px solid rgba(239, 233, 225, .3);
}
.nt-head-logo { width: 170px; justify-self: start; filter: brightness(0) invert(.93) sepia(.15); }
.nt-head-tag { margin: 0; text-align: center; font: italic 19px/1.45 "Times New Roman", Times, serif !important; color: #d8cdc1 !important; }
.nt-head-title { justify-self: end; text-align: right; }
.nt-head-title .numb-wl-eyebrow { margin-bottom: 4px; }
.nt-head-title h1 { margin: 0; font: 700 clamp(30px, 4vw, 46px)/1.05 "Times New Roman", Times, serif; color: #f3ebe1; }

/* =====================================================
   v4 — light cards
   ===================================================== */
.numb-track .nt-card {
    background: #fbf8f3;
    border: 1px solid #e3d7c5;
    border-radius: 4px;
    color: #1a1208;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}
.numb-track .nt-card-head h2,
.numb-track .nt-details dd,
.numb-track .nt-trackno strong,
.numb-track .nt-item-product a,
.numb-track .nt-item-product > span:last-child,
.numb-track .nt-price,
.numb-track .nt-sum strong,
.numb-track .nt-sum .nt-grand span,
.numb-track .nt-step.is-done strong { color: #1a1208 !important; }
.numb-track .nt-trackno,
.numb-track .nt-qty,
.numb-track .nt-sum div,
.numb-track .nt-step.is-done small { color: #6b5a48 !important; }
.numb-track .nt-details { border-top-color: #e3d7c5; }
.numb-track .nt-details dt,
.numb-track .nt-items-head,
.numb-track .nt-item-product small,
.numb-track .nt-step strong,
.numb-track .nt-step small { color: #8a7a6a !important; }
.numb-track .nt-muted { color: #9a8b7d !important; }

.numb-track .nt-steps { background: #f3ece1; border-color: #e3d7c5; }
.numb-track .nt-steps::before { background: #d9ccb8; }
.numb-track .nt-steps::after { background: #3c2405; }
.numb-track .nt-dot { background: #fbf8f3; border-color: #bfae97; color: #8a7a6a; }
.numb-track .nt-step.is-done .nt-dot { background: #3c2405; border-color: #3c2405; color: #fff; }
.numb-track .nt-step.is-current .nt-dot { box-shadow: 0 0 0 6px rgba(60, 36, 5, .15); }

.numb-track .nt-items-head { background: #f3ece1; }
.numb-track .nt-item { border-bottom-color: #ece2d3; }
.numb-track .nt-item-product a:hover { color: #8a6328 !important; }
.numb-track .nt-thumb { position: relative; display: grid; place-items: center; background: #efe6da; color: #b9a58a; }
.numb-track .nt-thumb svg { width: 30px; height: 30px; }
.numb-track .nt-thumb img { position: absolute; inset: 0; z-index: 1; }
.numb-track .nt-sum .nt-grand { border-top-color: #e3d7c5; }

/* buttons on light cards */
.nt-head-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.numb-track .nt-card .nt-ghost {
    display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
    border: 1px solid #1a1208; border-radius: 0; color: #1a1208; background: transparent;
    text-decoration: none; font: 700 14px "Times New Roman", Times, serif; letter-spacing: .6px;
}
.numb-track .nt-card .nt-ghost:hover { background: #f1e9dc; color: #1a1208; }
.numb-track .nt-card .nt-ghost-dark { background: #3c2405; border-color: #3c2405; color: #fff; }
.numb-track .nt-card .nt-ghost-dark:hover { background: #1a1208; color: #fff; }

@media (max-width: 760px) {
    .nt-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
    .nt-head-logo, .nt-head-title { justify-self: center; text-align: center; }
    .nt-head-logo { width: 130px; }
    .nt-head-tag { order: 3; }
}