/* =========================================================
   ROOMSTYLE — page-track-order.css
   Adapté du prototype client (hero animé, carte de recherche,
   timeline de livraison, récap commande). Classes préfixées "trk-"
   pour ne pas entrer en collision avec page-static.css (FAQ/Contact/
   pages légales), qui garde son propre .page-hero générique.
   ========================================================= */

:root{
  --trk-radius:12px;
  --trk-shadow:0 4px 28px rgba(0,0,0,0.07);
  --trk-green:#22aa55;
  --trk-ease:cubic-bezier(0.22,1,0.36,1);
}

/* ── HERO ── */
.trk-hero{background:var(--black);padding:72px 40px 64px;text-align:center;position:relative;overflow:hidden;}
.trk-hero-lines{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.06;}
.trk-hero-line{position:absolute;height:1px;background:#fff;animation:trkScanLine 6s linear infinite;}
@keyframes trkScanLine{from{transform:translateX(-100%);}to{transform:translateX(100vw);}}
.trk-hero-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:50%;margin-bottom:24px;font-size:28px;animation:trkFloat 4s ease-in-out infinite;}
@keyframes trkFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.trk-hero-label{font-size:11px;letter-spacing:4px;color:#555;margin-bottom:10px;text-transform:uppercase;}
.trk-hero-title{font-family:'Playfair Display',serif;font-size:52px;font-weight:700;color:#fff;margin-bottom:12px;}
.trk-hero-sub{font-size:15px;color:#666;line-height:1.7;max-width:440px;margin:0 auto;}

/* ── TRACKING FORM ── */
.trk-form-wrap{padding:64px 40px;display:flex;justify-content:center;background:var(--gray);}
.trk-card{background:#fff;border:0.5px solid var(--border);border-radius:20px;padding:44px 48px;width:100%;max-width:520px;box-shadow:var(--trk-shadow);animation:trkCardIn .5s var(--trk-ease);}
@keyframes trkCardIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.trk-card-label{font-size:11px;letter-spacing:3px;color:var(--mid);margin-bottom:8px;text-transform:uppercase;}
.trk-card-title{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;margin-bottom:6px;}
.trk-card-sub{font-size:13px;color:var(--mid);margin-bottom:32px;line-height:1.6;}
.trk-field-group{margin-bottom:18px;}
.trk-field-label{font-size:12px;font-weight:500;color:var(--black);margin-bottom:8px;letter-spacing:.3px;display:block;}
.trk-field-input{width:100%;padding:14px 18px;background:var(--gray);border:0.5px solid var(--border);border-radius:10px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--black);outline:none;transition:all .25s;}
.trk-field-input:focus{border-color:var(--black);background:#fff;box-shadow:0 0 0 3px rgba(10,10,10,0.05);}
.trk-field-input::placeholder{color:#ccc;}
.trk-field-hint{font-size:11px;color:#bbb;margin-top:6px;}
.trk-btn{width:100%;background:var(--black);color:#fff;border:none;padding:16px 28px;border-radius:10px;font-size:14px;font-weight:500;letter-spacing:.5px;margin-top:8px;transition:all .22s;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-family:'DM Sans',sans-serif;}
.trk-btn:hover{background:#222;transform:translateY(-1px);}
.trk-btn:disabled{opacity:.7;cursor:default;transform:none;}
.trk-btn svg{transition:transform .2s;}
.trk-btn:hover svg{transform:translateX(4px);}

/* ── ERROR STATE ── */
.trk-error-wrap{display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;animation:trkFadeUp .4s var(--trk-ease);}
.trk-error-wrap.show{display:flex;}
.trk-error-illustration{width:110px;height:110px;background:var(--gray);border-radius:50%;border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:24px;}
.trk-error-title{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;margin-bottom:10px;}
.trk-error-sub{font-size:14px;color:var(--mid);line-height:1.75;max-width:320px;margin-bottom:28px;}
.trk-btn-try-again{background:var(--black);color:#fff;padding:14px 36px;border:none;border-radius:8px;font-size:13px;font-weight:500;letter-spacing:.5px;transition:all .2s;cursor:pointer;font-family:'DM Sans',sans-serif;}
.trk-btn-try-again:hover{background:#333;transform:translateY(-2px);}

@keyframes trkFadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* ── RESULTS ── */
.trk-results-wrap{display:none;padding:48px 40px 80px;animation:trkFadeUp .45s var(--trk-ease);}
.trk-results-wrap.show{display:block;}

.trk-status-bar{background:var(--black);border-radius:16px;padding:24px 32px;margin-bottom:32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.trk-status-left{display:flex;flex-direction:column;gap:4px;}
.trk-status-order-num{font-size:12px;color:#555;letter-spacing:1px;}
.trk-status-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#fff;}
.trk-status-date{font-size:12px;color:#555;}
.trk-status-badge{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:24px;}
.trk-status-badge.processing{background:rgba(255,165,0,.1);border:0.5px solid rgba(255,165,0,.25);}
.trk-status-badge.delivered{background:rgba(34,170,85,.2);border:0.5px solid rgba(34,170,85,.4);}
.trk-status-badge.cancelled{background:rgba(220,60,60,.12);border:0.5px solid rgba(220,60,60,.3);}
.trk-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.trk-status-dot.green{background:var(--trk-green);animation:trkPulseDot 2s infinite;}
.trk-status-dot.orange{background:#f5a623;animation:trkPulseDot 2s infinite;}
.trk-status-dot.red{background:#dc3c3c;}
@keyframes trkPulseDot{0%,100%{box-shadow:0 0 0 0 rgba(34,170,85,0);}50%{box-shadow:0 0 0 6px rgba(34,170,85,0);}}
.trk-status-badge-label{font-size:12px;font-weight:500;}
.trk-status-badge.processing .trk-status-badge-label{color:#f5a623;}
.trk-status-badge.delivered .trk-status-badge-label{color:var(--trk-green);}
.trk-status-badge.cancelled .trk-status-badge-label{color:#dc3c3c;}

.trk-results-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;}

.trk-result-card{background:#fff;border:0.5px solid var(--border);border-radius:var(--trk-radius);overflow:hidden;margin-bottom:20px;box-shadow:var(--trk-shadow);}
.trk-result-card-header{padding:16px 22px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;gap:10px;}
.trk-result-card-icon{font-size:16px;}
.trk-result-card-title{font-size:13px;font-weight:500;letter-spacing:.5px;color:var(--black);}
.trk-result-card-body{padding:22px;}

/* Timeline */
.trk-timeline{display:flex;flex-direction:column;gap:0;}
.trk-tl-step{display:flex;align-items:flex-start;gap:16px;padding-bottom:28px;position:relative;}
.trk-tl-step:last-child{padding-bottom:0;}
.trk-tl-step:last-child .trk-tl-line{display:none;}
.trk-tl-icon-wrap{position:relative;flex-shrink:0;}
.trk-tl-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:1.5px solid transparent;transition:all .3s;}
.trk-tl-icon.done{background:var(--black);border-color:var(--black);color:#fff;}
.trk-tl-icon.active{background:#fff;border-color:var(--trk-green);color:var(--trk-green);animation:trkTlPulse 2.5s ease infinite;}
@keyframes trkTlPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,170,85,0);}50%{box-shadow:0 0 0 8px rgba(34,170,85,0.12);}}
.trk-tl-icon.pending{background:var(--gray);border-color:var(--border);color:#ccc;}
.trk-tl-line{position:absolute;left:17px;top:38px;width:1.5px;height:calc(100% - 10px);background:var(--border);}
.trk-tl-line.done{background:var(--black);}
.trk-tl-content{flex:1;padding-top:6px;}
.trk-tl-label{font-size:14px;font-weight:500;color:var(--black);margin-bottom:3px;}
.trk-tl-label.pending{color:#ccc;}
.trk-tl-sub{font-size:12px;color:var(--mid);line-height:1.5;}
.trk-tl-time{font-size:11px;color:#ccc;margin-top:3px;letter-spacing:.3px;}

/* Ordered items */
.trk-order-items{display:flex;flex-direction:column;gap:0;}
.trk-order-item{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:0.5px solid var(--border);}
.trk-order-item:last-child{border-bottom:none;}
.trk-oi-img{width:80px;height:80px;border-radius:10px;overflow:hidden;background:var(--gray);flex-shrink:0;}
.trk-oi-img img{width:100%;height:100%;object-fit:cover;}
.trk-oi-details{display:flex;flex-direction:column;gap:4px;}
.trk-oi-cat{font-size:10px;letter-spacing:2px;color:var(--mid);text-transform:uppercase;}
.trk-oi-name{font-size:14px;font-weight:500;color:var(--black);line-height:1.35;}
.trk-oi-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.trk-oi-chip{background:var(--gray);border:0.5px solid var(--border);border-radius:6px;padding:3px 9px;font-size:11px;color:var(--mid);}
.trk-oi-qty{font-size:12px;color:var(--mid);margin-top:4px;}
.trk-oi-qty strong{color:var(--black);}

/* Shipping */
.trk-ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.trk-ship-field{display:flex;flex-direction:column;gap:4px;}
.trk-ship-label{font-size:10px;letter-spacing:2px;color:var(--mid);text-transform:uppercase;}
.trk-ship-val{font-size:13px;font-weight:500;color:var(--black);line-height:1.5;}

/* Right column */
.trk-summary-rows{display:flex;flex-direction:column;gap:0;}
.trk-sum-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:0.5px solid var(--border);font-size:13px;}
.trk-sum-row:last-child{border-bottom:none;}
.trk-sum-label{color:var(--mid);}
.trk-sum-val{font-weight:500;color:var(--black);}
.trk-sum-val.green{color:var(--trk-green);}
.trk-sum-total{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-top:0.5px solid var(--border);background:var(--gray);}
.trk-sum-total-label{font-size:14px;font-weight:500;}
.trk-sum-total-val{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;}

.trk-quick-info{display:flex;flex-direction:column;gap:12px;}
.trk-qi-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--gray);border-radius:8px;border:0.5px solid var(--border);}
.trk-qi-icon{font-size:18px;flex-shrink:0;}
.trk-qi-content{flex:1;}
.trk-qi-label{font-size:10px;letter-spacing:1.5px;color:var(--mid);text-transform:uppercase;margin-bottom:2px;}
.trk-qi-val{font-size:13px;font-weight:500;color:var(--black);}

.trk-support-text{font-size:13px;color:var(--mid);line-height:1.7;margin-bottom:16px;}
.trk-support-actions{display:flex;flex-direction:column;gap:8px;}
.trk-support-btn{padding:11px;border-radius:8px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;width:100%;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;}
.trk-support-btn.whatsapp{background:rgba(37,211,102,.1);border:0.5px solid rgba(37,211,102,.3);color:#25d366;}
.trk-support-btn.email{background:var(--gray);border:0.5px solid var(--border);color:var(--black);}

.trk-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.trk-actions-track-another{background:transparent;border:0.5px solid var(--border);color:var(--mid);padding:12px;border-radius:8px;font-size:13px;transition:all .2s;width:100%;cursor:pointer;font-family:'DM Sans',sans-serif;}

/* Toast (utilisé par plusieurs pages, mais chargé nulle part globalement) */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--black);color:#fff;padding:12px 26px;border-radius:26px;font-size:13px;opacity:0;transition:all .32s var(--trk-ease);pointer-events:none;z-index:500;white-space:nowrap;border:0.5px solid #333;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .trk-results-grid{grid-template-columns:1fr 320px;}
}
@media(max-width:900px){
  .trk-results-grid{grid-template-columns:1fr;}
  .trk-ship-grid{grid-template-columns:1fr;}
  .trk-status-bar{flex-direction:column;align-items:flex-start;}
}
@media(max-width:640px){
  .trk-hero{padding:48px 20px 44px;}
  .trk-hero-title{font-size:34px;}
  .trk-form-wrap{padding:36px 18px;}
  .trk-card{padding:28px 22px;}
  .trk-results-wrap{padding:28px 18px 60px;}
  .trk-result-card-body{padding:16px;}
  .trk-order-item{grid-template-columns:64px 1fr;gap:12px;}
  .trk-oi-img{width:64px;height:64px;}
}