/*  ----------------------------------------------------------
    BREUM Transport – Shipment Tracking UI
    Author: 07-2025 redesign
    ---------------------------------------------------------- */

/*  ---------- Design Tokens ---------- */
:root{
  /* brand */
  --clr-primary-900:#0D2F55;
  --clr-primary-600:#145AA0;
  --clr-accent:#1FA2FF;
  --clr-warn:#F49E00;

  /* neutrals */
  --clr-bg:#ffffff;
  --clr-surface:#f5f8fc;
  --clr-border:#dce4ee;
  --clr-text-900:#1c2025;
  --clr-text-600:#5b6774;

  /* radius / shadow */
  --radius-sm:6px;
  --radius-lg:10px;
  --shadow:0 2px 12px rgb(0 0 0 /.06);

  /* typography */
  --fz-base:16px;
  --fz-sm:.875rem;
  --fz-h1:clamp(2rem,5vw + .5rem,3rem);

  --transition:.18s ease-in-out;
}

/*  ---------- Global reset ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

html{font-size:var(--fz-base);}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--clr-text-900);
  background:var(--clr-bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/*  ---------- Layout helpers ---------- */
.container{
  width:min(96%,1100px);
  margin-inline:auto;
}
.grid{
  display:grid;
  gap:1.5rem;
}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/*  ---------- Hero banner ---------- */
.hero{
  position:relative;
  min-height:340px;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  padding:2.5rem 1rem;
  color:#fff;
  background:
      linear-gradient(125deg,rgba(13,47,85,.85),rgba(20,90,160,.7)),
      url('/assets/img/hero-plane.jpg') center/cover no-repeat;
}
.hero h1{
  font-size:var(--fz-h1);
  letter-spacing:.025em;
  margin:.25rem 0 1rem;
  text-transform:uppercase;
  font-weight:700;
}

/*  ---------- Track-form ---------- */
.track-form{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
  width:100%;
  max-width:460px;
}
.track-form input{
  flex:1 1 260px;
  padding:.75rem 1rem;
  border:2px solid var(--clr-primary-900);
  border-radius:var(--radius-sm);
  font-size:1rem;
}
.track-form button{
  padding:.75rem 1.3rem;
  border:none;
  background:var(--clr-accent);
  color:#fff;
  font-weight:600;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:var(--transition);
}
.track-form button:hover,
.track-form button:focus-visible{filter:brightness(1.08);outline:none;}

/*  ---------- Status badge ---------- */
.status-badge{
  display:inline-block;
  padding:.55rem 1.4rem;
  border-radius:9999px;
  font-weight:700;
  color:#fff;
  background:var(--clr-accent);
  margin-block:1.5rem;
  text-transform:capitalize;
  box-shadow:var(--shadow);
}
.is-hold{background:var(--clr-warn);color:#000;}
.is-delivered{background:var(--clr-primary-900);}

/*  ---------- Card ---------- */
.card{
  padding:1.4rem 1.6rem;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card h3{
  margin:.2rem 0 1rem;
  font-size:1.05rem;
  color:var(--clr-primary-900);
  letter-spacing:.02em;
}
.card p{margin:.2rem 0;color:#fff !important;}

/*  ---------- Detail list ---------- */
.details{
  display:grid;gap:1rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  list-style:none;
  padding:0;margin:0;
}
.details li{white-space:nowrap;}
.details li strong{color:var(--clr-primary-600);font-weight:600;}

/*  ---------- History table ---------- */
.table-wrapper{overflow-x:auto;margin-top:1.5rem;}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  min-width:640px;
}
thead th{
  background:var(--clr-primary-900);
  color:#fff;
  padding:.85rem .9rem;
  font-size:var(--fz-sm);
  text-align:left;
  letter-spacing:.03em;
}
tbody td{
  padding:.7rem .9rem;
  border-top:1px solid var(--clr-border);
  font-size:.95rem;
}
tbody tr:nth-child(even){background:#f9fcff;}

@media(max-width:480px){
  .track-form input{flex:1 1 100%;}
  .track-form button{width:100%;}
}

/*  ---------- Map container ---------- */
#map{
  width:100%;
  height:320px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-block:1.5rem;
}

/*  ---------- Buttons / links ---------- */
.btn{
  display:inline-block;
  padding:.65rem 1.4rem;
  background:var(--clr-accent);
  color:#fff;text-decoration:none;
  border-radius:var(--radius-sm);
  font-weight:600;
  transition:var(--transition);
}
.btn:hover{filter:brightness(1.08);}
a{color:var(--clr-accent);}
a:hover{text-decoration:underline;}

/*  ---------- Print styles ---------- */
@media print{
  nav,footer,.hero,.track-form{display:none!important;}
  body{background:#fff;color:#000;margin:0;}
  .container{width:100%;padding:0;}
  a[href]::after{content:"";}
}