
/* APPAREL system additions — uses existing black/orange visual language. */
.tracking-page .page-hero { background:#0d1014; color:#fff; }
.tracking-page .page-hero p { color:#9aa1aa; max-width:620px; }
.tracking-section { padding-top:56px; padding-bottom:90px; }
.tracking-wrap { display:grid; grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr); gap:22px; align-items:start; }
.tracking-panel, .tracking-result { background:#fff; border:1px solid #e8e5df; border-radius:18px; box-shadow:0 18px 50px rgba(12,15,20,.06); }
.tracking-panel { padding:22px; }
.tracking-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; border-radius:12px; background:#f2f1ee; margin-bottom:22px; }
.tracking-tab { min-height:40px; border:0; border-radius:9px; background:transparent; color:#70757c; font:700 11px "Manrope",sans-serif; cursor:pointer; }
.tracking-tab.is-active { color:#fff; background:#15181d; box-shadow:0 6px 18px rgba(12,15,20,.14); }
.tracking-form { display:grid; gap:15px; }
.tracking-form label { display:grid; gap:7px; color:#31353b; font-size:10px; font-weight:800; }
.tracking-form input { width:100%; min-height:46px; padding:0 13px; border:1px solid #dedbd5; border-radius:10px; outline:0; background:#fff; color:#17191d; font:500 12px "Manrope",sans-serif; transition:border-color .2s,box-shadow .2s; }
.tracking-form input:focus { border-color:#ff5a26; box-shadow:0 0 0 4px rgba(255,90,38,.09); }
.tracking-alert { margin:0 0 16px; padding:12px 13px; border-radius:10px; background:#fff2ed; color:#b6421c; font-size:10px; line-height:1.6; }
.tracking-note { margin-top:18px; padding-top:18px; border-top:1px solid #eeeae5; display:grid; gap:4px; color:#858b92; font-size:9px; line-height:1.6; }
.tracking-note strong { color:#343940; font-size:10px; }
.tracking-result { padding:26px; }
.tracking-result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding-bottom:22px; border-bottom:1px solid #eeeae5; }
.tracking-result-head h2 { margin:6px 0 0; font:700 clamp(22px,3vw,32px)/1.1 "Space Grotesk",sans-serif; color:#111419; letter-spacing:-.04em; }
.tracking-status { flex:none; padding:8px 10px; border-radius:999px; background:#f3f4f2; color:#5b625d; font-size:8px; font-weight:850; letter-spacing:.08em; }
.tracking-status.status-selesai { color:#176d43; background:#eaf8f0; }
.tracking-status.status-dikirim, .tracking-status.status-dihubungi { color:#8a5600; background:#fff5d9; }
.tracking-status.status-dibatalkan { color:#a52c2c; background:#fff0f0; }
.tracking-timeline { position:relative; padding:24px 0 12px; }
.tracking-timeline::before { content:""; position:absolute; left:15px; top:36px; bottom:30px; width:1px; background:#dedbd5; }
.tracking-step { position:relative; display:grid; grid-template-columns:31px 1fr; gap:12px; padding:0 0 22px; }
.tracking-step:last-child { padding-bottom:0; }
.tracking-dot { z-index:1; width:31px; height:31px; display:grid; place-items:center; border:1px solid #d8d5d0; border-radius:50%; background:#fff; color:#9ba0a6; font-size:10px; font-weight:850; }
.tracking-step.is-done .tracking-dot { border-color:#ff5a26; background:#ff5a26; color:#fff; }
.tracking-step.is-current strong { color:#ff5a26; }
.tracking-step strong { display:block; margin-top:5px; color:#353a41; font-size:11px; }
.tracking-step small { display:block; margin-top:4px; color:#92979e; font-size:9px; line-height:1.5; }
.tracking-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px 0; border-top:1px solid #eeeae5; border-bottom:1px solid #eeeae5; }
.tracking-summary div { display:grid; gap:5px; }
.tracking-summary span { color:#9499a0; font-size:8px; }
.tracking-summary strong { color:#20242a; font-size:11px; overflow-wrap:anywhere; }
.tracking-items { padding-top:18px; }
.tracking-items h3 { margin:0 0 10px; font:700 12px "Space Grotesk",sans-serif; color:#1a1d22; }
.tracking-items > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; color:#646a72; font-size:9px; border-bottom:1px solid #f0eeea; }
@media(max-width:860px){
  .tracking-wrap{grid-template-columns:1fr}
}
@media(max-width:600px){
  .tracking-section{padding-top:34px;padding-bottom:65px}
  .tracking-panel,.tracking-result{border-radius:15px;padding:18px}
  .tracking-result-head{flex-direction:column}
  .tracking-summary{grid-template-columns:1fr 1fr}
  .tracking-summary div:last-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .tracking-form input{transition:none}
}

.custom-success { margin-bottom:24px; padding:24px; border:1px solid #e8e5df; border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(12,15,20,.06); }
.custom-success .success-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:14px; border-radius:50%; background:#eaf8f0; color:#176d43; font-weight:900; }
.custom-success h2 { margin:7px 0 8px; color:#15181d; font:700 clamp(22px,3vw,32px)/1.1 "Space Grotesk",sans-serif; letter-spacing:-.04em; }
.custom-success h2 strong { color:#ff5a26; }
.custom-success p { max-width:650px; color:#777d85; font-size:10px; line-height:1.7; }
.custom-success-actions { display:flex; align-items:center; gap:18px; margin-top:18px; flex-wrap:wrap; }
@media(max-width:600px){ .custom-success{padding:18px;border-radius:15px}.custom-success-actions{align-items:flex-start;flex-direction:column} }

.payment-proof-card { margin:22px 0; padding:18px; border:1px solid #e8e5df; border-radius:14px; background:#faf9f7; }
.payment-proof-card h2 { margin:6px 0; color:#171a1f; font:700 20px "Space Grotesk",sans-serif; }
.payment-proof-card p { margin:0 0 13px; color:#777d85; font-size:10px; line-height:1.7; }
.payment-proof-card form { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.payment-proof-card input[type=file] { max-width:100%; padding:9px; border:1px solid #ddd9d2; border-radius:9px; background:#fff; font-size:9px; }

/* APPAREL premium checkout + payment UI */
.checkout-hero p{max-width:650px}.checkout-steps{display:flex;align-items:center;gap:10px;margin-top:25px;color:#777d86;font-size:9px;font-weight:800;letter-spacing:.04em}.checkout-steps i{width:28px;height:1px;background:#343842}.checkout-steps span{padding:7px 10px;border:1px solid #343842;border-radius:999px}.checkout-steps .active{background:var(--orange);border-color:var(--orange);color:#fff}.checkout-steps .done{color:#fff;border-color:#4b5058}.checkout-pro{grid-template-columns:minmax(0,1fr) 390px;gap:20px}.checkout-form-card{padding:30px}.checkout-card-head,.checkout-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.checkout-card-head h2,.checkout-section-title h2{margin:5px 0 0;font-size:21px}.secure-badge,.payment-secure{padding:7px 9px;border-radius:999px;background:#edf8f2;color:#167347;font-size:8px;font-weight:900}.checkout-section-title{margin-top:35px;padding-top:28px;border-top:1px solid var(--line)}.payment-options-pro{gap:9px}.payment-option-card{position:relative;display:grid!important;grid-template-columns:auto 42px 1fr auto;align-items:center!important;gap:12px!important;padding:16px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:#fff;transition:.2s}.payment-option-card:has(input:checked){border-color:rgba(242,90,36,.55)!important;background:#fff8f4;box-shadow:0 0 0 3px rgba(242,90,36,.07)}.payment-option-card input{width:auto!important;margin:0}.payment-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-size:12px;font-weight:900}.payment-icon.manual{background:#eaf8f0;color:#167347}.payment-icon.gateway{background:#fff0e8;color:#dc4e1d}.payment-option-copy{display:flex;flex-direction:column;gap:4px}.payment-option-copy strong{font-size:12px;color:var(--ink)}.payment-option-copy small{font-size:9px;line-height:1.55;color:var(--muted);font-weight:500}.payment-option-copy em{font-style:normal;color:var(--orange);font-size:8px;font-weight:800}.payment-check{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#eceeed;color:#9aa09c;font-size:10px}.payment-option-card:has(input:checked) .payment-check{background:var(--orange);color:#fff}.payment-disabled{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed #d7d5d0;border-radius:12px;background:#faf9f7}.payment-disabled strong{display:block;font-size:11px}.payment-disabled small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.5}.checkout-assurance{display:flex;gap:10px;margin:18px 0;padding:13px 14px;border:1px solid #e3e8e5;border-radius:10px;background:#f5faf7}.checkout-assurance>span{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#1b9a5b;color:#fff;font-size:10px;font-weight:900}.checkout-assurance p{margin:0;color:#68706b;font-size:9px;line-height:1.6}.checkout-assurance strong{color:#26302b}.checkout-assurance a{color:var(--orange);font-weight:800}.checkout-submit{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:50px}.checkout-summary-pro{position:sticky;top:95px;padding:24px}.summary-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.summary-head h2{margin:5px 0 0}.summary-head>a{color:var(--orange);font-size:10px;font-weight:800}.summary-products{display:flex;flex-direction:column;gap:12px;padding-bottom:17px;border-bottom:1px solid var(--line)}.summary-product{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px}.summary-product-image{width:52px;height:52px;overflow:hidden;border-radius:8px;background:#f1f0ed}.summary-product-image img{width:100%;height:100%;object-fit:cover}.summary-product>div:nth-child(2){min-width:0}.summary-product strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.summary-product small{display:block;margin-top:4px;color:var(--muted);font-size:8px;line-height:1.4}.summary-product>b{font-size:9px;white-space:nowrap}.summary-lines{padding:12px 0;border-bottom:1px solid var(--line)}.summary-lines>div{display:flex;justify-content:space-between;gap:12px;margin:8px 0;color:var(--muted);font-size:10px}.summary-total{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;padding:16px 0}.summary-total span{font-size:11px;color:var(--muted)}.summary-total strong{font-size:20px;letter-spacing:-.03em;color:var(--orange)}.summary-trust{display:flex;align-items:center;gap:10px;padding:12px;border-radius:9px;background:#f7f7f5}.summary-trust>span{font-size:15px}.summary-trust strong{display:block;font-size:9px}.summary-trust small{display:block;margin-top:3px;color:var(--muted);font-size:8px;line-height:1.4}
.success-card-pro{position:relative;overflow:hidden;max-width:780px;padding:54px 50px}.success-orbit{width:86px;height:86px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;background:radial-gradient(circle,#fff 42%,#edf8f2 43%,#edf8f2 67%,transparent 68%);box-shadow:0 0 0 1px #dceee4}.success-card-pro h1{font-size:clamp(34px,5vw,50px)}.invoice-box-pro{max-width:560px;grid-template-columns:1.2fr 1fr 1fr}.invoice-box-pro>div{background:#f7f7f5;border:1px solid #eeece7}.payment-status-text.paid{color:#168050}.payment-status-text.pending{color:#a06b00}.payment-status-text.failed{color:#a13b43}.success-payment-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;max-width:620px;margin:20px auto;padding:13px;text-align:left;border:1px solid #eadfd8;border-radius:12px;background:#fff9f6}.success-payment-card strong{display:block;font-size:11px}.success-payment-card small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.4}.success-payment-card .button{margin:0;white-space:nowrap}.success-links{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}.success-links .text-link{margin-top:0}.payment-proof-pro{max-width:780px;margin:16px auto 0;padding:25px;text-align:left;border:1px solid var(--line);border-radius:16px;background:#fff}.payment-proof-pro h2{margin:6px 0}.payment-proof-pro p{color:var(--muted);font-size:10px;line-height:1.6}.payment-proof-pro form{display:flex;align-items:center;gap:10px;margin-top:15px}.proof-input{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px;border:1px dashed #cfcac2;border-radius:9px;background:#faf9f6}.proof-input input{border:0;background:transparent;font-size:10px}.proof-input span{color:var(--muted);font-size:8px}
@media(max-width:1000px){.checkout-pro{grid-template-columns:1fr}.checkout-summary-pro{position:static;order:-1}.invoice-box-pro{grid-template-columns:1fr 1fr}.success-payment-card{grid-template-columns:auto 1fr}.success-payment-card .button{grid-column:1/-1;width:100%}}
@media(max-width:620px){.checkout-steps{gap:5px;font-size:7px}.checkout-steps i{width:13px}.checkout-steps span{padding:6px 7px}.checkout-form-card{padding:21px}.checkout-card-head,.checkout-section-title{align-items:flex-start;flex-direction:column}.payment-option-card{grid-template-columns:auto 38px 1fr auto!important;padding:13px!important}.payment-icon{width:38px;height:38px}.payment-option-copy strong{font-size:11px}.payment-option-copy small{font-size:8px}.checkout-summary-pro{padding:18px}.invoice-box-pro{grid-template-columns:1fr}.success-card-pro{padding:38px 20px}.payment-proof-pro form{align-items:stretch;flex-direction:column}.payment-proof-pro .button{width:100%}}
