/* prescription-category-lm.css */

#lm-root .lm-category--prescription{
  width: 100%;
}

#lm-root .lm-category--prescription .lm-category__title{
  margin: 0 0 14px 0;
  font-size: 20px;
  font-weight: 700;
}

#lm-root .lm-prescription{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#lm-root .lm-prescription__eye{
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fcfcfe;
  padding: 14px;
}

#lm-root .lm-prescription__headline{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

#lm-root .lm-prescription__grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 12px;
  row-gap: 12px;
}

#lm-root .lm-prescription__field{
  width: 100%;
  display: flex;
  flex-direction: column;
}

#lm-root .lm-prescription__label{
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 6px 0;
  opacity: 0.85;
}

#lm-root .lm-prescription__control{
  width: 100%;
  height: 42px;
  border: 1px solid #cfcfd6;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

#lm-root select.lm-prescription__control{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                    linear-gradient(135deg, #555 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

#lm-root .lm-prescription__control:focus{
  border-color: #9aa0aa;
}

/* invalid state (za JS kasnije) */
#lm-root .lm-prescription__field--invalid .lm-prescription__control{
  border-color: #e08a8a;
  background: #fff3f3;
}

/* actions */
#lm-root .lm-prescription__actions{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#lm-root .lm-prescription__btn{
  border: 1px solid #cfcfd6;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

#lm-root .lm-prescription__btn:active{
  transform: translateY(1px);
}

/* Validation highlight (SCOPED + jača specifičnost) */
#lm-root .lm-prescription__control.requiredfield{
  border: 2px solid #e53935 !important;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.15) !important;
}

#lm-root .lm-prescription__control.requiredfield:focus{
  border-color: #c62828 !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,0.25) !important;
}

/* mobile: 2x2 */
@media (max-width: 680px){
  #lm-root .lm-prescription__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}