/* ===== TRACKING PAGE CSS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Tajawal',sans-serif;background:#f0f2f5;color:#1a1a1a;direction:rtl;min-height:100vh;}

/* HEADER */
.trk__header{background:linear-gradient(135deg,#3e4e28,#5a6e3a);padding:1rem 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.2);}
.trk__header__inner{max-width:700px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.trk__logo{font-size:1.8rem;font-weight:900;color:#fff;text-decoration:none;}
.trk__header__tag{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.8);background:rgba(255,255,255,.15);padding:.3rem .85rem;border-radius:20px;}

/* SEARCH */
.trk__search{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.trk__search__card{background:#fff;border-radius:24px;padding:2.5rem 2rem;width:100%;max-width:420px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.12);}
.trk__search__icon{font-size:3rem;margin-bottom:1rem;}
.trk__search__card h1{font-size:1.6rem;font-weight:800;color:#1a1a1a;margin-bottom:.5rem;}
.trk__search__card p{font-size:.95rem;color:#888;margin-bottom:1.75rem;}
.trk__search__field{display:flex;gap:.5rem;}
.trk__input{flex:1;padding:.8rem 1rem;border:1.5px solid #ddd;border-radius:12px;font-size:1rem;font-family:'Tajawal',sans-serif;text-align:center;transition:.2s;}
.trk__input:focus{outline:none;border-color:#5a6e3a;box-shadow:0 0 0 3px rgba(90,110,58,.12);}
.trk__search__error{color:#dc3545;font-size:.88rem;margin-top:.75rem;background:#f8d7da;padding:.6rem 1rem;border-radius:8px;}

/* MAIN */
.trk__main{max-width:700px;margin:0 auto;padding:1.5rem 1rem 4rem;}

/* CARDS */
.trk__booking__card,.trk__countdown__card,.trk__timeline__card,.trk__details__card{background:#fff;border-radius:20px;padding:1.5rem;margin-bottom:1.25rem;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.trk__section__title{font-size:1.05rem;font-weight:700;color:#1a1a1a;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid #f0f0f0;}

/* BOOKING CARD */
.trk__booking__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;}
.trk__booking__header h2{font-size:1.3rem;font-weight:800;color:#1a1a1a;}
.trk__booking__sub{font-size:.9rem;color:#888;margin-top:.2rem;}
.trk__booking__meta{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
.trk__meta__item{display:flex;align-items:center;gap:.6rem;}
.trk__meta__icon{font-size:1.3rem;flex-shrink:0;}
.trk__meta__label{display:block;font-size:.72rem;color:#aaa;font-weight:600;}
.trk__meta__item strong{font-size:.92rem;color:#1a1a1a;display:block;}

/* STATUS BADGES */
.trk__status__badge{padding:.35rem .9rem;border-radius:20px;font-size:.8rem;font-weight:700;white-space:nowrap;flex-shrink:0;}
.badge--pending{background:#fff3cd;color:#856404;}
.badge--confirmed{background:#d1e7dd;color:#0a3622;}
.badge--cancelled{background:#f8d7da;color:#842029;}
.badge--completed{background:#cfe2ff;color:#084298;}

/* COUNTDOWN */
.trk__countdown__card{background:linear-gradient(135deg,#3e4e28,#5a6e3a);color:#fff;text-align:center;}
.trk__countdown__label{font-size:.95rem;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:1rem;}
.trk__countdown__timer{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;}
.trk__countdown__unit{display:flex;flex-direction:column;align-items:center;gap:.2rem;}
.trk__countdown__unit span{font-size:2.8rem;font-weight:900;color:#fff;line-height:1;min-width:70px;text-align:center;background:rgba(255,255,255,.15);border-radius:12px;padding:.25rem .5rem;}
.trk__countdown__unit small{font-size:.72rem;color:rgba(255,255,255,.7);font-weight:600;}
.trk__countdown__sep{font-size:2rem;font-weight:900;color:rgba(255,255,255,.6);margin-bottom:1.5rem;}

/* 15-min warning */
.trk__warning{display:flex;align-items:flex-start;gap:.75rem;background:rgba(255,193,7,.2);border:1px solid rgba(255,193,7,.4);border-radius:12px;padding:1rem;margin-top:1rem;text-align:right;}
.trk__warning span{font-size:1.5rem;flex-shrink:0;}
.trk__warning strong{display:block;font-size:.95rem;color:#fff;margin-bottom:.3rem;}
.trk__warning p{font-size:.85rem;color:rgba(255,255,255,.85);margin-bottom:.75rem;}

/* TIMELINE */
.trk__timeline{display:flex;flex-direction:column;}
.trk__tl__item{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0;}
.trk__tl__icon{width:44px;height:44px;border-radius:50%;background:#e9ecef;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:.3s;}
.trk__tl__content h4{font-size:.95rem;font-weight:700;color:#6c757d;margin-bottom:.25rem;transition:.3s;}
.trk__tl__content p{font-size:.82rem;color:#aaa;line-height:1.6;transition:.3s;}
.trk__tl__time{font-size:.75rem;color:#aaa;display:block;margin-top:.2rem;}

/* Done state */
.trk__tl__item--done .trk__tl__icon{background:linear-gradient(135deg,#5a6e3a,#7a9450);box-shadow:0 4px 12px rgba(90,110,58,.3);}
.trk__tl__item--done .trk__tl__content h4{color:#1a1a1a;}
.trk__tl__item--done .trk__tl__content p{color:#555;}
.trk__tl__item--done .trk__tl__time{color:#5a6e3a;}

/* Active state */
.trk__tl__item--active .trk__tl__icon{background:#fff3cd;animation:pulse 2s infinite;}
.trk__tl__item--active .trk__tl__content h4{color:#856404;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,193,7,.4);}50%{box-shadow:0 0 0 8px rgba(255,193,7,0);}}

/* Connector */
.trk__tl__connector{width:2px;height:32px;background:#e9ecef;margin-right:21px;transition:.3s;}
.trk__tl__connector--done{background:linear-gradient(180deg,#5a6e3a,#7a9450);}

/* DETAILS */
.trk__details__grid{display:flex;flex-direction:column;gap:.6rem;}
.trk__detail__item{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid #f0f0f0;font-size:.9rem;}
.trk__detail__item:last-child{border-bottom:none;}
.trk__detail__label{color:#888;flex-shrink:0;}
.trk__detail__item span:last-child{color:#1a1a1a;font-weight:600;text-align:left;}
.trk__detail__item--price .trk__detail__label{font-weight:700;}
.trk__price--deposit{color:#8b6340;font-weight:800;font-size:1rem;}
.trk__price--remaining{color:#5a6e3a;font-weight:800;font-size:1rem;}

/* ACTIONS */
.trk__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem;}

/* BUTTONS */
.trk__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:12px;font-size:.92rem;font-weight:700;cursor:pointer;border:2px solid transparent;transition:.2s;font-family:'Tajawal',sans-serif;text-decoration:none;white-space:nowrap;}
.trk__btn--primary{background:#5a6e3a;color:#fff;border-color:#5a6e3a;flex:1;}
.trk__btn--primary:hover{background:#3e4e28;}
.trk__btn--whatsapp{background:#25d366;color:#fff;border-color:#25d366;flex:1;}
.trk__btn--whatsapp:hover{background:#128c7e;}
.trk__btn--cancel{background:#fff;color:#dc3545;border-color:#dc3545;flex:1;}
.trk__btn--cancel:hover{background:#dc3545;color:#fff;}
.trk__btn--disabled{background:#f8f9fa;color:#aaa;border-color:#ddd;cursor:not-allowed;flex:1;}
.trk__btn--outline{background:#fff;color:#5a6e3a;border-color:#5a6e3a;}
.trk__btn--outline:hover{background:#5a6e3a;color:#fff;}
.trk__btn--danger{background:#dc3545;color:#fff;border-color:#dc3545;}
.trk__btn--danger:hover{background:#b02a37;}
.trk__btn--warning{background:#ffc107;color:#000;border-color:#ffc107;font-size:.85rem;padding:.5rem 1rem;}

/* CANCEL MODAL */
.trk__cancel__modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:999;padding:1rem;}
.trk__cancel__card{background:#fff;border-radius:20px;padding:2rem;max-width:380px;width:100%;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.2);}
.trk__cancel__card h3{font-size:1.2rem;font-weight:800;margin-bottom:.75rem;}
.trk__cancel__card p{font-size:.9rem;color:#666;margin-bottom:1.5rem;line-height:1.7;}
.trk__cancel__actions{display:flex;gap:.75rem;flex-direction:column;}

/* LOADING */
.trk__loading{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#888;}
.trk__spinner{width:40px;height:40px;border:4px solid #e9ecef;border-top-color:#5a6e3a;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:480px){
  .trk__booking__meta{grid-template-columns:1fr;}
  .trk__countdown__unit span{font-size:2rem;min-width:55px;}
  .trk__actions{flex-direction:column;}
  .trk__btn{width:100%;}
}