/* ==========================================================================
   SELORMART — Track Order & Contact Us page styles
   ========================================================================== */

.sp-hero{text-align:center;max-width:620px;margin:0 auto 36px;padding-top:8px;}
.sp-hero .ic{
  width:64px;height:64px;border-radius:50%;background:rgba(var(--accent-rgb),.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px;
}
.sp-hero h1{font-size:clamp(24px,3vw,32px);margin-bottom:10px;}
.sp-hero p{color:var(--gray-500);font-size:14.5px;line-height:1.6;}

/* ---- Track Order form card ---- */
.to-form-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:30px;
  max-width:680px;margin:0 auto 40px;box-shadow:var(--shadow-1);
}
.to-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px;}
.to-form-card .btn{width:100%;padding:14px;margin-top:14px;}
.to-hint{text-align:center;font-size:12px;color:var(--gray-500);margin-top:14px;}
.to-hint strong{color:var(--accent);}

/* ---- Track result ---- */
.to-result{max-width:900px;margin:0 auto;display:none;}
.to-result.show{display:block;}
.to-result-head{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:26px;
}
.to-result-head h3{font-size:17px;margin-bottom:4px;}
.to-result-head .meta{font-size:12.8px;color:var(--gray-500);}
.to-status-badge{background:rgba(30,111,227,.1);color:#1e6fe3;font-weight:700;font-size:12.5px;padding:7px 16px;border-radius:100px;}

/* ---- Timeline ---- */
.to-timeline{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:32px 26px;margin-bottom:26px;
  display:flex;justify-content:space-between;position:relative;
}
.to-timeline-track{position:absolute;top:46px;left:60px;right:60px;height:3px;background:var(--border);z-index:0;}
.to-timeline-track i{display:block;height:100%;background:var(--green);border-radius:3px;}
.to-tl-step{flex:1;text-align:center;position:relative;z-index:1;}
.to-tl-step .dot{
  width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);color:var(--gray-300);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin:0 auto 12px;transition:.3s;
}
.to-tl-step.done .dot{background:var(--green);border-color:var(--green);color:#fff;}
.to-tl-step.current .dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(var(--accent-rgb),.15);}
.to-tl-step h5{font-size:12.8px;font-weight:700;margin-bottom:4px;}
.to-tl-step.done h5, .to-tl-step.current h5{color:var(--ink);}
.to-tl-step:not(.done):not(.current) h5{color:var(--gray-500);}
.to-tl-step span{font-size:11px;color:var(--gray-500);}

/* ---- Order items + address ---- */
.to-grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}
.to-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:22px;}
.to-panel h4{font-size:15px;margin-bottom:16px;}
.to-item-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.to-item-row:last-child{border-bottom:none;padding-bottom:0;}
.to-item-row img{width:52px;height:52px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px;flex-shrink:0;}
.to-item-row .info{flex:1;}
.to-item-row .info h6{font-size:13px;font-weight:600;margin-bottom:3px;}
.to-item-row .info span{font-size:12px;color:var(--gray-500);}
.to-item-row .price{font-size:13.5px;font-weight:700;}
.to-total-row{display:flex;justify-content:space-between;font-size:15px;font-weight:800;padding-top:14px;margin-top:6px;border-top:1.5px solid var(--border);}
.to-addr-row{display:flex;gap:10px;margin-bottom:14px;font-size:13.3px;color:var(--ink-soft);}
.to-addr-row i{color:var(--accent);margin-top:2px;flex-shrink:0;width:16px;}

/* ---- Not found state ---- */
.to-not-found{text-align:center;padding:40px 20px;max-width:480px;margin:0 auto;display:none;}
.to-not-found.show{display:block;}
.to-not-found i{font-size:44px;color:var(--gray-300);margin-bottom:16px;display:block;}
.to-not-found h4{font-size:16px;margin-bottom:8px;}
.to-not-found p{font-size:13.5px;color:var(--gray-500);margin-bottom:20px;}

/* ---- Contact info cards ---- */
.contact-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px;}
.contact-info-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:24px 18px;text-align:center;
  transition:var(--transition);
}
.contact-info-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);}
.contact-info-card .ic{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;margin:0 auto 14px;
}
.contact-info-card h4{font-size:14.5px;margin-bottom:6px;}
.contact-info-card p{font-size:13px;color:var(--gray-500);}

/* ---- Contact layout ---- */
.contact-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start;}
.contact-form-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:32px;}
.contact-form-panel h3{font-size:19px;margin-bottom:6px;}
.contact-form-panel .sub{font-size:13.5px;color:var(--gray-500);margin-bottom:24px;}

.contact-side-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:28px;}
.contact-side-panel h4{font-size:15.5px;margin-bottom:16px;}
.contact-hours-row{display:flex;justify-content:space-between;font-size:13.3px;padding:10px 0;border-bottom:1px dashed var(--border);}
.contact-hours-row:last-child{border-bottom:none;}
.contact-hours-row span:first-child{color:var(--gray-500);}
.contact-hours-row span:last-child{font-weight:700;}
.contact-map-placeholder{
  height:160px;border-radius:var(--radius-m);background:var(--surface-2);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--gray-500);font-size:12.5px;
  margin-bottom:20px;
}
.contact-map-placeholder i{font-size:26px;color:var(--accent);}

.contact-success{display:none;text-align:center;padding:20px 0;}
.contact-success.show{display:block;}
.contact-success .ic{width:70px;height:70px;border-radius:50%;background:rgba(27,156,90,.12);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .to-grid-2{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr;}
  .contact-info-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .to-timeline{flex-direction:column;gap:26px;align-items:flex-start;padding:26px;}
  .to-timeline-track{display:none;}
  .to-tl-step{display:flex;align-items:center;gap:14px;text-align:left;width:100%;}
  .to-tl-step .dot{margin:0;flex-shrink:0;}
  .to-form-row{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .contact-info-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .to-result-head{flex-direction:column;align-items:flex-start;}
}