@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
.yap-wrap *{box-sizing:border-box;font-family:'Inter',sans-serif;}
:root{--yb:#1a4fa0;--ybl:#2460bc;--yr:#cc1f1f;--bg:#f2f5fb;--bd:#dde4f0;--tx:#1a1a2e;--mu:#6b7a99;--gn:#15803d;--gnb:#dcfce7;}

.yap-wrap{max-width:760px;margin:0 auto;padding:0 0 60px;}
.yap-page-title{text-align:center;padding:28px 0 20px;}
.yap-page-title h1{font-size:28px;font-weight:900;color:var(--tx);margin:0;letter-spacing:-.5px;}
.yap-blue{color:var(--yb);}
.yap-page-title p{font-size:13px;color:var(--mu);margin:6px 0 0;}

/* Card */
.yap-card{background:#fff;border-radius:10px;box-shadow:0 2px 16px rgba(26,79,160,.1);overflow:hidden;margin-bottom:16px;}
.yap-search-card{margin-bottom:20px;}

/* Tabs */
.yap-tabs{display:flex;border-bottom:2px solid var(--bd);}
.yap-tab{flex:1;padding:14px 10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;color:var(--mu);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.5px;margin-bottom:-2px;transition:color .2s;}
.yap-tab.active{color:var(--yb);border-bottom-color:var(--yb);}
.yap-tab-pane{display:none;padding:24px;}
.yap-tab-pane.active{display:block;}
.yap-label{display:block;font-size:13px;font-weight:700;color:var(--tx);margin-bottom:8px;}
.yap-hint{font-size:12px;color:var(--mu);margin:8px 0 0;}
.yap-input-wrap{position:relative;}
.yap-input{width:100%;border:1.5px solid var(--bd);border-radius:6px;padding:13px 42px 13px 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--tx);outline:none;transition:border-color .2s;}
.yap-input:focus{border-color:var(--yb);}
.yap-input::placeholder{color:#b0b8cc;}
.yap-input-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.45;}
.yap-btn{width:100%;margin-top:20px;background:var(--yb);border:none;border-radius:6px;padding:14px;font-size:14px;font-weight:800;color:#fff;cursor:pointer;letter-spacing:.8px;text-transform:uppercase;font-family:'Inter',sans-serif;transition:background .2s;}
.yap-btn:hover{background:var(--ybl);}

/* States */
.yap-state-box{text-align:center;padding:36px;color:var(--mu);}
.yap-spinner{width:40px;height:40px;border:3px solid var(--bd);border-top-color:var(--yb);border-radius:50%;animation:yap-spin .8s linear infinite;margin:0 auto 12px;}
@keyframes yap-spin{to{transform:rotate(360deg)}}
.yap-error-box{background:#fff;border-radius:10px;box-shadow:0 2px 16px rgba(26,79,160,.1);padding:24px;display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.yap-err-icon{font-size:36px;}
.yap-error-box strong{font-size:15px;font-weight:800;}
.yap-error-box p{font-size:13px;color:var(--mu);margin:4px 0 0;}

/* Summary */
.yap-summary{padding:20px;}
.yap-sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-bottom:1px solid var(--bd);padding-bottom:16px;margin-bottom:16px;}
.yap-sl{font-size:10px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.yap-sv{font-size:15px;font-weight:800;color:var(--tx);}
.yap-pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:700;margin-bottom:10px;}
.yap-pill.pending{background:#fff7ed;color:#c2410c;}
.yap-pill.processing{background:#ede9fe;color:#6d28d9;}
.yap-pill.transit{background:#dbeafe;color:#1d4ed8;}
.yap-pill.out{background:#f0fdf4;color:#166534;}
.yap-pill.delivered{background:var(--gnb);color:var(--gn);}
.yap-pill.cancelled{background:#fef2f2;color:#b91c1c;}
.yap-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.yap-sdesc{font-size:13px;color:var(--tx);line-height:1.6;}
.yap-sdesc strong{color:var(--yb);}

/* Stepper */
.yap-stepper{display:flex;align-items:flex-start;justify-content:space-between;margin-top:22px;position:relative;}
.yap-stepper::before{content:'';position:absolute;top:19px;left:5%;right:5%;height:2px;background:var(--bd);z-index:0;}
.yap-step{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;position:relative;z-index:1;}
.yap-sc{width:40px;height:40px;border-radius:50%;background:#e8eef8;border:3px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;}
.yap-step.done .yap-sc{background:var(--yb);border-color:var(--yb);}
.yap-step.active .yap-sc{background:var(--yb);border-color:var(--yb);animation:yap-pulse 1.5s infinite;}
@keyframes yap-pulse{0%,100%{box-shadow:0 0 0 4px rgba(26,79,160,.2)}50%{box-shadow:0 0 0 8px rgba(26,79,160,.08)}}
.yap-ck{position:absolute;bottom:-3px;right:-3px;width:15px;height:15px;background:#fff;border-radius:50%;border:2px solid var(--yb);display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--yb);}
.yap-sl2{font-size:10px;font-weight:700;color:var(--mu);text-align:center;line-height:1.3;}
.yap-step.done .yap-sl2,.yap-step.active .yap-sl2{color:var(--tx);}
.yap-sd{font-size:9px;color:var(--mu);text-align:center;}

/* Section */
.yap-section{padding:20px;}
.yap-sec-title{font-size:12px;font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--bd);display:flex;align-items:center;gap:8px;}
.yap-sec-title::before{content:'';width:3px;height:16px;background:var(--yb);border-radius:2px;display:block;}

/* Shipment */
.yap-ship-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.yap-cbadge{background:var(--bg);border:1.5px solid var(--bd);border-radius:6px;padding:8px 12px;font-size:13px;font-weight:900;color:var(--yb);}
.yap-ship-meta{display:flex;gap:24px;flex:1;}
.yap-shl{font-size:10px;color:var(--mu);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.yap-shv{font-size:13px;font-weight:700;color:var(--tx);margin-top:3px;}
.yap-ctrack-btn{margin-left:auto;border:1.5px solid var(--yb);background:#fff;color:var(--yb);border-radius:6px;padding:9px 14px;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.4px;transition:background .2s,color .2s;}
.yap-ctrack-btn:hover{background:var(--yb);color:#fff;}

/* Info */
.yap-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.yap-ibl{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mu);font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;}
.yap-ibv{font-size:13px;color:var(--tx);line-height:1.7;}
.yap-iblink{color:var(--yb);font-size:12px;font-weight:700;}

/* Items */
.yap-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--bd);}
.yap-item:last-child{border-bottom:none;}
.yap-iico{width:42px;height:42px;background:var(--bg);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.yap-iname{font-size:13px;font-weight:700;}
.yap-isub{font-size:11px;color:var(--mu);margin-top:1px;}
.yap-iprice{font-size:14px;font-weight:800;color:var(--yb);margin-left:auto;white-space:nowrap;}

/* Totals */
.yap-totals{background:var(--bg);border-radius:8px;padding:14px 16px;margin-top:12px;}
.yap-trow{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--mu);}
.yap-trow span:last-child{font-weight:600;color:var(--tx);}
.yap-trow.grand{border-top:1.5px dashed var(--bd);margin-top:8px;padding-top:10px;font-weight:900;font-size:15px;}
.yap-trow.grand span{color:var(--yb);}
.yap-dl-btn{width:100%;margin-top:16px;background:var(--yb);color:#fff;border:none;border-radius:8px;padding:14px;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.5px;text-transform:uppercase;font-family:'Inter',sans-serif;transition:background .2s;}
.yap-dl-btn:hover{background:var(--ybl);}

/* Help */
.yap-help{background:var(--bg);border:1.5px solid var(--bd);border-radius:10px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:14px;}
.yap-help-ico{font-size:28px;flex-shrink:0;}
.yap-help-txt strong{font-size:13px;font-weight:800;}
.yap-help-txt p{font-size:12px;color:var(--mu);margin:2px 0 0;}
.yap-help-btn{margin-left:auto;border:1.5px solid var(--yb);background:#fff;color:var(--yb);border-radius:6px;padding:9px 14px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:'Inter',sans-serif;text-transform:uppercase;}

/* Trust */
.yap-trust{background:#fff;border-top:2px solid var(--bd);border-radius:10px;padding:18px;}
.yap-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.yap-ti{display:flex;align-items:center;gap:10px;}
.yap-tico{width:38px;height:38px;background:var(--bg);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;border:1.5px solid var(--bd);flex-shrink:0;}
.yap-tlbl{font-size:11px;font-weight:800;color:var(--tx);line-height:1.3;}
.yap-tsub{font-size:10px;color:var(--mu);}

/* Modal */
.yap-modal-overlay{position:fixed;inset:0;background:rgba(10,20,50,.6);z-index:99999;display:flex;align-items:flex-end;justify-content:center;}
.yap-modal{background:#fff;width:100%;max-width:500px;border-radius:16px 16px 0 0;padding:20px 20px 40px;animation:yap-up .3s ease;max-height:92vh;overflow-y:auto;}
@keyframes yap-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.yap-modal-handle{width:40px;height:4px;background:#dde;border-radius:2px;margin:0 auto 18px;}
.yap-modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.yap-modal-brand{font-size:15px;font-weight:900;color:var(--yb);}
.yap-modal-brand em{color:var(--yr);font-style:normal;}
.yap-modal-sub{font-size:10px;color:var(--mu);margin-top:2px;letter-spacing:.5px;}
.yap-modal-x{background:none;border:none;font-size:20px;cursor:pointer;color:var(--mu);}
.yap-hr{border:none;border-top:1px dashed var(--bd);margin:12px 0;}
.yap-mrow{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;}
.yap-mrow .l{color:var(--mu);}
.yap-mrow .v{font-weight:700;color:var(--tx);}
.yap-modal-grand{display:flex;justify-content:space-between;background:var(--yb);color:#fff;border-radius:8px;padding:12px 16px;font-weight:900;font-size:15px;margin-top:12px;}
.yap-modal-btns{display:flex;gap:10px;margin-top:18px;}
.yap-btn-dl{flex:1;padding:14px;background:var(--yb);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s;}
.yap-btn-dl:hover{background:var(--ybl);}
.yap-btn-cl{padding:14px 18px;background:var(--bg);color:var(--mu);border:1.5px solid var(--bd);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}

@media(max-width:520px){
  .yap-info-grid,.yap-sum-grid{grid-template-columns:1fr 1fr;}
  .yap-trust-grid{grid-template-columns:repeat(2,1fr);}
  .yap-page-title h1{font-size:22px;}
  .yap-ship-row{flex-direction:column;align-items:flex-start;}
  .yap-ctrack-btn{margin-left:0;width:100%;justify-content:center;}
}