/* Trenchport recipe browser only. This file does not replace the main site stylesheet. */

.recipe-page-title strong{
  color:var(--text);
}

.recipe-browser{
  width:min(1120px,100%);
}

.recipe-browser-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.recipe-browser-heading h2{
  margin:5px 0 0;
  font-family:'Orbitron',Arial,Helvetica,sans-serif;
  font-size:clamp(1.35rem,2.5vw,2rem);
}

.recipe-eyebrow{
  color:#cdb6ff;
  font-family:'Orbitron',Arial,Helvetica,sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.recipe-back-button{
  flex:0 0 auto;
}

.recipe-controls{
  display:grid;
  grid-template-columns:minmax(240px,1.7fr) repeat(3,minmax(150px,1fr)) auto;
  gap:12px;
  align-items:end;
  padding:18px;
  border:1px solid rgba(151,103,255,.24);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

.recipe-control{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

.recipe-control > span{
  color:#c5cbea;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.recipe-control input,
.recipe-control select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(151,103,255,.32);
  border-radius:12px;
  outline:none;
  background:#0b0d19;
  color:var(--text);
  padding:0 13px;
  font:inherit;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.recipe-control input::placeholder{
  color:#747ca5;
}

.recipe-control input:focus,
.recipe-control select:focus{
  border-color:rgba(187,93,255,.85);
  box-shadow:0 0 0 3px rgba(139,66,255,.14),0 0 18px rgba(139,66,255,.16);
}

.recipe-clear-button{
  min-height:46px;
  border:1px solid rgba(109,165,255,.46);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(35,109,255,.18),rgba(139,66,255,.14));
  color:#eef1ff;
  padding:0 16px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease,border-color .2s ease;
}

.recipe-clear-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.15);
  border-color:rgba(109,165,255,.78);
}

.recipe-results-bar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:18px 2px 12px;
}

.recipe-results-bar p{
  margin:0;
}

#recipe-count{
  color:var(--text);
  font-weight:800;
}

.recipe-data-note{
  color:var(--soft);
  font-size:.86rem;
  text-align:right;
}

.recipe-status{
  margin:20px 0 0;
  padding:22px;
  border:1px solid rgba(151,103,255,.25);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  text-align:center;
}

.recipe-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:14px;
}

.recipe-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:21px;
  border:1px solid rgba(151,103,255,.24);
  border-radius:19px;
  background:
    radial-gradient(circle at 100% 0,rgba(139,66,255,.10),transparent 38%),
    linear-gradient(180deg,rgba(14,16,31,.95),rgba(7,8,16,.96));
  box-shadow:0 0 24px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.02);
}

.recipe-card-image{
  position:relative;
  height:220px;
  margin:-4px -4px 16px;
  overflow:hidden;
  border:1px solid rgba(151,103,255,.28);
  border-radius:15px;
  background:#080912;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.recipe-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,3,8,.02),rgba(3,3,8,.32));
}

.recipe-card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .3s ease,filter .3s ease;
}

.recipe-card:hover .recipe-card-image img{
  transform:scale(1.035);
  filter:brightness(1.08);
}

.recipe-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.station-badge,
.craft-time{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-radius:999px;
  padding:5px 10px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.station-badge{
  border:1px solid rgba(187,93,255,.35);
  background:rgba(139,66,255,.12);
  color:#dbc9ff;
}

.craft-time{
  border:1px solid rgba(109,165,255,.25);
  background:rgba(35,109,255,.09);
  color:#b9d1ff;
}

.recipe-card h3{
  margin:16px 0 8px;
  font-family:'Orbitron',Arial,Helvetica,sans-serif;
  color:var(--text);
  font-size:1.18rem;
  line-height:1.35;
}

.recipe-description{
  min-height:3.4em;
  margin:0 0 16px !important;
  color:var(--muted);
  line-height:1.65;
}

.recipe-output{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:13px;
  border:1px solid rgba(109,165,255,.22);
  background:rgba(35,109,255,.07);
}

.recipe-output span{
  color:#8e99c7;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.recipe-output strong{
  color:#eef3ff;
  text-align:right;
}

.recipe-effect{
  margin-top:12px;
  padding:13px 14px;
  border-radius:13px;
  border:1px solid rgba(151,103,255,.22);
  background:rgba(139,66,255,.06);
}

.recipe-effect-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.recipe-effect-heading span{
  color:#aeb6d9;
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.recipe-effect-heading strong{
  color:#f4efff;
  text-align:right;
}

.recipe-effect p{
  margin:7px 0 0 !important;
  color:#9ea8d1;
  font-size:.88rem;
  line-height:1.55;
}

.effect-xp{
  border-color:rgba(109,165,255,.30);
  background:rgba(35,109,255,.08);
}

.effect-maxhp{
  border-color:rgba(187,93,255,.32);
  background:rgba(139,66,255,.09);
}

.effect-healing{
  border-color:rgba(121,210,190,.24);
  background:rgba(79,185,160,.065);
}

.effect-instant-heal{
  border-color:rgba(255,130,163,.25);
  background:rgba(216,74,118,.065);
}

.effect-none{
  border-color:rgba(151,158,190,.20);
  background:rgba(151,158,190,.04);
}

.recipe-ingredients{
  margin-top:16px;
}

.recipe-ingredients h4{
  margin:0 0 8px;
  color:#dce1ff;
  font-size:.82rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.recipe-ingredients ul{
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.recipe-ingredients li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#c1c8e7;
}

.recipe-ingredients li strong{
  color:#f1edff;
}

.recipe-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:auto;
  padding-top:17px;
}

.recipe-tag{
  display:inline-flex;
  border:1px solid rgba(151,158,190,.20);
  border-radius:999px;
  padding:4px 9px;
  background:rgba(255,255,255,.025);
  color:#929bbd;
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.recipe-tag.is-positive{
  border-color:rgba(109,165,255,.23);
  color:#b9d1ff;
}

.recipe-tag.is-warning{
  border-color:rgba(255,181,89,.23);
  color:#ffd49d;
}

@media (max-width:1050px){
  .recipe-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .recipe-search-control{
    grid-column:1 / -1;
  }

  .recipe-clear-button{
    width:100%;
  }
}

@media (max-width:760px){
  .recipe-browser-heading,
  .recipe-results-bar{
    align-items:stretch;
    flex-direction:column;
  }

  .recipe-back-button{
    width:100%;
  }

  .recipe-data-note{
    text-align:left;
  }

  .recipe-grid{
    grid-template-columns:1fr;
  }

  .recipe-description{
    min-height:0;
  }
}

@media (max-width:560px){
  .recipe-controls{
    grid-template-columns:1fr;
    padding:14px;
  }

  .recipe-search-control{
    grid-column:auto;
  }

  .recipe-card{
    padding:17px;
  }

  .recipe-card-image{
  height:180px;
  margin:-2px -2px 14px;
}

  .recipe-effect-heading,
  .recipe-output{
    flex-direction:column;
  }

  .recipe-effect-heading strong,
  .recipe-output strong{
    text-align:left;
  }
}

/* Station category banner */
.station-banner{
  position:relative;
  min-height:330px;
  margin:0 0 20px;
  overflow:hidden;
  border:1px solid rgba(151,103,255,.34);
  border-radius:20px;
  background:#080912;
  box-shadow:0 0 30px rgba(0,0,0,.34),0 0 30px rgba(139,66,255,.12);
  isolation:isolate;
}

.station-banner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity .25s ease,transform .45s ease;
  z-index:-3;
}

.station-banner.is-changing img{
  opacity:.35;
  transform:scale(1.025);
}

.station-banner-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,5,12,.96) 0%,rgba(4,5,12,.78) 42%,rgba(4,5,12,.28) 72%,rgba(4,5,12,.42) 100%),
    linear-gradient(0deg,rgba(4,5,12,.78),transparent 60%);
  z-index:-2;
}

.station-banner-content{
  width:min(570px,82%);
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:34px;
}

.station-banner-content h2{
  margin:7px 0 10px;
  color:var(--text);
  font-family:'Orbitron',Arial,Helvetica,sans-serif;
  font-size:clamp(1.65rem,3.6vw,2.75rem);
  line-height:1.15;
  text-shadow:0 0 20px rgba(139,66,255,.48);
}

.station-banner-content p{
  margin:0;
  color:#c4cae7;
  line-height:1.7;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}

.station-banner-count{
  display:inline-flex;
  margin-top:18px;
  padding:7px 11px;
  border:1px solid rgba(187,93,255,.42);
  border-radius:999px;
  background:rgba(8,9,18,.72);
  color:#e3d7ff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(5px);
}

@media (max-width:760px){
  .station-banner,
  .station-banner-content{
    min-height:285px;
  }

  .station-banner-shade{
    background:
      linear-gradient(0deg,rgba(4,5,12,.96) 0%,rgba(4,5,12,.74) 62%,rgba(4,5,12,.30) 100%);
  }

  .station-banner-content{
    width:100%;
    justify-content:flex-end;
    padding:24px;
  }
}

@media (max-width:560px){
  .station-banner,
  .station-banner-content{
    min-height:260px;
  }

  .station-banner-content{
    padding:20px;
  }

  .station-banner-content p{
    font-size:.92rem;
    line-height:1.55;
  }
}