/* Builder UI layout and interaction styling */

#sot-salad-app.sot-builder-layout{
  align-items:start;
  gap:1.1rem;
}

#sot-salad-app .sot-panel{
  padding:1.2rem;
  border-radius:1.1rem;
}

#sot-salad-app .h2{
  margin-top:0;
  margin-bottom:.65rem;
}

#cat-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.75rem;
}

#cat-tabs button{
  width:auto;
  padding:.3rem .7rem;
  border-width:1px;
  border-radius:.45rem;
  font-weight:600;
  line-height:1.15;
  transition:all .16s ease;
}

#cat-tabs button.is-active{
  background:var(--sot-green);
  color:#fff;
  border-color:var(--sot-green);
}

#ingredient-list .grid{
  gap:.65rem;
}

#ingredient-list label{
  cursor:pointer;
}

.ingredient-choice{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-height:120px;
  padding:.9rem .85rem .75rem;
  border:1px solid #e6e8e6;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.ingredient-choice:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 16px rgba(0,0,0,.08);
}

.ingredient-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ingredient-check{
  position:absolute;
  right:.65rem;
  top:.65rem;
  width:18px;
  height:18px;
  border-radius:.35rem;
  border:1.5px solid #98a29a;
  background:#fff;
}

.ingredient-choice.is-selected{
  border-color:var(--sot-green);
  background:#f5fbf6;
}
.ingredient-choice.is-blocked{
  opacity:.62;
  border-color:#d8b4b4;
  background:#fff5f5;
}
.ingredient-choice.is-blocked .ingredient-check{
  border-color:#c99;
}

.ingredient-choice.is-selected .ingredient-check{
  border-color:var(--sot-green);
  background:var(--sot-green);
  box-shadow:inset 0 0 0 2px #fff;
}

.ingredient-row{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.25rem;
}

.ingredient-row strong{
  line-height:1.15;
  font-size:1.02rem;
}

.ingredient-icon{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:.65rem;
  flex:0 0 44px;
  border:1px solid #e6e8e6;
}

.ingredient-meta{
  margin-top:auto;
  font-size:.82rem;
  color:#5f695f;
}

#chosen{
  margin:.1rem 0 .8rem;
  padding-left:1.05rem;
  min-height:1.4rem;
}

#chosen li{
  margin:.2rem 0;
}

.sot-total-row{
  margin:.75rem 0 .45rem;
}
.sot-nutrition-box{
  margin:.55rem 0 .75rem;
  padding:.7rem .8rem;
  border:1px solid #e5ebe5;
  border-radius:.75rem;
  background:#f8fbf8;
}
.sot-nutrition-box .h2{
  font-size:1.05rem;
  margin:.05rem 0 .45rem;
}
.sot-nutri-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.35rem .6rem;
}
.sot-nutri-grid div{
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:.55rem;
  padding:.35rem .45rem;
  font-size:.88rem;
}

#timeslot,
#location_notes{
  width:100%;
  border-radius:.65rem;
  border:1px solid #d8ddd9;
  background:#fff;
}

#location_notes{
  min-height:74px;
  resize:vertical;
}

.sot-map-block{
  margin-top:.7rem;
}

.sot-delivery-map{
  height:220px;
  border:1px solid #d8ddd9;
  border-radius:.75rem;
  overflow:hidden;
  background:#eef3ef;
}

.sot-map-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-top:.45rem;
}

.sot-map-actions .btn-outline{
  width:auto;
  border-width:1px;
}

#addToCart{
  margin-top:.6rem;
}

#addToCart[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

.sot-favorites-wrap{
  margin-top:.9rem;
  padding-top:.85rem;
  border-top:1px solid #edf0ed;
}

.sot-favorites-card{
  border:1px solid #edf0ed;
  box-shadow:none;
}

#saveFavorite{
  margin-top:.55rem;
}

#favorites-list,
#locations-list{
  margin:.8rem 0 0;
  padding-left:1rem;
}

#favorites-list li,
#locations-list li{
  margin:.45rem 0;
}

#favorites-list .btn-outline,
#locations-list .btn-outline{
  width:auto;
  margin-left:.35rem;
  padding:.12rem .48rem;
  border-width:1px;
  border-radius:.35rem;
  font-size:.92rem;
}

@media (max-width: 980px){
  #ingredient-list .grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  #sot-salad-app .sot-panel{
    padding:1rem;
  }
  #ingredient-list .grid-3{
    grid-template-columns:1fr;
  }
  .ingredient-choice{
    min-height:96px;
  }
  .sot-delivery-map{
    height:190px;
  }
  .sot-nutri-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}