/*
============================================================
OPENMIX — COMPACT TRACK ORDER MODAL
============================================================
*/

body.om-track-open{
  overflow:hidden!important;
}

.om-track-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  font-family:var(--sans,'Inter',sans-serif);
}

.om-track-modal.is-open{
  display:block;
}

.om-track-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,5,4,.82);
  backdrop-filter:blur(6px);
}

.om-track-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(620px,calc(100vw - 36px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:#111311;
  color:#eeefe9;
  border:1px solid #454a45;
  box-shadow:
    8px 8px 0 rgba(0,0,0,.30),
    0 32px 100px rgba(0,0,0,.58);
}

.om-track-head{
  min-height:116px;
  padding:24px 26px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #454a45;
}

.om-track-kicker,
.om-track-label{
  color:#979d95;
  font:600 9px/1.2 var(--mono,'IBM Plex Mono',monospace);
  letter-spacing:.13em;
  text-transform:uppercase;
}

.om-track-title{
  margin:10px 0 0;
  font:800 42px/.92 var(--cond,'Barlow Condensed',sans-serif);
  letter-spacing:-.025em;
  text-transform:uppercase;
}

.om-track-close{
  width:42px;
  height:42px;
  flex:0 0 42px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #454a45;
  background:#0d0f0e;
  color:#eeefe9;
  cursor:pointer;
  font:700 23px/1 var(--sans,'Inter',sans-serif);
}

.om-track-close:hover{
  border-color:#777d77;
}

.om-track-body{
  padding:25px 26px 27px;
}

.om-track-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 148px;
  gap:8px;
  width:100%;
}

.om-track-input{
  width:100%;
  min-width:0;
  height:50px;
  padding:0 14px;
  border:1px solid #575d57;
  outline:0;
  background:#0d0f0e;
  color:#eeefe9;
  font:500 13px/1 var(--mono,'IBM Plex Mono',monospace);
}

.om-track-input::placeholder{
  color:#7f847e;
}

.om-track-input:focus{
  border-color:#f0a72d;
}

.om-track-submit{
  width:148px;
  min-height:50px;
  padding:0 14px;
  border:1px solid #d99322;
  background:#f0a72d;
  color:#111311;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font:800 12px/1 var(--cond,'Barlow Condensed',sans-serif);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.om-track-submit:hover{
  filter:brightness(1.05);
}

.om-track-status{
  display:none;
  margin-top:15px;
  padding:13px 14px;
  border:1px solid #454a45;
  background:#0d0f0e;
  font:500 11px/1.5 var(--mono,'IBM Plex Mono',monospace);
}

.om-track-status.is-visible{
  display:block;
}

.om-track-status.is-error{
  border-color:#785c33;
}

.om-track-label{
  margin-top:20px!important;
}

.om-track-order-id{
  margin-top:8px;
  padding:12px 14px;
  min-height:43px;
  border:1px solid #393e39;
  background:#0d0f0e;
  color:#c9cdc7;
  overflow-wrap:anywhere;
  font:500 11px/1.5 var(--mono,'IBM Plex Mono',monospace);
}

.om-track-progress{
  display:none;
  margin-top:15px;
}

.om-track-progress.is-visible{
  display:block;
}

.om-track-stage{
  min-height:60px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  border:1px solid #393e39;
  border-bottom:0;
  opacity:.34;
}

.om-track-stage:last-child{
  border-bottom:1px solid #393e39;
}

.om-track-stage.is-done,
.om-track-stage.is-current{
  opacity:1;
}

.om-track-stage.is-current{
  border-color:#765722;
}

.om-track-stage-index{
  display:grid;
  place-items:center;
  border-right:1px solid #393e39;
  color:#979d95;
  font:600 9px/1 var(--mono,'IBM Plex Mono',monospace);
}

.om-track-stage.is-current .om-track-stage-index{
  color:#f0a72d;
}

.om-track-stage-copy{
  padding:12px 14px;
}

.om-track-stage-title{
  font:700 12px/1.2 var(--cond,'Barlow Condensed',sans-serif);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.om-track-stage-description{
  margin-top:4px;
  color:#8f958e;
  font:500 10px/1.45 var(--sans,'Inter',sans-serif);
}

.om-track-note{
  margin:17px 0 0;
  color:#747a73;
  font:500 9px/1.55 var(--mono,'IBM Plex Mono',monospace);
  letter-spacing:.025em;
}

@media(max-width:620px){
  .om-track-panel{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
  }

  .om-track-head{
    min-height:auto;
    padding:20px;
  }

  .om-track-title{
    font-size:36px;
  }

  .om-track-body{
    padding:20px;
  }

  .om-track-form{
    grid-template-columns:1fr;
  }

  .om-track-submit{
    width:100%;
  }
}